feat(ui): unify the two sidebar search boxes (LC-369) #380

Merged

longjacksonle merged 1 commit from feat/lc-369-search-consolidation into main

2026-06-19 16:12:24 +02:00

longjacksonle commented

2026-06-19 16:09:14 +02:00

Owner

Closes LC-369. Part of the LC-364 redesign epic.

What

Collapses the two stacked sidebar search inputs into one combobox with a Messages / People segmented control, and relocates the unread-only filter to a proper icon toggle on the room-list header. File: server/templates/partials/sidebar.html.

One search field. A single #sidebar-search-input combobox + a two-button segmented control (Messages / People). Clicking a tab rewrites the input's hx-get (/search vs /users/search) and placeholder, then re-fires the current query into the shared #sidebar-search-results popover. Both endpoints stay reachable and unchanged.
Keyboard + saved searches preserved. search.js still owns ArrowUp/Down/Enter nav over [role=option] rows; the saved-searches-on-empty popover (messages mode) still works. The saved-search delete button and the two route doc comments are repointed from the old #search-msg-results / #search-people-results ids to the unified container.
Unread filter as an icon toggle. The former small text toggle becomes a funnel icon button with aria-label + styled tooltip; aria-pressed (flipped by the existing __lcToggleUnreadOnly) drives an accent fill, and it still toggles the CSS data-lc-unread-only attribute that hides read rows.

Notes

The tab switcher is one document-level delegated handler wired once via window.__lcSearchTabsWired (the sidebar partial OOB-swaps, so the inline script must not stack listeners). Two new i18n keys (sidebar-search-tab-messages, sidebar-search-tab-people) added to en and es.

Testing

./dev/cargo check -p lets-chat-server - clean.
just build-css - clean.
just test and just test-saas - both green (incl. i18n_catalog).

🤖 Generated with Claude Code

Closes LC-369. Part of the LC-364 redesign epic. ## What Collapses the two stacked sidebar search inputs into one combobox with a Messages / People segmented control, and relocates the unread-only filter to a proper icon toggle on the room-list header. File: `server/templates/partials/sidebar.html`. - **One search field.** A single `#sidebar-search-input` combobox + a two-button segmented control (Messages / People). Clicking a tab rewrites the input's `hx-get` (`/search` vs `/users/search`) and placeholder, then re-fires the current query into the shared `#sidebar-search-results` popover. Both endpoints stay reachable and unchanged. - **Keyboard + saved searches preserved.** `search.js` still owns ArrowUp/Down/Enter nav over `[role=option]` rows; the saved-searches-on-empty popover (messages mode) still works. The saved-search delete button and the two route doc comments are repointed from the old `#search-msg-results` / `#search-people-results` ids to the unified container. - **Unread filter as an icon toggle.** The former small text toggle becomes a funnel icon button with `aria-label` + styled tooltip; `aria-pressed` (flipped by the existing `__lcToggleUnreadOnly`) drives an accent fill, and it still toggles the CSS `data-lc-unread-only` attribute that hides read rows. ## Notes The tab switcher is one document-level delegated handler wired once via `window.__lcSearchTabsWired` (the sidebar partial OOB-swaps, so the inline script must not stack listeners). Two new i18n keys (`sidebar-search-tab-messages`, `sidebar-search-tab-people`) added to `en` and `es`. ## Testing - `./dev/cargo check -p lets-chat-server` - clean. - `just build-css` - clean. - `just test` and `just test-saas` - both green (incl. `i18n_catalog`). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-19 16:09:14 +02:00

feat(ui): unify the two sidebar search boxes (LC-369)

check-secrets / Nosey parker (push) Successful in 4s

Details

check-secrets / TruffleHog (push) Successful in 4s

Details

check-secrets / Kingfisher (push) Successful in 5s

Details

check-secrets / Nosey parker (pull_request) Successful in 3s

Details

check-secrets / TruffleHog (pull_request) Successful in 4s

Details

check-secrets / Kingfisher (pull_request) Successful in 5s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

Check / clippy + fmt + tests (pull_request) Successful in 6m46s

Details

c6fff78c12

Collapse the two stacked sidebar search inputs ("Search messages..." and "Search people...") into one combobox with a Messages / People segmented control, and relocate the unread-only filter to a proper icon toggle on the room-list header.

The segmented control swaps which backend the single input targets: a tab click rewrites the input's hx-get (/search vs /users/search) and placeholder, then re-fires the current query into the shared #sidebar-search-results popover. Both endpoints stay reachable and unchanged; search.js still owns keyboard nav over [role=option] rows, and the saved-searches-on-empty behavior (messages mode) is preserved. The tab switcher is one document-level delegated handler wired once (the sidebar partial OOB-swaps, so the inline script must not stack listeners). The saved-search delete button and the two route doc comments are repointed from the old #search-msg-results / #search-people-results ids to the unified container.

The unread-only filter, previously a small text toggle, becomes a funnel icon button with aria-label + styled tooltip; aria-pressed (flipped by the existing __lcToggleUnreadOnly) drives an accent fill, and it still toggles the CSS data-lc-unread-only attribute. Two new i18n keys (sidebar-search-tab-messages / -people) added to en and es.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>