Lucas BergerandClaude Opus 4.8
cf9e345b87
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
51 lines
2.0 KiB
Markdown
51 lines
2.0 KiB
Markdown
---
|
||
quick_id: 260619-jp4
|
||
slug: add-app-screenshots-to-readme
|
||
status: complete
|
||
date: 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.
|