NewTube/todo.md

Search UX — Steps status

All 14 steps: DONE (100%) ✅

Done

• Step 1: Audit current codebase for existing search and provider logic on frontend and server
• Step 2: Design and scaffold Provider Registry on frontend and server
• Step 3: Implement SearchService with multi-provider params and HTTP request
• Step 4: Build SearchBoxComponent with chips, @autocomplete, and keyboard shortcuts
• Step 5: Build ProviderPickerComponent (Ctrl/⌘+K modal) with filtering, History column and apply
• Step 6: Build SearchSuggestionsComponent with grouped sections, per-provider unsupported rows and deep-links
• Step 7: Add router query-param sync and default provider preference loading (Search page fallback to user preference)
• Step 8: Implement backend /api/search with providers param and fan-out to server/providers handlers
• Step 9: Persist default providers preference in user profile (client + server endpoints wired, tested)
• Step 10: Add keyboard accessibility and a11y behaviors (Tab/Shift+Tab focus trap, Esc, aria, focus restore)
• Step 11: Write unit tests (SearchService, ProviderPicker toggle, @ parsing)
• Step 12: Write basic e2e scenarios for providers filtering and deep-link
• Step 13: Add minimal telemetry hooks and events
• Step 14: Update README with search UX section, keyboard shortcuts and usage notes

Test commands

npm run test:search        # Step 11 — unit tests: SearchService + @ parsing + ProviderPicker
npm run test:search-e2e    # Step 12 — e2e scenarios against a real isolated server
npm run test:preferences   # Step 9  — defaultProviders persistence
npm run test:telemetry     # Step 13 — telemetry events (insert/list/count)

Implementation notes

• Step 11 (src/app/search/search.service.spec.ts, search-components.spec.ts): ts-node runs with isolated transpilation (no decorator output => no ɵfac), so TestBed cannot instantiate Angular classes. Instead the specs import @angular/compiler, then build components inside Injector.create(...) + runInInjectionContext(...) with fakes for SearchService/UserService/HistoryService/TelemetryService and mock internal schedulers (ɵChangeDetectionScheduler, ɵEffectScheduler with immediate-run effects).
• Step 12 (server/tests/search.e2e.test.mjs): spawns a real server (temp SQLite DB via NEWTUBE_DB_FILE, ephemeral port, test JWT secret) and asserts: providers filter targets exactly the requested ids; deep-link single-provider; invalid providers fall back to the full registry; defaultProviders preference persists; SPA /search route serves the shell. Assertions are on fan-out shape, not on external provider content.
• Step 13: telemetry_events table (db/migrations/20250924_add_telemetry_events.sql), server helpers (insertTelemetryEvent/listTelemetryEvents/countTelemetryEvents) + routes POST /telemetry/events (whitelisted event names, rate-limited), GET /telemetry/events|/summary (own-events only). Front: TelemetryService (fire-and-forget, dedup 500ms window, payload sanitization) wired into SearchBox hooks: search_submit, provider_picker_open, provider_apply, at_autocomplete_use, quick_menu_open.
• Step 14: README gained a "Recherche unifiée" section (chips, @autocomplete, Ctrl/⌘+K picker, deep-links, preference fallback, a11y), API endpoints, test commands and roadmap updates. GIF placeholder TODO added.
• CI (.github/workflows/ci.yml) now runs preferences, telemetry, search unit and e2e tests.