From 24e5571a66cd6f6be5b25ca7e234261ca1346598 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sun, 19 Oct 2025 22:56:05 +1030
Subject: [PATCH] chore(style): frontend formatting

---
 package.json                                         |  1 +
 src/app.css                                          |  7 ++++---
 src/app.html                                         |  5 +++--
 src/components/navigation/navbar/navbar.svelte       |  4 +++-
 src/components/navigation/navbar/themeToggle.svelte  |  8 ++++----
 src/components/navigation/pageNav/group.svelte       |  2 +-
 src/components/navigation/pageNav/groupHeader.svelte | 10 ++++++++--
 src/components/navigation/pageNav/groupItem.svelte   |  4 +++-
 src/components/navigation/pageNav/pageNav.svelte     |  2 +-
 src/components/navigation/pageNav/version.svelte     |  6 ++++--
 src/deno.d.ts                                        |  5 +----
 src/routes/+error.svelte                             | 10 ++++------
 src/routes/+layout.svelte                            |  2 +-
 13 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 5e51d33..e1c0c6a 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
 	"version": "2.0.0",
 	"type": "module",
 	"dependencies": {
+		"@jsr/db__sqlite": "^0.12.0",
 		"lucide-svelte": "^0.546.0",
 		"sveltekit-adapter-deno": "^0.16.1"
 	},
diff --git a/src/app.css b/src/app.css
index 9d2ff0a..177d328 100644
--- a/src/app.css
+++ b/src/app.css
@@ -33,9 +33,10 @@
 		}
 
 		* {
-			transition: background-color 0.3s ease-in-out,
-			            border-color 0.3s ease-in-out,
-			            color 0.3s ease-in-out;
+			transition:
+				background-color 0.3s ease-in-out,
+				border-color 0.3s ease-in-out,
+				color 0.3s ease-in-out;
 		}
 	}
 }
diff --git a/src/app.html b/src/app.html
index 859efd4..715b994 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,9 +5,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<!-- Prevent theme flash by setting theme immediately -->
 		<script>
-			(function() {
+			(function () {
 				const stored = localStorage.getItem('theme');
-				const theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+				const theme =
+					stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
 				document.documentElement.classList.add(theme);
 			})();
 		</script>
diff --git a/src/components/navigation/navbar/navbar.svelte b/src/components/navigation/navbar/navbar.svelte
index a07dd8e..2c249e9 100644
--- a/src/components/navigation/navbar/navbar.svelte
+++ b/src/components/navigation/navbar/navbar.svelte
@@ -3,7 +3,9 @@
 	import logo from '$static/logo.svg';
 </script>
 
-<nav class="fixed left-0 right-0 top-0 z-50 border-b border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900">
+<nav
+	class="fixed top-0 right-0 left-0 z-50 border-b border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900"
+>
 	<div class="flex items-center justify-between px-4 py-4">
 		<!-- Left: Brand name with logo -->
 		<div class="flex items-center gap-2">
diff --git a/src/components/navigation/navbar/themeToggle.svelte b/src/components/navigation/navbar/themeToggle.svelte
index 47dfa96..b6d8a34 100644
--- a/src/components/navigation/navbar/themeToggle.svelte
+++ b/src/components/navigation/navbar/themeToggle.svelte
@@ -13,8 +13,8 @@
 	<!-- Sun icon (visible in dark mode) -->
 	<div
 		class="absolute transition-all duration-300 {isDark
-			? 'rotate-0 scale-100 opacity-100'
-			: 'rotate-180 scale-75 opacity-0'}"
+			? 'scale-100 rotate-0 opacity-100'
+			: 'scale-75 rotate-180 opacity-0'}"
 	>
 		<Sun class="h-[18px] w-[18px] text-neutral-700 dark:text-neutral-300" />
 	</div>
@@ -22,8 +22,8 @@
 	<!-- Moon icon (visible in light mode) -->
 	<div
 		class="absolute transition-all duration-300 {isDark
-			? '-rotate-180 scale-75 opacity-0'
-			: 'rotate-0 scale-100 opacity-100'}"
+			? 'scale-75 -rotate-180 opacity-0'
+			: 'scale-100 rotate-0 opacity-100'}"
 	>
 		<Moon class="h-[18px] w-[18px] text-neutral-700 dark:text-neutral-300" />
 	</div>
diff --git a/src/components/navigation/pageNav/group.svelte b/src/components/navigation/pageNav/group.svelte
index d3cc120..cf801a5 100644
--- a/src/components/navigation/pageNav/group.svelte
+++ b/src/components/navigation/pageNav/group.svelte
@@ -30,7 +30,7 @@
 			</div>
 
 			<!-- Column 2: Items -->
-			<div class="flex flex-col gap-1 -ml-3">
+			<div class="-ml-3 flex flex-col gap-1">
 				{@render children()}
 			</div>
 		</div>
diff --git a/src/components/navigation/pageNav/groupHeader.svelte b/src/components/navigation/pageNav/groupHeader.svelte
index 0307597..6f1ea8e 100644
--- a/src/components/navigation/pageNav/groupHeader.svelte
+++ b/src/components/navigation/pageNav/groupHeader.svelte
@@ -18,7 +18,11 @@
 	<!-- Main navigation button (left side) - rounded left, square right (or fully rounded if no items) -->
 	<a
 		{href}
-		class="flex flex-1 items-center gap-2 py-1.5 pl-3 pr-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-200 group-hover/header:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:group-hover/header:bg-neutral-800 {hasItems ? 'rounded-l-lg' : 'rounded-lg'} {isActive ? 'bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700' : ''}"
+		class="flex flex-1 items-center gap-2 py-1.5 pr-2 pl-3 text-sm font-semibold text-neutral-700 transition-colors group-hover/header:bg-neutral-200 hover:bg-neutral-200 dark:text-neutral-300 dark:group-hover/header:bg-neutral-800 dark:hover:bg-neutral-800 {hasItems
+			? 'rounded-l-lg'
+			: 'rounded-lg'} {isActive
+			? 'bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700'
+			: ''}"
 	>
 		{label}
 	</a>
@@ -27,7 +31,9 @@
 	{#if hasItems}
 		<button
 			onclick={onToggle}
-			class="flex items-center self-stretch rounded-r-lg pl-1.5 pr-1.5 transition-colors group-hover/header:bg-neutral-200 hover:!bg-neutral-300 dark:group-hover/header:bg-neutral-800 dark:hover:!bg-neutral-700 {isActive ? 'bg-neutral-200 hover:!bg-neutral-300 dark:bg-neutral-800 dark:hover:!bg-neutral-700' : ''}"
+			class="flex items-center self-stretch rounded-r-lg pr-1.5 pl-1.5 transition-colors group-hover/header:bg-neutral-200 hover:!bg-neutral-300 dark:group-hover/header:bg-neutral-800 dark:hover:!bg-neutral-700 {isActive
+				? 'bg-neutral-200 hover:!bg-neutral-300 dark:bg-neutral-800 dark:hover:!bg-neutral-700'
+				: ''}"
 			aria-label={isOpen ? 'Collapse group' : 'Expand group'}
 		>
 			<svg
diff --git a/src/components/navigation/pageNav/groupItem.svelte b/src/components/navigation/pageNav/groupItem.svelte
index 6582c94..989a5b7 100644
--- a/src/components/navigation/pageNav/groupItem.svelte
+++ b/src/components/navigation/pageNav/groupItem.svelte
@@ -13,7 +13,9 @@
 
 <a
 	{href}
-	class="block rounded-lg py-1.5 pl-3 pr-2 text-sm font-semibold text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100 {isActive ? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''}"
+	class="block rounded-lg py-1.5 pr-2 pl-3 text-sm font-semibold text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100 {isActive
+		? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
+		: ''}"
 >
 	{label}
 </a>
diff --git a/src/components/navigation/pageNav/pageNav.svelte b/src/components/navigation/pageNav/pageNav.svelte
index 06aab20..bdc8938 100644
--- a/src/components/navigation/pageNav/pageNav.svelte
+++ b/src/components/navigation/pageNav/pageNav.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <nav
-	class="fixed left-0 top-16 flex h-[calc(100vh-4rem)] w-72 flex-col border-r border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900"
+	class="fixed top-16 left-0 flex h-[calc(100vh-4rem)] w-72 flex-col border-r border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900"
 >
 	<div class="flex-1 overflow-y-auto p-4">
 		<Group label="🏠 Home" href="/" hasItems={true}>
diff --git a/src/components/navigation/pageNav/version.svelte b/src/components/navigation/pageNav/version.svelte
index bbe2423..fde5de3 100644
--- a/src/components/navigation/pageNav/version.svelte
+++ b/src/components/navigation/pageNav/version.svelte
@@ -7,7 +7,7 @@
 
 <div class="p-4">
 	<div
-		class="flex items-center gap-2.5 rounded-lg border border-neutral-300 px-3 py-2 dark:border-neutral-700 "
+		class="flex items-center gap-2.5 rounded-lg border border-neutral-300 px-3 py-2 dark:border-neutral-700"
 	>
 		<div
 			class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-neutral-200 dark:bg-neutral-700"
@@ -16,7 +16,9 @@
 		</div>
 
 		<div class="flex-1">
-			<div class="font-mono text-xs font-semibold text-neutral-900 dark:text-neutral-50">profilarr</div>
+			<div class="font-mono text-xs font-semibold text-neutral-900 dark:text-neutral-50">
+				profilarr
+			</div>
 			<div class="font-mono text-[10px] text-neutral-600 dark:text-neutral-400">
 				{buildLabel} · v{VERSION}
 			</div>
diff --git a/src/deno.d.ts b/src/deno.d.ts
index aa03b52..01d41d6 100644
--- a/src/deno.d.ts
+++ b/src/deno.d.ts
@@ -7,10 +7,7 @@ declare namespace Deno {
 		get(key: string): string | undefined;
 	};
 
-	export function mkdir(
-		path: string,
-		options?: { recursive?: boolean }
-	): Promise<void>;
+	export function mkdir(path: string, options?: { recursive?: boolean }): Promise<void>;
 
 	export function writeTextFile(
 		path: string,
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index e2a0016..218bb09 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -6,7 +6,9 @@
 	$: errorMessage = $page.error?.message || 'An unexpected error occurred';
 </script>
 
-<div class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-neutral-50 px-4 dark:bg-neutral-900">
+<div
+	class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-neutral-50 px-4 dark:bg-neutral-900"
+>
 	<div class="flex max-w-6xl items-center gap-12">
 		<!-- Left column: Error info and button -->
 		<div class="flex-1">
@@ -29,11 +31,7 @@
 		<!-- Right column: 404 gif -->
 		{#if statusCode === 404}
 			<div class="flex-1">
-				<img
-					src={gif404}
-					alt="404 Not Found"
-					class="h-auto w-full rounded-lg"
-				/>
+				<img src={gif404} alt="404 Not Found" class="h-auto w-full rounded-lg" />
 			</div>
 		{/if}
 	</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c81af91..9c6db4e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,6 +13,6 @@
 <Navbar />
 <PageNav />
 
-<main class="pl-72 pt-16">
+<main class="pt-16 pl-72">
 	<slot />
 </main>