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>
+  );
 }

apps/web/src/routes/layout.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 
 import Storage from "@tensamin/storage/context";
 import Crypto from "@tensamin/crypto/context";
@@ -13,8 +13,34 @@ import { Toaster } from "@tensamin/ui/cmp/sonner";
  * @returns unknown.
  */
 export default function Layout(props: { children: ReactNode }) {
+  const [pixelRatio, setPixelRatio] = useState(devicePixelRatio);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setPixelRatio(devicePixelRatio);
+      setVisible(true);
+      setTimeout(() => setVisible(false), 1000);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <>
+      <div className="fixed top-0 left-0 z-100 w-screen h-screen flex flex-col justify-center items-center pointer-events-none select-none">
+        {visible && (
+          <div className="bg-card border p-1 text-xs">{pixelRatio}</div>
+        )}
+
+        {/* Todo: Make this nicer */}
+        {pixelRatio !== 1 && (
+          <div className="fixed bottom-0 right-0 m-3 text-xs text-red-500">
+            Hey! You're zoomed in.
+          </div>
+        )}
+      </div>
       <Toaster />
       <Storage>
         <LegalWrapper>