feat(sidebar): replace search field + header with Search/New chat pills#135
Open
constkolesnyak wants to merge 1 commit into
Open
feat(sidebar): replace search field + header with Search/New chat pills#135constkolesnyak wants to merge 1 commit into
constkolesnyak wants to merge 1 commit into
Conversation
- Remove 'Conversations' header label - Convert search field into a pill button labeled 'Search sessions'; the input mounts on hover (or focus / when a query exists) with a 200ms fade and unmounts on leave so it never lingers in the DOM - Add a 'New chat' pill on the right; the search input overlays it while open so the create button is hidden behind the field - Both controls now share rounded-full styling with a subtle border to read clearly as buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the static "Conversations" header + always-visible search input with two rounded pills: Search sessions (left) and New chat (right). The search input mounts on hover/focus, fades in over 200ms, and unmounts again when nothing is interacting with it. Reclaims sidebar vertical space without losing functionality.
Behaviour
rounded-full+ subtle border styling so they read clearly as buttons.Why pills, not a static field
The previous design committed a full row of vertical space to a permanently-visible search field even though searching is intermittent. The pill stays compact when idle and only grows when you actually reach for it. The 200ms fade is short enough not to feel laggy on a deliberate hover; the unmount-on-leave keeps the DOM small.
Subjective UI — happy to drop the redesign or rework if it doesn't fit upstream taste.
Tests
npm run buildclean (✓ built in 8.45s). Web-only change, no backend touch, no new tests.Verified by hand: hover → input appears → focus retained while typing → blur + leave → input unmounts.
Files
web/src/components/Chat/SessionSidebar.tsx— pills + mount/fade state (searchHovered/searchFocused/searchMounted/searchVisible) (+90 / -31)Note
The original commit (
7fa6505) was followed by three sequels (c4617fc,e058d11,3cd0e1f) that wired the pill into the global Cmd+K shortcut and added arequestSearchFocus()store action. Those are intertwined with the keyboard-shortcuts work and are not part of this PR — they belong in #133 (or a follow-up after both this PR and #133 land).