Added new theme (again), updated some homepage stuff

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

@@ -1,8 +1,81 @@
+import { Input } from "@tensamin/ui/cmp/input";
+import { Button } from "@tensamin/ui/cmp/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@tensamin/ui/cmp/dialog";
+import z from "zod";
+import { toast } from "@tensamin/shared/log";
+import { useSocket } from "@tensamin/ttp/context";
+
 /**
  * Executes Page.
  * @param none This function has no parameters.
  * @returns unknown.
  */
 export default function Page() {
-  return <div>Home</div>;
+  const { send } = useSocket();
+
+  function submit(username: string | null) {
+    const schema = z
+      .string()
+      .min(1, "Username is too short")
+      .max(15, "Username is too long");
+
+    const result = schema.safeParse(username?.toLowerCase().trim());
+
+    if (!result.success) {
+      toast("error", result.error.issues[0].message);
+      return;
+    }
+
+    send("add_conversation", {
+      chat_partner_name: result.data,
+    })
+      .then(() => toast("success", "Conversation added"))
+      .catch(() => toast("error", "Failed to add conversation"));
+  }
+
+  return (
+    <div className="p-3 flex gap-2">
+      <Dialog>
+        <DialogTrigger render={<Button>Add Conversation</Button>} />
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New Conversation</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>
+            Add a new conversation. Just enter the username of the person you
+            want to add as a conversation.
+          </DialogDescription>
+          <form
+            className="flex flex-col gap-5"
+            onSubmit={(event) => {
+              event.preventDefault();
+              const form = new FormData(event.currentTarget);
+              const username = form.get("username") as string | null;
+              submit(username);
+            }}
+          >
+            <Input
+              type="text"
+              id="username"
+              name="username"
+              placeholder="Enter username..."
+            />
+            <div className="flex w-full justify-end gap-1">
+              <DialogClose render={<Button variant="outline">Cancel</Button>} />
+              <Button type="submit">Continue</Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+      <Button disabled>Add Community</Button>
+    </div>
+  );
 }