From ed8f81619e2c21d20490e31b015c02f26baf2108 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Mon, 3 Nov 2025 21:09:26 +1030
Subject: [PATCH] refactor(state): move empty state into reusable ui comp

---
 src/lib/client/ui/state/EmptyState.svelte | 40 +++++++++++++++++++++++
 src/routes/+layout.svelte                 |  2 +-
 src/routes/arr/[type]/+page.svelte        | 38 +++++----------------
 3 files changed, 50 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/client/ui/state/EmptyState.svelte

diff --git a/src/lib/client/ui/state/EmptyState.svelte b/src/lib/client/ui/state/EmptyState.svelte
new file mode 100644
index 0000000..249a48f
--- /dev/null
+++ b/src/lib/client/ui/state/EmptyState.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Plus } from 'lucide-svelte';
+
+	export let icon: any; // Lucide icon component
+	export let title: string;
+	export let description: string;
+	export let buttonText: string;
+	export let buttonHref: string;
+	export let buttonIcon: any = Plus; // Default to Plus icon
+</script>
+
+<div class="flex min-h-[calc(100vh-4rem)] items-center justify-center p-8">
+	<div class="w-full max-w-md text-center">
+		<!-- Icon -->
+		<div class="mb-6 flex justify-center">
+			<div class="rounded-full bg-neutral-100 p-6 dark:bg-neutral-800">
+				<svelte:component this={icon} class="h-12 w-12 text-neutral-400 dark:text-neutral-500" />
+			</div>
+		</div>
+
+		<!-- Title -->
+		<h1 class="mb-3 text-2xl font-bold text-neutral-900 dark:text-neutral-50">
+			{title}
+		</h1>
+
+		<!-- Description -->
+		<p class="mb-8 text-neutral-600 dark:text-neutral-400">
+			{description}
+		</p>
+
+		<!-- Action Button -->
+		<a
+			href={buttonHref}
+			class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+		>
+			<svelte:component this={buttonIcon} size={18} />
+			{buttonText}
+		</a>
+	</div>
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a40cbc6..b66beba 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import '../app.css';
-	import logo from '$assets/logo.svg';
+	import logo from '$assets/logo-firefox-circular-arrow.png';
 	import Navbar from '$ui/navigation/navbar/navbar.svelte';
 	import PageNav from '$ui/navigation/pageNav/pageNav.svelte';
 	import AlertContainer from '$alerts/AlertContainer.svelte';
diff --git a/src/routes/arr/[type]/+page.svelte b/src/routes/arr/[type]/+page.svelte
index 7d7577f..510f139 100644
--- a/src/routes/arr/[type]/+page.svelte
+++ b/src/routes/arr/[type]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import { Plus, Inbox } from 'lucide-svelte';
+	import EmptyState from '$ui/state/EmptyState.svelte';
 
 	export let data: PageData;
 
@@ -8,32 +9,11 @@
 	$: displayName = data.type ? data.type.charAt(0).toUpperCase() + data.type.slice(1) : '';
 </script>
 
-<div class="flex min-h-[calc(100vh-4rem)] items-center justify-center p-8">
-	<div class="w-full max-w-md text-center">
-		<!-- Icon -->
-		<div class="mb-6 flex justify-center">
-			<div class="rounded-full bg-neutral-100 p-6 dark:bg-neutral-800">
-				<Inbox class="h-12 w-12 text-neutral-400 dark:text-neutral-500" />
-			</div>
-		</div>
-
-		<!-- Title -->
-		<h1 class="mb-3 text-2xl font-bold text-neutral-900 dark:text-neutral-50">
-			No {displayName} instances yet
-		</h1>
-
-		<!-- Description -->
-		<p class="mb-8 text-neutral-600 dark:text-neutral-400">
-			Get started by adding your first {displayName} instance to begin managing your media library.
-		</p>
-
-		<!-- Action Button -->
-		<a
-			href="/arr/new?type={data.type}"
-			class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
-		>
-			<Plus size={18} />
-			Add {displayName} Instance
-		</a>
-	</div>
-</div>
+<EmptyState
+	icon={Inbox}
+	title="No {displayName} instances yet"
+	description="Get started by adding your first {displayName} instance to begin managing your media library."
+	buttonText="Add {displayName} Instance"
+	buttonHref="/arr/new?type={data.type}"
+	buttonIcon={Plus}
+/>