From 0ebd62f3bdb7e3268a9440ff4ebad5d511d23dc7 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 16 Mar 2024 02:25:39 +0800
Subject: [PATCH] update links page to use scrollarea component

---
 frontend/bun.lockb                            | Bin 148507 -> 148507 bytes
 frontend/package.json                         |   2 +-
 .../lib/components/ui/scroll-area/index.ts    |  10 +
 .../scroll-area/scroll-area-scrollbar.svelte  |  27 +++
 .../ui/scroll-area/scroll-area.svelte         |  32 ++++
 frontend/src/routes/(app)/+layout.svelte      | 109 ++++++-----
 frontend/src/routes/(app)/links/+page.svelte  | 177 +++++++++---------
 7 files changed, 214 insertions(+), 143 deletions(-)
 create mode 100644 frontend/src/lib/components/ui/scroll-area/index.ts
 create mode 100644 frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 frontend/src/lib/components/ui/scroll-area/scroll-area.svelte

diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index fca65613cb2ad7282d191605b061021b82b9636d..eadbc1683b5d6d52263685d5f61aac36b11dc5c6 100755
GIT binary patch
delta 2528
zcmXBPO^g$D9L90GVr3OaMN&2x8xCefNG3#MHJB6$p$SIkf~g0SNie3zCYmq@HPvva
z97w~m(p6VRd>a(Cf(u<=u=qLxV(|qA@uj}usGwCq##gF5-~Svw&u_kmNoHcr@Wh(o
zb<W)RhmIUxnVY>V9o>D|O7HrsiVxhrWyjVVX1crf?K!aEP-C0BciGr2bLOr0hbNbp
z*4~)OjK%A2J)<)!>)6A>dX)wySR7MnVjoKnssxy#yFn$y0hXI8EzFMV_OOlCLn;;Q
zVD4d+Dn^)pM8(H0+7l`@jL~^irH(x;Y*cArg2h0kiG3_RrV?O^?k1HG2UvbwrG?oi
zbbHuF>q(Ugb};vpN);o_Kds_p7wu4`hA}#uRqEKo!ZRujOtAQ@N)!87+M*I*itckN
zAr7$oyh;nRFX;BLjaEygf*s7gs8YoU^IKJX?4rF*rG_y&FR9eAhlNR%1}0eCuF}Ll
zmUgHFn4;TO32}hsDU}vxU)Jqm8?9GVD%io?t14BDF#np0k6pBPs?;z>=XI4j_OQ@V
zX<&lIT`EoNW9bc*08@0|R0(l_<+oH?n0;Hfhi$apQK?`DbMLBDF~WSL;$s)>_f%>a
zqqAG3jy){wQE6a;#l0#`>|^PDl>k$8_o;+9!14zwEzEXxd)P*6|Li3rtFD}X@}8yk
zWZl1c^rr3OBa3cZv1s0CygZn5ddcdw#}{p!e)-W86PGR+IW~F3Ixu6szv7M=2RH3L
zHS>z==5AiS?9Bh~*LORZ`%rfkBg}uK;$s)>k5y_Iqw|SM9eY?fpwhquiw9Mj*vC?=
z5@3q%A(apZSpHO{h1tWpJ#3@(nMwsanEPC%iV^0&Q1P*g_LnL(jM3?-)Uk(!uT&bC
zVDW2}Cib!PjY@ziy5FjVIKc9EDlN<&(d}Uyt?yMT*uh+)QpE`KKdAWFMf*pU8pi1S
zq*BKo7LKYkFu~$6l_vJF^s`EUDZ0O?ggC%*U!{fFUv+!fM(a0~3U)AeT&0Q;=1-{j
z*hTxKN)2Olepjhu4-2PM8kk@)RcT@$OMj>Yn4<fqN{9n2|E1Ex?BBXQY@_v$N(DQZ
z`&Xrk5#~>;_}E2zpi;vao&Qwo*pnLy8QH)@ju$gb(@ft?X^0q@NzJ%t6GJltGv#T-
zmYM81ym@BYW~?l+Vy0szcP_DNCNh(sPV~)m&Dg`lnwi*)a~`p7re~&bKCxjYF;kpD
zY?|qtDP2Ge%%o;qix`?2m?>XKY?;Yk#G7ZPZN|EoSTWNvlbcDbnu*NhFCqG7x@PQI
znOn#1A6Y!Lb5`cQd#4YbWuEb+qnW#hGu}ey>T3$l!l`I9v+J(Rwc~fr9-2E9P8(Xa
F_<v}eXYT+2

delta 2527
zcmXZXORN)h7>03rfRQ6I-bf`bs+dq&n2Btf=%U0J8`NY>Oen6#kdT_FbYZk1#?%mF
zWn%>o^a#kH0;8f<5uBrd1Bi?YItXGF&?;W)y@F!B!65JRcNV|*n`be}tX?v_ddcuo
z=kn=`q7}y<I-T6Oa^l3@w^tV4d)3ll@{WCL4qSHf&YKRMxMGvL_lA+>m(Cp7Ic?JB
zIi*K$%8VQ7ES+~&XPInZ7YmQ8G_i-p5tSD9v9w&p#{s%4R02$~+)`<yHLBag5bY;a
zDi~pQrAifJ%&k(XVS@S9Ds}9j^Q1}xyI5GG(!?GXeU%pWv9wmj#{s%esRWo}`Dv9l
zTF>bAFhqNuN(Cd#u2-pIjJXXeHB2xcsMN88&a)~F>|)_Ll_vJE_`FIB`&inj;^P3_
z7gPdFvHYS+8?Bdgdl;hKR;gfw*_TzS7-Q}gl^Q0P-=tE<4mz)@G_Z?>%_>doVR4H}
z3;S4lO~uCnx}i#dDVE1n+GxG5+rtp;H&iMZVRoxZ6=Te8Q>kHs`Ryuo?4a|eN&~xC
zh*X-`!{QE=7WT2UQ^m&ty1P^YOtJiyN*k@+x;+fhep{u25oY(OR58X}tWv`S^Y5tC
zv4hULDh=#n;XRcm_OQ5DrG<Sg?Njk_fbRP$0j5~~K&6dVqT9m|?fsWrw_w8~cg<aR
z;^A#mj?7$i*qeLQ4R4vhr#5HZt{DgK-ne$_shfANpRxWiZ|arlwTn*Mi-YW}I~E)X
zgEO~noxf_!+FQ^5|9*Wp!t95-s~BVMfJzM$%pX*#V+Wm&R2taD!XcF=_OSS|N(=i~
z>ZtfQK=%`s08=b~s?tX5ux<}Sw2!D%Fv9Fnl`6)V`%I;V3FbdnsbdG7u1W*DSolJv
zi9IZSsnWtemX4|TI6(I+l>k#Lf34C+>l@u3hG>7QQo#tbJ(ViPnEOtph6(1sSE*wM
zogY*h*u}z+DoyNR@h6oQ_ObM{ijM<ye^CiA#d2Szjn=QaJq*!4u2R7WvnN!l7-Q}?
zl^Q0P|6Qey9du5rG_Z?>KUA97!{R`tg?%jjsp8`R-M>@<OtJj8N*k?zbbA=0{jW*|
zBg~#ssbY+|(<(JgFrTW_v4hSTl?Ha@ib6&<u_s518Kz~XZ>BUv^vw*+xZ{a|nbb^q
z0<mqzn#h}HCNyJP#EO~7O!gdN)l6(AH;Gs?lbFd56YFL=W}I`04KrOcg~`OGnVy;A
zdBm2PzM0Y#qHktk#<huonbb`Ad}7;-bpdalnb3@VA+cg6GLyZCSTz%y$z4pWnMus#
zr)K7jES@%dZ2Q#AgAYu~cvm~Ku5k*Z*DuT5KRh(<|7R>-mf3O7=&|ub)5n4dL-)=8
E4<S2k761SM

diff --git a/frontend/package.json b/frontend/package.json
index fe206ce..951d7cc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,7 +36,7 @@
   "dependencies": {
     "@types/he": "^1.2.3",
     "apexcharts": "^3.44.0",
-    "bits-ui": "^0.19.6",
+    "bits-ui": "^0.19.7",
     "clsx": "^2.0.0",
     "cmdk-sv": "^0.0.13",
     "drizzle-orm": "^0.29.0",
diff --git a/frontend/src/lib/components/ui/scroll-area/index.ts b/frontend/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..f4af2e3
--- /dev/null
+++ b/frontend/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import { default as Scrollbar } from "./scroll-area-scrollbar.svelte";
+import { default as Root } from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..a97f3bb
--- /dev/null
+++ b/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "vertical";
+	export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+>
+	<slot />
+	<ScrollAreaPrimitive.Thumb
+		class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte b/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..fb0a7c5
--- /dev/null
+++ b/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import { Scrollbar } from "./index.js";
+
+	type $$Props = ScrollAreaPrimitive.Props & {
+		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Content>
+			<slot />
+		</ScrollAreaPrimitive.Content>
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte
index 854dc44..c058fe7 100644
--- a/frontend/src/routes/(app)/+layout.svelte
+++ b/frontend/src/routes/(app)/+layout.svelte
@@ -19,7 +19,8 @@
 	}
 </script>
 
-<div class="flex h-screen w-full flex-col">
+<div
+	class="max-w-screen flex h-screen max-h-screen w-full flex-col overflow-hidden">
 	<div class="flex border-b">
 		<div
 			class="flex h-20 w-full items-center justify-between gap-6 p-4">
@@ -59,61 +60,59 @@
 		</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>
-							<Button
-								on:click={closeSheet}
-								variant="ghost"
-								href="/settings"
-								class="justify-start text-base ">Settings</Button>
+	<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>
+					<Button
+						on:click={closeSheet}
+						variant="ghost"
+						href="/settings"
+						class="justify-start text-base ">Settings</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 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>
-					</Sheet.Content>
-				</Sheet.Root>
-			</div>
-			<div class="flex h-full w-full flex-col overflow-hidden">
-				<slot />
-			</div>
+					</div>
+				</div>
+			</Sheet.Content>
+		</Sheet.Root>
+	</div>
+
+	<div class="flex flex-grow overflow-hidden">
+		<Sidebar class="hidden lg:flex" />
+		<div class="flex h-auto w-full flex-col">
+			<slot />
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index dacebe9..cef6c11 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -27,6 +27,7 @@
 	import Qr from '$lib/components/QR.svelte'
 	import AddShortenerDialog from './(component)/AddShortenerDialog.svelte'
 	import { toast } from 'svelte-sonner'
+	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte'
 
 	export let data: PageData
 
@@ -167,94 +168,96 @@
 	</div>
 {:then shorteners}
 	{#if shorteners.length > 0}
-		<div class="flex flex-wrap gap-4 overflow-scroll p-4">
-			{#each shorteners as shortener}
-				<Card.Root class="w-full max-w-[500px]">
-					<Card.Header>
-						<Card.Title
-							class="flex items-center justify-between gap-2">
-							<div class="flex items-center gap-2">
-								<a
-									href={'https://' +
-										data.shortener_url +
-										'/' +
-										shortener.code}
-									target="_blank"
-									class="hover:underline">
-									{data.shortener_url + '/' + shortener.code}
-								</a>
-								<ExternalLink size={16} />
+		<ScrollArea>
+			<div class="flex flex-wrap gap-4 p-4">
+				{#each shorteners as shortener}
+					<Card.Root class="w-full max-w-[500px]">
+						<Card.Header>
+							<Card.Title
+								class="flex items-center justify-between gap-2">
+								<div class="flex items-center gap-2">
+									<a
+										href={'https://' +
+											data.shortener_url +
+											'/' +
+											shortener.code}
+										target="_blank"
+										class="hover:underline">
+										{data.shortener_url + '/' + shortener.code}
+									</a>
+									<ExternalLink size={16} />
+								</div>
+								<div class="flex gap-4">
+									<Badge variant="outline" class="flex gap-2">
+										{#if shortener.active}
+											<span
+												class="relative inline-flex h-2 w-2 rounded-full bg-green-400"
+											></span>
+											Active
+										{:else}
+											<span
+												class="relative inline-flex h-2 w-2 rounded-full bg-gray-600"
+											></span>
+											Inactive
+										{/if}
+									</Badge>
+									<Badge variant="secondary"
+										>{shortener.project
+											? shortener.project.name
+											: 'Uncategorized'}</Badge>
+								</div>
+							</Card.Title>
+							<Card.Description>{shortener.link}</Card.Description>
+						</Card.Header>
+						<Card.Content>
+							<div class="flex items-center justify-between">
+								<div class="flex gap-2">
+									<Button
+										href={`/links/${shortener.code}`}
+										class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm">
+										<BarChart size={20} />
+										<div>
+											{shortener.visitor.length} visits
+										</div>
+									</Button>
+									<Button
+										class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm"
+										on:click={() => openQRDialog(shortener.code)}>
+										<QrCode size={20} />
+									</Button>
+								</div>
+								<DropdownMenu.Root>
+									<DropdownMenu.Trigger>
+										<MoreVertical />
+									</DropdownMenu.Trigger>
+									<DropdownMenu.Content>
+										<DropdownMenu.Group>
+											<DropdownMenu.Item
+												on:click={() =>
+													openEditDialog(
+														shortener.code,
+														shortener.link,
+														shortener.projectId,
+														shortener.project?.name,
+														shortener.active,
+													)}>
+												Edit
+											</DropdownMenu.Item>
+											<DropdownMenu.Item
+												on:click={() =>
+													openDeleteDialog(shortener.code)}
+												class="text-destructive data-[highlighted]:bg-destructive">
+												Delete
+											</DropdownMenu.Item>
+										</DropdownMenu.Group>
+									</DropdownMenu.Content>
+								</DropdownMenu.Root>
 							</div>
-							<div class="flex gap-4">
-								<Badge variant="outline" class="flex gap-2">
-									{#if shortener.active}
-										<span
-											class="relative inline-flex h-2 w-2 rounded-full bg-green-400"
-										></span>
-										Active
-									{:else}
-										<span
-											class="relative inline-flex h-2 w-2 rounded-full bg-gray-600"
-										></span>
-										Inactive
-									{/if}
-								</Badge>
-								<Badge variant="secondary"
-									>{shortener.project
-										? shortener.project.name
-										: 'Uncategorized'}</Badge>
-							</div>
-						</Card.Title>
-						<Card.Description>{shortener.link}</Card.Description>
-					</Card.Header>
-					<Card.Content>
-						<div class="flex items-center justify-between">
-							<div class="flex gap-2">
-								<Button
-									href={`/links/${shortener.code}`}
-									class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm">
-									<BarChart size={20} />
-									<div>
-										{shortener.visitor.length} visits
-									</div>
-								</Button>
-								<Button
-									class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm"
-									on:click={() => openQRDialog(shortener.code)}>
-									<QrCode size={20} />
-								</Button>
-							</div>
-							<DropdownMenu.Root>
-								<DropdownMenu.Trigger>
-									<MoreVertical />
-								</DropdownMenu.Trigger>
-								<DropdownMenu.Content>
-									<DropdownMenu.Group>
-										<DropdownMenu.Item
-											on:click={() =>
-												openEditDialog(
-													shortener.code,
-													shortener.link,
-													shortener.projectId,
-													shortener.project?.name,
-													shortener.active,
-												)}>
-											Edit
-										</DropdownMenu.Item>
-										<DropdownMenu.Item
-											on:click={() =>
-												openDeleteDialog(shortener.code)}
-											class="text-destructive data-[highlighted]:bg-destructive">
-											Delete
-										</DropdownMenu.Item>
-									</DropdownMenu.Group>
-								</DropdownMenu.Content>
-							</DropdownMenu.Root>
-						</div>
-					</Card.Content>
-				</Card.Root>
-			{/each}
-		</div>
+						</Card.Content>
+					</Card.Root>
+				{/each}
+			</div>
+		</ScrollArea>
 	{:else}
 		<div>No Data</div>
 	{/if}