park

src/lib/supporter/SupporterBadge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import * as m from '$lib/paraglide/messages';
+
+	import SupporterIcon from './SupporterIcon.svelte';
+	import UnlockDialog from './UnlockDialog.svelte';
+	import { isSupporter, refreshSupporter } from './store';
+
+	let open = $state(false);
+
+	// Verify once on load so the badge reflects real status site-wide.
+	onMount(refreshSupporter);
+</script>
+
+<button
+	type="button"
+	class="flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-semibold transition-colors {$isSupporter
+		? 'border-amber-400/50 bg-amber-400/10 text-amber-700 hover:bg-amber-400/20 dark:text-amber-300'
+		: 'border-border/70 text-muted-foreground hover:bg-muted hover:text-foreground'}"
+	onclick={() => (open = true)}
+	title={$isSupporter ? m.supporter_active() : m.supporter_support()}
+	aria-label={$isSupporter ? m.supporter_active() : m.supporter_support()}
+>
+	<SupporterIcon filled={$isSupporter} />
+	<span class="hidden sm:inline">{m.supporter_badge()}</span>
+</button>
+
+<UnlockDialog bind:open />