agatha
9246f75fdd
Introduces a shared CSS custom property token layer and applies it across all five views (library, upload, detail, login, app shell). Each view now has intentional loading, empty, and error states. - styles.css: 13 design tokens on :root; shimmer skeleton animation - Library: 150ms-debounced skeleton loading, empty state with /upload link, error card with retry, card hover lift, broken-image fallback - Upload: token-styled drop-zone, Uploading… spinner, 4s success banner, distinct validation vs. network error messages - Detail: image skeleton, network error card (separate from 404 not-found card), Owner actions panel, danger tag error styling, broken-image fallback - Login: vertically centred surface card, danger field/server errors, Signing in… disabled button - App shell: 48px fixed header, app name left, sign-out right, no reflow on auth state change - All 24 ESLint errors resolved (including pre-existing auth spec issues); ng build and ng lint pass clean Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5.4 KiB
5.4 KiB
Quickstart: UI Polish Visual Acceptance Scenarios
Use this guide to manually verify each milestone after implementation.
Run docker compose up before starting. Open the browser at http://localhost:4200.
M1 — Design Token Layer
Goal: Tokens exist; visual output is identical to before.
- Open the library, upload, detail, and login pages.
- Open browser DevTools → Elements →
<html>or<body>. - Confirm
--bg,--surface,--accent,--dangeretc. are visible in computed styles. - Confirm no visible change in any view compared to before M1.
M2 — Library View
Loading skeleton
- Open DevTools → Network → set throttle to "Slow 3G".
- Hard-refresh the library page.
- Expect: A grid of grey shimmer cards appears immediately; no blank white space; no layout jump when real images load in.
Empty state
- Ensure no images are uploaded (or use a fresh test database).
- Open the library.
- Expect: A centred empty-state panel with explanatory text and a prominent
"Upload your first image" link. Clicking the link navigates to
/upload.
Error state
- Stop the API container (
docker compose stop api). - Hard-refresh the library.
- Expect: An error card with a plain-language message and a "Retry" button. No blank grid, no raw status code.
- Restart the API (
docker compose start api) and click "Retry". - Expect: Images load successfully.
Card polish
- Hover over an image card.
- Expect: Card lifts slightly (2 px translate) with a smooth transition.
Broken image
- Manually corrupt a storage key in the database (or unplug MinIO) and reload.
- Expect: Card shows a grey placeholder graphic, not a broken-image browser icon.
375 px viewport
- DevTools → Device toolbar → iPhone SE (375 × 667).
- Expect: Cards stack, no horizontal scrollbar, all content readable.
M3 — Upload View
Drop-zone idle
- Navigate to
/upload(must be logged in). - Expect: A visually distinct drop-zone with dashed border and clear instructions. Submit button is disabled/greyed.
In-progress
- Select a large image file.
- Click upload.
- Expect: Button label changes to "Uploading…" and is disabled. A spinner or animated indicator is visible.
Success
- After a successful upload completes.
- Expect: A green-tinted success banner with the filename, "Upload another" link, and "View in library" link. Banner disappears after 4 seconds.
Validation error
- Attempt to upload a
.txtfile. - Expect: An inline error message names the problem ("Unsupported file type"). The form is still usable — no page reload required.
Network error
- Stop the API mid-upload (or use DevTools → block the upload request).
- Expect: A generic inline error with guidance to retry. Form remains usable.
M4 — Detail View
Loading skeleton
- Set network throttle to Slow 3G.
- Navigate directly to an image URL (e.g.,
http://localhost:4200/images/<id>). - Expect: A grey rectangle skeleton for the image area and chip skeletons below. No blank page.
Not-found state
- Navigate to
http://localhost:4200/images/00000000-0000-0000-0000-000000000000. - Expect: A styled not-found card with "Image not found" heading and a "Back to library" button. No blank page, no raw 404 text.
Authenticated write controls
- Log in and open a detail page.
- Expect: Tag editing input and delete button are visible and clearly grouped.
Unauthenticated view
- Open the detail page in a private/incognito window (not logged in).
- Expect: Image and read-only tag chips are visible. No tag input, no delete button.
Tag error
- While logged in, attempt to add a tag with invalid characters (e.g.,
TAG!). - Expect: An inline error in danger colour with a left accent border. Other tags and the image remain visible.
Broken image
- Open a detail page for an image whose storage object has been deleted.
- Expect: A placeholder graphic replaces the image. Page layout is not broken.
M5 — Login View
Visual consistency
- Open
/loginwithout being logged in. - Expect: Dark background matching the library; form centred in a surface card; same font and spacing as other pages.
Field validation
- Click the Sign In button without entering any credentials.
- Expect: Inline validation messages appear on the username and password fields without a page reload.
Invalid credentials error
- Enter wrong credentials and submit.
- Expect: A single error message below the form. Fields retain their values.
In-progress state
- Submit valid credentials (throttle network if needed to see the state).
- Expect: Button label changes to "Signing in…" and is disabled while the request is in flight.
M6 — App Shell
Authenticated header
- Log in and navigate between library, upload, and an image detail page.
- Expect: A consistent 48 px header is present on all pages. Sign-out control is visible on the right. Header does not reflow content.
Unauthenticated header
- Open the library or detail page without logging in.
- Expect: Header is present but sign-out control is absent.
Sign out
- Click the sign-out control in the header.
- Expect: Redirected to
/login. Header no longer shows sign-out control. Navigating to/uploadredirects back to/login.