web: unify empty + loading states behind EmptyState/InlineLoader

Replaces ad-hoc "Loading…" text and bare empty messages with two
shared feedback primitives that carry subtle lucide icons, consistent
muted-foreground/destructive tones, and a11y signaling (role=status,
aria-busy, role=alert on destructive empties). Loading copy gains
context ("Loading photos/folders/heaps/metadata…") and the right-
sidebar idle state moves from a "ⓘ" glyph to a MousePointerClick
icon. SkeletonGrid stays as the initial-grid loader.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/lib/components/duplicates/DuplicatesView.svelte

@@ -30,6 +30,8 @@
 	import type { DuplicateGroup } from '$lib/services/adapters/duplicates';
 	import StackGroupCard from './StackGroupCard.svelte';
 	import CrossFolderGroupCard from './CrossFolderGroupCard.svelte';
+	import { EmptyState, InlineLoader } from '$lib/components/feedback';
+	import { AlertCircle, CheckCircle2, Copy } from 'lucide-svelte';
 
 	type Tab = 'stacks' | 'cross-folder';
 
@@ -75,20 +77,24 @@
 {#if activeTab === 'stacks'}
 	<div role="tabpanel" aria-label="Stack duplicates" class="px-6 py-4 pb-6">
 		{#if pending}
-			<p class="text-sm text-muted-foreground">Loading stacks…</p>
+			<InlineLoader label="Loading stacks…" />
 		{:else if error}
-			<p class="text-sm text-destructive">
-				Could not load stacks: {error instanceof Error ? error.message : 'unknown error'}
-			</p>
+			<EmptyState
+				tone="destructive"
+				icon={AlertCircle}
+				title="Could not load stacks"
+				description={error instanceof Error ? error.message : 'unknown error'}
+			/>
 		{:else if groups.length === 0}
-			<div class="max-w-prose space-y-2 text-sm text-muted-foreground">
-				<p>No stacks.</p>
-				<p class="text-xs">
-					PhotoPrism stacks byte-identical (or EXIF-identical) files. If you don't have
-					any, this tab stays empty. Cross-folder copies PhotoPrism rejected at index
-					time live under the Cross-folder tab.
-				</p>
-			</div>
+			<EmptyState icon={Copy} title="No stacks">
+				{#snippet descriptionSnippet()}
+					<p>
+						PhotoPrism stacks byte-identical (or EXIF-identical) files. If you don't have
+						any, this tab stays empty. Cross-folder copies PhotoPrism rejected at index
+						time live under the Cross-folder tab.
+					</p>
+				{/snippet}
+			</EmptyState>
 		{:else}
 			<div class="space-y-3">
 				{#each groups as group, i (group.photo.UID)}
@@ -122,22 +128,26 @@
 		</header>
 
 		{#if crossQuery.isFetching && !crossQuery.data}
-			<p class="text-sm text-muted-foreground">Hashing files under originals…</p>
+			<InlineLoader label="Hashing files under originals…" />
 		{:else if crossQuery.isError}
-			<p class="text-sm text-destructive">
-				Scan failed: {crossQuery.error instanceof Error
+			<EmptyState
+				tone="destructive"
+				icon={AlertCircle}
+				title="Scan failed"
+				description={crossQuery.error instanceof Error
 					? crossQuery.error.message
 					: 'unknown error'}
-			</p>
+			/>
 		{:else if crossCount === 0}
-			<p class="text-sm text-muted-foreground">
-				No cross-folder duplicates found.
-				{#if crossQuery.data}
-					<span class="ml-1 text-[10px] text-muted-foreground/70">
-						(scanned in {crossQuery.data.scannedMs} ms)
-					</span>
-				{/if}
-			</p>
+			<EmptyState icon={CheckCircle2} title="No cross-folder duplicates found">
+				{#snippet descriptionSnippet()}
+					{#if crossQuery.data}
+						<p class="text-[10px] text-muted-foreground/70">
+							scanned in {crossQuery.data.scannedMs} ms
+						</p>
+					{/if}
+				{/snippet}
+			</EmptyState>
 		{:else}
 			<div class="space-y-3">
 				{#each crossQuery.data?.groups ?? [] as group, i (group.hash)}