refactor: simplify settings page layout

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>