Skip to content

feat(web): redesign Files page filters with custom Select component#295

Open
Yevanchen wants to merge 2 commits into
mainfrom
feat/web-files-filter-select
Open

feat(web): redesign Files page filters with custom Select component#295
Yevanchen wants to merge 2 commits into
mainfrom
feat/web-files-filter-select

Conversation

@Yevanchen

Copy link
Copy Markdown
Collaborator

Fill what changed. Use N/A for irrelevant or maintainer-only items. See CONTRIBUTING.md for branch, CLA, generated file, and CI rules.

Summary

  • Add a shared Select component (apps/web/src/shared/ui/select.tsx) built on the Base UI Select primitive, styled with the app design tokens (card surface, border-border-strong, popover shadow, check indicator, chevron icon).
  • Replace the two native <select> elements in the Files page filter toolbar (Agent filter, Thread filter) with the new component; long thread titles now truncate in both the trigger and the popup.

Why

  • The Files page filters rendered as browser-native selects, which looked out of place next to the styled segmented control and search input (YEF-825 reference screenshot). The new component matches the design system and adds consistent hover/focus/open states and keyboard navigation.

Verification

  • Commands: bun run fmt, bun run lint, bun run tc, bun run test (140 pass) in apps/web.
  • Manual steps: ran the local dev stack, logged in via the development backdoor, and exercised the Files page — closed state, open agent dropdown, open thread dropdown (screenshots on the linked Multica issue).
  • Not run: e2e suite.

Impact

  • User/API/contract changes: visual/interaction change only; filter behavior and state handling are unchanged.
  • Generated files / GraphQL / DB / lockfile: N/A
  • Env or config changes: N/A
  • Risk and rollback: low; revert the single commit to restore native selects.

Review

  • Closest review areas: apps/web/src/shared/ui/select.tsx (new component), Files page toolbar wiring in apps/web/src/routes/files/files.route.tsx.
  • Known trade-offs: the cost page (cost-agents-panel.tsx) still uses a native <select>; migrating it is left as a follow-up to keep this change scoped.

Replace the native <select> elements in the Files page toolbar with a
shared Select component built on the Base UI Select primitive. The new
component matches the app design tokens (card surface, strong border,
popover shadow) and adds a chevron trigger icon, check indicator on the
selected item, keyboard navigation, and truncation for long thread
titles.
Filter controls kept fixed desktop widths when the toolbar wrapped on
narrow viewports, leaving ragged left-aligned rows. Controls now stack
full-width below the sm breakpoint (segmented buttons distribute
evenly), grow to fill wrapped rows between sm and lg, and keep the
original compact layout from lg up.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant