Server list

package-lock.json

@@ -12,6 +12,7 @@
         "@lexical/rich-text": "^0.34.0",
         "@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-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.2.8",
@@ -1253,6 +1254,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "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-menu": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",

package.json

@@ -15,6 +15,7 @@
     "@lexical/rich-text": "^0.34.0",
     "@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-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",

src/app/page.tsx

@@ -1,15 +1,22 @@
-'use client';
+"use client";
 
 import AppSidebar from "@/components/Sidebar";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
 
 export default function Home() {
   return (
-    <AppSidebar>
+    <AppSidebar
-      <Button onClick={() => {
+      server={{
-        
+        id: "bro",
-      }}>Connect</Button>
+        name: "Bro",
+        channels: [
+          { id: "1", name: "general", kind: "text" },
+          { id: "2", name: "random", kind: "text" },
+          { id: "3", name: "help", kind: "text" },
+          { id: "4", name: "voice-chat", kind: "voice" },
+        ],
+      }}
+    >
+      ok
     </AppSidebar>
   );
 }

src/components/Sidebar.tsx

@@ -1,14 +1,15 @@
+"use client";
+
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
 } from "./ui/sidebar";
-import { ChevronDown, HashIcon, MicIcon, SpeakerIcon } from "lucide-react";
+import { ChevronDown, HashIcon, MicIcon } from "lucide-react";
 import {
   DropdownMenuItem,
   DropdownMenu,
@@ -16,6 +17,22 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import Server from "@/types/server";
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Button } from "./ui/button";
+import Link from "next/link";
 
 export default function AppSidebar({
   server,
@@ -24,7 +41,77 @@ export default function AppSidebar({
   server?: Server;
   children: React.ReactNode;
 }>) {
+  const [servers, setServers] = useState<[string, string][]>([]);
+  const [newServer, setNewServer] = useState({ name: "", ip: "" });
+
+  useEffect(() => {
+    const s = Cookies.get("servers")?.split(",");
+    if (s) setServers(s.map((x) => x.trim().split("@") as [string, string]));
+  }, []);
+
+  const handleAddServer = () => {
+    if (!newServer.ip) return;
+    const updatedServers = [
+      ...servers,
+      [newServer.ip, newServer.name] as [string, string],
+    ];
+
+    setServers(updatedServers);
+    Cookies.set("servers", updatedServers.map((x) => x.join("@")).join(","), {
+      expires: 7,
+    });
+    setNewServer({ name: "", ip: "" });
+  };
+
   return server ? (
+    <Dialog>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add server</DialogTitle>
+          <DialogDescription>
+            Add a new server to your server list.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          <div className="grid gap-3">
+            <Label htmlFor="name-1">Name</Label>
+            <Input
+              id="name-1"
+              name="name"
+              value={newServer.name}
+              onChange={(e) =>
+                setNewServer((prev) => ({ ...prev, name: e.target.value }))
+              }
+              placeholder="Voxa Server"
+            />
+          </div>
+          <div className="grid gap-3">
+            <Label htmlFor="ip-1">Server Ip</Label>
+            <Input
+              id="ip-1"
+              name="ip"
+              value={newServer.ip}
+              onChange={(e) =>
+                setNewServer((prev) => ({ ...prev, ip: e.target.value }))
+              }
+              placeholder="192.168.1.5"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button type="button" onClick={handleAddServer}>
+              Add server
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+
       <SidebarProvider defaultOpen>
         <Sidebar>
           <SidebarHeader>
@@ -39,17 +126,21 @@ export default function AppSidebar({
                   </DropdownMenuTrigger>
 
                   <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
-                  <DropdownMenuItem>
+                    {servers.map((s, i) => (
-                    <span>Acme Inc</span>
+                      <DropdownMenuItem key={i} asChild>
-                  </DropdownMenuItem>
+                        <Link href={"/server/" + s[0]}>{s[1] || s[0]}</Link>
-                  <DropdownMenuItem>
-                    <span>Acme Corp.</span>
                       </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">
@@ -61,6 +152,7 @@ export default function AppSidebar({
         </Sidebar>
         {children}
       </SidebarProvider>
+    </Dialog>
   ) : (
     children
   );

src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }