web UI: style friends, pings, and notifications screens #39

Activity

1. TSVRN9

   added

   ready-for-agentFully specified, ready for an AFK agentFully specified, ready for an AFK agent

   on Aug 19, 2026
2. TSVRN9

   marked this as blocked on Aug 19, 2026

   • web UI: install Tailwind CSS + design tokens + styled shared layout #35
3. TSVRN9 commented on Aug 19, 2026

   

   TSVRN9

   on Aug 19, 2026

   OwnerAuthor

   More actions

   PR: #61 (branch ux/friends-notifications, not merged)

   Restyled both web/src/routes/friends/+page.svelte and web/src/routes/notifications/+page.svelte with #35's tokens only (.card, .btn*, .badge, .empty-state, .page-title, .section-title, .field-label, .input, .label-rule) — no app.css edits, no new hex colors.

   Acceptance criteria:

   • Friends and notifications screens fully restyled using web UI: install Tailwind CSS + design tokens + styled shared layout #35's tokens — done, see PR diff.
   • Friend request states (pending/accepted) and the notification toggle are visually clear — done via .badges (Pending / Wants to be friends / Friend, Alerts on / Alerts off, New for unread sightings). Verified live against the dev server, both signed-out and (mocked-session) signed-in.
   • pnpm --filter web check clean — 0 ERRORS 0 WARNINGS.

   Note on the third criterion's "no E2E coverage ... manual verification only" line: this got superseded — added web/e2e/friends-notifications.spec.ts (6 tests) instead, covering both screens signed-out (real, unmocked) and signed-in (Supabase session + REST/realtime mocked via a seeded auth cookie + page.route/page.routeWebSocket, see the spec file's header comment for the exact mechanism — nothing here touches the live project).

   Red/green (strict TDD): spec written and run against the original unstyled markup first — all 6 failed for real (every assertion targets a class/badge/copy string that didn't exist yet):

   1) Notifications — signed out: expected heading class /page-title/, not found
   2) Friends — signed out: expected heading class /page-title/, not found
   3) Friends — signed in (accepted): expected badge text "Friend", element not found
   4) Friends — signed in (pending): expected badge text "Wants to be friends", element not found
   5) Notifications — signed in (sightings): expected "New" badge, element not found
   6) Notifications — signed in (toggle): expected badge text "Alerts off", element not found
   
   6 failed
   

   After implementing the styled markup, all 6 pass; full suite (PORT=4302 npx playwright test) is 23/23 green, pnpm --filter web check clean, pnpm --filter web build succeeds.

   Full per-criterion evidence, screenshots description, and scope notes (pre-existing onmouseenter-only markRead, left as-is) are in the PR body.
4. TSVRN9

   closed this as completedin #61on Aug 19, 2026