improve toasts

frontend/src/components/users/service-api-key.tsx

@@ -150,7 +150,7 @@ export const DeleteKeyForServiceUser = ({ api_key }: { api_key: string }) => {
       toast({ title: "Api Key Deleted" });
     },
     onError: () => {
-      toast({ title: "Failed to delete api key" });
+      toast({ title: "Failed to delete api key", variant: "destructive" });
     },
   });
   return (

frontend/src/lib/hooks.ts

@@ -99,7 +99,7 @@ export const useWrite = <
     ...config,
     onError: (e, v, c) => {
       console.log("useWrite error:", e);
-      toast({ title: `Request ${type} Failed` });
+      toast({ title: `Request ${type} Failed`, description: "See console for details", variant: "destructive" });
       config?.onError && config.onError(e, v, c);
     },
   });

frontend/src/lib/socket.tsx

@@ -7,6 +7,8 @@ import { Circle } from "lucide-react";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { cn } from "@lib/utils";
 import { AUTH_TOKEN_STORAGE_KEY } from "@main";
+import { ResourceComponents } from "@components/resources";
+import { UsableResource } from "@types";
 
 const rws_atom = atom<WebSocket | null>(null);
 const useWebsocket = () => useAtom(rws_atom);
@@ -38,9 +40,15 @@ const on_message = (
   if (data == "LOGGED_IN") return console.info("logged in to ws");
   const update = JSON.parse(data) as Types.UpdateListItem;
 
+  const Components = ResourceComponents[update.target.type as UsableResource];
+  const title = Components
+    ? `${update.operation} - ${Components.list_item(update.target.id)?.name}`
+    : update.operation;
+
   toast({
-    title: update.operation,
+    title,
     description: update.username,
+    variant: update.success ? "default" : "destructive",
   });
 
   invalidate(["ListUpdates"]);

frontend/src/pages/keys.tsx

@@ -165,7 +165,7 @@ const DeleteKey = ({ api_key }: { api_key: string }) => {
       toast({ title: "Api Key Deleted" });
     },
     onError: () => {
-      toast({ title: "Failed to delete api key" });
+      toast({ title: "Failed to delete api key", variant: "destructive" });
     },
   });
   return (

frontend/src/pages/tags.tsx

@@ -105,7 +105,11 @@ const CreateTag = () => {
     },
     onError: (e) => {
       console.log("create tag error:" + e);
-      toast({ title: "Failed to create tag" });
+      toast({
+        title: "Failed to create tag",
+        description: "See console for details",
+        variant: "destructive",
+      });
       setOpen(false);
     },
   });
@@ -154,8 +158,13 @@ const DeleteTag = ({ tag_id }: { tag_id: string }) => {
       invalidate(["ListTags"]);
       toast({ title: "Tag Deleted" });
     },
-    onError: () => {
-      toast({ title: "Failed to delete tag" });
+    onError: (e) => {
+      console.log("delete tag error:" + e);
+      toast({
+        title: "Failed to delete tag",
+        description: "See console for details",
+        variant: "destructive",
+      });
     },
   });
   return (

frontend/src/pages/user.tsx

@@ -23,8 +23,12 @@ export const UserPage = () => {
   const { mutate } = useWrite("UpdateUserBasePermissions", {
     onSuccess: () => inv(["ListUsers"]),
     onError: (e) => {
-      console.log(e);
-      toast({ title: "Failed to update user permissions" });
+      console.log("update user permission failure", e);
+      toast({
+        title: "Failed to update user permissions",
+        description: "See console for details",
+        variant: "destructive",
+      });
     },
   });
   const enabledClass = user?.enabled ? "text-green-500" : "text-red-500";

frontend/src/pages/variables.tsx

@@ -158,7 +158,11 @@ const CreateVariable = () => {
     },
     onError: (e) => {
       console.log("create variable error:" + e);
-      toast({ title: "Failed to create variable" });
+      toast({
+        title: "Failed to create variable",
+        description: "See console for details",
+        variant: "destructive",
+      });
       setOpen(false);
     },
   });
@@ -209,8 +213,13 @@ const DeleteVariable = ({ name }: { name: string }) => {
       invalidate(["ListVariables"], ["GetVariable"]);
       toast({ title: "Variable Deleted" });
     },
-    onError: () => {
-      toast({ title: "Failed to delete variable" });
+    onError: (e) => {
+      console.log("delete variable error:" + e);
+      toast({
+        title: "Failed to delete variable",
+        description: "See console for details",
+        variant: "destructive",
+      });
     },
   });
   return (

frontend/src/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-2",
       className
     )}
     {...props}

frontend/src/ui/use-toast.ts

@@ -6,8 +6,8 @@ import type {
   ToastProps,
 } from "@//ui/toast"
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 3
+const TOAST_REMOVE_DELAY = 5_000
 
 type ToasterToast = ToastProps & {
   id: string