Initial commit

frontend/src/routes/(root)/settings/libraries/+page.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import * as Table from '$lib/components/ui/table/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { getLibraryState } from '$lib/state/library.svelte';
+	import { EllipsisVertical, Plus } from '@lucide/svelte';
+	import Button from '$lib/components/ui/button/button.svelte';
+
+	const libraryState = getLibraryState();
+</script>
+
+<h1 class="text-lg font-semibold">Library Settings</h1>
+<p class="text-sm text-muted-foreground">Manage your libraries</p>
+
+<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>
+		<Table.Root>
+			<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.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>
+		</Table.Root>
+	</Card.Content>
+</Card.Root>