Feat: Add tag browser page at /tags with count-sorted tag list and library deep-link

- Extends GET /api/v1/tags with sort=count_desc and min_count query params
- New TagsComponent at /tags (public, no auth guard) shows all tags sorted by image count
- Clicking a tag navigates to /?tags=<name> for a pre-filtered library view
- LibraryComponent reads ?tags= query param on init to support deep-linking from tag browser
- Library header gains a "Browse tags" link to /tags for discoverability
- All 15 TDD tasks complete; ruff, ng lint, and ng build clean

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

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

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
+import { provideRouter, ActivatedRoute } from '@angular/router';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { of } from 'rxjs';
@@ -7,6 +7,16 @@ import { LibraryComponent } from './library.component';
 import { ImageService } from '../services/image.service';
 import { routes } from '../app.routes';
 
+function makeActivatedRoute(queryParams: Record<string, string> = {}) {
+  return {
+    snapshot: {
+      queryParamMap: {
+        get: (key: string) => queryParams[key] ?? null,
+      },
+    },
+  };
+}
+
 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: '' }],
@@ -107,4 +117,32 @@ describe('LibraryComponent', () => {
     fixture.componentInstance.onImgError(event);
     expect(imgEl.src).toBe(originalSrc);
   });
+
+  it('pre-populates activeFilters from ?tags= query param on init', () => {
+    TestBed.overrideProvider(ActivatedRoute, { useValue: makeActivatedRoute({ tags: 'cat,funny' }) });
+    const fixture = TestBed.createComponent(LibraryComponent);
+    const imgSvc = TestBed.inject(ImageService);
+    const listSpy = spyOn(imgSvc, 'list').and.returnValue(of(EMPTY_PAGE));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.activeFilters).toEqual(['cat', 'funny']);
+    expect(listSpy).toHaveBeenCalledWith(['cat', 'funny'], jasmine.any(Number), jasmine.any(Number));
+  });
+
+  it('does not set activeFilters when no ?tags= param present', () => {
+    TestBed.overrideProvider(ActivatedRoute, { useValue: makeActivatedRoute() });
+    const fixture = TestBed.createComponent(LibraryComponent);
+    const imgSvc = TestBed.inject(ImageService);
+    spyOn(imgSvc, 'list').and.returnValue(of(EMPTY_PAGE));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.activeFilters).toEqual([]);
+  });
+
+  it('header contains a link to /tags', () => {
+    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('a[href="/tags"]');
+    expect(link).not.toBeNull();
+  });
 });

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

@@ -5,7 +5,7 @@ import {
   ChangeDetectorRef,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Router, RouterLink } from '@angular/router';
+import { Router, RouterLink, ActivatedRoute } from '@angular/router';
 import { Subject, debounceTime, distinctUntilChanged, share, timer } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ImageRecord, ImageService } from '../services/image.service';
@@ -22,7 +22,10 @@ const PLACEHOLDER_SVG = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/s
     <div class="library">
       <header>
         <h1>Reactbin</h1>
-        <button class="upload-btn" (click)="router.navigate(['/upload'])">Upload</button>
+        <div class="header-actions">
+          <a routerLink="/tags" class="tags-link">Browse tags</a>
+          <button class="upload-btn" (click)="router.navigate(['/upload'])">Upload</button>
+        </div>
       </header>
 
       <div class="filter-bar">
@@ -88,6 +91,9 @@ const PLACEHOLDER_SVG = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/s
   styles: [`
     .library { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
     header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+    .header-actions { display: flex; align-items: center; gap: 12px; }
+    .tags-link { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color var(--transition); }
+    .tags-link:hover { color: var(--text); }
     .upload-btn { padding: 8px 20px; background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; }
     .filter-bar { position: relative; margin-bottom: 24px; }
     .filter-bar input { width: 100%; padding: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); }
@@ -134,9 +140,14 @@ export class LibraryComponent implements OnInit {
     private tagService: TagService,
     public router: Router,
     private cdr: ChangeDetectorRef,
+    private route: ActivatedRoute,
   ) {}
 
   ngOnInit(): void {
+    const tagsParam = this.route.snapshot.queryParamMap.get('tags');
+    if (tagsParam) {
+      this.activeFilters = tagsParam.split(',').map((t) => t.trim()).filter((t) => t.length > 0);
+    }
     this.load();
     this.filterChange$.pipe(debounceTime(300), distinctUntilChanged()).subscribe((q) => {
       if (q) {