update links page to use scrollarea component

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",

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,
+};

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>

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>

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,10 +60,6 @@
 		</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}>
@@ -111,9 +108,11 @@
 			</Sheet.Content>
 		</Sheet.Root>
 	</div>
-			<div class="flex h-full w-full flex-col overflow-hidden">
+
+	<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>
 </div>

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,7 +168,8 @@
 	</div>
 {:then shorteners}
 	{#if shorteners.length > 0}
-		<div class="flex flex-wrap gap-4 overflow-scroll p-4">
+		<ScrollArea>
+			<div class="flex flex-wrap gap-4 p-4">
 				{#each shorteners as shortener}
 					<Card.Root class="w-full max-w-[500px]">
 						<Card.Header>
@@ -255,6 +257,7 @@
 					</Card.Root>
 				{/each}
 			</div>
+		</ScrollArea>
 	{:else}
 		<div>No Data</div>
 	{/if}