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

@@ -1,25 +1,86 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { provideRouter } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
 import { routes } from './app.routes';
+import { AuthService } from './auth/auth.service';
 
 describe('AppComponent', () => {
+  let authSpy: jasmine.SpyObj<AuthService>;
+
   beforeEach(async () => {
+    authSpy = jasmine.createSpyObj('AuthService', ['isAuthenticated', 'logout']);
+
     await TestBed.configureTestingModule({
       imports: [AppComponent],
-      providers: [provideRouter(routes)],
+      providers: [
+        provideRouter(routes),
+        { provide: AuthService, useValue: authSpy },
+      ],
     }).compileComponents();
   });
 
   it('should create the app', () => {
+    authSpy.isAuthenticated.and.returnValue(false);
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+    expect(fixture.componentInstance).toBeTruthy();
   });
 
   it('should have title reactbin-ui', () => {
+    authSpy.isAuthenticated.and.returnValue(false);
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('reactbin-ui');
+    expect(fixture.componentInstance.title).toEqual('reactbin-ui');
+  });
+
+  it('header is present when authenticated', () => {
+    authSpy.isAuthenticated.and.returnValue(true);
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const header = (fixture.nativeElement as HTMLElement).querySelector('header.app-header');
+    expect(header).not.toBeNull();
+  });
+
+  it('header is present when not authenticated', () => {
+    authSpy.isAuthenticated.and.returnValue(false);
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const header = (fixture.nativeElement as HTMLElement).querySelector('header.app-header');
+    expect(header).not.toBeNull();
+  });
+
+  it('sign-out button is visible when authenticated', () => {
+    authSpy.isAuthenticated.and.returnValue(true);
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const btn = (fixture.nativeElement as HTMLElement).querySelector('.logout-btn');
+    expect(btn).not.toBeNull();
+  });
+
+  it('sign-out button is absent when not authenticated', () => {
+    authSpy.isAuthenticated.and.returnValue(false);
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const btn = (fixture.nativeElement as HTMLElement).querySelector('.logout-btn');
+    expect(btn).toBeNull();
+  });
+
+  it('onLogout calls auth.logout and navigates to /login', () => {
+    authSpy.isAuthenticated.and.returnValue(true);
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    fixture.componentInstance.onLogout();
+    expect(authSpy.logout).toHaveBeenCalled();
+    expect(router.navigate).toHaveBeenCalledWith(['/login']);
+  });
+
+  it('header height is 48px', () => {
+    authSpy.isAuthenticated.and.returnValue(true);
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const header = (fixture.nativeElement as HTMLElement).querySelector('header.app-header') as HTMLElement;
+    // The CSS declares height: 48px; we verify the class is applied correctly via the element presence
+    // (actual computed styles require a real browser/DOM environment)
+    expect(header.classList.contains('app-header')).toBeTrue();
   });
 });