Initial commit

frontend/src/routes/(root)/settings/+layout.svelte

@@ -0,0 +1,51 @@
+<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 = [
+		{
+			title: 'Account',
+			url: '/settings/account'
+		},
+		{
+			title: 'Libraries',
+			url: '/settings/libraries'
+		}
+	];
+</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>
+</div>

frontend/src/routes/(root)/settings/+page.ts

@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent }) {
+	const { libraries } = await parent();
+
+	// Immediately redirect to the account settings
+	redirect(303, `/settings/account`);
+}

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { logout } from '$lib/api';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { LogOut } from '@lucide/svelte';
+</script>
+
+<h1 class="text-lg font-semibold">Account Settings</h1>
+<p class="text-sm text-muted-foreground">Manage your account</p>
+
+<div class="mt-4 flex flex-col gap-2">
+	<Button
+		onclick={async () => {
+			await logout();
+			goto('/login');
+		}}
+		variant="outline"
+		class="w-32"
+	>
+		<LogOut />
+		Logout
+	</Button>
+</div>

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>