Add toast

frontend/package.json

@@ -21,10 +21,12 @@
   "devDependencies": {
     "bits-ui": "0.22.0",
     "clsx": "^2.1.1",
+    "mode-watcher": "^0.5.1",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
+    "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^3.0.2",
     "tailwind-variants": "^1.0.0",
     "tailwindcss-animate": "^1.0.7",

frontend/pnpm-lock.yaml

@@ -36,6 +36,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      mode-watcher:
+        specifier: ^0.5.1
+        version: 0.5.1(svelte@5.22.6)
       prettier:
         specifier: ^3.5.3
         version: 3.5.3
@@ -48,6 +51,9 @@ importers:
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
         version: 0.6.11(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.22.6))(prettier@3.5.3)
+      svelte-sonner:
+        specifier: ^0.3.28
+        version: 0.3.28(svelte@5.22.6)
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -1395,6 +1401,11 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mode-watcher@0.5.1:
+    resolution: {integrity: sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w==}
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.1
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -1860,6 +1871,11 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svelte-sonner@0.3.28:
+    resolution: {integrity: sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
+
   svelte2tsx@0.7.35:
     resolution: {integrity: sha512-z2lnOnrfb5nrlRfFQI8Qdz03xQqMHUfPj0j8l/fQuydrH89cCeN+v9jgDwK9GyMtdTRUkE7Neu9Gh+vfXJAfuQ==}
     peerDependencies:
@@ -3921,6 +3937,10 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  mode-watcher@0.5.1(svelte@5.22.6):
+    dependencies:
+      svelte: 5.22.6
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -4400,6 +4420,10 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svelte-sonner@0.3.28(svelte@5.22.6):
+    dependencies:
+      svelte: 5.22.6
+
   svelte2tsx@0.7.35(svelte@5.22.6)(typescript@5.8.2):
     dependencies:
       dedent-js: 1.0.1

frontend/src/components/Container.svelte

@@ -62,7 +62,7 @@
 </script>
 
 <svelte:window onresize={resize} />
-<div class="flex h-screen w-screen items-center justify-center">
+<div class="flex h-screen w-screen items-center justify-center gap-2 py-2">
   <div class="mr-auto w-20">
     <Settings />
   </div>

frontend/src/components/Drag.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { cn } from "$lib/utils";
+
   type Props = {
     id: number;
     x: number;
@@ -75,8 +77,12 @@
   onpointerup={onPointerUp}
   onpointermove={onPointerMove}
   style={`transform: translate(${vis_x}px, ${vis_y}px)`}
-  class={`absolute flex h-24 w-24 touch-none select-none items-center justify-center rounded-full
+  class={cn(
-  ${selected === id ? "border-green-400 bg-green-400 z-50" : "border-red-400 bg-red-400"}`}
+    "absolute flex h-24 w-24 touch-none select-none items-center justify-center rounded-full",
+    selected === id
+      ? "z-50 border-green-400 bg-green-400"
+      : "border-red-400 bg-red-400",
+  )}
 >
   Tracker {id}
 </div>

frontend/src/components/Modal.svelte

@@ -21,7 +21,7 @@
   class="absolute left-0 top-0 z-50 m-0 h-full max-h-full w-full max-w-full p-0 open:bg-black/80"
 >
   <div class="flex h-full w-full flex-col items-center justify-center">
-    <h1 class="text-8xl text-red-600 text-center">THIS GONNA FUCK THINGS UP</h1>
+    <h1 class="text-center text-8xl text-red-600">THIS GONNA FUCK THINGS UP</h1>
     <div class="flex items-center justify-center gap-6">
       <button class="rounded-md bg-gray-400 p-4" onclick={() => dialog.close()}
         >Close</button

frontend/src/components/Settings.svelte

@@ -2,6 +2,7 @@
   import * as Drawer from "$lib/components/ui/drawer/index.js";
   import { Button } from "$lib/components/ui/button/index.js";
   import TrackerSetting from "./TrackerSetting.svelte";
+  import { toast } from "svelte-sonner";
 
   const addTracker = async (arg: number) => {
     const response = await fetch("/tracker", {
@@ -14,7 +15,9 @@
       }),
     });
 
-    console.log(response);
+    if (!response.ok) {
+      toast.error("Could not add tracker");
+    }
   };
 
   const deleteTracker = async (arg: number) => {
@@ -27,7 +30,9 @@
         id: Number(arg),
       }),
     });
-    console.log(response);
+    if (!response.ok) {
+      toast.error("Could not delete tracker");
+    }
   };
 
   let id = $state(0);
@@ -35,7 +40,7 @@
 
 <Drawer.Root>
   <Drawer.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="outline">Settings</Button>
+    <Button builders={[builder]} variant="secondary">Settings</Button>
   </Drawer.Trigger>
   <Drawer.Content>
     <Drawer.Header>

frontend/src/components/Slider.svelte

@@ -61,7 +61,7 @@
   let z_viz = $derived(tracker?.z.toFixed(2));
 </script>
 
-<div class="slider-container ml-auto">
+<div class="slider-container ml-auto w-20">
   <Modal action={buttonAction} />
   {#if tracker}
     <input

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

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

frontend/src/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";
+
+	let restProps: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "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}
+/>

frontend/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Container from "../components/Container.svelte";
 import "$lib/styles/app.css";
+import { Toaster } from "$lib/components/ui/sonner/index.js";
 ---
 
 <html lang="en">
@@ -15,6 +16,7 @@ import "$lib/styles/app.css";
     <title>Followspot</title>
   </head>
   <body class="flex h-dvh w-screen items-center justify-center overflow-hidden">
+    <Toaster client:load />
     <Container client:load />
   </body>
 </html>