[Spec Kit] Implementation progress

Implements all 88 tasks for the Reaction Image Board (specs/001-reaction-image-board):

- docker-compose.yml: postgres, minio, minio-init, api, ui services with healthchecks
- api/: FastAPI app with SQLAlchemy 2.x async, Alembic migrations, S3/MinIO storage,
  full integration + unit test suite (pytest + pytest-asyncio)
- ui/: Angular 19 standalone app (Library, Upload, Detail, NotFound components)
- .env.example: all required environment variables
- .gitignore: Python, Node, Docker, IDE, .env patterns

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,82 @@
+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 { 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',
+  created_at: '2026-01-01T00:00:00Z',
+  tags: ['cat', 'funny'],
+};
+
+describe('DetailComponent', () => {
+  function setup(imageId = 'img-1') {
+    TestBed.configureTestingModule({
+      imports: [DetailComponent],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideRouter(routes),
+        { provide: ActivatedRoute, useValue: { snapshot: { paramMap: { get: () => imageId } } } },
+      ],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(DetailComponent);
+    const component = fixture.componentInstance;
+    const imgSvc = TestBed.inject(ImageService);
+    spyOn(imgSvc, 'get').and.returnValue(of(MOCK_IMAGE));
+    fixture.detectChanges();
+    return { fixture, component, imgSvc };
+  }
+
+  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'] }));
+    component.removeTag('cat');
+    expect(imgSvc.updateTags).toHaveBeenCalledWith('img-1', ['funny']);
+  });
+
+  it('should call PATCH with new tag included on addTag', () => {
+    const { component, imgSvc } = setup();
+    spyOn(imgSvc, 'updateTags').and.returnValue(of({ ...MOCK_IMAGE, tags: ['cat', 'funny', 'new'] }));
+    component.addTag('new');
+    expect(imgSvc.updateTags).toHaveBeenCalledWith('img-1', ['cat', 'funny', 'new']);
+  });
+
+  it('should call DELETE and navigate to library on confirm delete', () => {
+    const { component, imgSvc } = setup();
+    const router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    spyOn(imgSvc, 'delete').and.returnValue(of(undefined));
+    component.confirmDelete();
+    expect(imgSvc.delete).toHaveBeenCalledWith('img-1');
+    expect(router.navigate).toHaveBeenCalledWith(['/']);
+  });
+
+  it('should NOT call DELETE when cancel is clicked', () => {
+    const { component, imgSvc } = setup();
+    spyOn(imgSvc, 'delete').and.returnValue(of(undefined));
+    component.showDeleteDialog = true;
+    component.cancelDelete();
+    expect(imgSvc.delete).not.toHaveBeenCalled();
+    expect(component.showDeleteDialog).toBeFalse();
+  });
+
+  it('back button should navigate to library', () => {
+    const { component } = setup();
+    const router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    component.goBack();
+    expect(router.navigate).toHaveBeenCalledWith(['/']);
+  });
+});