familysync/.planning/quick/260619-jp4-add-app-screenshots-to-readme/260619-jp4-SUMMARY.md

quick_id, slug, status, date

quick_id	slug	status	date
260619-jp4	add-app-screenshots-to-readme	complete	2026-06-19

Quick Task 260619-jp4 — Summary

What was done

Added six real screenshots of the running PWA to docs/screenshots/ and rebuilt the README intro into a Features section that expands the project description, pairing each capability with its screenshot:

View	File	Feature
Calendar (month)	calendar.png	One color-coded family calendar
Lists index	lists.png	Shared collaborative lists
List detail	list-detail.png	Live-syncing list items
Login	login.png	Single sign-on (local + Authelia OIDC)
Setup wizard	setup.png	Guided zero-setup onboarding
Admin	admin.png	Household administration

How

Captured with playwright-cli (Chromium — the box has no Google Chrome) against the live dev stack. Demo data was injected per-browser via playwright-cli route response interception — nothing was written to the real Fastmail account (user chose "Mock locally"). Screens that fight the dev-bypass authed/locked state were unlocked by mocking /api/me, /api/setup/status, and the auth/admin endpoints. Login and Setup were reframed at a 1280×720 viewport to remove dead vertical space; the content views at 1280×900.

Notes / honest caveats

• The list-detail header literally reads "List", not the list name — that is the app's own placeholder (apps/pwa/src/routes/ListDetail.tsx:380, "List name not available without an extra fetch"), not a screenshot artifact. Left as-is rather than faking the real UI.
• The color-legend in the sidebar shows the current member + "Family" by design (App.tsx derives legend members from /api/me only); the two-person household is shown on the Admin members screen.

Verification

• pnpm exec prettier --check README.md → "All matched files use Prettier code style!"
• pnpm md:lint → Summary: 0 error(s) (12 files)
• Images committed under docs/screenshots/ (not gitignored); README references resolve via relative paths.