feat: polish M1 home security UI

[lan17]

Stack Collapse

• This PR is now the single M1 UI/UX refresh PR targeting main.
• It supersedes the earlier stacked PRs: feat: refresh app shell navigation #95, feat: add shared UI primitives #96, feat: add live camera cards #97, feat: refresh push-to-talk action #98, feat: add event card list #99, feat: refresh event detail view #100, feat: add event quick filters #101, feat: harden mobile home security flows #102, and feat: split settings system health #103.
• Those PRs are closed to keep review focused here.

Tickets

• App shell, navigation, and route cleanup: https://www.notion.so/35ad8336c59f8161bfacdcde283f4dfe
• Shared UI primitives and responsive scaffolding: https://www.notion.so/35bd8336c59f81f3b6ffd66b97bf90d1
• Live page camera cards: https://www.notion.so/35ad8336c59f81f3ba21e04df831f83b
• Push-to-talk primary camera action: https://www.notion.so/35ad8336c59f81f09281dcc6779ad64b
• Events card/list view: https://www.notion.so/35ad8336c59f81ddb0b1e0c5d6e705b9
• Event detail cleanup and client-side previous/next: https://www.notion.so/35ad8336c59f81b0b931c47c77cc489f
• Quick filters and advanced drawer: https://www.notion.so/35ad8336c59f814589bce2243ba18a2e
• Mobile hardening pass: https://www.notion.so/35ad8336c59f811cb1b4e22a3fd0bb59
• Settings/System split: https://www.notion.so/35ad8336c59f81199ba0f8bb28d0f955
• Basic camera health: https://www.notion.so/35ad8336c59f81d3aa1ef147f741bb94
• Visual polish, copy cleanup, and basic page states: https://www.notion.so/35ad8336c59f81568085d9f6ee5304b8

Scope

• Makes Live the day-to-day camera surface and keeps camera setup under Settings.
• Removes Cameras from desktop and mobile primary navigation.
• Redirects the old /cameras route to /settings/cameras for backward compatibility.
• Adds push-to-talk to Live camera cards using the existing talk UI/hooks/APIs.
• Keeps mobile Live focused on one active camera by default.
• Replaces table-first/event-admin surfaces with card/list/detail hierarchy, quick filters, technical disclosures, and homeowner-readable labels.
• Keeps Camera as an always-visible Events filter using the existing camera query param.
• Plays event video inline in the Events list using the existing clip media URL/token flow, with inline Details expansion for metadata.
• Keeps /events/:clipId available for backward-compatible deep links, but normal list review no longer requires opening a separate detail page.
• Splits homeowner Settings from System diagnostics and uses existing camera health fields only.
• Polishes the app shell, Live cards, event cards, preview/talk copy, badges, empty states, and responsive spacing.

UI Notes

• Local render review was run against mocked existing APIs for camera list/status/preview/talk, health, setup status, clips, and clip media.
• Checked desktop and mobile render paths in the browser; no horizontal overflow at 1280px or 390px.
• Re-checked Events at desktop width after the inline video change; playable video controls render in the list and Details expands in place without clipping badges/actions.
• Re-checked Events at 390px mobile width after the filter fix; Camera is visible, More filters opens inline, and horizontal overflow is zero.
• Live now shows preview and push-to-talk together; Camera setup is reachable from Settings and from camera card settings actions.
• Technical/source/backend details stay behind disclosures or in System/Settings surfaces.

Self-Review Notes

• Re-reviewed the diff after the corrective pass for backend/API additions and found none.
• Verified /cameras no longer competes with Live as a primary user-facing page.
• Verified Live camera cards pass showTalkControl and keep compact mobile behavior.
• Verified Events list uses existing useClipMediaUrl/media-token behavior and does not add thumbnails, event-neighbor APIs, review state, or feedback APIs.
• Verified Camera filter maps to the existing URL-synced camera clip query param.
• Confirmed no new review state, event feedback, thumbnails, health reason codes, live summary, or event-neighbor behavior was added.
• Left unrelated dirty graphify-out wiki files unstaged.

Checks

• pnpm --dir ui exec vitest run src/app/layout/AppShell.test.tsx src/routes/AppRouter.test.tsx src/features/live/LivePage.test.tsx src/features/cameras/components/CameraPreviewPanel.test.tsx src/features/settings/SettingsPage.test.tsx src/components/ui/primitives.test.tsx
• pnpm --dir ui test -- ClipsPage.test.tsx
• pnpm --dir ui check
• TEST_DB_DSN=postgresql://homesec:homesec@localhost:55432/homesec make check
• Browser render review with local Vite app and mocked existing API responses.

Backend Scope

• No backend routes, schema changes, persistence changes, notification behavior, alert review state, event feedback APIs, backend thumbnails, live-summary endpoints, event-neighbor endpoints, enriched camera-health reason codes, or new media APIs were added.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.16%. Comparing base (60a76e7) to head (eb8cc31).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #104   +/-   ##
=======================================
  Coverage   87.16%   87.16%           
=======================================
  Files         151      151           
  Lines       16422    16422           
=======================================
  Hits        14314    14314           
  Misses       2108     2108           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.