Query dialogs: promote the chip + popover primitives to lib/ui and standardize the footer buttons (M8)

The Search and Selection dialogs' reusable primitives now live in `lib/ui/` and appear in Debug > Components, so David's
standard-component restyle sweep reaches them. Behavior-preserving except the one deliberate footer-button restyle.

- **`lib/ui/Dropdown.svelte`** (promoted from `filter-chips/FilterChipPopover.svelte`): the generic positioned floater
  (frosted glass, auto-flip, focus trap, Esc-scoped close). Same API (`anchor` / `open` / `onClose` / `ariaLabel` /
  children). Renders `.ui-dropdown` (was `.filter-chip-popover`); the host dialog's capture-phase Escape guard, the E2E
  overlay-dismissal helpers, and `search-filters.spec.ts` follow the rename. `RecentItemsPopover` and the three filter
  popovers now float through it.
- **`lib/ui/FilterDropdown.svelte`** (new): a thin `Dropdown` + labelled section header for the Size / Modified /
  Search-in surfaces. Chosen over a `variant` prop so the generic `Dropdown` stays free of filter markup. The
  `*FilterPopover` bodies thread only `anchor` / `open` / `onClose` / `label`.
- **`lib/ui/Chip.svelte`** (promoted from `filter-chips/FilterChip.svelte`): one component, two variants. `filter` keeps
  the exact filter-chip look + API (popover trigger, × clear, Backspace clear, aria-expanded). `recent` replaces the
  inline `<button>` pills in `RecentItemsFooter.svelte` (leading mode badge, truncating label, click, right-click
  remove). Same appearance for both.
- **Footer buttons (the `size="mini"` fix, deliberate visual change):** `QueryDialog`'s primary/secondary actions ("Show
  all in main window" / "Go to file" / "Select these files") and the recent footer's "All …" button are now standard
  `Button` (`variant="primary|secondary"`, `size="regular"`) with the shortcut hint on a `ShortcutChip` instead of
  bespoke inline spans. Dropped the now-unused `.shortcut-hint` contrast cases from the Go a11y model; `ShortcutChip`
  carries its own audited contrast. Also dropped the doubled `⌘H` in Selection's trailing label (the chip renders it now).
- **Catalog:** new `Dropdown`, `FilterDropdown`, and `Chip` sections in Debug > Components, wired into the sidebar.
- **Cleanup:** deleted the orphaned `SearchFooterActions.svelte` (+ its three tests) - Search's footer renders through
  `QueryDialog` from `config.{primary,secondary}Action`, not a Search-local component.
- Tier-3 a11y + behavior tests moved/added under `lib/ui/` for `Dropdown` and `Chip`; existing dialog + chip tests stay
  green (4496 Svelte tests pass). Docs updated across `lib/ui`, `filter-chips`, `query-ui`, and `search`.

Author: vdavid

apps/desktop/src/lib/query-ui/DETAILS.md

@@ -154,8 +154,9 @@ companion test catalog (mirrors the file table above):
 | `recent-chips-layout.test.ts`            | Greedy-fit packing against mocked widths                                                                                         |
 | `recent-items-utils.test.ts`             | `modeBadge`, `modeName`, `formatAge`, `filterSummary`, `chipTooltip` rules                                                       |
 
-Filter-chips tests (`FilterChips`, `FilterChip`, `FilterChipPopover`, `filter-chip-state`, `filter-popover-helpers`) are
-catalogued in [`filter-chips/CLAUDE.md`](filter-chips/CLAUDE.md).
+Filter-chips tests (`FilterChips`, the `*FilterPopover` bodies, `filter-chip-state`, `filter-popover-helpers`) are
+catalogued in [`filter-chips/CLAUDE.md`](filter-chips/CLAUDE.md). The chip and popover primitives themselves are
+`$lib/ui/Chip` and `$lib/ui/Dropdown` (tested in `lib/ui/`).
 
 ## State shape contract
 
@@ -232,8 +233,10 @@ Small contracts that apply to every consumer of the query UI:
 - `QueryBar.svelte`'s run button has the `⏎` shortcut at the suffix slot at `--spacing-xs` from the "Search" label so
   the rhythm matches "Go to file ⏎" and "All searches… ⌘H" elsewhere.
 - `RecentItemsFooter.svelte` + `recent-chips-layout.ts` use a greedy-fit layout: leading label ("Recent searches:" or
-  "Recent selections:") and trailing button ("All searches… ⌘H" or equivalent) are always rendered; the middle slot
-  packs as many chips as fit, dropping the rest silently. No horizontal scrolling, no ellipsis chip.
+  "Recent selections:") and trailing button ("All searches…" + a `⌘H` `ShortcutChip`, or equivalent) are always
+  rendered; the middle slot packs as many chips as fit, dropping the rest silently. No horizontal scrolling, no ellipsis
+  chip. The pills are `$lib/ui/Chip` (`variant="recent"`, mode badge in its `leading` slot), and the trailing control is
+  a standard `$lib/ui/Button` (`variant="secondary"`); the layout helper measures `.chip-recent` and `.all-recent`.
 - Each chip's tooltip leads with the full text so a CSS-ellipsis-truncated chip stays readable on hover.
 - Path column font is `--font-size-sm` (matching the filename column) with `--spacing-xxs` row vertical padding so the
   row height stays compact.
@@ -301,8 +304,11 @@ The bar's run button reads `Search ⏎` only when `enterAction === 'run-search'`
 ### Footer buttons always visible
 
 The policy: footer actions render unconditionally; when there are no results (or the index isn't ready) they render
-disabled instead of hidden, so the layout stays still while the user types. The specific Search footer buttons ("Show
-all in main window", "Go to file") live in `lib/search/SearchFooterActions.svelte`.
+disabled instead of hidden, so the layout stays still while the user types. `QueryDialog.svelte` renders the
+primary/secondary footer actions itself, from `config.primaryAction` / `config.secondaryAction`, as standard
+`$lib/ui/Button`s (`variant="primary" | "secondary"`, `size="regular"`) with the shortcut hint on a `ShortcutChip`.
+Search wires "Show all in main window" (primary, ⌥⏎) + "Go to file" (secondary, ⏎) through that config; Selection wires
+"Select these files" (primary, ⏎). There's no separate per-consumer footer component.
 
 The Content chip is visible-disabled with a "Coming soon" tooltip. It has **no** shortcut. Wiring a shortcut to a
 disabled control is hostile UX; reserving `⌘4` is the better contract. When Content ships, it claims `⌘3` and Regex
@@ -404,10 +410,11 @@ entries so callers (the tab-state manager) can release per-entry resources in on
 trigger. The same applies to recent-search AI entries (footer chip click + popover Enter both run). Anything the user
 deliberately picks from the dialog is the same kind of "yes, please" as pressing Enter.
 
-**Decision**: `RecentItemsPopover` reuses `FilterChipPopover` for positioning + focus trap + Esc-scoped close. **Why**:
+**Decision**: `RecentItemsPopover` reuses `$lib/ui/Dropdown` for positioning + focus trap + Esc-scoped close. **Why**:
 The plan calls for a sub-overlay-of-an-overlay with the same auto-flip, focus-trap, and "Esc closes only the popover"
 semantics as the filter chips. Reimplementing those risks drift; reusing the primitive guarantees the contract covers
-both popover kinds via the single `.filter-chip-popover` DOM selector.
+both popover kinds via the single `.ui-dropdown` DOM selector (the same selector the filter popovers render through
+`FilterDropdown`).
 
 **Decision**: Path pills inside result rows are mouse-only and not in the keyboard Tab order. **Why**: Making the pills
 tabbable inside virtualized rows would break the row's arrow-down keyboard flow: pressing Down at the end of a row would

apps/desktop/src/lib/query-ui/QueryDialog.svelte

@@ -46,6 +46,9 @@
     import type { QueryDialogConfig } from './query-dialog-config'
     import { getSetting, onSpecificSettingChange } from '$lib/settings'
     import { trapFocus } from '$lib/ui/focus-trap'
+    import Button from '$lib/ui/Button.svelte'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
+    import { tooltip } from '$lib/tooltip/tooltip'
     import StatusBadge from '$lib/ui/StatusBadge.svelte'
     import { addToast } from '$lib/ui/toast/toast-store.svelte'
     import { showAiTranslateErrorToast } from '$lib/ai/translate-error-toast'
@@ -244,7 +247,7 @@
      */
     function handleEscapeCapture(e: KeyboardEvent): void {
         if (e.key !== 'Escape') return
-        if (dialogElement?.querySelector('.filter-chip-popover')) {
+        if (dialogElement?.querySelector('.ui-dropdown')) {
             return
         }
         e.preventDefault()
@@ -928,34 +931,34 @@
                 {#if config.secondaryAction || config.primaryAction}
                     <div class="query-dialog__actions" role="group" aria-label="Dialog actions">
                         {#if config.secondaryAction}
-                            <button
-                                type="button"
-                                class="btn btn-secondary btn-mini"
+                            <Button
+                                variant="secondary"
                                 disabled={config.inputsDisabled || results.length === 0}
                                 onclick={activateSecondary}
                                 aria-label={config.secondaryAction.ariaLabel ?? config.secondaryAction.label}
-                                title={config.secondaryAction.tooltip ?? ''}
                             >
-                                {config.secondaryAction.label}{#if enterAction === 'go-to-file'}<span
-                                        class="shortcut-hint"
-                                        aria-hidden="true">{config.secondaryAction.shortcutHint}</span
-                                    >{/if}
-                            </button>
+                                <span class="action-label" use:tooltip={config.secondaryAction.tooltip ?? ''}>
+                                    {config.secondaryAction.label}{#if enterAction === 'go-to-file'}<ShortcutChip
+                                            key={config.secondaryAction.shortcutHint}
+                                            size="sm"
+                                        />{/if}
+                                </span>
+                            </Button>
                         {/if}
                         {#if config.primaryAction}
-                            <button
-                                type="button"
-                                class="btn btn-primary btn-mini"
+                            <Button
+                                variant="primary"
                                 disabled={config.inputsDisabled || results.length === 0}
                                 onclick={activatePrimary}
                                 aria-label={config.primaryAction.ariaLabel ?? config.primaryAction.label}
-                                title={config.primaryAction.tooltip ?? ''}
                             >
-                                {config.primaryAction.label}<span
-                                    class="shortcut-hint shortcut-on-primary"
-                                    aria-hidden="true">{config.primaryAction.shortcutHint}</span
-                                >
-                            </button>
+                                <span class="action-label" use:tooltip={config.primaryAction.tooltip ?? ''}>
+                                    {config.primaryAction.label}<ShortcutChip
+                                        key={config.primaryAction.shortcutHint}
+                                        size="sm"
+                                    />
+                                </span>
+                            </Button>
                         {/if}
                     </div>
                 {/if}
@@ -1068,19 +1071,10 @@
         padding: var(--spacing-sm) var(--spacing-lg);
     }
 
-    /* No `opacity` dimming on the shortcut hints: at `opacity: 0.8` the composited
-       tertiary gray (and the accent-fg on the primary button) dropped below WCAG AA on
-       the lighter accents. `--color-text-tertiary` already reads quieter than the button
-       label, and `--color-accent-fg` is auto-picked for max contrast on its accent.
-       The contrast checker models both pairs (`scripts/check-a11y-contrast/query_dialog_states.go`). */
-    .shortcut-hint {
-        margin-left: var(--spacing-xs);
-        font-family: var(--font-mono);
-        font-size: var(--font-size-sm);
-        color: var(--color-text-tertiary);
-    }
-
-    .shortcut-hint.shortcut-on-primary {
-        color: var(--color-accent-fg);
+    /* The action verb leads; the shortcut hint rides a standard `ShortcutChip` to its right. */
+    .action-label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-xs);
     }
 </style>

apps/desktop/src/lib/query-ui/QueryDialog.svelte.test.ts

@@ -319,7 +319,7 @@ describe('QueryDialog ⌘N and ⌘H', () => {
     // The popover mounts via FilterChipPopover; either marker class would work,
     // but the wrapper exposes the `[data-recent-items-popover]` hook below.
     const popoverAfterOpen = document.body.querySelector(
-      '[data-recent-items-popover], .recent-searches-popover, .filter-chip-popover',
+      '[data-recent-items-popover], .recent-searches-popover, .ui-dropdown',
     )
     expect(popoverAfterOpen).not.toBeNull()