Monorepo for Tangled
web/routes: add routes for each tab
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jul 17, 2026, 4:30 PM +0100)
34bf4c44
b8138b37
+79
-1
+6
web/src/routes/settings/+layout.server.ts
+6
web/src/routes/settings/+layout.server.ts
+52
web/src/routes/settings/+layout.svelte
+52
web/src/routes/settings/+layout.svelte
···
1
+
<script lang="ts">
2
+
import { page } from "$app/state";
3
+
import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
4
+
import User from "$icon/user";
5
+
import Key from "$icon/key";
6
+
import Mail from "$icon/mail";
7
+
import Bell from "$icon/bell";
8
+
import Volleyball from "$icon/volleyball";
9
+
import Spool from "$icon/spool";
10
+
import Globe from "$icon/globe";
11
+
12
+
let { children } = $props();
13
+
14
+
const tabs: TabDef[] = [
15
+
{ id: "profile", label: "Profile", href: "/settings", icon: User },
16
+
{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
17
+
{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
18
+
{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
19
+
{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
20
+
{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
21
+
{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
22
+
];
23
+
24
+
const tabSegment = $derived(page.url.pathname.replace(/^\/settings\/?/, "").split("/")[0]);
25
+
const active = $derived(
26
+
["keys", "emails", "notifications", "knots", "spindles", "sites"].includes(tabSegment)
27
+
? tabSegment
28
+
: "profile"
29
+
);
30
+
</script>
31
+
32
+
<svelte:head>
33
+
<title>Settings · Tangled</title>
34
+
</svelte:head>
35
+
36
+
<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
37
+
<div class="px-2 py-2">
38
+
<h1 class="text-xl font-bold text-foreground-default">Settings</h1>
39
+
</div>
40
+
41
+
<div class="mt-4 rounded border border-border-default bg-background-default p-6">
42
+
<div class="grid grid-cols-1 gap-6 md:grid-cols-4">
43
+
<div class="col-span-1">
44
+
<Tabs {tabs} {active} label="Settings" vertical />
45
+
</div>
46
+
47
+
<div class="col-span-1 flex flex-col gap-6 md:col-span-3">
48
+
{@render children()}
49
+
</div>
50
+
</div>
51
+
</div>
52
+
</div>
+5
web/src/routes/settings/+page.svelte
+5
web/src/routes/settings/+page.svelte
+1
-1
web/src/routes/repo/new/+page.svelte
+1
-1
web/src/routes/repo/new/+page.svelte
···
30
30
</p>
31
31
</div>
32
32
33
-
<div class="rounded border border-border-default bg-background-default bg-background-default p-6">
33
+
<div class="rounded border border-border-default bg-background-default p-6">
34
34
<form>
35
35
<div class="relative flex gap-4 border-l border-border-default pl-6">
36
36
<div class="absolute -top-0 -left-3">
+5
web/src/routes/settings/emails/+page.svelte
+5
web/src/routes/settings/emails/+page.svelte
+5
web/src/routes/settings/notifications/+page.svelte
+5
web/src/routes/settings/notifications/+page.svelte