diff --git a/components/layout/ServerSettingsMenu.tsx b/components/layout/ServerSettingsMenu.tsx index d10acf7..024b615 100644 --- a/components/layout/ServerSettingsMenu.tsx +++ b/components/layout/ServerSettingsMenu.tsx @@ -1,57 +1,119 @@ /** * @file components/layout/ServerSettingsMenu.tsx - * @description Header button triggering the server overview/settings modal. + * @description Single settings dropdown menu providing server management actions (Settings, Create Category, Create Channel). */ "use client"; -import { useState } from "react"; -import { Settings } from "lucide-react"; +import { useState, useRef, useEffect } from "react"; +import { Settings, FolderPlus, PlusCircle, Sliders } from "lucide-react"; import { EditServerModal } from "@/components/modals/EditServerModal"; +import { CreateCategoryModal } from "@/components/modals/CreateCategoryModal"; +import { CreateChannelModal } from "@/components/modals/CreateChannelModal"; -/** - * Props for the ServerSettingsMenu component. - * - * @interface ServerSettingsMenuProps - * @property {string} serverId - The unique identifier of the server. - * @property {string} serverName - The display name of the server. - */ +/** Props for the ServerSettingsMenu component. */ interface ServerSettingsMenuProps { serverId: string; serverName: string; } -/** - * Renders a settings button that opens the edit server modal. - * - * @param {ServerSettingsMenuProps} props - The component props. - * @param {string} props.serverId - The unique identifier of the server. - * @param {string} props.serverName - The display name of the server. - * @returns {JSX.Element} The rendered server settings trigger and modal component. - */ +/** Renders a server management dropdown menu with modal triggers for channel, category, and server settings. */ export function ServerSettingsMenu({ serverId, serverName, }: ServerSettingsMenuProps) { - const [isModalOpen, setIsModalOpen] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [isEditServerOpen, setIsEditServerOpen] = useState(false); + const [isCreateCategoryOpen, setIsCreateCategoryOpen] = useState(false); + const [isCreateChannelOpen, setIsCreateChannelOpen] = useState(false); + + const menuRef = useRef(null); + + // Close the menu when clicked outside of it + useEffect(() => { + function handleClickOutside(event: MouseEvent) { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setIsMenuOpen(false); + } + } + if (isMenuOpen) { + document.addEventListener("mousedown", handleClickOutside); + } + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [isMenuOpen]); return ( - <> +
+ {/* Button */} + {/* Dropdown MenĂ¼ */} + {isMenuOpen && ( +
+ + + + +
+ + +
+ )} + + {/* Modals */} setIsModalOpen(false)} + onClose={() => setIsEditServerOpen(false)} /> - + setIsCreateCategoryOpen(false)} + serverId={serverId} + /> + setIsCreateChannelOpen(false)} + serverId={serverId} + /> +
); } diff --git a/components/sidebar/ChannelSidebar.tsx b/components/sidebar/ChannelSidebar.tsx index 5a55fbf..190f611 100644 --- a/components/sidebar/ChannelSidebar.tsx +++ b/components/sidebar/ChannelSidebar.tsx @@ -14,7 +14,7 @@ import { CreateCategoryModal } from "@/components/modals/CreateCategoryModal"; import { EditChannelModal } from "@/components/modals/EditChannelModal"; import { EditCategoryModal } from "@/components/modals/EditCategoryModal"; import { CategorySection } from "./CategorySection"; -import { FolderPlus, PanelLeftClose } from "lucide-react"; +import { PanelLeftClose } from "lucide-react"; import type { Category, Channel } from "@/db/schema"; /** Renders the channel sidebar navigation for the active server. */ @@ -55,13 +55,6 @@ export function ChannelSidebar() {
{activeServer.name}
-