feat: bulk action progress — header pill + per-thumbnail states

- New bulkAction store: tracks active/label/detail state for the pill
  and a Map<uid, pending|done|error> for per-tile overlays
- Extract StatusPill.svelte from IndexerStatusPill (generic active/label/detail
  props); IndexerStatusPill becomes a one-line wrapper
- +layout.svelte: render a second StatusPill driven by bulkAction store,
  alongside the indexer pill in the AnimatedMule header
- BulkActionBar: extend withBusy with optional BulkConfig (ids/label/doneLabel);
  pending tiles dim + spinner on start, green checkmark flashes for 400ms before
  cache invalidation removes them; red overlay on error, auto-clears after 2s
- onApprove/batchEdit: wire onProgress callback to setDetail so the pill shows
  the filename currently being processed during fan-out keep operations
- batch.ts: add completedId as third arg to onProgress (backwards-compatible)
- PhotoTile: derive bulkState from store; pending/done/error overlays sit above
  the selection tint; hover-video guarded against pending tiles

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

web/src/lib/components/layout/IndexerStatusPill.svelte

@@ -1,49 +1,8 @@
-<!--
-	Compact status pill that appears in the header while PhotoPrism's
-	indexer is doing work. Driven by the indexer store, which subscribes
-	to PhotoPrism's WS channel. Renders nothing when idle so it never
-	steals header real estate from the user.
-
-	The `detail` (current path/file) is exposed via `title` rather than
-	rendered inline — the pill stays narrow even on slow flashes through
-	a deep library, and hover surfaces the detail for users who care.
--->
+<!-- PhotoPrism indexer status pill. Driven by the indexer store, which
+     subscribes to PhotoPrism's WS channel. Delegates rendering to StatusPill. -->
 <script lang="ts">
 	import { indexer } from '$lib/stores/indexer.svelte';
-	import { Loader2 } from 'lucide-svelte';
-
-	// PhotoPrism's `fileName` arrives as the full relative path
-	// (`subdir/IMG_0554.HEIC.jpg`). The basename is enough for inline
-	// recognition; the full path stays in the `title` for users who hover.
-	const basename = $derived.by(() => {
-		const d = indexer.detail;
-		if (!d) return '';
-		const i = d.lastIndexOf('/');
-		return i >= 0 ? d.slice(i + 1) : d;
-	});
+	import StatusPill from './StatusPill.svelte';
 </script>
 
-{#if indexer.active || indexer.label}
-	<div
-		class="flex items-center gap-1.5 rounded-full border border-border bg-background/80 px-2.5 py-1 text-xs text-foreground shadow-sm backdrop-blur"
-		title={indexer.detail ?? indexer.label}
-		role="status"
-		aria-live="polite"
-	>
-		{#if indexer.active}
-			<Loader2 class="h-3 w-3 animate-spin text-primary" />
-		{/if}
-		<span class="whitespace-nowrap">{indexer.label}</span>
-		{#if basename}
-			<!-- Fixed-width slot so the pill stops shrinking/growing as
-			     PhotoPrism rattles through files of different name lengths.
-			     `w-[24ch]` locks the column; `truncate` ellipsises anything
-			     longer. The full path remains in the parent's `title`. -->
-			<span
-				class="w-[24ch] truncate text-left font-mono text-[10px] text-muted-foreground"
-			>
-				{basename}
-			</span>
-		{/if}
-	</div>
-{/if}
+<StatusPill active={indexer.active} label={indexer.label} detail={indexer.detail} />