Fixed toaster, updated add conversation dialog

apps/web/src/routes/app/home.tsx

@@ -12,16 +12,27 @@ import {
 import z from "zod";
 import { toast } from "@tensamin/shared/log";
 import { useSocket } from "@tensamin/ttp/context";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
 
-/**
+// The page
- * Executes Page.
- * @param none This function has no parameters.
- * @returns unknown.
- */
 export default function Page() {
+  return (
+    <div className="p-3 flex gap-2">
+      <AddConversationButton />
+      <Button disabled>Add Community</Button>
+    </div>
+  );
+}
+
+// Add Conversation Button Component
+function AddConversationButton() {
   const { send } = useSocket();
+  const [loading, setLoading] = useState(false);
 
   function submit(username: string | null) {
+    if (loading) return;
+
     const schema = z
       .string()
       .min(1, "Username is too short")
@@ -34,15 +45,27 @@ export default function Page() {
       return;
     }
 
+    setTimeout(() => setLoading(true), 500);
+
     send("add_conversation", {
       chat_partner_name: result.data,
     })
-      .then(() => toast("success", "Conversation added"))
+      .then(() => {
-      .catch(() => toast("error", "Failed to add conversation"));
+        toast("success", "Conversation added");
+      })
+      .catch((error) => {
+        if (String(error).includes("error_not_found")) {
+          toast("error", "User not found");
+          return;
+        }
+
+        toast("error", "Failed to add conversation, check console for details");
+        console.error("Failed to add conversation", error);
+      })
+      .finally(() => setLoading(false));
   }
 
   return (
-    <div className="p-3 flex gap-2">
     <Dialog>
       <DialogTrigger render={<Button>Add Conversation</Button>} />
       <DialogContent>
@@ -50,8 +73,8 @@ export default function Page() {
           <DialogTitle>New Conversation</DialogTitle>
         </DialogHeader>
         <DialogDescription>
-            Add a new conversation. Just enter the username of the person you
+          Add a new conversation. Just enter the username of the person you want
-            want to add as a conversation.
+          to add as a conversation.
         </DialogDescription>
         <form
           className="flex flex-col gap-5"
@@ -63,6 +86,7 @@ export default function Page() {
           }}
         >
           <Input
+            required
             type="text"
             id="username"
             name="username"
@@ -70,12 +94,12 @@ export default function Page() {
           />
           <div className="flex w-full justify-end gap-1">
             <DialogClose render={<Button variant="outline">Cancel</Button>} />
-              <Button type="submit">Continue</Button>
+            <Button disabled={loading} type="submit">
+              {loading && <Loader2 className="animate-spin" />} Continue
+            </Button>
           </div>
         </form>
       </DialogContent>
     </Dialog>
-      <Button disabled>Add Community</Button>
-    </div>
   );
 }

packages/shared/src/data.ts

@@ -128,6 +128,13 @@ export const socket = {
     }),
     response: z.object({}),
   },
+  add_conversation: {
+    request: z.object({
+      chat_partner_id: z.number().optional(),
+      chat_partner_name: z.string().min(1).max(15).optional(),
+    }),
+    response: z.object({}),
+  },
 } satisfies Record<string, { request: z.ZodType; response: z.ZodType }>;
 
 export type Socket = typeof socket;

packages/ui/src/cmp/sonner.tsx

@@ -26,9 +26,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       style={
         {
-          "--normal-bg": "var(--popover)",
+          "--normal-bg": "var(--color-popover)",
-          "--normal-text": "var(--popover-foreground)",
+          "--normal-text": "var(--color-popover-foreground)",
-          "--normal-border": "var(--border)",
+          "--normal-border": "var(--color-border)",
           "--border-radius": "var(--radius)",
         } as React.CSSProperties
       }