Feat: Polish Angular UI with cohesive design system

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>

ui/src/app/library/library.component.spec.ts

@@ -1,12 +1,18 @@
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { of } from 'rxjs';
 import { LibraryComponent } from './library.component';
 import { ImageService } from '../services/image.service';
 import { routes } from '../app.routes';
 
+const EMPTY_PAGE = { items: [], total: 0, limit: 50, offset: 0 };
+const ONE_IMAGE = {
+  items: [{ id: '1', filename: 'a.jpg', tags: ['cat'], hash: '', mime_type: 'image/jpeg', size_bytes: 1, width: 1, height: 1, storage_key: '', thumbnail_key: null, created_at: '' }],
+  total: 1, limit: 50, offset: 0,
+};
+
 describe('LibraryComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -17,33 +23,88 @@ describe('LibraryComponent', () => {
 
   it('should render image grid from service response', () => {
     const fixture = TestBed.createComponent(LibraryComponent);
-    const component = fixture.componentInstance;
     const imgSvc = TestBed.inject(ImageService);
-    spyOn(imgSvc, 'list').and.returnValue(
-      of({
-        items: [
-          { id: '1', filename: 'a.jpg', tags: ['cat'], hash: '', mime_type: 'image/jpeg', size_bytes: 1, width: 1, height: 1, storage_key: '', thumbnail_key: null, created_at: '' },
-        ],
-        total: 1,
-        limit: 50,
-        offset: 0,
-      })
-    );
+    spyOn(imgSvc, 'list').and.returnValue(of(ONE_IMAGE));
     fixture.detectChanges();
-    const de = fixture.nativeElement as HTMLElement;
-    expect(de.querySelectorAll('.image-card').length).toBe(1);
+    expect((fixture.nativeElement as HTMLElement).querySelectorAll('.image-card').length).toBe(1);
   });
 
   it('should trigger new API call with tags param on filter change', () => {
     const fixture = TestBed.createComponent(LibraryComponent);
-    const component = fixture.componentInstance;
     const imgSvc = TestBed.inject(ImageService);
-    const listSpy = spyOn(imgSvc, 'list').and.returnValue(
-      of({ items: [], total: 0, limit: 50, offset: 0 })
-    );
+    const listSpy = spyOn(imgSvc, 'list').and.returnValue(of(EMPTY_PAGE));
     fixture.detectChanges();
-
-    component.applyFilter(['cat', 'funny']);
+    fixture.componentInstance.applyFilter(['cat', 'funny']);
     expect(listSpy).toHaveBeenCalledWith(['cat', 'funny'], jasmine.any(Number), jasmine.any(Number));
   });
+
+  it('showSpinner is false initially', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    const imgSvc = TestBed.inject(ImageService);
+    spyOn(imgSvc, 'list').and.returnValue(of(EMPTY_PAGE));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.showSpinner).toBeFalse();
+  });
+
+  it('renders 8 skeleton cards while showSpinner is true', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    fixture.componentInstance.showSpinner = true;
+    fixture.detectChanges();
+    const skeletons = (fixture.nativeElement as HTMLElement).querySelectorAll('.card-skeleton');
+    expect(skeletons.length).toBe(8);
+  });
+
+  it('error is false initially', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    const imgSvc = TestBed.inject(ImageService);
+    spyOn(imgSvc, 'list').and.returnValue(of(EMPTY_PAGE));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.error).toBeFalse();
+  });
+
+  it('shows error card when error is true', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    fixture.componentInstance.error = true;
+    fixture.detectChanges();
+    expect((fixture.nativeElement as HTMLElement).querySelector('.error-card')).not.toBeNull();
+  });
+
+  it('error card has retry button that calls load()', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    fixture.componentInstance.error = true;
+    fixture.detectChanges();
+    spyOn(fixture.componentInstance, 'load');
+    const retryBtn = (fixture.nativeElement as HTMLElement).querySelector('.error-card .retry-btn') as HTMLButtonElement;
+    expect(retryBtn).not.toBeNull();
+    retryBtn.click();
+    expect(fixture.componentInstance.load).toHaveBeenCalled();
+  });
+
+  it('empty state contains routerLink to /upload', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    const imgSvc = TestBed.inject(ImageService);
+    spyOn(imgSvc, 'list').and.returnValue(of(EMPTY_PAGE));
+    fixture.detectChanges();
+    const link = (fixture.nativeElement as HTMLElement).querySelector('.empty-state a[href="/upload"]');
+    expect(link).not.toBeNull();
+  });
+
+  it('onImgError sets src to placeholder SVG', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    const imgEl = document.createElement('img');
+    imgEl.src = 'http://example.com/image.jpg';
+    const event = { target: imgEl } as unknown as Event;
+    fixture.componentInstance.onImgError(event);
+    expect(imgEl.src).toContain('data:image/svg+xml');
+  });
+
+  it('onImgError does not recurse when src already contains placeholder', () => {
+    const fixture = TestBed.createComponent(LibraryComponent);
+    const imgEl = document.createElement('img');
+    imgEl.src = 'data:image/svg+xml,placeholder';
+    const originalSrc = imgEl.src;
+    const event = { target: imgEl } as unknown as Event;
+    fixture.componentInstance.onImgError(event);
+    expect(imgEl.src).toBe(originalSrc);
+  });
 });