Merge pull request #1 from kleo-dev/ui-and-functionality

UI and Functionality

package-lock.json

@@ -10,9 +10,11 @@
       "dependencies": {
         "@lexical/react": "^0.34.0",
         "@lexical/rich-text": "^0.34.0",
+        "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.2.8",
@@ -26,6 +28,7 @@
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
         "emoji-picker-react": "^4.13.2",
+        "framer-motion": "^12.23.22",
         "http-status-codes": "^2.3.0",
         "js-cookie": "^3.0.5",
         "lexical": "^0.34.0",
@@ -1004,6 +1007,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
@@ -1033,6 +1042,33 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1451,6 +1487,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -1596,6 +1663,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -2583,6 +2668,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.22",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
+      "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.21",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4059,6 +4171,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.21",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
+      "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4968,6 +5095,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",

package.json

@@ -13,9 +13,11 @@
   "dependencies": {
     "@lexical/react": "^0.34.0",
     "@lexical/rich-text": "^0.34.0",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -29,6 +31,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "emoji-picker-react": "^4.13.2",
+    "framer-motion": "^12.23.22",
     "http-status-codes": "^2.3.0",
     "js-cookie": "^3.0.5",
     "lexical": "^0.34.0",

src/app/api/user/route.ts

@@ -84,7 +84,7 @@ export async function GET(req: NextRequest) {
       { status: StatusCodes.BAD_REQUEST }
     );
   else {
-    const id = query_id ? query_id : token ? CLIENT_AUTH_TOKENS[token] : null;
+    const id = query_id ? parseInt(query_id) : token ? CLIENT_AUTH_TOKENS[token] : null;
 
     if (!id)
       return NextResponse.json(

src/app/home/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Card } from "@/components/ui/card";
+import { useState } from "react";
+import AppSidebar from "@/components/Sidebar";
+import MessageBox from "@/components/MessageBox";
+
+export default function HomePage() {
+  const [messages, setMessages] = useState([
+    { id: 1, user: "Alice", text: "Hey, how are you?" },
+    { id: 2, user: "You", text: "Doing good, just working on the chat app!" },
+  ]);
+
+  const [input, setInput] = useState("");
+
+  function sendMessage() {
+    if (!input.trim()) return;
+    setMessages([...messages, { id: Date.now(), user: "You", text: input }]);
+    setInput("");
+  }
+
+  return (
+    <AppSidebar>
+      <MessageBox
+        channelName="Alice"
+        messages={[]}
+        userList={[]}
+        setUserList={() => {}}
+        sendMessage={() => {}}
+      />
+    </AppSidebar>
+  );
+}
+
+function ServerButton({
+  label,
+  icon,
+}: {
+  label: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="rounded-full h-12 w-12"
+      title={label}
+    >
+      {icon}
+    </Button>
+  );
+}
+
+function DMItem({ name, status }: { name: string; status: string }) {
+  return (
+    <Card className="p-2 flex items-center gap-2 cursor-pointer hover:bg-accent">
+      <Avatar className="h-8 w-8">
+        <AvatarFallback>{name[0]}</AvatarFallback>
+      </Avatar>
+      <div className="flex flex-col">
+        <span className="text-sm font-medium">{name}</span>
+        <span className="text-xs text-muted-foreground">{status}</span>
+      </div>
+    </Card>
+  );
+}

src/app/login/page.tsx

@@ -5,16 +5,39 @@ import { Input } from "@/components/ui/input";
 import axios from "axios";
 import { useState } from "react";
 import Cookies from "js-cookie";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { Label } from "@/components/ui/label";
+import Link from "next/link";
 
 export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [feedback, setFeedback] = useState<
+    undefined | { kind: "error" | "info"; message: string }
+  >();
+
+  const router = useRouter();
 
   const login = async () => {
+    setFeedback(undefined);
+    try {
       const res = await axios.put("/api/user", { username, password });
+
       Cookies.set("token", (res.data as any).token);
-    redirect("/");
+      setFeedback({
+        kind: "info",
+        message: "Login successful! Redirecting...",
+      });
+
+      // small delay to show feedback before redirect
+      setTimeout(() => router.push("/home"), 800);
+    } catch (err: any) {
+      setFeedback({
+        kind: "error",
+        message:
+          err.response?.data?.message || "Login failed. Please try again.",
+      });
+    }
   };
 
   return (
@@ -22,8 +45,8 @@ export default function Login() {
       <div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
         <h1 className="mx-auto text-3xl">Login</h1>
         <span>
-          Username
+          Username or email
-          <Input onChange={(e) => setUsername(e.target.value)} />
+          <Input onChange={(e) => setUsername(e.target.value)} type="email" />
         </span>
         <span>
           Password
@@ -32,10 +55,28 @@ export default function Login() {
             onKeyDown={(e) => {
               if (e.key === "Enter") login();
             }}
+            type="password"
           />
         </span>
 
-        <Button className="mt-4" onClick={login}>
+        {/* Feedback message */}
+        {feedback && (
+          <div
+            className={`text-sm rounded-md p-2 ${
+              feedback.kind === "error"
+                ? "bg-red-500/20 text-red-400"
+                : "bg-green-500/20 text-green-400"
+            }`}
+          >
+            {feedback.message}
+          </div>
+        )}
+
+        <Label>
+          Don&apos;t have an account? <Link href={"/signup"}>Sign Up</Link>
+        </Label>
+
+        <Button className="mt-2" onClick={login}>
           Login
         </Button>
       </div>

src/app/page.tsx

@@ -1,22 +1,120 @@
 "use client";
 
-import AppSidebar from "@/components/Sidebar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { MessageCircle, Users, Shield } from "lucide-react";
+import { motion } from "framer-motion";
+import { useRouter } from "next/navigation";
+
+export default function LandingPage() {
+  const router = useRouter();
 
-export default function Home() {
   return (
-    <AppSidebar
+    <div className="min-h-screen flex flex-col">
-      server={{
+      {/* Header */}
-        id: "bro",
+      <header className="flex items-center justify-between px-8 py-6 border-b bg-background/60 backdrop-blur-md sticky top-0 z-50">
-        name: "Bro",
+        <motion.h1
-        channels: [
+          initial={{ opacity: 0, y: -10 }}
-          { id: "1", name: "general", kind: "text" },
+          animate={{ opacity: 1, y: 0 }}
-          { id: "2", name: "random", kind: "text" },
+          transition={{ duration: 0.5 }}
-          { id: "3", name: "help", kind: "text" },
+          className="text-2xl font-bold"
-          { id: "4", name: "voice-chat", kind: "voice" },
-        ],
-      }}
         >
-      ok
+          Voxa
-    </AppSidebar>
+        </motion.h1>
+        <div className="flex gap-4">
+          <Button variant="ghost" onClick={() => router.push("/login")}>
+            Login
+          </Button>
+          <Button onClick={() => router.push("/signup")}>Get Started</Button>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <main className="flex-1 flex flex-col items-center justify-center text-center px-6 py-20">
+        <motion.h2
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-4xl md:text-6xl font-extrabold tracking-tight mb-6"
+        >
+          Chat. Connect. Collaborate.
+        </motion.h2>
+        <p className="text-lg text-muted-foreground max-w-xl mb-8">
+          A modern chat app for teams and friends. Stay connected with real-time
+          messaging, secure channels, and seamless collaboration.
+        </p>
+        <div className="flex gap-3">
+          <Button size="lg" onClick={() => router.push("/signup")}>
+            Get Started
+          </Button>
+          <Button
+            size="lg"
+            variant="outline"
+            onClick={() => router.push("/docs/introduction")}
+          >
+            Learn More
+          </Button>
+        </div>
+      </main>
+
+      {/* Features */}
+      <section className="grid md:grid-cols-3 gap-6 px-6 py-16 max-w-6xl mx-auto">
+        <FeatureCard
+          icon={<MessageCircle className="h-10 w-10 text-primary" />}
+          title="Real-Time Chat"
+          description="Experience instant messaging with typing indicators, read receipts, and more with our self-hostable node system."
+        />
+        <FeatureCard
+          icon={<Users className="h-10 w-10 text-primary" />}
+          title="Group Channels"
+          description="Organize conversations into channels for projects, teams, or friends by hosting your own server."
+        />
+        <FeatureCard
+          icon={<Shield className="h-10 w-10 text-primary" />}
+          title="Secure & Private"
+          description="Your data is encrypted and protected, ensuring safe communication."
+        />
+      </section>
+
+      {/* Call to Action */}
+      {/* <section className="bg-muted py-20 px-6 text-center">
+        <h3 className="text-3xl font-semibold mb-4">
+          Ready to start chatting?
+        </h3>
+        <p className="text-muted-foreground mb-6">
+          Create your free account today and bring your conversations together.
+        </p>
+        <div className="max-w-md mx-auto flex gap-2">
+          <Input placeholder="Enter your email" />
+          <Button>Sign Up</Button>
+        </div>
+      </section> */}
+
+      {/* Footer */}
+      <footer className="px-6 py-8 border-t text-center text-sm text-muted-foreground">
+        © {new Date().getFullYear()} Voxa. All rights reserved.
+      </footer>
+    </div>
+  );
+}
+
+function FeatureCard({
+  icon,
+  title,
+  description,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <Card className="shadow-sm">
+      <CardContent className="p-6 flex flex-col items-center text-center">
+        {icon}
+        <h4 className="mt-4 font-semibold text-xl">{title}</h4>
+        <p className="mt-2 text-muted-foreground">{description}</p>
+      </CardContent>
+    </Card>
   );
 }

src/app/server/[id]/page.tsx

@@ -8,7 +8,7 @@ import Message from "@/types/message";
 import useUser, { User } from "@/hooks/get-user";
 import Cookies from "js-cookie";
 import axios from "axios";
-import { StringMap } from "@/types/typeUtils";
+import { NumberMap, StringMap } from "@/types/typeUtils";
 import ServerType from "@/types/server";
 
 export default function Server() {
@@ -17,7 +17,7 @@ export default function Server() {
   const wsRef = useRef<WebSocket | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const { user, loading } = useUser();
-  const [userList, setUserList] = useState<StringMap<User>>({});
+  const [userList, setUserList] = useState<NumberMap<User>>({});
 
   useEffect(() => {
     if (!ip || !user || loading) return;
@@ -83,9 +83,18 @@ export default function Server() {
   }, [ip, user, loading]);
 
   return (
-    <AppSidebar server={{ channels: [], ...server } as ServerType}>
+    <AppSidebar
+      server={
+        {
+          channels: [{ id: "general", name: "General", kind: "text" }],
+          ...server,
+        } as ServerType
+      }
+    >
       <MessageBox
+        channelName="General"
         userList={userList}
+        setUserList={setUserList}
         messages={messages
           .filter((m) => m.channel_id === "general")
           .toReversed()}

src/app/signup/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import { useState } from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function SignUp() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [acceptTerms, setAcceptTerms] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [feedback, setFeedback] = useState<
+    undefined | { kind: "error" | "info"; message: string }
+  >();
+
+  const router = useRouter();
+
+  const validateInput = ():
+    | { kind: "error" | "info"; message: string }
+    | undefined => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
+
+    if (!emailRegex.test(email)) {
+      return { kind: "error", message: "Invalid email format." };
+    }
+    if (!usernameRegex.test(username)) {
+      return {
+        kind: "error",
+        message:
+          "Username must be 3–20 characters and only letters, numbers, or underscores.",
+      };
+    }
+    if (password.length < 6) {
+      return {
+        kind: "error",
+        message: "Password must be at least 6 characters long.",
+      };
+    }
+    if (password !== confirmPassword) {
+      return { kind: "error", message: "Passwords do not match." };
+    }
+    if (!acceptTerms) {
+      return {
+        kind: "error",
+        message: "You must accept the terms to sign up.",
+      };
+    }
+    return;
+  };
+
+  const signup = async () => {
+    setFeedback(undefined);
+    const validationError = validateInput();
+    if (validationError) {
+      setFeedback(validationError);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const res = await axios.post("/api/user", { username, password, email });
+      Cookies.set("token", (res.data as any).token);
+
+      setFeedback({ kind: "info", message: "Account created! Redirecting..." });
+      setTimeout(() => router.push("/home"), 1000);
+    } catch (err: any) {
+      setFeedback({
+        kind: "error",
+        message:
+          err.response?.data?.message ||
+          "Signup failed. Please try again later.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="h-screen flex items-center">
+      <div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900 shadow-lg">
+        <h1 className="mx-auto text-3xl font-bold">Create an Account</h1>
+        <span>
+          Email
+          <Input
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="[email protected]"
+            type="email"
+          />
+        </span>
+        <span>
+          Username
+          <Input
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="john_doe"
+          />
+        </span>
+        <span>
+          Password
+          <Input
+            onChange={(e) => setPassword(e.target.value)}
+            type="password"
+          />
+        </span>
+        <span>
+          Confirm Password
+          <Input
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") signup();
+            }}
+            type="password"
+          />
+        </span>
+
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            checked={acceptTerms}
+            onChange={(e) => setAcceptTerms(e.target.checked)}
+          />
+          I agree to the <Link className="underline" href="/terms">terms & conditions</Link>
+        </label>
+
+        {/* Feedback message */}
+        {feedback && (
+          <div
+            className={`text-sm rounded-md p-2 ${
+              feedback.kind === "error"
+                ? "bg-red-500/20 text-red-400"
+                : "bg-green-500/20 text-green-400"
+            }`}
+          >
+            {feedback.message}
+          </div>
+        )}
+
+        <Button className="mt-4" onClick={signup} disabled={loading}>
+          {loading ? "Signing Up..." : "Sign Up"}
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/MessageBox.tsx

@@ -11,20 +11,32 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import { SmilePlusIcon } from "lucide-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { StringMap } from "@/types/typeUtils";
+import { NumberMap, StringMap } from "@/types/typeUtils";
 import { User } from "@/hooks/get-user";
+import axios from "axios";
 
 function MessageContainer({
   message,
   userList,
+  setUserList,
 }: {
   message: Message;
-  userList: StringMap<User>;
+  userList: NumberMap<User>;
+  setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
 }) {
+  useEffect(() => {
+    axios
+      .get("/api/user/", { params: { id: message.from } })
+      .then((res) =>
+        setUserList((prev) => ({ ...prev, [message.from]: res.data as User }))
+      )
+      .catch(console.error);
+  }, [message.from, setUserList]);
+
   return (
     <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
       <div className="flex gap-2">
@@ -117,19 +129,33 @@ function MessageContainer({
 export default function MessageBox({
   messages,
   userList,
+  setUserList,
   sendMessage,
+  channelName,
 }: {
   messages: Message[];
-  userList: StringMap<User>;
+  userList: NumberMap<User>;
+  setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
   sendMessage: (m: string) => void;
+  channelName?: string;
 }) {
   const [text, setText] = useState("");
 
   return (
-    <div className="h-screen w-full flex flex-col py-5 pl-5 gap-5">
+    <div className="h-screen w-full flex flex-col pb-5 pl-5 gap-5">
+      {channelName && (
+        <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
+          {channelName}
+        </header>
+      )}
       <div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
         {messages.map((msg) => (
-          <MessageContainer key={msg.id} message={msg} userList={userList} />
+          <MessageContainer
+            key={msg.id}
+            message={msg}
+            userList={userList}
+            setUserList={setUserList}
+          />
         ))}
       </div>
       <div className="w-full flex gap-3 pr-5">

src/components/Sidebar.tsx

@@ -1,21 +1,12 @@
 "use client";
 
 import {
-  Sidebar,
+  HashIcon,
-  SidebarContent,
+  MessageCircle,
-  SidebarHeader,
+  Plus,
-  SidebarMenu,
+  Search,
-  SidebarMenuButton,
+  Volume2Icon,
-  SidebarMenuItem,
+} from "lucide-react";
-  SidebarProvider,
-} from "./ui/sidebar";
-import { ChevronDown, HashIcon, MicIcon } from "lucide-react";
-import {
-  DropdownMenuItem,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
 import Server from "@/types/server";
 import { useEffect, useState } from "react";
 import Cookies from "js-cookie";
@@ -32,7 +23,11 @@ import {
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { Button } from "./ui/button";
-import Link from "next/link";
+import { Card } from "./ui/card";
+import { Avatar, AvatarFallback } from "./ui/avatar";
+import { ScrollArea } from "./ui/scroll-area";
+import { useRouter } from "next/navigation";
+import Channel from "@/types/channel";
 
 export default function AppSidebar({
   server,
@@ -43,6 +38,7 @@ export default function AppSidebar({
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
+  const router = useRouter();
 
   useEffect(() => {
     const s = Cookies.get("servers")?.split(",");
@@ -63,8 +59,37 @@ export default function AppSidebar({
     setNewServer({ name: "", ip: "" });
   };
 
-  return server ? (
+  return (
+    <div className="flex h-screen">
+      <div className="h-screen flex border-r">
+        <div className="w-16 flex flex-col items-center gap-4 py-4 bg-muted border-r">
+          <Button
+            onClick={() => router.push(`/home`)}
+            className="bg-transparent text-accent-foreground hover:text-accent"
+          >
+            <MessageCircle className="h-6 w-6" />
+          </Button>
+
+          {servers.map(
+            ([ip, name]) =>
+              ip && (
+                <Button
+                  onClick={() => router.push(`/server/${ip}`)}
+                  key={ip}
+                  className="bg-transparent text-accent-foreground hover:text-accent"
+                >
+                  <HashIcon className="h-6 w-6" />
+                </Button>
+              )
+          )}
+
           <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="icon">
+                <Plus className="h-5 w-5" />
+              </Button>
+            </DialogTrigger>
+
             <DialogContent>
               <DialogHeader>
                 <DialogTitle>Add server</DialogTitle>
@@ -81,7 +106,10 @@ export default function AppSidebar({
                     name="name"
                     value={newServer.name}
                     onChange={(e) =>
-                setNewServer((prev) => ({ ...prev, name: e.target.value }))
+                      setNewServer((prev) => ({
+                        ...prev,
+                        name: e.target.value,
+                      }))
                     }
                     placeholder="Voxa Server"
                   />
@@ -93,7 +121,10 @@ export default function AppSidebar({
                     name="ip"
                     value={newServer.ip}
                     onChange={(e) =>
-                setNewServer((prev) => ({ ...prev, ip: e.target.value }))
+                      setNewServer((prev) => ({
+                        ...prev,
+                        ip: e.target.value,
+                      }))
                     }
                     placeholder="192.168.1.5"
                   />
@@ -111,49 +142,79 @@ export default function AppSidebar({
                 </DialogClose>
               </DialogFooter>
             </DialogContent>
-
-      <SidebarProvider defaultOpen>
-        <Sidebar>
-          <SidebarHeader>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <SidebarMenuButton>
-                      {server.name}
-                      <ChevronDown className="ml-auto" />
-                    </SidebarMenuButton>
-                  </DropdownMenuTrigger>
-
-                  <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
-                    {servers.map((s, i) => (
-                      <DropdownMenuItem key={i} asChild>
-                        <Link href={"/server/" + s[0]}>{s[1] || s[0]}</Link>
-                      </DropdownMenuItem>
-                    ))}
-
-                    <DialogTrigger asChild>
-                      <DropdownMenuItem>Add Server</DropdownMenuItem>
-                    </DialogTrigger>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarHeader>
-
-          <SidebarContent className="px-2">
-            {server.channels.map((channel) => (
-              <SidebarMenuButton key={channel.id} className="gap-1.5">
-                {channel.kind === "voice" ? <MicIcon /> : <HashIcon />}
-                {channel.name}
-              </SidebarMenuButton>
-            ))}
-          </SidebarContent>
-        </Sidebar>
-        {children}
-      </SidebarProvider>
           </Dialog>
+        </div>
+
+        {/* Right column */}
+        <div className="w-64 flex flex-col bg-card">
+          {server ? (
+            <div className="p-3 border-b flex items-center gap-2">
+              <h2>{server.name}</h2>
+            </div>
           ) : (
-    children
+            <div className="p-3 border-b flex items-center gap-2">
+              <Search className="h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Find or start a conversation"
+                className="h-8"
+              />
+            </div>
+          )}
+          <ScrollArea className="flex-1">
+            <div className="p-2 flex flex-col gap-2">
+              {server ? (
+                <>
+                  {server.channels.map((channel) => (
+                    <ChannelProp key={channel.id} {...channel} />
+                  ))}
+                </>
+              ) : (
+                <>
+                  <DMItem name="Alice" status="online" />
+                  <DMItem name="Bob" status="offline" />
+                  <DMItem name="Charlie" status="away" />
+                </>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
+
+      {children}
+    </div>
   );
 }
+
+function DMItem({ name, status }: { name: string; status: string }) {
+  return (
+    <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
+      <Avatar className="h-8 w-8">
+        <AvatarFallback>{name[0]}</AvatarFallback>
+      </Avatar>
+      <div className="flex flex-col">
+        <span className="text-sm font-medium">{name}</span>
+        <span className="text-xs text-muted-foreground">{status}</span>
+      </div>
+    </Card>
+  );
+}
+
+function ChannelProp(channel: Channel) {
+  return (
+    <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
+      <ChannelIcon kind={channel.kind} />
+      <span className="text-sm font-medium">{channel.name}</span>
+    </Card>
+  );
+}
+
+function ChannelIcon({ kind }: { kind: "text" | "voice" }) {
+  switch (kind) {
+    case "text":
+      return <HashIcon className="h-4 w-4" />;
+    case "voice":
+      return <Volume2Icon className="h-4 w-4" />;
+    default:
+      return null;
+  }
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

src/types/typeUtils.ts

@@ -2,6 +2,10 @@ export type StringMap<T> = {
   [key: string]: T;
 };
 
+export type NumberMap<T> = {
+  [key: number]: T;
+};
+
 export function narrow<T>(s: T, defd: T, ...allowed: T[]): T {
   if (allowed.includes(s) || s == defd) {
     return s;