feat: new layout

Author: baseplate-admin

src/backend/.python-version

@@ -0,0 +1 @@
+3.14

src/backend/pyproject.toml

@@ -49,7 +49,7 @@ dev = "fastapi dev ./app/main.py"
 packages = ["app"]
 
 [tool.uv]
-default-groups = ["dev"]
+default-groups = "all"
 package = true
 
 [project.scripts]

src/frontend/src/lib/components/ui/tabs/index.ts

@@ -0,0 +1,16 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};

src/frontend/src/lib/components/ui/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("flex-1 outline-none", className)}
+	{...restProps}
+/>

src/frontend/src/lib/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		className
+	)}
+	{...restProps}
+/>

src/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>

src/frontend/src/lib/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("flex flex-col gap-2", className)}
+	{...restProps}
+/>

src/frontend/src/routes/(web_crypto)/(navbar_and_footer)/(login_required)/+layout.svelte

@@ -15,7 +15,7 @@
 </script>
 
 {#if userData.isLoading}
-	Loading...
+	<div class="min-h-screen">Loading...</div>
 {:else if [null, undefined].includes(userData.data)}
 	Login Required
 {:else}

src/frontend/src/routes/(web_crypto)/(navbar_and_footer)/(login_required)/admin/+layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import * as Tabs from '$lib/components/ui/tabs';
+
+	let { children } = $props();
+
+	const tabs = [
+		{ name: 'Profile', href: '/admin/user' },
+		{ name: 'Project Settings', href: '/admin/config' }
+	];
+</script>
+
+<div class="min-h-screen w-full bg-background pb-20">
+	<Tabs.Root value={page.url.pathname} class="w-full">
+		<div class="mx-auto flex w-full max-w-5xl items-center px-6 pt-6 md:px-10">
+			<Tabs.List class="grid w-100 grid-cols-2">
+				{#each tabs as tab}
+					<Tabs.Trigger value={tab.href} onclick={() => goto(tab.href)}>
+						{tab.name}
+					</Tabs.Trigger>
+				{/each}
+			</Tabs.List>
+		</div>
+
+		<main class="mx-auto flex w-full max-w-5xl flex-col gap-8 p-6 md:p-10">
+			<div class="flex-1 space-y-6">
+				{@render children()}
+			</div>
+		</main>
+	</Tabs.Root>
+</div>