From f63d42304d750048c8b8c7d6c3312654023f06dc Mon Sep 17 00:00:00 2001
From: SquidSpirit <squid@squidspirit.com>
Date: Mon, 13 Oct 2025 19:43:48 +0800
Subject: [PATCH] feat: implement dashboard layout with navigation and routing;
 add button component for dashboard links

---
 frontend/src/app.css                          |  4 +
 .../components/ui/button/button.svelte        | 82 +++++++++++++++++++
 .../framework/components/ui/button/index.ts   | 17 ++++
 .../framework/ui/DashboardLinkButton.svelte   | 20 +++++
 .../framework/ui/DashboardNavbar.svelte       | 15 ++++
 .../dashboard/framework/ui/dashboardLink.ts   |  4 +
 frontend/src/routes/dashboard/+layout.svelte  | 12 ++-
 frontend/src/routes/dashboard/+page.server.ts | 10 +++
 frontend/src/routes/dashboard/+page.svelte    |  1 -
 .../src/routes/dashboard/image/+page.svelte   |  1 +
 .../src/routes/dashboard/post/+page.svelte    |  1 +
 11 files changed, 165 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/common/framework/components/ui/button/button.svelte
 create mode 100644 frontend/src/lib/common/framework/components/ui/button/index.ts
 create mode 100644 frontend/src/lib/dashboard/framework/ui/DashboardLinkButton.svelte
 create mode 100644 frontend/src/lib/dashboard/framework/ui/DashboardNavbar.svelte
 create mode 100644 frontend/src/lib/dashboard/framework/ui/dashboardLink.ts
 create mode 100644 frontend/src/routes/dashboard/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/image/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/post/+page.svelte

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 6709bec..de683ad 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -149,6 +149,10 @@ body {
 	@apply bg-white font-sans text-base font-normal text-gray-700;
 }
 
+button {
+	@apply cursor-pointer;
+}
+
 .container {
 	@apply mx-auto max-w-screen-xl px-4 md:px-6;
 }
diff --git a/frontend/src/lib/common/framework/components/ui/button/button.svelte b/frontend/src/lib/common/framework/components/ui/button/button.svelte
new file mode 100644
index 0000000..92f6f84
--- /dev/null
+++ b/frontend/src/lib/common/framework/components/ui/button/button.svelte
@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/common/framework/components/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+				outline:
+					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/frontend/src/lib/common/framework/components/ui/button/index.ts b/frontend/src/lib/common/framework/components/ui/button/index.ts
new file mode 100644
index 0000000..fb585d7
--- /dev/null
+++ b/frontend/src/lib/common/framework/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
diff --git a/frontend/src/lib/dashboard/framework/ui/DashboardLinkButton.svelte b/frontend/src/lib/dashboard/framework/ui/DashboardLinkButton.svelte
new file mode 100644
index 0000000..819b2ce
--- /dev/null
+++ b/frontend/src/lib/dashboard/framework/ui/DashboardLinkButton.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Button } from '$lib/common/framework/components/ui/button/index';
+	import type { DashboardLink } from '$lib/dashboard/framework/ui/dashboardLink';
+
+	const { link }: { link: DashboardLink } = $props();
+
+	const isSelected = $derived.by(() => {
+		const pathname = page.url.pathname;
+		return pathname === link.href || pathname.startsWith(link.href + '/');
+	});
+</script>
+
+<a href={link.href}>
+	<Button variant={isSelected ? 'outline' : 'ghost'} class="w-full">
+		<span class="w-full text-left">
+			{link.label}
+		</span>
+	</Button>
+</a>
diff --git a/frontend/src/lib/dashboard/framework/ui/DashboardNavbar.svelte b/frontend/src/lib/dashboard/framework/ui/DashboardNavbar.svelte
new file mode 100644
index 0000000..a34a8a9
--- /dev/null
+++ b/frontend/src/lib/dashboard/framework/ui/DashboardNavbar.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { DashboardLink } from '$lib/dashboard/framework/ui/dashboardLink';
+	import DashboardLinkButton from '$lib/dashboard/framework/ui/DashboardLinkButton.svelte';
+
+	const { links }: { links: DashboardLink[] } = $props();
+</script>
+
+<div class="border-true-gray-300 w-3xs border-e p-8">
+	<div class="mb-3 font-bold">Dashboard</div>
+	<div class="flex flex-col">
+		{#each links as link (link.href)}
+			<DashboardLinkButton {link} />
+		{/each}
+	</div>
+</div>
diff --git a/frontend/src/lib/dashboard/framework/ui/dashboardLink.ts b/frontend/src/lib/dashboard/framework/ui/dashboardLink.ts
new file mode 100644
index 0000000..33ad8da
--- /dev/null
+++ b/frontend/src/lib/dashboard/framework/ui/dashboardLink.ts
@@ -0,0 +1,4 @@
+export interface DashboardLink {
+	label: string;
+	href: string;
+}
diff --git a/frontend/src/routes/dashboard/+layout.svelte b/frontend/src/routes/dashboard/+layout.svelte
index 5c2313c..7fe5833 100644
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@@ -9,6 +9,8 @@
 	import type { LayoutProps } from './$types';
 	import { StatusType } from '$lib/common/adapter/presenter/asyncState';
 	import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
+	import DashboardNavbar from '$lib/dashboard/framework/ui/DashboardNavbar.svelte';
+	import type { DashboardLink } from '$lib/dashboard/framework/ui/dashboardLink';
 
 	const { children }: LayoutProps = $props();
 
@@ -34,6 +36,11 @@
 		}
 		return false;
 	});
+
+	const links: DashboardLink[] = [
+		{ label: 'Image', href: '/dashboard/image' },
+		{ label: 'Post', href: '/dashboard/post' },
+	];
 </script>
 
 {#if isLoading}
@@ -41,5 +48,8 @@
 {:else if hasError}
 	<ErrorPage />
 {:else}
-	{@render children()}
+	<div class="min-h-content-height grid grid-cols-[auto_1fr]">
+		<DashboardNavbar {links} />
+		{@render children()}
+	</div>
 {/if}
diff --git a/frontend/src/routes/dashboard/+page.server.ts b/frontend/src/routes/dashboard/+page.server.ts
new file mode 100644
index 0000000..ff52206
--- /dev/null
+++ b/frontend/src/routes/dashboard/+page.server.ts
@@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+	const { pathname } = url;
+
+	if (pathname === '/dashboard') {
+		redirect(302, '/dashboard/image');
+	}
+};
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 9e01032..e69de29 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -1 +0,0 @@
-<div>Dashboard</div>
diff --git a/frontend/src/routes/dashboard/image/+page.svelte b/frontend/src/routes/dashboard/image/+page.svelte
new file mode 100644
index 0000000..df5f380
--- /dev/null
+++ b/frontend/src/routes/dashboard/image/+page.svelte
@@ -0,0 +1 @@
+<div>Image</div>
diff --git a/frontend/src/routes/dashboard/post/+page.svelte b/frontend/src/routes/dashboard/post/+page.svelte
new file mode 100644
index 0000000..fc9a374
--- /dev/null
+++ b/frontend/src/routes/dashboard/post/+page.svelte
@@ -0,0 +1 @@
+<div>Post</div>