From 2b888bc6440382c1708441d89fb58ed0ed1c86e6 Mon Sep 17 00:00:00 2001
From: typecad0 <justind000@gmail.com>
Date: Sat, 6 Jul 2024 09:48:53 -0700
Subject: [PATCH] scrollable output

---
 package-lock.json                             |  4 +--
 src/lib/components/ui/scroll-area/index.ts    | 10 ++++++
 .../scroll-area/scroll-area-scrollbar.svelte  | 27 ++++++++++++++++
 .../ui/scroll-area/scroll-area.svelte         | 32 +++++++++++++++++++
 src/routes/+layout.svelte                     |  5 ++-
 5 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/ui/scroll-area/index.ts
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area.svelte

diff --git a/package-lock.json b/package-lock.json
index 2017db4..693f966 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-	"name": "pcb2cnc",
+	"name": "kicnc",
 	"version": "0.0.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "pcb2cnc",
+			"name": "kicnc",
 			"version": "0.0.1",
 			"dependencies": {
 				"@tauri-apps/api": "^1.5.6",
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..a97f3bb
--- /dev/null
+++ b/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/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..e8e368c
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.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/src/routes/+layout.svelte b/src/routes/+layout.svelte
index adc40a1..9080a4e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,7 +8,8 @@
 	import { CircuitBoard } from 'lucide-svelte';
 	import { ModeWatcher } from 'mode-watcher';
 	import { platform  } from '@tauri-apps/api/os';
-
+	import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
+	
 	import '../app.css';
 
 	const sidebarNavItems = [
@@ -274,6 +275,7 @@
 				<Sheet.Root>
 					<Sheet.Trigger disabled={$make_disabled}><Button class="w-full" on:click={make_files} disabled={$make_disabled}>Make</Button></Sheet.Trigger>
 					<Sheet.Content side="bottom">
+						<ScrollArea class="h-[400px] overflow-scroll overscroll-auto">
 						<Sheet.Header>
 							<Sheet.Title>Output</Sheet.Title>
 							<Sheet.Description>
@@ -283,6 +285,7 @@
 								</div>
 							</Sheet.Description>
 						</Sheet.Header>
+					</ScrollArea>
 					</Sheet.Content>
 				</Sheet.Root>
 			</nav>