` is already functional. Polish it:
+centred layout, muted icon (✦ or similar Unicode), larger text, and a prominent
+"Upload your first image" link that navigates to `/upload`.
+
+**Error state**: Add an `error: boolean` flag to the component. If the `list()`
+call errors, set `error = true` and render an error card with a retry button
+that calls `load()` again.
+
+**Card polish**: Apply tokens to card background, border-radius, and tag chips.
+Add a subtle `box-shadow` and `transform: translateY(-2px)` on hover (using
+`--transition`). Ensure the card thumbnail `` has an `(error)` fallback
+(see research.md Decision 4).
+
+**Responsive**: The existing `auto-fill minmax(200px, 1fr)` grid already handles
+narrow viewports. Verify it does not overflow at 375 px; reduce min card width
+to 160 px if needed.
+
+---
+
+### Milestone 3 — Upload View (US2)
+
+**Drop-zone polish**: Apply token-based border and background to the existing
+drag-and-drop zone. Add a dashed border accent colour (`--accent` at 40%
+opacity) on active drag state.
+
+**In-progress state**: The existing `loading` flag already disables the button.
+Add a visible spinner or animated label ("Uploading…") inside the button while
+in-flight so the state change is unmistakable.
+
+**Success state**: After a successful upload, show a brief success banner
+(green-tinted surface, tick character) with a "Upload another" link and a "View
+in library" link. Auto-dismiss after 4 seconds or on navigation.
+
+**Error states**: Distinct messages for validation errors (wrong type/size —
+already returned by API) vs. network/server errors (generic retry). Both
+displayed inline below the form, not in a modal.
+
+**Double-submit prevention**: Already implemented (button disabled while
+`loading`). Confirm the disabled style is visually clear using `--text-muted`
+and reduced opacity.
+
+---
+
+### Milestone 4 — Detail View (US3)
+
+**Loading state**: Add a skeleton layout while `loading = true`: a grey
+rectangle at full width for the image area, and two skeleton chip rows below.
+
+**Not-found state**: The existing `!image && !loading` condition renders a
+plain text paragraph. Replace with a styled not-found card: centred layout,
+muted icon, "Image not found" heading, and a "Back to library" button.
+
+**Section organisation**: Visually separate the image area, tags section, and
+write controls with consistent spacing using `--surface` panels and token-based
+gaps. Write controls (tag input + delete button) should be grouped in a visually
+distinct "Owner actions" area when visible.
+
+**Tag error**: The existing `tagError` renders inline. Apply `--danger` colour
+and a left border accent to make it unmistakable.
+
+**Broken image**: Add `(error)` handler on the full-size `
` in the detail
+view (inline SVG placeholder showing a broken-link icon).
+
+---
+
+### Milestone 5 — Login View (US4)
+
+Apply the token-based design system to the login form:
+- Centre the card vertically and horizontally on the page
+- Wrap the form in a `--surface` card with `--radius` and a subtle border
+- Use token-based input styles matching the library filter bar
+- Display field-level validation errors using `--danger` colour
+- The submit button uses the same `--accent` style as the library upload button
+- In-progress state: button text changes to "Signing in…", button disabled
+
+No layout changes to the existing reactive-form structure.
+
+---
+
+### Milestone 6 — App Shell (US5)
+
+The existing `app.component.ts` header already conditionally renders the
+sign-out button. Polish:
+- Slim top bar: `--surface` background, bottom border using `--border`
+- App name / logo mark on the left (text only, no image asset)
+- Sign-out button aligned right using `--text-muted` colour and a simple
+ hover state
+- Header height: `48px` fixed; does not reflow page content on state change
+
+---
+
+## Implementation Order
+
+```
+Milestone 1 (tokens)
+ ↓
+Milestone 2 (library) ─┐
+Milestone 3 (upload) ├─ can proceed in parallel after M1
+Milestone 4 (detail) │
+Milestone 5 (login) ─┘
+Milestone 6 (shell) ← last (touches app.component which wraps all views)
+```
+
+M2–M5 are independent of each other (different component files). M6 is last
+because the app shell wraps all views and its final state is easiest to validate
+once the inner views are stable.
+
+---
+
+## Testing Strategy
+
+**Unit tests (Karma/Jasmine)**:
+- All new state variables (`error`, `showSpinner`, skeleton visibility) are
+ tested via component spec files.
+- Template conditionals (`*ngIf="error"`, `*ngIf="loading"`) are verified with
+ fixture queries.
+- The `(error)` image fallback handler is tested by simulating an error event.
+- Existing tests must continue to pass — no regressions.
+
+**Visual acceptance (manual, quickstart.md)**:
+- Each milestone has a corresponding scenario in quickstart.md.
+- Visual checks are performed in a running `docker compose up` stack.
+- 375 px viewport check: Chrome DevTools → device toolbar → iPhone SE.
+
+**Build gate**: `ng build` must pass with zero errors after every milestone.
diff --git a/specs/005-ui-polish/quickstart.md b/specs/005-ui-polish/quickstart.md
new file mode 100644
index 0000000..b60210c
--- /dev/null
+++ b/specs/005-ui-polish/quickstart.md
@@ -0,0 +1,155 @@
+# 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.
+
+1. Open the library, upload, detail, and login pages.
+2. Open browser DevTools → Elements → `` or `
` with a centred panel: Unicode icon (✦), larger muted heading, and a `routerLink="/upload"` "Upload your first image" link in `ui/src/app/library/library.component.ts`
+- [X] T011 [US1] Add card hover effect: `transform: translateY(-2px)` and `box-shadow` with `transition: var(--transition)` using `--surface-raised` in `ui/src/app/library/library.component.ts`
+- [X] T012 [US1] Add `(error)="onImgError($event)"` on the card thumbnail ` Failed to load image. Please check your connection. {{ tagError }} {{ tagError }} Image not found. {{ activeFilters.length ? 'No images match these filters.' : 'No images yet. Upload your first!' }} Failed to load images. Please check your connection. {{ selectedFile ? selectedFile.name : 'Drag & drop or click to browse' }}` and implement `onImgError` with an inline SVG placeholder (guard against recursive fallback per research.md Decision 4) in `ui/src/app/library/library.component.ts`
+- [X] T013 [US1] Check the `auto-fill minmax()` value in the grid at 375 px: if cards overflow horizontally, reduce min card width to `160px` and record the change; if no overflow, document "verified at 160px — no change needed" in a code comment in `ui/src/app/library/library.component.ts`
+
+**Checkpoint**: Library view is fully functional with all loading/empty/error/responsive states.
+
+---
+
+## Phase 4: User Story 2 — Upload Form Feels Finished (Priority: P1)
+
+**Goal**: The upload form has a visually distinct drop-zone, visible in-progress state ("Uploading…" + spinner), a success banner with auto-dismiss, distinct validation vs. network error messages, and a clearly disabled button style.
+
+**Independent Test**: Navigate to `/upload` — confirm dashed drop-zone border. Select a large file and click Upload — confirm button shows "Uploading…" and is disabled. After success — confirm green banner appears then disappears after 4 s. Attempt to upload a `.txt` file — confirm "Unsupported file type" inline error.
+
+### Tests for User Story 2 (TDD — write first, confirm failure before T016) ⚠️
+
+- [X] T014 [US2] Add component tests for `loading` button-disabled state, "Uploading…" label, `showSuccess` banner visibility, auto-dismiss timer, validation error message, and network error message in `ui/src/app/upload/upload.component.spec.ts`
+
+### Implementation for User Story 2
+
+- [X] T015 [P] [US2] Replace all hardcoded colour values with CSS token variables in the component styles block of `ui/src/app/upload/upload.component.ts`
+- [X] T016 [US2] Style the drop-zone with a dashed `--accent`-coloured border at 40% opacity; add an active drag state that brightens the border to full `--accent` in `ui/src/app/upload/upload.component.ts`
+- [X] T017 [US2] Change submit button label to "Uploading…" and add a CSS spinner `` inside the button while `loading = true` in `ui/src/app/upload/upload.component.ts`
+- [X] T018 [US2] Add `showSuccess = false` and `uploadedFilename = ''`; after a successful upload set both, show a green-tinted banner with filename, "Upload another" link, and "View in library" routerLink, then auto-dismiss after 4 s using `setTimeout` in `ui/src/app/upload/upload.component.ts`
+- [X] T019 [US2] Show distinct inline error messages: validation errors (wrong type/size from API) show the specific problem; network/server errors show a generic retry message — both rendered below the form without a page reload in `ui/src/app/upload/upload.component.ts`
+- [X] T020 [US2] Apply `--text-muted` colour and `opacity: 0.5` to the disabled button style to make the disabled state visually unmistakable in `ui/src/app/upload/upload.component.ts`
+
+**Checkpoint**: Upload form communicates every state clearly and prevents duplicate submission.
+
+---
+
+## Phase 5: User Story 3 — Detail Page Is Well Organised (Priority: P1)
+
+**Goal**: The detail view has a loading skeleton, a network error state with retry, a styled not-found card with back link, a grouped "Owner actions" panel for write controls, danger-styled tag errors, and a broken-image fallback.
+
+**Independent Test**: Throttle to Slow 3G and navigate to `/images/
`, and a "Back to library" `routerLink="/"` button in `ui/src/app/detail/detail.component.ts`
+- [X] T026 [US3] Wrap the tag-edit input and delete button in a visually distinct "Owner actions" `
` and implement `onImgError` with an inline SVG broken-link placeholder (guard against recursive fallback) in `ui/src/app/detail/detail.component.ts`
+
+**Checkpoint**: Detail page handles all states (loading, error, not-found, success) gracefully and clearly separates read from write content.
+
+---
+
+## Phase 6: User Story 4 — Login Page Matches the Design (Priority: P2)
+
+**Goal**: The login page uses the shared dark design system, displays field-level validation errors and server error messages in `--danger` colour without a page reload, shows a single server error below the form on bad credentials, and disables the button with "Signing in…" label while in-flight.
+
+**Independent Test**: Navigate to `/login` — confirm dark background, surface card, same font as library. Click Sign In with empty fields — confirm field-level errors without page reload. Enter wrong credentials — confirm single error message below form in danger colour; fields retain values. Throttle network and submit valid credentials — confirm button shows "Signing in…" and is disabled.
+
+### Tests for User Story 4 (TDD — write first, confirm failure before T031) ⚠️
+
+- [X] T029 [US4] Add component tests for field-level validation error display on empty submit, `errorMessage` server error paragraph visibility after failed login, "Signing in…" button label while `loading=true`, and fields-not-cleared behaviour in `ui/src/app/login/login.component.spec.ts`
+
+### Implementation for User Story 4
+
+- [X] T030 [P] [US4] Replace all hardcoded colour values with CSS token variables in the component styles block of `ui/src/app/login/login.component.ts`
+- [X] T031 [US4] Centre the login card vertically (`height: 100vh; display: flex; align-items: center; justify-content: center`) and wrap the form in a `--surface` card with `--radius` border-radius and a `1px solid var(--border)` border in `ui/src/app/login/login.component.ts`
+- [X] T032 [US4] Apply `color: var(--danger)` to field-level reactive-form validation error `` elements for both username and password fields, and to the `errorMessage` server error paragraph below the form in `ui/src/app/login/login.component.ts`
+- [X] T033 [US4] Change submit button label to "Signing in…" and add `disabled` attribute while `loading = true`; style the button with `--accent` background and `--accent-text` foreground matching other views in `ui/src/app/login/login.component.ts`
+
+**Checkpoint**: Login page is visually consistent with the rest of the app and communicates all form states.
+
+---
+
+## Phase 7: User Story 5 — App Shell Is Consistent (Priority: P2)
+
+**Goal**: Every page shares a 48 px fixed-height header with the app name on the left and the sign-out control on the right (when authenticated). The header uses `--surface` background and `--border` bottom border and does not reflow page content on auth state change.
+
+**Independent Test**: Log in and navigate between library, upload, and detail — confirm identical 48 px header on all pages. Log out — confirm sign-out control disappears but header height is unchanged. Visit library without logging in — confirm header is present but sign-out control absent.
+
+### Tests for User Story 5 (TDD — write first, confirm failure before T036) ⚠️
+
+- [X] T034 [US5] Add component tests for header 48 px height, sign-out button visibility when authenticated, sign-out button absence when unauthenticated, sign-out action redirecting to `/login`, and header height unchanged between auth states in `ui/src/app/app.component.spec.ts`
+
+### Implementation for User Story 5
+
+- [X] T035 [P] [US5] Replace all hardcoded colour values with CSS token variables in the component styles block of `ui/src/app/app.component.ts`
+- [X] T036 [US5] Style the header `
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Back to library
+
+
+
- {{ image.filename }}
-
+
+
-
-
-
@@ -34,49 +37,83 @@ import { TagService } from '../services/tag.service';
-
-
+
-
+
+
`,
styles: [`
.library { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
- .upload-btn { padding: 8px 20px; background: #4a9eff; color: #000; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
+ .upload-btn { padding: 8px 20px; background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.filter-bar { position: relative; margin-bottom: 24px; }
- .filter-bar input { width: 100%; padding: 10px; background: #1a1a1a; border: 1px solid #444; color: #e0e0e0; border-radius: 6px; }
+ .filter-bar input { width: 100%; padding: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); }
+ .filter-bar input:focus { outline: none; border-color: var(--border-focus); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
- .chip { background: #333; padding: 3px 10px; border-radius: 12px; font-size: 0.85rem; display: flex; align-items: center; gap: 4px; }
+ .chip { background: var(--surface-raised); padding: 3px 10px; border-radius: var(--radius-chip); font-size: 0.85rem; display: flex; align-items: center; gap: 4px; }
.chip.small { font-size: 0.75rem; padding: 2px 8px; }
- .chip button { background: none; border: none; color: #aaa; cursor: pointer; padding: 0; font-size: 1rem; }
- .suggestions { position: absolute; z-index: 10; background: #1a1a1a; border: 1px solid #444; list-style: none; width: 100%; max-height: 200px; overflow-y: auto; border-radius: 0 0 6px 6px; }
+ .chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 1rem; }
+ .suggestions { position: absolute; z-index: 10; background: var(--surface); border: 1px solid var(--border); list-style: none; width: 100%; max-height: 200px; overflow-y: auto; border-radius: 0 0 var(--radius) var(--radius); }
.suggestions li { padding: 8px 12px; cursor: pointer; }
- .suggestions li:hover { background: #2a2a2a; }
- .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
- .image-card { cursor: pointer; background: #1a1a1a; border-radius: 8px; overflow: hidden; }
+ .suggestions li:hover { background: var(--surface-raised); }
+ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
+ .image-card { cursor: pointer; background: var(--surface); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
+ .image-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.image-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
+ .card-skeleton { height: 200px; }
.tag-row { padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
- .empty-state { text-align: center; padding: 60px 0; color: #666; }
- .load-more { display: block; margin: 24px auto; padding: 10px 32px; background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; border-radius: 6px; cursor: pointer; }
+ .empty-state { text-align: center; padding: 60px 0; color: var(--text-muted); }
+ .empty-icon { display: block; font-size: 2rem; margin-bottom: 12px; }
+ .upload-link { display: inline-block; margin-top: 16px; color: var(--accent); text-decoration: none; font-weight: 600; }
+ .upload-link:hover { text-decoration: underline; }
+ .error-card { text-align: center; padding: 40px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); }
+ .error-card p { color: var(--text-muted); margin-bottom: 16px; }
+ .retry-btn { padding: 8px 24px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition); }
+ .retry-btn:hover { border-color: var(--border-focus); }
+ .load-more { display: block; margin: 24px auto; padding: 10px 32px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
`],
})
export class LibraryComponent implements OnInit {
@@ -84,8 +121,10 @@ export class LibraryComponent implements OnInit {
activeFilters: string[] = [];
tagSearch = '';
suggestions: { name: string; image_count: number }[] = [];
- loading = false;
+ showSpinner = false;
+ error = false;
hasMore = false;
+ readonly skeletonItems = Array(8).fill(null);
private offset = 0;
private readonly limit = 50;
private readonly filterChange$ = new Subject
+
+
+
+
+
+
+
-
+
-
+
{{ tag }}
-
`,
+ styles: [`
+ .login-page {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+ background: var(--bg);
+ }
+ .login-card {
+ width: 100%;
+ max-width: 400px;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ padding: 40px 32px;
+ }
+ h1 { margin-bottom: 28px; font-size: 1.5rem; }
+ .field { margin-bottom: 20px; }
+ label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-muted); }
+ input[type="text"], input[type="password"] {
+ width: 100%; padding: 10px 12px;
+ background: var(--bg); border: 1px solid var(--border);
+ color: var(--text); border-radius: var(--radius);
+ font-size: 1rem; transition: border-color var(--transition);
+ }
+ input:focus { outline: none; border-color: var(--border-focus); }
+ .validation-error { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--danger); }
+ .error-message { margin-bottom: 16px; color: var(--danger); font-size: 0.9rem; }
+ button[type="submit"] {
+ width: 100%; padding: 11px;
+ background: var(--accent); color: var(--accent-text);
+ border: none; border-radius: var(--radius);
+ font-size: 1rem; font-weight: 600; cursor: pointer;
+ transition: opacity var(--transition);
+ }
+ button[type="submit"]:disabled { opacity: 0.5; cursor: default; }
+ `],
})
export class LoginComponent {
form: FormGroup;
@@ -53,6 +93,7 @@ export class LoginComponent {
onSubmit(): void {
if (this.form.invalid) {
+ this.form.markAllAsTouched();
return;
}
this.loading = true;
diff --git a/ui/src/app/upload/upload.component.spec.ts b/ui/src/app/upload/upload.component.spec.ts
index 47d210d..374bf26 100644
--- a/ui/src/app/upload/upload.component.spec.ts
+++ b/ui/src/app/upload/upload.component.spec.ts
@@ -2,19 +2,12 @@ import { TestBed } from '@angular/core/testing';
import { provideRouter, Router } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { of, throwError } from 'rxjs';
import { UploadComponent } from './upload.component';
-import { ImageService } from '../services/image.service';
import { routes } from '../app.routes';
describe('UploadComponent', () => {
let component: UploadComponent;
- function makeImageService(overrides: PartialSign In
-
+
+
Sign In
+
+
@@ -15,45 +15,91 @@ import { ImageRecord, ImageService } from '../services/image.service';
`,
styles: [`
.upload-page { max-width: 600px; margin: 40px auto; padding: 0 16px; }
- .drop-zone { border: 2px dashed #555; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; }
- .drop-zone.drag-over { border-color: #fff; background: #1a1a1a; }
+ h1 { margin-bottom: 24px; }
+ .drop-zone {
+ border: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
+ border-radius: var(--radius);
+ padding: 48px;
+ text-align: center;
+ cursor: pointer;
+ color: var(--text-muted);
+ background: var(--surface);
+ transition: border-color var(--transition), background var(--transition);
+ }
+ .drop-zone.drag-over { border-color: var(--accent); background: var(--surface-raised); }
+ .drop-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.tag-input { margin: 16px 0; }
- label { display: block; margin-bottom: 4px; font-size: 0.9rem; color: #aaa; }
- input[type=text], input:not([type]) { width: 100%; padding: 8px; background: #1a1a1a; border: 1px solid #444; color: #e0e0e0; border-radius: 4px; }
+ label { display: block; margin-bottom: 4px; font-size: 0.9rem; color: var(--text-muted); }
+ input[type=text], input:not([type]) { width: 100%; padding: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); }
+ input:focus { outline: none; border-color: var(--border-focus); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
- .chip { background: #333; padding: 2px 10px; border-radius: 12px; font-size: 0.85rem; }
- button { padding: 10px 24px; background: #4a9eff; color: #000; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
- button:disabled { opacity: 0.5; cursor: default; }
- .toast { color: #4a9eff; margin-top: 12px; }
- .error { color: #ff6b6b; margin-top: 12px; }
+ .chip { background: var(--surface-raised); padding: 2px 10px; border-radius: var(--radius-chip); font-size: 0.85rem; }
+ button[type="submit"] {
+ display: flex; align-items: center; gap: 8px;
+ padding: 10px 24px; background: var(--accent); color: var(--accent-text);
+ border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600;
+ transition: opacity var(--transition);
+ }
+ button[type="submit"]:disabled { opacity: 0.5; cursor: default; color: var(--text-muted); }
+ @keyframes spin { to { transform: rotate(360deg); } }
+ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--accent-text); border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
+ .success-banner {
+ display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+ margin-top: 16px; padding: 12px 16px;
+ background: color-mix(in srgb, #2ecc71 12%, var(--surface));
+ border: 1px solid color-mix(in srgb, #2ecc71 30%, transparent);
+ border-radius: var(--radius); color: var(--text);
+ }
+ .success-icon { color: #2ecc71; font-size: 1.1rem; }
+ .banner-links { display: flex; gap: 12px; margin-left: auto; }
+ .link { color: var(--accent); cursor: pointer; text-decoration: none; font-size: 0.9rem; }
+ .link:hover { text-decoration: underline; }
+ .toast { color: var(--accent); margin-top: 12px; }
+ .error { color: var(--danger); margin-top: 12px; }
`],
})
export class UploadComponent {
@@ -63,6 +109,9 @@ export class UploadComponent {
toastMessage = '';
errorMessage = '';
isDragOver = false;
+ showSuccess = false;
+ uploadedFilename = '';
+ private dismissTimer: ReturnType
+
-
-
+
+
-
{{ tag }}