From 10eaf8432996a9ee20ed56236fc0b3321751ccab Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Mon, 9 Mar 2026 14:19:59 -0400
Subject: [PATCH] refactor: simplify settings page layout

---
 .../src/routes/(root)/settings/+layout.svelte | 49 +++++++-----------
 .../(root)/settings/libraries/+page.svelte    | 50 +++++++++++--------
 2 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/frontend/src/routes/(root)/settings/+layout.svelte b/frontend/src/routes/(root)/settings/+layout.svelte
index 8fabbcc..8cc3f16 100644
--- a/frontend/src/routes/(root)/settings/+layout.svelte
+++ b/frontend/src/routes/(root)/settings/+layout.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import { page } from '$app/state';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
 	let { children } = $props();
 
 	const items = [
@@ -12,40 +10,29 @@
 		{
 			title: 'Libraries',
 			url: '/settings/libraries'
+		},
+		{
+			title: 'Devices',
+			url: '/settings/devices'
 		}
 	];
 </script>
 
 <div class="flex h-[calc(100vh-var(--header-height)-2rem)] flex-col">
 	<h1 class="text-xl font-bold">Settings</h1>
-	<Separator class="my-4" />
-	<div class="flex flex-1 gap-6 overflow-hidden">
-		<div class="flex gap-8">
-			<Sidebar.Provider class="shrink-0">
-				<Sidebar.Inset>
-					<Sidebar.Content>
-						<Sidebar.Group class="flex flex-col gap-1">
-							{#each items as item}
-								<Sidebar.MenuItem class="w-48">
-									<Sidebar.MenuButton
-										class="rounded hover:bg-muted {page.url.pathname.endsWith(item.url)
-											? 'bg-muted'
-											: ''}"
-									>
-										{#snippet child({ props })}
-											<a href={item.url} {...props}>
-												<span class="text-base">{item.title}</span>
-											</a>
-										{/snippet}
-									</Sidebar.MenuButton>
-								</Sidebar.MenuItem>
-							{/each}
-						</Sidebar.Group>
-					</Sidebar.Content>
-				</Sidebar.Inset>
-			</Sidebar.Provider>
-		</div>
-		<Separator orientation="vertical" class="self-stretch" />
-		<div class="mx-2 mt-2 flex-1 overflow-auto">{@render children()}</div>
+	<div class="mt-6 flex flex-1 gap-8 overflow-hidden">
+		<nav class="flex w-48 shrink-0 flex-col gap-1">
+			{#each items as item}
+				<a
+					href={item.url}
+					class="rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted {page.url.pathname.endsWith(item.url)
+						? 'bg-muted'
+						: 'text-muted-foreground'}"
+				>
+					{item.title}
+				</a>
+			{/each}
+		</nav>
+		<div class="flex-1 overflow-auto">{@render children()}</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/(root)/settings/libraries/+page.svelte b/frontend/src/routes/(root)/settings/libraries/+page.svelte
index f05c007..8607cdc 100644
--- a/frontend/src/routes/(root)/settings/libraries/+page.svelte
+++ b/frontend/src/routes/(root)/settings/libraries/+page.svelte
@@ -8,33 +8,39 @@
 	const libraryState = getLibraryState();
 </script>
 
-<h1 class="text-lg font-semibold">Library Settings</h1>
-<p class="text-sm text-muted-foreground">Manage your libraries</p>
+<div class="mb-4 flex items-center justify-between">
+	<div>
+		<h2 class="text-lg font-semibold">Libraries</h2>
+		<p class="text-sm text-muted-foreground">Manage your libraries</p>
+	</div>
+	<Button variant="outline" onclick={() => libraryState.openLibraryCreateDialog()}>
+		<Plus />
+		Add Library
+	</Button>
+</div>
 
-<Card.Root class="mt-6">
-	<Card.Content>
-		<Card.Header class="mb-2 flex items-center">
-			<Card.Title>Libraries</Card.Title>
-			<Button
-				variant="outline"
-				class="ml-auto"
-				onclick={() => libraryState.openLibraryCreateDialog()}
-			>
-				<Plus />
-				Add Library
-			</Button>
-		</Card.Header>
+<Card.Root>
+	<Card.Content class="p-0">
 		<Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head class="w-16 pl-4"></Table.Head>
+					<Table.Head>Name</Table.Head>
+					<Table.Head class="w-16"></Table.Head>
+				</Table.Row>
+			</Table.Header>
 			<Table.Body>
 				{#each libraryState.libraries as library}
-					<Table.Row class="h-16">
-						<Table.Cell class="w-16 text-center text-lg font-semibold">{library.name[0]}</Table.Cell
+					<Table.Row class="h-14">
+						<Table.Cell class="w-16 pl-4 text-center text-lg font-semibold"
+							>{library.name[0]}</Table.Cell
 						>
-						<Table.Cell class="font-medium"
-							><a href={`/library/${library.id}`} class="hover:underline">{library.name}</a
-							></Table.Cell
-						>
-						<Table.Cell class="w-16 text-center"><EllipsisVertical class="scale-75" /></Table.Cell>
+						<Table.Cell class="font-medium">
+							<a href={`/library/${library.id}`} class="hover:underline">{library.name}</a>
+						</Table.Cell>
+						<Table.Cell class="w-16 text-center">
+							<EllipsisVertical class="scale-75" />
+						</Table.Cell>
 					</Table.Row>
 				{/each}
 			</Table.Body>