From 27e732940a6b86c20af0208e168ca40bad61ae9f Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Thu, 14 Mar 2024 00:45:54 +0800
Subject: [PATCH] added breadcrumbs and update layouts

---
 frontend/bun.lockb                            | Bin 148481 -> 148507 bytes
 frontend/package.json                         |   2 +-
 frontend/src/lib/components/sidebar.svelte    |  13 --
 .../ui/breadcrumb/breadcrumb-ellipsis.svelte  |  23 +++
 .../ui/breadcrumb/breadcrumb-item.svelte      |  16 +++
 .../ui/breadcrumb/breadcrumb-link.svelte      |  34 +++++
 .../ui/breadcrumb/breadcrumb-list.svelte      |  23 +++
 .../ui/breadcrumb/breadcrumb-page.svelte      |  26 ++++
 .../ui/breadcrumb/breadcrumb-separator.svelte |  24 ++++
 .../ui/breadcrumb/breadcrumb.svelte           |  15 ++
 .../src/lib/components/ui/breadcrumb/index.ts |  25 ++++
 frontend/src/routes/(app)/+layout.server.ts   |   3 +
 frontend/src/routes/(app)/+layout.svelte      | 136 ++++++++++++------
 .../src/routes/(app)/links/+layout.server.ts  |  10 ++
 .../routes/(app)/projects/+layout.server.ts   |  10 ++
 .../routes/(app)/settings/+layout.server.ts   |  10 ++
 16 files changed, 310 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
 create mode 100644 frontend/src/lib/components/ui/breadcrumb/index.ts
 create mode 100644 frontend/src/routes/(app)/links/+layout.server.ts
 create mode 100644 frontend/src/routes/(app)/projects/+layout.server.ts
 create mode 100644 frontend/src/routes/(app)/settings/+layout.server.ts

diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 1a0f593f5e01088fb4b7d116e8367d27e77d5dbc..fca65613cb2ad7282d191605b061021b82b9636d 100755
GIT binary patch
delta 13457
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
bsbTT$N;(uP!!A)B`E?~VDlUsPwe|WR8|N6z

delta 13429
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
bv9j<FYAn~pnPQ56s-#14#i!#;9lZYwKzt?*

diff --git a/frontend/package.json b/frontend/package.json
index fee689c..fe206ce 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -41,7 +41,7 @@
     "cmdk-sv": "^0.0.13",
     "drizzle-orm": "^0.29.0",
     "he": "^1.2.0",
-    "lucide-svelte": "^0.292.0",
+    "lucide-svelte": "^0.356.0",
     "mode-watcher": "^0.1.2",
     "nanoid": "^5.0.3",
     "node-html-parser": "^6.1.12",
diff --git a/frontend/src/lib/components/sidebar.svelte b/frontend/src/lib/components/sidebar.svelte
index 2d5d959..5b114b3 100644
--- a/frontend/src/lib/components/sidebar.svelte
+++ b/frontend/src/lib/components/sidebar.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores'
-	import UserIcon from './UserIcon.svelte'
-
-	import { Separator } from '$lib/components/ui/separator'
-	import ThemeToggle from './theme-toggle.svelte'
 	import { Button } from '$lib/components/ui/button'
 	import { cn } from '$lib/utils'
 
-	export let email: string = ''
 	let className: string | undefined = undefined
 	export { className as class }
 
@@ -25,14 +20,6 @@
 		className,
 	)}>
 	<div>
-		<div class="flex h-20 items-center justify-between p-4">
-			<div class="flex items-center justify-start gap-4">
-				<UserIcon {email} />
-				{email}
-			</div>
-			<ThemeToggle />
-		</div>
-
 		<div class="flex flex-col gap-4 p-4">
 			{#each routes as route}
 				<Button
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
new file mode 100644
index 0000000..8364908
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements'
+	import { MoreHorizontal } from 'lucide-svelte'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement
+	}
+
+	export let el: $$Props['el'] = undefined
+	let className: $$Props['class'] = undefined
+	export { className as class }
+</script>
+
+<span
+	bind:this={el}
+	role="presentation"
+	aria-hidden="true"
+	class={cn('flex h-9 w-9 items-center justify-center', className)}
+	{...$$restProps}>
+	<MoreHorizontal class="h-4 w-4" />
+	<span class="sr-only">More</span>
+</span>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
new file mode 100644
index 0000000..8e8b187
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+	<slot />
+</li>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
new file mode 100644
index 0000000..98ac8e4
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLAnchorAttributes & {
+		el?: HTMLAnchorElement
+		asChild?: boolean
+	}
+
+	export let href: $$Props['href'] = undefined
+	export let el: $$Props['el'] = undefined
+	export let asChild: $$Props['asChild'] = false
+	let className: $$Props['class'] = undefined
+	export { className as class }
+
+	let attrs: Record<string, unknown>
+
+	$: attrs = {
+		class: cn(
+			'transition-colors hover:text-foreground hover:cursor-pointer',
+			className,
+		),
+		href,
+		...$$restProps,
+	}
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<a bind:this={el} {...attrs} {href}>
+		<slot {attrs} />
+	</a>
+{/if}
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
new file mode 100644
index 0000000..7f36141
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLOlAttributes & {
+		el?: HTMLOListElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ol
+	bind:this={el}
+	class={cn(
+		"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</ol>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
new file mode 100644
index 0000000..c153c21
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLAnchorAttributes & {
+		el?: HTMLSpanElement
+	}
+
+	export let el: $$Props['el'] = undefined
+	export let className: $$Props['class'] = undefined
+	export let href: $$Props['href'] = undefined
+	export { className as class }
+</script>
+
+<a
+	bind:this={el}
+	aria-disabled="true"
+	aria-current="page"
+	{href}
+	class={cn(
+		'font-normal text-foreground hover:cursor-pointer',
+		className,
+	)}
+	{...$$restProps}>
+	<slot />
+</a>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
new file mode 100644
index 0000000..2f8986a
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements'
+	import { ChevronRight } from 'lucide-svelte'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement
+	}
+
+	export let el: $$Props['el'] = undefined
+	let className: $$Props['class'] = undefined
+	export { className as class }
+</script>
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={cn('[&>svg]:size-3.5', className)}
+	bind:this={el}
+	{...$$restProps}>
+	<slot>
+		<ChevronRight size={16} />
+	</slot>
+</li>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
new file mode 100644
index 0000000..104f8b0
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLElement> & {
+		el?: HTMLElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
+	<slot />
+</nav>
diff --git a/frontend/src/lib/components/ui/breadcrumb/index.ts b/frontend/src/lib/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..dc914ec
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage,
+};
diff --git a/frontend/src/routes/(app)/+layout.server.ts b/frontend/src/routes/(app)/+layout.server.ts
index 8baca9b..b788825 100644
--- a/frontend/src/routes/(app)/+layout.server.ts
+++ b/frontend/src/routes/(app)/+layout.server.ts
@@ -3,9 +3,12 @@ import type { LayoutServerLoad } from './$types'
 export const load = (async (event) => {
 	const user = event.locals.userObject
 
+	const breadcrumbs = [{ name: 'Home', path: '/' }]
+
 	return {
 		shortener_url:
 			process.env.PUBLIC_SHORTENER_URL ?? '3000.tzgyn.com',
 		user: user,
+		breadcrumbs,
 	}
 }) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte
index db573eb..38d1a68 100644
--- a/frontend/src/routes/(app)/+layout.svelte
+++ b/frontend/src/routes/(app)/+layout.svelte
@@ -6,6 +6,9 @@
 	import { Menu } from 'lucide-svelte'
 	import UserIcon from '$lib/components/UserIcon.svelte'
 	import { Separator } from '$lib/components/ui/separator'
+	import ThemeToggle from '$lib/components/theme-toggle.svelte'
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb'
+	import { page } from '$app/stores'
 
 	export let data: PageData
 
@@ -16,55 +19,96 @@
 	}
 </script>
 
-<div class="flex h-screen w-full">
-	<Sidebar email={data.user.email} class="hidden lg:flex" />
-	<div
-		class="flex h-full max-h-screen w-full flex-col overflow-hidden">
+<div class="flex h-screen w-full flex-col">
+	<div class="flex border-b">
 		<div
-			class="bg-background block w-full border-b px-4 py-2 lg:hidden">
-			<Sheet.Root bind:open={sheetOpen}>
-				<Sheet.Trigger asChild let:builder>
-					<Button builders={[builder]} variant="ghost" class="p-2">
-						<Menu />
-					</Button>
-				</Sheet.Trigger>
-				<Sheet.Content side="left" class="flex flex-col">
-					<Sheet.Header class="pb-16">
-						<Sheet.Title>Shortener</Sheet.Title>
-					</Sheet.Header>
-					<div class="flex grow flex-col gap-4">
-						<Button
-							on:click={closeSheet}
-							variant="ghost"
-							href="/"
-							class="justify-start text-base">Home</Button>
-						<Button
-							on:click={closeSheet}
-							variant="ghost"
-							href="/links"
-							class="justify-start text-base">Links</Button>
-						<Button
-							on:click={closeSheet}
-							variant="ghost"
-							href="/projects"
-							class="justify-start text-base ">Projects</Button>
-					</div>
-					<div class="flex flex-col justify-between">
-						<div></div>
-						<div class="flex flex-col gap-4">
-							<Separator />
-							<div class="flex items-center justify-between">
-								<UserIcon
-									email={data.user.email}
-									onClick={closeSheet} />
+			class="flex h-20 w-full items-center justify-between gap-6 p-4">
+			<UserIcon email={data.user.email} />
+
+			<div class="w-full">
+				<Breadcrumb.Root>
+					<Breadcrumb.List>
+						{#if $page.data.breadcrumbs}
+							{#each $page.data.breadcrumbs as breadcrumb, index}
+								{#if index == $page.data.breadcrumbs.length - 1}
+									<Breadcrumb.Item>
+										<Breadcrumb.Page href={breadcrumb.path}>
+											{breadcrumb.name}
+										</Breadcrumb.Page>
+									</Breadcrumb.Item>
+								{:else}
+									<Breadcrumb.Item>
+										<Breadcrumb.Link href={breadcrumb.path}>
+											{breadcrumb.name}
+										</Breadcrumb.Link>
+									</Breadcrumb.Item>
+								{/if}
+								{#if index != $page.data.breadcrumbs.length - 1}
+									<Breadcrumb.Separator />
+								{/if}
+							{/each}
+						{:else}
+							<Breadcrumb.Item>
+								<Breadcrumb.Link href={'/'}>Home</Breadcrumb.Link>
+							</Breadcrumb.Item>
+						{/if}
+					</Breadcrumb.List>
+				</Breadcrumb.Root>
+			</div>
+			<ThemeToggle />
+		</div>
+	</div>
+
+	<div class="flex h-full">
+		<Sidebar class="hidden lg:flex" />
+		<div
+			class="flex h-full max-h-screen w-full flex-col overflow-hidden">
+			<div
+				class="block w-full border-b bg-background px-4 py-2 lg:hidden">
+				<Sheet.Root bind:open={sheetOpen}>
+					<Sheet.Trigger asChild let:builder>
+						<Button builders={[builder]} variant="ghost" class="p-2">
+							<Menu />
+						</Button>
+					</Sheet.Trigger>
+					<Sheet.Content side="left" class="flex flex-col">
+						<Sheet.Header class="pb-16">
+							<Sheet.Title>Shortener</Sheet.Title>
+						</Sheet.Header>
+						<div class="flex grow flex-col gap-4">
+							<Button
+								on:click={closeSheet}
+								variant="ghost"
+								href="/"
+								class="justify-start text-base">Home</Button>
+							<Button
+								on:click={closeSheet}
+								variant="ghost"
+								href="/links"
+								class="justify-start text-base">Links</Button>
+							<Button
+								on:click={closeSheet}
+								variant="ghost"
+								href="/projects"
+								class="justify-start text-base ">Projects</Button>
+						</div>
+						<div class="flex flex-col justify-between">
+							<div></div>
+							<div class="flex flex-col gap-4">
+								<Separator />
+								<div class="flex items-center justify-between">
+									<UserIcon
+										email={data.user.email}
+										onClick={closeSheet} />
+								</div>
 							</div>
 						</div>
-					</div>
-				</Sheet.Content>
-			</Sheet.Root>
-		</div>
-		<div class="flex h-full w-full flex-col overflow-hidden">
-			<slot />
+					</Sheet.Content>
+				</Sheet.Root>
+			</div>
+			<div class="flex h-full w-full flex-col overflow-hidden">
+				<slot />
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/(app)/links/+layout.server.ts b/frontend/src/routes/(app)/links/+layout.server.ts
new file mode 100644
index 0000000..73ffb5c
--- /dev/null
+++ b/frontend/src/routes/(app)/links/+layout.server.ts
@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load = (async (event) => {
+	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+	const breadcrumbs = [
+		...parentBreadcrumbs,
+		{ name: 'Links', path: '/links' },
+	]
+	return { breadcrumbs }
+}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/projects/+layout.server.ts b/frontend/src/routes/(app)/projects/+layout.server.ts
new file mode 100644
index 0000000..9557ecb
--- /dev/null
+++ b/frontend/src/routes/(app)/projects/+layout.server.ts
@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load = (async (event) => {
+	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+	const breadcrumbs = [
+		...parentBreadcrumbs,
+		{ name: 'Projects', path: '/projects' },
+	]
+	return { breadcrumbs }
+}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/settings/+layout.server.ts b/frontend/src/routes/(app)/settings/+layout.server.ts
new file mode 100644
index 0000000..63d98cf
--- /dev/null
+++ b/frontend/src/routes/(app)/settings/+layout.server.ts
@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load = (async (event) => {
+	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+	const breadcrumbs = [
+		...parentBreadcrumbs,
+		{ name: 'Settings', path: '/settings' },
+	]
+	return { breadcrumbs }
+}) satisfies LayoutServerLoad