feat(ui): add toast notifications for user actions (#34)

* feat(ui): add toast notifications for user actions

Add svelte-sonner with a globally themed toaster and use it for build
promotion, webhook deletion, metadata saves, and clipboard failures.
Improve clipboard status feedback and preserve inline webhook creation errors.

* fix(ui): clean up clipboard reset timer

Clear the pending clipboard status timeout when the component is destroyed to avoid updating state after unmount.

Author: jpenilla

bun.lock

@@ -42,6 +42,7 @@
     "shadcn-svelte": "^1.5.0",
     "svelte": "^5.56.8",
     "svelte-check": "^4.7.5",
+    "svelte-sonner": "^1.1.0",
     "svelte2tsx": "^0.7.60",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.1",

package.json

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
-  import * as Alert from "$lib/components/ui/alert";
   import * as AlertDialog from "$lib/components/ui/alert-dialog";
   import { getContextClient } from "@urql/svelte";
   import { graphql } from "$lib/gql";
   import { getOperationErrorMessage, getUnexpectedOperationResultMessage } from "$lib/operation-error";
   import { page } from "$app/state";
+  import { toast } from "svelte-sonner";
 
   interface Props {
     buildNumber: number;
@@ -17,12 +17,10 @@
 
   let promoting: boolean = $state(false);
   let open: boolean = $state(false);
-  let promotionError: string | null = $state(null);
 
   async function promoteBuild(id: number) {
     if (promoting) return;
 
-    promotionError = null;
     promoting = true;
     try {
       const result = await client
@@ -51,27 +49,23 @@
         .toPromise();
       const errorMessage = getOperationErrorMessage(result.error, `promote build #${id}`);
       if (errorMessage) {
-        promotionError = errorMessage;
+        toast.error(errorMessage);
         return;
       }
 
       if (!result.data?.promoteBuild) {
-        promotionError = getUnexpectedOperationResultMessage(`promote build #${id}`);
+        toast.error(getUnexpectedOperationResultMessage(`promote build #${id}`));
+        return;
       }
+      toast.success(`Build #${id} promoted to recommended.`);
     } catch (error) {
-      promotionError = getUnexpectedOperationResultMessage(`promote build #${id}`, error);
+      toast.error(getUnexpectedOperationResultMessage(`promote build #${id}`, error));
     } finally {
       promoting = false;
     }
   }
 </script>
 
-{#if promotionError}
-  <Alert.Root variant="destructive">
-    <Alert.Description>{promotionError}</Alert.Description>
-  </Alert.Root>
-{/if}
-
 <AlertDialog.Root bind:open>
   <AlertDialog.Trigger>
     {#snippet child({ props })}

src/lib/components/PromoteBuildButton.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { onDestroy } from "svelte";
   import Button, { type ButtonProps } from "$lib/components/ui/button/button.svelte";
   import { mergeProps } from "bits-ui";
+  import { toast } from "svelte-sonner";
 
   interface Props extends ButtonProps {
     text: string;
@@ -10,20 +12,30 @@
 
   let { text, copyLabel = "Copy to clipboard", copiedLabel = "Copied to clipboard", ...restProps }: Props = $props();
 
-  let showCopied = $state(false);
-  let stopShowCopied: ReturnType<typeof setTimeout> | undefined;
+  let copyStatus: "idle" | "copied" | "failed" = $state("idle");
+  let resetCopyStatus: ReturnType<typeof setTimeout> | undefined;
+
+  onDestroy(() => {
+    if (resetCopyStatus) clearTimeout(resetCopyStatus);
+  });
+
+  function setCopyStatus(status: typeof copyStatus) {
+    copyStatus = status;
+    if (resetCopyStatus) clearTimeout(resetCopyStatus);
+    resetCopyStatus = setTimeout(() => {
+      copyStatus = "idle";
+      resetCopyStatus = undefined;
+    }, 2000);
+  }
 
   async function copy() {
     try {
       await navigator.clipboard.writeText(text);
-      showCopied = true;
-      if (stopShowCopied) clearTimeout(stopShowCopied);
-      stopShowCopied = setTimeout(() => {
-        showCopied = false;
-        stopShowCopied = undefined;
-      }, 2000);
+      setCopyStatus("copied");
     } catch (error) {
       console.error("Failed to copy:", error);
+      setCopyStatus("failed");
+      toast.error("Unable to copy to clipboard. Please try again.");
     }
   }
 
@@ -38,9 +50,16 @@
   );
 </script>
 
-<Button {...mergedProps} onclick={copy} aria-label={showCopied ? copiedLabel : copyLabel} title={showCopied ? copiedLabel : copyLabel}>
-  {#if showCopied}
+<Button
+  {...mergedProps}
+  onclick={copy}
+  aria-label={copyStatus === "copied" ? copiedLabel : copyStatus === "failed" ? "Unable to copy to clipboard" : copyLabel}
+  title={copyStatus === "copied" ? copiedLabel : copyStatus === "failed" ? "Unable to copy to clipboard" : copyLabel}
+>
+  {#if copyStatus === "copied"}
     <span class="iconify lucide--check"></span>
+  {:else if copyStatus === "failed"}
+    <span class="iconify lucide--x"></span>
   {:else}
     <span class="iconify lucide--copy"></span>
   {/if}

src/lib/components/custom/CopyToClipboard.svelte

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

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>

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

@@ -15,6 +15,7 @@
   import { type LayoutProps } from "./$types";
   import Footer from "./Footer.svelte";
   import { createAppHydrationScope } from "$lib/hydration-scope";
+  import { Toaster } from "$lib/components/ui/sonner";
 
   let { children, data }: LayoutProps = $props();
 
@@ -78,6 +79,7 @@
 </svelte:head>
 
 <ModeWatcher />
+<Toaster />
 <div class="mx-auto flex min-h-svh max-w-5xl flex-col">
   <div class="p-6">
     {@render children?.()}

src/routes/+layout.svelte

@@ -18,6 +18,7 @@
   import { getOperationErrorMessage, getUnexpectedOperationResultMessage } from "$lib/operation-error";
   import { page } from "$app/state";
   import { AUTH_CTX } from "$lib/auth.svelte";
+  import { toast } from "svelte-sonner";
 
   const auth = AUTH_CTX.get();
 
@@ -191,6 +192,7 @@
 
       editMode = false;
       resetEditState();
+      toast.success("Version metadata saved.");
     } catch (error) {
       saveError = getUnexpectedOperationResultMessage("save the version metadata", error);
     } finally {

src/routes/projects/[project]/version/[version]/VersionMetadata.svelte

@@ -19,6 +19,7 @@
   import { getOperationErrorMessage, getUnexpectedOperationResultMessage } from "$lib/operation-error";
   import { webhooksHeaderSegment } from "$lib/components/custom/header/index.svelte";
   import { formatDateTime } from "$lib/utils/date";
+  import { toast } from "svelte-sonner";
 
   const webhooksDocument = graphql(`
     query Webhooks {
@@ -71,7 +72,7 @@
       .filter((webhook): webhook is Webhook => webhook !== null)
       .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
   );
-  let operationError: string | null = $state(null);
+  let createWebhookError: string | null = $state(null);
   let newWebhookUrl = $state("");
   let newWebhookUrlError: string | null = $state(null);
   let creating = $state(false);
@@ -88,7 +89,7 @@
     e.preventDefault();
     if (creating) return;
 
-    operationError = null;
+    createWebhookError = null;
     newWebhookUrlError = null;
     const url = newWebhookUrl.trim();
     if (!url) {
@@ -101,13 +102,13 @@
       const result = await client.mutation(createWebhookMutation, { input: { url } }).toPromise();
       const errorMessage = getOperationErrorMessage(result.error, "create the webhook");
       if (errorMessage) {
-        operationError = errorMessage;
+        createWebhookError = errorMessage;
         return;
       }
 
       const createdWebhook = result.data?.createWebhook;
       if (!createdWebhook) {
-        operationError = getUnexpectedOperationResultMessage("create the webhook");
+        createWebhookError = getUnexpectedOperationResultMessage("create the webhook");
         return;
       }
 
@@ -122,14 +123,13 @@
       newWebhookUrl = "";
       refreshWebhooks();
     } catch (error) {
-      operationError = getUnexpectedOperationResultMessage("create the webhook", error);
+      createWebhookError = getUnexpectedOperationResultMessage("create the webhook", error);
     } finally {
       creating = false;
     }
   }
 
   function requestWebhookDeletion(webhook: Webhook) {
-    operationError = null;
     webhookPendingDeletion = webhook;
     deleteDialogOpen = true;
   }
@@ -138,25 +138,25 @@
     if (!webhookPendingDeletion || deleting) return;
 
     deleting = true;
-    operationError = null;
     try {
       const result = await client.mutation(deleteWebhookMutation, { input: { id: webhookPendingDeletion.id } }).toPromise();
       const errorMessage = getOperationErrorMessage(result.error, "delete the webhook");
       if (errorMessage) {
-        operationError = errorMessage;
+        toast.error(errorMessage);
         return;
       }
 
       if (!result.data?.deleteWebhook?.ok) {
-        operationError = getUnexpectedOperationResultMessage("delete the webhook");
+        toast.error(getUnexpectedOperationResultMessage("delete the webhook"));
         return;
       }
 
       deleteDialogOpen = false;
       webhookPendingDeletion = null;
       refreshWebhooks();
+      toast.success("Webhook deleted.");
     } catch (error) {
-      operationError = getUnexpectedOperationResultMessage("delete the webhook", error);
+      toast.error(getUnexpectedOperationResultMessage("delete the webhook", error));
     } finally {
       deleting = false;
     }
@@ -172,11 +172,11 @@
 
   <form onsubmit={createWebhook} class="max-w-2xl space-y-3">
     <h2 class="text-xl font-semibold">Add webhook</h2>
-    {#if operationError}
+    {#if createWebhookError}
       <Alert.Root variant="destructive">
         <CircleAlertIcon />
         <Alert.Title>Webhook action failed</Alert.Title>
-        <Alert.Description>{operationError}</Alert.Description>
+        <Alert.Description>{createWebhookError}</Alert.Description>
       </Alert.Root>
     {/if}
     <Field.FieldGroup>