Add toast

2025-03-09 19:26:19 +01:00
parent ce9ed1f950
commit bb31650718
11 changed files with 83 additions and 23 deletions
--- a/frontend/src/components/Container.svelte
+++ b/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>
--- a/frontend/src/components/Drag.svelte
+++ b/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
-  ${selected === id ? "border-green-400 bg-green-400 z-50" : "border-red-400 bg-red-400"}`}
+  class={cn(
+    "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>
--- a/frontend/src/components/Modal.svelte
+++ b/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
--- a/frontend/src/components/Settings.svelte
+++ b/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>
--- a/frontend/src/components/Slider.svelte
+++ b/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
--- a/frontend/src/components/ui/sonner/index.ts
+++ b/frontend/src/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
--- a/frontend/src/components/ui/sonner/sonner.svelte
+++ b/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}
+/>
--- a/frontend/src/pages/index.astro
+++ b/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>
				`@@ -0,0 +1 @@`
				`export { default as Toaster } from "./sonner.svelte";`