Improve onHover 'titles' for 'left tab bar' to better hint between in-app features vs those that open externally

[0xdevalias]

📝 Provide a description of the new feature

Another minor UI / UX improvement idea; I often forget which of the 'left tab bar' icons relate to in-app functionality (Home, Filter, Refresh, Settings) and those that open an external webpage (Notifications, My Issues, My Pull Requests):

I think this is probably complicated by the fact that they are all visually the same, and that the 'in-app' vs 'external' are mixed together throughout.

My naive simple quick fix idea was that changing the hover text 'title' on the ones that open externally could hint this better.

For example, instead of 'My issues' it could be something like 'Open My Issues in Web Browser' or similar (probably with better wording)

If you wanted to take it a step further, I wonder if there is a way to add a visual indicator to those 'external tabs' on the tab bar itself (similar to the 'opens externally' icon some websites/etc tend to use) without visually cluttering it too much?

Another thought is that maybe grouping the 'internal vs external' 'tabs' would make it more intuitive. I haven't deeply thought through how that could best be done; but a naive quick thought was that maybe the 'filter notifications' could be moved to the top (or down near refresh/settings even?); and then a horizontal 'bar' could be used as a 'break' between it and the 'opens externally' options; or something like that maybe?

➕ Additional Information

N/A

[setchy]

@0xdevalias - thanks for the detailed suggestion. Is this something you'd be interested in taking on?

[0xdevalias]

Is this something you'd be interested in taking on?

@setchy At this stage, probably not. Even though it probably wouldn't take too long to iterate on with Codex or similar; I am drowning in like 4 separate ways currently and have negative capacity to take on anything else.

[setchy]

@0xdevalias - what about something as simple as this

[0xdevalias]

what about something as simple as this

@setchy For a tiny minimal tweak, that would definitely improve things over the current state 👌🏻

That's more or less aligned to this part from my original description:

My naive simple quick fix idea was that changing the hover text 'title' on the ones that open externally could hint this better.

For example, instead of 'My issues' it could be something like 'Open My Issues in Web Browser' or similar (probably with better wording)

If you wanted to take it a step further, I wonder if there is a way to add a visual indicator to those 'external tabs' on the tab bar itself (similar to the 'opens externally' icon some websites/etc tend to use) without visually cluttering it too much?

Though making the icon indicator visible in the hover text part rather than on the 'tab bar' itself.

---

GitHub Codex (GPT-5) Plan / Suggestions for things

Prompt:

How hard would it be to make this suggested change?

Another thought is that maybe grouping the 'internal vs external' 'tabs' would make it more intuitive. I haven't deeply thought through how that could best be done; but a naive quick thought was that maybe the 'filter notifications' could be moved to the top (or down near refresh/settings even?); and then a horizontal 'bar' could be used as a 'break' between it and the 'opens externally' options; or something like that maybe?

Linked Context:

• https://github.com/gitify-app/gitify
• Improve onHover 'titles' for 'left tab bar' to better hint between in-app features vs those that open externally #2270

Response:

Short answer: Easy-to-medium.

• Only changing the hover text (tooltips) for the “external” icons is a small, low-risk change localized to Sidebar.tsx. Rough estimate: 15–30 minutes + validation.
• Adding a visual divider and grouping the buttons is still fairly small, but needs a touch of layout and styling work in the same file. Rough estimate: 30–60 minutes + validation.
• Adding a small “opens externally” glyph overlay on the external icons is doable but a bit more fiddly (positioning and contrast). Rough estimate: 1–2 hours if we keep it subtle and accessible.

Where to change

• Sidebar UI lives in src/renderer/components/Sidebar.tsx, driven by Primer React’s IconButton and Stack components.
• Tooltips currently come from the IconButton’s aria-label; changing that text updates the hover tooltip.

Minimal implementation plan

1. Update hover text for external actions

• Replace aria-labels for external links to clearly indicate they open in the browser, e.g. “Open My issues in browser”.

2. Group internal vs external icons with a light divider

• Insert a semantic divider between groups using Primer’s Box with sx to render a 1px line.
• Optionally reorder the filter button either with the internal group or near refresh/settings if you prefer.

Example changes (focused snippet)
Note: This shows only the relevant edits in Sidebar.tsx. Import Box and adjust aria-labels; insert the divider where appropriate.

// ...
import { IconButton, Stack, Box } from '@primer/react';
// ...

// Inside the top Stack that currently holds Notifications, Filter, My issues, My PRs, etc.
// Suggested grouping:
// - Internal (e.g., Notifications, Filters)
// - Divider
// - External (e.g., My issues, My pull requests, Notifications on github.com)

{isLoggedIn && (
  <>
    {/* Internal actions */}
    <IconButton
      aria-label="Notifications"
      data-testid="sidebar-notifications"
      icon={BellIcon}
      onClick={() => navigate('/')}
      size="small"
      sx={sidebarButtonStyle}
      tooltipDirection="e"
      unsafeDisableTooltip={false}
      variant="invisible"
    />

    {/* Keep Filter near the internal group (or move it down if preferred) */}
    {status.hasFetched && (
      <IconButton
        aria-label={hasActiveFilters(settings) ? 'Filters (active)' : 'Filters'}
        data-testid="sidebar-filters"
        icon={FilterIcon}
        onClick={() => navigate('/filters')}
        size="small"
        sx={sidebarButtonStyle}
        tooltipDirection="e"
        unsafeDisableTooltip={false}
        variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
      />
    )}

    {/* Divider between internal vs external */}
    <Box
      aria-hidden="true"
      sx={{
        alignSelf: 'stretch',
        width: '100%',
        height: '1px',
        bg: 'border.default',
        my: '6px',
      }}
    />

    {/* External actions */}
    <IconButton
      aria-label='Open "My issues" in browser'
      data-testid="sidebar-my-issues"
      icon={IssueOpenedIcon}
      onClick={() => openGitHubIssues(primaryAccountHostname)}
      size="small"
      sx={sidebarButtonStyle}
      tooltipDirection="e"
      unsafeDisableTooltip={false}
      variant="invisible"
    />

    <IconButton
      aria-label='Open "My pull requests" in browser'
      data-testid="sidebar-my-pull-requests"
      icon={GitPullRequestIcon}
      onClick={() => openGitHubPulls(primaryAccountHostname)}
      size="small"
      sx={sidebarButtonStyle}
      tooltipDirection="e"
      unsafeDisableTooltip={false}
      variant="invisible"
    />

    {/* If you have a separate external notifications shortcut */}
    {/* <IconButton
      aria-label='Open "Notifications" on GitHub in browser'
      icon={BellIcon}
      onClick={() => openGitHubNotifications(primaryAccountHostname)}
      // same props...
    /> */}
  </>
)}
// ...

Optional: add a tiny external-link indicator

• If desired, we can wrap each external IconButton in a relatively positioned container and overlay a small LinkExternalIcon at the corner. This is a bit more styling-sensitive; we can do it as a follow-up once the grouping/tooltip changes land.

Validation checklist (per Gitify dev workflow)

• Setup: pnpm install
• Build: pnpm build (expect webpack compiled successfully for main and renderer)
• Lint: pnpm lint:check
• Types: pnpm tsc --noEmit
• Tests: pnpm test (ensure no new failures)
• Manual: pnpm watch + pnpm start
  • Hover the external icons: tooltip should read Open "My issues" in browser, etc.
  • Verify divider appears and looks subtle but clear.
  • Confirm filters still show primary variant when active.

Estimated effort

• Tooltips only: ~15–30 minutes + validation.
• Grouping + divider + tooltip updates: ~30–60 minutes + validation.
• External-link badge overlay on icons: ~1–2 hours including design polish and accessibility checks.