feat: add toast, add log copy button, smaller logbox max size

package.json

@@ -47,6 +47,8 @@
         "bits-ui": "^0.21.2",
         "clsx": "^2.1.0",
         "lucide-svelte": "^0.368.0",
+        "mode-watcher": "^0.3.0",
+        "svelte-sonner": "^0.3.22",
         "tailwind-merge": "^2.2.2",
         "tailwind-variants": "^0.2.1"
     }

src/lib/ui/components/newImage/log.svelte

@@ -2,7 +2,8 @@
     import * as Collapsible from "$lib/ui/components/ui/collapsible";
     import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
     import { Button } from "$lib/ui/components/ui/button";
-    import { LucideArrowDown } from "lucide-svelte";
+    import { LucideArrowDown, LucideCopy } from "lucide-svelte";
+    import { toast } from "svelte-sonner";
 
     let logElement: HTMLPreElement;
     let scrollIntoView = true;
@@ -34,7 +35,7 @@
             on:wheel={(e) => {
                 scrollIntoView = false;
             }}
-            class="flex max-h-[32rem] min-h-32 w-full -translate-y-4 flex-col overflow-auto border-2 bg-popover p-2 pt-4 font-mono text-sm"
+            class="flex max-h-[24rem] min-h-32 w-full -translate-y-4 flex-col overflow-auto border-2 bg-popover p-2 pt-4 font-mono text-sm"
         >
             {#each log as logLine}
                 <pre>{logLine}</pre>
@@ -50,5 +51,16 @@
                 <LucideArrowDown class="h-5 w-5" />
             </Button>
         {/if}
+        <Button
+            on:click={() => {
+                navigator.clipboard.writeText(log.join("\n"));
+                toast("Copied to clipboard");
+            }}
+            size="icon"
+            variant="ghost"
+            class="absolute right-4 top-0 h-8 w-8"
+        >
+            <LucideCopy class="h-5 w-5" />
+        </Button>
     </Collapsible.Content>
 </Collapsible.Root>

src/lib/ui/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

src/lib/ui/components/ui/sonner/sonner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+    import { mode } from "mode-watcher";
+
+    type $$Props = SonnerProps;
+</script>
+
+<Sonner
+    theme={$mode}
+    class="toaster group"
+    toastOptions={{
+        classes: {
+            toast: "rounded-none border-2 group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+            description: "group-[.toast]:text-muted-foreground",
+            actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+            cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+        }
+    }}
+    {...$$restProps}
+/>

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
     import "../app.pcss";
     import "@fontsource-variable/rubik";
     import "@fontsource/ibm-plex-mono";
+    import { Toaster } from "$lib/ui/components/ui/sonner";
     // @ts-ignore
     // import { PUBLIC_ADAPTER } from "$env/static/public";
 </script>
@@ -11,6 +12,8 @@
         <h1 class="text-xl">BlueBuild Workshop</h1>
     </header>
 
+    <Toaster />
+
     <main class="p-4">
         <slot />
     </main>