Implements the v2 design's top-bar reorganization in the Tauri
launcher. The bar was previously a flat flex row that let the search
field drift left or right depending on filter / sort widths; now it's
a 3-column CSS grid with the search field pinned to the geometric
center of the window.
- `.topbar` becomes `display: grid` with
`grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)` and a
16 px column gap. The middle (auto) column holds only the search,
capped at `flex: 0 1 360px` so it cannot push into the side columns.
- The left zone is `flex; justify-content: space-between`: brand
pins far-left, filter pills hug the search. The filter pills are
now grouped with the search semantically (they scope it) instead of
floating next to the brand.
- The right zone mirrors that: sort hugs the search, kebab pins
far-right, with the directory button between them.
- A `@container launcher (max-width: 1100px)` rule collapses the
layout back to a single nowrap flex row at narrow widths — the
geometric centering doesn't read at small widths and would force
awkward truncation, so we abandon it rather than fight it. The
launcher root opts into container queries via
`container-type: inline-size; container-name: launcher`.
`TopBar.tsx` now wraps the existing children in `.topbar-left`,
`.topbar-center`, `.topbar-right` (plus `.topbar-left-trail` /
`.topbar-right-lead` for the inner space-between alignment), but each
control component is otherwise untouched.
Test Plan
- `just frontend-test` — passes.
- `npx tsc --noEmit` from the frontend crate — clean.
- Manual: run `just run`, confirm the search input's horizontal center
matches the window's horizontal center across the standard launcher
width. Shrink the window below 1100 px and confirm the row collapses
to a single left-to-right strip with no overlap or wrapping.
ddidderr
095bc9b9ff
