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

@@ -60,4 +60,48 @@ describe('LoginComponent', () => {
     tick();
     expect(authService.login).not.toHaveBeenCalled();
   }));
+
+  // New polish tests
+
+  it('submit button shows "Signing in…" and is disabled while loading', () => {
+    const fixture = TestBed.createComponent(LoginComponent);
+    const comp = fixture.componentInstance;
+    fixture.detectChanges();
+    comp.loading = true;
+    fixture.detectChanges();
+    const btn = (fixture.nativeElement as HTMLElement).querySelector('button[type="submit"]') as HTMLButtonElement;
+    expect(btn.textContent?.trim()).toContain('Signing in');
+    expect(btn.disabled).toBeTrue();
+  });
+
+  it('field-level validation error shown for empty username on touched', () => {
+    const fixture = TestBed.createComponent(LoginComponent);
+    const comp = fixture.componentInstance;
+    fixture.detectChanges();
+    comp.form.get('username')!.markAsTouched();
+    fixture.detectChanges();
+    const err = (fixture.nativeElement as HTMLElement).querySelector('.validation-error');
+    expect(err).not.toBeNull();
+  });
+
+  it('errorMessage paragraph is visible when errorMessage is set', fakeAsync(() => {
+    authService.login.and.returnValue(throwError(() => new HttpErrorResponse({ status: 401 })));
+    component.form.setValue({ username: 'owner', password: 'wrong' });
+    component.onSubmit();
+    tick();
+    const fixture = TestBed.createComponent(LoginComponent);
+    fixture.componentInstance.errorMessage = component.errorMessage;
+    fixture.detectChanges();
+    const errPara = (fixture.nativeElement as HTMLElement).querySelector('.error-message');
+    expect(errPara).not.toBeNull();
+  }));
+
+  it('fields retain their values after a failed login', fakeAsync(() => {
+    authService.login.and.returnValue(throwError(() => new HttpErrorResponse({ status: 401 })));
+    component.form.setValue({ username: 'owner', password: 'wrong' });
+    component.onSubmit();
+    tick();
+    expect(component.form.value.username).toBe('owner');
+    expect(component.form.value.password).toBe('wrong');
+  }));
 });