<!--
	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.
-->
<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;
	});
</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}
