Selection dialog: M11 slow-suite green and final review

Slow suite (./scripts/check.sh --include-slow) surfaced 3 categories of fix
work on top of M10:

1. search-modes.spec.ts: update DOM selectors to match the post-M3 ToggleGroup
   shape. ModeChips now renders .tg-item / .tg-label / aria-selected; the old
   .mode-chip / .chip-label / .is-active classes are gone. Updates the
   ACTIVE_MODE_CHIP / MODE_CHIPS constants in search-helpers.ts and the
   .chip-label query in getActiveMode/hasAiChip.

2. FilterChips.svelte: wrap factory setter refs in arrow-function passthroughs.
   Const setSizeFilter = filterState.setSizeFilter (etc.) tripped
   @typescript-eslint/unbound-method even though the factory's setters don't
   read this. The arrow-wrap pattern silences the rule and keeps the writes
   going through the same instance.

3. eslint-typecheck-only cleanup across M3/M4/M7 (40+ findings, all in code
   the default eslint pass doesnt flag):
   - Drop the any typing on QueryDialog.queryResultsComponent; declare a
     local QueryResultsAPI interface and bind the ref against it.
   - Replace 'as any' casts in the recent-items tests (the Svelte 5 generic-
     mount workaround) with as-unknown-as Component widening.
   - Remove unnecessary ?? and optional-chain guards that the type system
     proved redundant.
   - Add a one-line disable on QueryDialog Props for E generic eslint cant
     follow through Svelte 5s script generics attribute.

Three pre-existing macOS-only e2e flakes did not pass (Escape closes the
settings window, Escape closes the viewer window, viewer-window close in
afterEach). None touch Selection or Query UI; none reproduce on the Linux
shard. Documented in the final-review file as known unrelated infra issues.

Final review at docs/specs/selection-dialog-plan-final-review.md. Verdict:
SHIP.

Author: vdavid

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

@@ -148,17 +148,18 @@
     }: Props = $props()
 
     // Pull the setters from the injected state instance so the template reads
-    // `setSizeFilter(...)` like before. Local consts (not re-exports) so the component stays
-    // self-contained; the underlying writes still go through the instance the consumer owns.
-    const setSizeFilter = filterState.setSizeFilter
-    const setSizeValue = filterState.setSizeValue
-    const setSizeUnit = filterState.setSizeUnit
-    const setSizeValueMax = filterState.setSizeValueMax
-    const setSizeUnitMax = filterState.setSizeUnitMax
-    const setDateFilter = filterState.setDateFilter
-    const setDateValue = filterState.setDateValue
-    const setDateValueMax = filterState.setDateValueMax
-    const setQueryFromUserInput = filterState.setQueryFromUserInput
+    // `setSizeFilter(...)` like before. Arrow-function wrappers (not raw method refs) keep
+    // `this` binding intact and silence `@typescript-eslint/unbound-method` since the
+    // factory's setters don't read `this` but the type system can't prove it.
+    const setSizeFilter: typeof filterState.setSizeFilter = (v) => { filterState.setSizeFilter(v); }
+    const setSizeValue: typeof filterState.setSizeValue = (v) => { filterState.setSizeValue(v); }
+    const setSizeUnit: typeof filterState.setSizeUnit = (v) => { filterState.setSizeUnit(v); }
+    const setSizeValueMax: typeof filterState.setSizeValueMax = (v) => { filterState.setSizeValueMax(v); }
+    const setSizeUnitMax: typeof filterState.setSizeUnitMax = (v) => { filterState.setSizeUnitMax(v); }
+    const setDateFilter: typeof filterState.setDateFilter = (v) => { filterState.setDateFilter(v); }
+    const setDateValue: typeof filterState.setDateValue = (v) => { filterState.setDateValue(v); }
+    const setDateValueMax: typeof filterState.setDateValueMax = (v) => { filterState.setDateValueMax(v); }
+    const setQueryFromUserInput: typeof filterState.setQueryFromUserInput = (v) => { filterState.setQueryFromUserInput(v); }
 
     let openChip = $state<FilterKey | 'add' | null>(null)
 

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

@@ -35,7 +35,7 @@
      * `SearchMode` counterpart on purpose: it's a placeholder for the future full-text
      * search feature and lives only in the visual chip set so users see it on the horizon.
      */
-    const options = $derived.by<ToggleGroupOption[]>(() => {
+    const options = $derived.by<ToggleGroupOption[]>((): ToggleGroupOption[] => {
         const list: ToggleGroupOption[] = []
         if (aiEnabled) {
             list.push({

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

@@ -197,7 +197,7 @@ describe('SearchModeChips', () => {
     it("AI chip renders its `AI` badge via ToggleGroup's badge slot", async () => {
       const { chips, cleanup } = setup({ aiEnabled: true })
       await tick()
-      const aiBadge = chips[0].querySelector('.tg-badge')?.textContent?.trim()
+      const aiBadge = chips[0].querySelector('.tg-badge')?.textContent.trim()
       expect(aiBadge).toBe('AI')
       cleanup()
     })

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

@@ -46,17 +46,22 @@
     import { getSetting, onSpecificSettingChange } from '$lib/settings'
 
     interface Props {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments -- E is the Svelte component generic; the explicit <E> binds the inference for callers like SearchDialog/SelectionDialog
         config: QueryDialogConfig<E>
     }
 
     /* eslint-disable prefer-const -- $props destructuring keeps types clean with const */
     let { config }: Props = $props()
     /* eslint-enable prefer-const */
 
+    /** Shape of the `bind:this` ref for `QueryResults.svelte` — only the exported method we call. */
+    interface QueryResultsAPI {
+        scrollCursorIntoView(): void
+    }
+
     let queryInputElement: HTMLInputElement | undefined = $state()
     let dialogElement: HTMLDivElement | undefined = $state()
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Svelte 5 bind:this lacks type info
-    let queryResultsComponent: any = $state()
+    let queryResultsComponent: QueryResultsAPI | undefined = $state()
     let footerRef: HTMLDivElement | undefined = $state()
     let recentPopoverOpen = $state(false)
     let debounceTimer: ReturnType<typeof setTimeout> | undefined
@@ -345,7 +350,6 @@
 
     async function focusFirstResult(): Promise<void> {
         await tick()
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- Svelte 5 bind:this lacks type info for exports
         queryResultsComponent?.scrollCursorIntoView()
     }
 
@@ -597,7 +601,6 @@
         config.state.setCursorIndex(next)
         // D8: cursor moves keep ⏎ on "go-to-file" as the user browses the list.
         config.state.setLastDialogEvent('cursor-moved')
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- Svelte 5 bind:this lacks type info for exports
         queryResultsComponent?.scrollCursorIntoView()
     }
 

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

@@ -126,7 +126,7 @@ function mountQueryDialog(opts: MountOptions = {}): MountedDialog {
           const fn = opts.translateAi
           return async (prompt: string) => {
             calls.translateAi.push(prompt)
-            return fn ? fn(prompt) : null
+            return fn(prompt)
           }
         })()
       : undefined,
@@ -162,7 +162,7 @@ function mountQueryDialog(opts: MountOptions = {}): MountedDialog {
   // Svelte's `mount()` typing of a generic component pins the type parameter at the
   // call site; we widen via `unknown` so the test's `HistoryEntry`-typed config still
   // passes the type check without losing inference on the rest of the file.
-  const component = mount(QueryDialog, { target, props: { config: config as unknown as QueryDialogConfig<unknown> } })
+  const component = mount(QueryDialog, { target, props: { config: config } })
 
   const overlay = target.querySelector('.search-overlay')
   if (!overlay) throw new Error('overlay not found')

apps/desktop/src/lib/query-ui/recent-items/RecentItemsFooter.a11y.test.ts

@@ -8,16 +8,17 @@
  */
 
 import { describe, it } from 'vitest'
-import { mount, tick } from 'svelte'
+import { mount, tick, type Component } from 'svelte'
 import RecentSearchesFooterRaw from './RecentItemsFooter.svelte'
 import type { HistoryEntry } from '$lib/tauri-commands'
 import { expectNoA11yViolations } from '$lib/test-a11y'
 import type { RecentItemAdapter, RecentItemKey } from './recent-items-types'
 import { chipTooltip, modeName, formatAge } from './recent-items-utils'
 
-// Svelte 5 generics+mount type roundtrip workaround — see `RecentItemsFooter.svelte.test.ts`.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RecentSearchesFooter = RecentSearchesFooterRaw as any
+// Svelte 5 generics+mount type roundtrip: the declared Component<unknown> shape rejects typed
+// adapters. Cast through unknown to a permissive component shape so the mount() call type-checks
+// without unsafe-argument errors. The runtime contract is correct.
+const RecentSearchesFooter = RecentSearchesFooterRaw as unknown as Component<Record<string, unknown>>
 
 function makeEntry(overrides: Partial<HistoryEntry> = {}): HistoryEntry {
   return {

apps/desktop/src/lib/query-ui/recent-items/RecentItemsFooter.label.svelte.test.ts

@@ -3,15 +3,15 @@
  * the user can read what those chips are without needing context.
  */
 import { describe, expect, it } from 'vitest'
-import { mount, tick } from 'svelte'
+import { mount, tick, type Component } from 'svelte'
 import RecentSearchesFooterRaw from './RecentItemsFooter.svelte'
 import type { HistoryEntry } from '$lib/tauri-commands'
 import type { RecentItemAdapter, RecentItemKey } from './recent-items-types'
 import { chipTooltip, modeName, formatAge } from './recent-items-utils'
 
-// Svelte 5 generics+mount type roundtrip workaround — see `RecentItemsFooter.svelte.test.ts`.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RecentSearchesFooter = RecentSearchesFooterRaw as any
+// Svelte 5 generics+mount type roundtrip: cast through unknown to avoid unsafe-argument errors.
+// See `RecentItemsFooter.svelte.test.ts` for the full explanation.
+const RecentSearchesFooter = RecentSearchesFooterRaw as unknown as Component<Record<string, unknown>>
 
 const searchAdapter: RecentItemAdapter<HistoryEntry> = (e) => ({
   label: e.query,

apps/desktop/src/lib/query-ui/recent-items/RecentItemsFooter.svelte.test.ts

@@ -1,17 +1,15 @@
 import { describe, it, expect, vi } from 'vitest'
-import { mount, tick } from 'svelte'
+import { mount, tick, type Component } from 'svelte'
 import RecentSearchesFooterRaw from './RecentItemsFooter.svelte'
 import type { HistoryEntry, HistoryMode } from '$lib/tauri-commands'
 import type { RecentItemAdapter, RecentItemKey } from './recent-items-types'
 import { chipTooltip, modeName, formatAge } from './recent-items-utils'
 
 // Svelte 5's `generics="E"` declaration doesn't survive the `mount()` type roundtrip: the
 // declared `Component<unknown>` shape rejects a typed `RecentItemAdapter<HistoryEntry>`. The
-// runtime contract is fine; we cast the component reference to the typed variant so the
-// test's adapter binding type-checks. This is the same trick the toast suite uses for its
-// component-content toasts.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RecentSearchesFooter = RecentSearchesFooterRaw as any
+// runtime contract is fine; we cast through unknown to a permissive Component shape so the
+// mount() call type-checks without unsafe-argument errors.
+const RecentSearchesFooter = RecentSearchesFooterRaw as unknown as Component<Record<string, unknown>>
 
 function makeEntry(overrides: Partial<HistoryEntry>): HistoryEntry {
   return {

apps/desktop/src/lib/query-ui/recent-items/RecentItemsPopover.a11y.test.ts

@@ -8,16 +8,16 @@
  */
 
 import { describe, it } from 'vitest'
-import { mount, tick } from 'svelte'
+import { mount, tick, type Component } from 'svelte'
 import RecentSearchesPopoverRaw from './RecentItemsPopover.svelte'
 import type { HistoryEntry } from '$lib/tauri-commands'
 import { expectNoA11yViolations } from '$lib/test-a11y'
 import type { RecentItemAdapter, RecentItemKey } from './recent-items-types'
 import { chipTooltip, modeName, formatAge } from './recent-items-utils'
 
-// Svelte 5 generics+mount type roundtrip workaround — see `RecentItemsFooter.svelte.test.ts`.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RecentSearchesPopover = RecentSearchesPopoverRaw as any
+// Svelte 5 generics+mount type roundtrip: cast through unknown to avoid unsafe-argument errors.
+// See `RecentItemsFooter.svelte.test.ts` for the full explanation.
+const RecentSearchesPopover = RecentSearchesPopoverRaw as unknown as Component<Record<string, unknown>>
 
 const searchAdapter: RecentItemAdapter<HistoryEntry> = (e) => ({
   label: e.query,

apps/desktop/src/lib/query-ui/recent-items/RecentItemsPopover.svelte.test.ts

@@ -1,13 +1,13 @@
 import { describe, it, expect, vi } from 'vitest'
-import { mount, tick, unmount } from 'svelte'
+import { mount, tick, unmount, type Component } from 'svelte'
 import RecentSearchesPopoverRaw from './RecentItemsPopover.svelte'
 import type { HistoryEntry } from '$lib/tauri-commands'
 import type { RecentItemAdapter, RecentItemKey } from './recent-items-types'
 import { chipTooltip, modeName, formatAge } from './recent-items-utils'
 
-// Svelte 5 generics+mount type roundtrip workaround — see `RecentItemsFooter.svelte.test.ts`.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RecentSearchesPopover = RecentSearchesPopoverRaw as any
+// Svelte 5 generics+mount type roundtrip: cast through unknown to avoid unsafe-argument errors.
+// See `RecentItemsFooter.svelte.test.ts` for the full explanation.
+const RecentSearchesPopover = RecentSearchesPopoverRaw as unknown as Component<Record<string, unknown>>
 
 function makeEntry(overrides: Partial<HistoryEntry>): HistoryEntry {
   return {