160 lines
4.4 KiB
TypeScript
160 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
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";
|
|
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,
|
|
children,
|
|
}: Readonly<{
|
|
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>
|
|
<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>
|
|
) : (
|
|
children
|
|
);
|
|
}
|