Start new DM

src/app/chat/StartNewDM.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { PlusCircle } from "lucide-react";
+import { UserProfile } from "@/hooks/get-user";
+import { useRouter } from "next/navigation";
+import axios from "axios";
+
+export default function StartNewDM() {
+  const [username, setUsername] = useState("");
+  const router = useRouter();
+
+  const handleStartDM = async () => {
+    const res = await axios.get("/api/profile", {
+      params: { username },
+    });
+    const user = res.data as UserProfile;
+    router.push(`/chat/${user.id}`);
+    setUsername("");
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <PlusCircle className="w-4 h-4" />
+          Start New DM
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56 p-3 space-y-2">
+        <Input
+          type="text"
+          placeholder="Enter username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          autoComplete="off"
+          spellCheck={false}
+          autoCorrect="off"
+          autoCapitalize="none"
+        />
+
+        <Button onClick={handleStartDM} className="w-full">
+          Start
+        </Button>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/app/chat/page.tsx

@@ -19,6 +19,7 @@ import {
   ChevronRight,
 } from "lucide-react";
 import Link from "next/link";
+import StartNewDM from "./StartNewDM";
 
 export default function ChatHub() {
   const app = useApp();
@@ -122,10 +123,7 @@ export default function ChatHub() {
           <div>
             <h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
             <div className="flex flex-wrap gap-3">
-              <Button variant="outline" className="gap-2">
+              <StartNewDM />
-                <PlusCircle className="w-4 h-4" />
-                Start New DM
-              </Button>
               <Button variant="outline" className="gap-2">
                 <Users className="w-4 h-4" />
                 Create Server