chore(style): frontend formatting

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"
 	},

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;
 		}
 	}
 }

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>

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">

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>

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>

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

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>

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}>

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>

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,

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>

src/routes/+layout.svelte

@@ -13,6 +13,6 @@
 <Navbar />
 <PageNav />
 
-<main class="pl-72 pt-16">
+<main class="pt-16 pl-72">
 	<slot />
 </main>