Skip to content

fix(app): keep sidebar search muted on hover and show its shortcut - #60046

Open
opencode-agent[bot] wants to merge 1 commit into
devfrom
sidebar-search-hover
Open

opencode-agent[bot] wants to merge 1 commit into
devfrom
sidebar-search-hover

Conversation

@opencode-agent

Copy link
Copy Markdown
Contributor

Summary

The vertical-tabs sidebar's Search sessions row acts as a search field, not a button, so it now hovers like one:

  • On hover, the row gets the same background overlay as its neighbours, but the magnifying glass and the "Search sessions" placeholder keep their muted colour instead of brightening like Home and New session do.
  • sessions.search gets a default shortcut, mod+shift+f (⇧⌘F on macOS, Ctrl+Shift+F elsewhere). The row already had the right-aligned hint slot that Home (⌘B) and New session (⌘T) use, but it showed nothing because the command had no default binding. The same binding now also shows in the horizontal titlebar tooltip and in Settings > Shortcuts, where it can be rebound or unbound.

mod+shift+f is not bound anywhere else in the app, GUI plugins or desktop menu.

Verification

  • Real app with the e2e mock server, vertical tabs and three seeded sessions, dark theme, 800×500. Computed styles on the hovered row:
    • before: overlay rgba(255,255,255,0.06), icon and label rgb(250,250,250), hint empty
    • after: overlay rgba(255,255,255,0.06), icon and label rgb(128,128,128) (same as idle), hint ⇧⌘F visible
  • Clicking the row and pressing ⇧⌘F both open the Search sessions dialog.
  • bun typecheck (packages/app) and bun run lint:changed both pass.

Visual

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" fill="none">
  <style>
    .bg{fill:currentColor;opacity:0;animation:h 3s ease-in-out infinite}
    .k{opacity:0;animation:k 3s ease-in-out infinite}
    @keyframes h{0%,20%{opacity:0}30%,75%{opacity:.08}85%,100%{opacity:0}}
    @keyframes k{0%,20%{opacity:0}30%,75%{opacity:.45}85%,100%{opacity:0}}
    @media (prefers-reduced-motion:reduce){.bg{animation:none;opacity:.08}.k{animation:none;opacity:.45}}
  </style>
  <rect class="bg" x="16" y="22" width="208" height="28" rx="6"/>
  <g stroke="currentColor" stroke-width="1.5" opacity=".45">
    <circle cx="33" cy="35" r="5"/>
    <path d="M37 39l3.5 3.5" stroke-linecap="round"/>
  </g>
  <rect x="48" y="32" width="96" height="6" rx="3" fill="currentColor" opacity=".45"/>
  <g class="k" fill="currentColor">
    <rect x="184" y="32" width="10" height="6" rx="2"/>
    <rect x="198" y="32" width="10" height="6" rx="2"/>
    <rect x="212" y="32" width="6" height="6" rx="2"/>
  </g>
</svg>

Requested by: @iamdavidhill (David via Slack)

@opencodejr opencodejr Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change looks sound. Removing the hover text colour keeps the Search sessions row muted while it keeps the shared hover background. The new default mod+shift+f for sessions.search doesn't collide with any other binding in the app, GUI plugins or desktop code. A custom binding migrated from home.sessions.search.focus still takes priority over the new default.

I checked it by reading the code and running the type check and the unit tests in packages/app (shell and settings, all passing). I couldn't run the web app in this environment, so could you add before/after screenshots or a short video of the hovered row with the ⇧⌘F hint?

Public API: unchanged. This only changes a default app shortcut, which users can still rebind or unbind in Settings > Shortcuts.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant