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/detail/detail.component.spec.ts

@@ -2,27 +2,19 @@ import { TestBed } from '@angular/core/testing';
 import { ActivatedRoute, provideRouter, Router } from '@angular/router';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { of } from 'rxjs';
+import { of, throwError, Subject } from 'rxjs';
 import { DetailComponent } from './detail.component';
 import { ImageService } from '../services/image.service';
 import { routes } from '../app.routes';
 
 const MOCK_IMAGE = {
-  id: 'img-1',
-  hash: 'abc',
-  filename: 'test.jpg',
-  mime_type: 'image/jpeg',
-  size_bytes: 100,
-  width: 10,
-  height: 10,
-  storage_key: 'abc',
-  thumbnail_key: null,
-  created_at: '2026-01-01T00:00:00Z',
-  tags: ['cat', 'funny'],
+  id: 'img-1', hash: 'abc', filename: 'test.jpg', mime_type: 'image/jpeg',
+  size_bytes: 100, width: 10, height: 10, storage_key: 'abc',
+  thumbnail_key: null, created_at: '2026-01-01T00:00:00Z', tags: ['cat', 'funny'],
 };
 
 describe('DetailComponent', () => {
-  function setup(imageId = 'img-1') {
+  function setup(imageId = 'img-1', imageResponse = of(MOCK_IMAGE)) {
     TestBed.configureTestingModule({
       imports: [DetailComponent],
       providers: [
@@ -33,13 +25,13 @@ describe('DetailComponent', () => {
       ],
     }).compileComponents();
     const fixture = TestBed.createComponent(DetailComponent);
-    const component = fixture.componentInstance;
     const imgSvc = TestBed.inject(ImageService);
-    spyOn(imgSvc, 'get').and.returnValue(of(MOCK_IMAGE));
+    spyOn(imgSvc, 'get').and.returnValue(imageResponse);
     fixture.detectChanges();
-    return { fixture, component, imgSvc };
+    return { fixture, component: fixture.componentInstance, imgSvc };
   }
 
+  // Existing tests preserved
   it('should call PATCH with removed tag absent when chip × is clicked', () => {
     const { component, imgSvc } = setup();
     spyOn(imgSvc, 'updateTags').and.returnValue(of({ ...MOCK_IMAGE, tags: ['funny'] }));
@@ -80,4 +72,74 @@ describe('DetailComponent', () => {
     component.goBack();
     expect(router.navigate).toHaveBeenCalledWith(['/']);
   });
+
+  // New polish tests
+
+  it('skeleton is visible while loading is true', () => {
+    TestBed.configureTestingModule({
+      imports: [DetailComponent],
+      providers: [
+        provideHttpClient(), provideHttpClientTesting(), provideRouter(routes),
+        { provide: ActivatedRoute, useValue: { snapshot: { paramMap: { get: () => 'img-1' } } } },
+      ],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(DetailComponent);
+    const imgSvc = TestBed.inject(ImageService);
+    // Don't emit — keep loading state
+    spyOn(imgSvc, 'get').and.returnValue(new Subject());
+    fixture.componentInstance.loading = true;
+    fixture.detectChanges();
+    expect((fixture.nativeElement as HTMLElement).querySelector('.image-skeleton')).not.toBeNull();
+  });
+
+  it('error card shown when error is true and loading is false', () => {
+    const fixture = (() => {
+      TestBed.configureTestingModule({
+        imports: [DetailComponent],
+        providers: [
+          provideHttpClient(), provideHttpClientTesting(), provideRouter(routes),
+          { provide: ActivatedRoute, useValue: { snapshot: { paramMap: { get: () => 'img-1' } } } },
+        ],
+      }).compileComponents();
+      return TestBed.createComponent(DetailComponent);
+    })();
+    const imgSvc = TestBed.inject(ImageService);
+    spyOn(imgSvc, 'get').and.returnValue(throwError(() => ({ status: 500 })));
+    fixture.detectChanges();
+    expect((fixture.nativeElement as HTMLElement).querySelector('.fetch-error-card')).not.toBeNull();
+  });
+
+  it('not-found card shown when image is null, loading is false, error is false', () => {
+    const { fixture, component } = setup('img-1', of(MOCK_IMAGE));
+    component.image = null;
+    component.loading = false;
+    component.error = false;
+    fixture.detectChanges();
+    expect((fixture.nativeElement as HTMLElement).querySelector('.not-found-card')).not.toBeNull();
+  });
+
+  it('tag error element uses danger styling class', () => {
+    const { fixture, component } = setup();
+    component.tagError = 'Invalid tag: special characters not allowed';
+    fixture.detectChanges();
+    const errEl = (fixture.nativeElement as HTMLElement).querySelector('.tag-error');
+    expect(errEl).not.toBeNull();
+  });
+
+  it('onImgError sets src to placeholder SVG', () => {
+    const { fixture } = setup();
+    const imgEl = document.createElement('img');
+    imgEl.src = 'http://example.com/image.jpg';
+    fixture.componentInstance.onImgError({ target: imgEl } as unknown as Event);
+    expect(imgEl.src).toContain('data:image/svg+xml');
+  });
+
+  it('onImgError does not recurse when src already is a data URI', () => {
+    const { fixture } = setup();
+    const imgEl = document.createElement('img');
+    imgEl.src = 'data:image/svg+xml,placeholder';
+    const before = imgEl.src;
+    fixture.componentInstance.onImgError({ target: imgEl } as unknown as Event);
+    expect(imgEl.src).toBe(before);
+  });
 });