feat(channels): add EditCategoryModal and category settings action in sidebar

components/modals/EditCategoryModal.tsx

@@ -0,0 +1,189 @@
+/**
+ * @file components/modals/EditCategoryModal.tsx
+ * @description Modal dialog component to edit category settings or delete a category.
+ */
+
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { X, Trash2 } from "lucide-react";
+import { useActiveServer } from "@/lib/context/ServerContext";
+import type { Category } from "@/db/schema";
+import { ActionButton } from "../ui/ActionButton";
+
+interface EditCategoryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  category: Category | null;
+}
+
+/** Renders a modal dialog allowing users to edit or delete a category. */
+export function EditCategoryModal({
+  isOpen,
+  onClose,
+  category,
+}: EditCategoryModalProps) {
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const router = useRouter();
+  const { updateCategory, removeCategory } = useActiveServer();
+
+  useEffect(() => {
+    if (category) {
+      setName(category.name);
+      setIsConfirmingDelete(false);
+    }
+  }, [category]);
+
+  if (!isOpen || !category) return null;
+
+  const isChanged = name.trim() !== category.name;
+  const isValid = name.trim().length > 0;
+  const canSave = isChanged && isValid && !isLoading && !isDeleting;
+
+  /** Handles the update of the category name via PATCH. */
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSave) return;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await fetch(`/api/categories/${category.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Error updating the category.");
+      }
+
+      const updated = await response.json();
+      updateCategory(updated);
+      router.refresh();
+      onClose();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /** Handles the deletion of the category via DELETE. */
+  const handleDelete = async () => {
+    if (!isConfirmingDelete) {
+      setIsConfirmingDelete(true);
+      return;
+    }
+
+    if (isDeleting || isLoading) return;
+
+    try {
+      setIsDeleting(true);
+      setError(null);
+
+      const response = await fetch(`/api/categories/${category.id}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        throw new Error("Error deleting the category.");
+      }
+
+      removeCategory(category.id);
+      router.refresh();
+      onClose();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="bg-surface border border-surface/50 rounded-2xl w-full max-w-md p-6 shadow-2xl relative animate-in fade-in zoom-in-95 duration-150"
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isLoading || isDeleting}
+          className="absolute top-4 right-4 text-muted hover:text-white transition-colors cursor-pointer"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <h2 className="text-xl font-bold text-white mb-1">Edit Category</h2>
+        <p className="text-sm text-muted mb-6">
+          Change category details or delete this category.
+        </p>
+
+        <form onSubmit={handleUpdate} className="space-y-4">
+          <div>
+            <label className="block text-xs font-semibold text-muted uppercase tracking-wider mb-2">
+              Category Name
+            </label>
+            <input
+              type="text"
+              required
+              value={name}
+              maxLength={32}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="CATEGORY NAME"
+              disabled={isLoading || isDeleting}
+              autoFocus
+              className="w-full bg-background border border-surface/80 rounded-xl px-3.5 py-2.5 text-sm text-white placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent transition-all disabled:opacity-50"
+            />
+          </div>
+
+          {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
+
+          <div className="flex items-center justify-between pt-4">
+            <ActionButton
+              type="button"
+              variant="danger"
+              onClick={handleDelete}
+              isLoading={isDeleting}
+              disabled={isLoading}
+              icon={Trash2}
+            >
+              {isConfirmingDelete ? "Sure?" : "Delete Category"}
+            </ActionButton>
+
+            <div className="flex items-center gap-2">
+              <ActionButton
+                type="button"
+                variant="secondary"
+                onClick={onClose}
+                disabled={isLoading || isDeleting}
+              >
+                Cancel
+              </ActionButton>
+
+              <ActionButton
+                type="submit"
+                variant="primary"
+                isLoading={isLoading}
+                disabled={!canSave || isDeleting}
+              >
+                Save
+              </ActionButton>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

components/sidebar/ChannelSidebar.tsx

@@ -12,6 +12,7 @@ import { useSidebarStore } from "@/lib/stores/useSidebarStore";
 import { CreateChannelModal } from "@/components/modals/CreateChannelModal";
 import { CreateCategoryModal } from "@/components/modals/CreateCategoryModal";
 import { EditChannelModal } from "@/components/modals/EditChannelModal";
+import { EditCategoryModal } from "@/components/modals/EditCategoryModal";
 import {
   ChevronDown,
   ChevronRight,
@@ -20,7 +21,7 @@ import {
   Plus,
   Settings,
 } from "lucide-react";
-import type { Channel } from "@/db/schema";
+import type { Category, Channel } from "@/db/schema";
 import Link from "next/link";
 
 /** Renders the channel navigation sidebar for the active server. */
@@ -29,6 +30,7 @@ export function ChannelSidebar() {
   const [isCreateCategoryModalOpen, setIsCreateCategoryModalOpen] =
     useState(false);
   const [editingChannel, setEditingChannel] = useState<Channel | null>(null);
+  const [editingCategory, setEditingCategory] = useState<Category | null>(null);
   const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(
     null,
   );
@@ -60,12 +62,22 @@ export function ChannelSidebar() {
   };
 
   /** Opens the edit channel modal for a specific channel. */
-  const handleOpenSettings = (e: React.MouseEvent, channel: Channel) => {
+  const handleOpenChannelSettings = (e: React.MouseEvent, channel: Channel) => {
     e.preventDefault();
     e.stopPropagation();
     setEditingChannel(channel);
   };
 
+  /** Opens the edit category modal for a specific category. */
+  const handleOpenCategorySettings = (
+    e: React.MouseEvent,
+    category: Category,
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditingCategory(category);
+  };
+
   /** Opens the create channel modal for a specific category or uncategorized. */
   const handleOpenCreateModal = (categoryId: string | null = null) => {
     setSelectedCategoryId(categoryId);
@@ -106,7 +118,7 @@ export function ChannelSidebar() {
         {!channel.isDefault && (
           <button
             type="button"
-            onClick={(e) => handleOpenSettings(e, channel)}
+            onClick={(e) => handleOpenChannelSettings(e, channel)}
             className="opacity-0 group-hover:opacity-100 p-1 text-muted hover:text-white focus:outline-none transition-all cursor-pointer shrink-0 ml-2"
             aria-label="Channel Settings"
           >
@@ -177,7 +189,7 @@ export function ChannelSidebar() {
             )}
           </div>
 
-          {/* 2. Custom Kategorien */}
+          {/* Custom Categories */}
           {categoriesList.map((category) => {
             const isCollapsed = collapsedCategories[category.id];
 
@@ -197,14 +209,24 @@ export function ChannelSidebar() {
                     <span className="truncate">{category.name}</span>
                   </button>
 
-                  <button
+                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    type="button"
+                    <button
-                    onClick={() => handleOpenCreateModal(category.id)}
+                      type="button"
-                    className="opacity-0 group-hover:opacity-100 p-0.5 rounded text-muted hover:text-white hover:bg-surface transition-colors cursor-pointer"
+                      onClick={(e) => handleOpenCategorySettings(e, category)}
-                    aria-label="Channel in Kategorie erstellen"
+                      className="p-0.5 rounded text-muted hover:text-white hover:bg-surface transition-colors cursor-pointer"
-                  >
+                      aria-label="Edit category"
-                    <Plus className="w-3.5 h-3.5" />
+                    >
-                  </button>
+                      <Settings className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleOpenCreateModal(category.id)}
+                      className="p-0.5 rounded text-muted hover:text-white hover:bg-surface transition-colors cursor-pointer"
+                      aria-label="Create channel in category"
+                    >
+                      <Plus className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
                 </div>
 
                 {!isCollapsed && (
@@ -225,6 +247,12 @@ export function ChannelSidebar() {
         serverId={activeServer.id}
       />
 
+      <EditCategoryModal
+        isOpen={!!editingCategory}
+        onClose={() => setEditingCategory(null)}
+        category={editingCategory}
+      />
+
       <CreateChannelModal
         isOpen={isCreateModalOpen}
         onClose={() => setIsCreateModalOpen(false)}

lib/context/ServerContext.tsx

@@ -8,20 +8,20 @@
 import { createContext, useContext, useState } from "react";
 import type { Server, Channel, Category } from "@/db/schema";
 
-/** Type definition representing a server entity along with its associated channels array. */
+/** Extended server type containing associated channels and categories. */
 export type ServerWithChannels = Server & {
   channels: Channel[];
   categories: Category[];
 };
 
-/** Represents a member within a server. */
+/** Member representation within a server context. */
 export interface ServerMember {
   id: string;
   name: string;
   isOnline?: boolean;
 }
 
-/** Interface defining the shape of the ServerContext state and update handlers. */
+/** Shape of the server context state and dispatch functions. */
 interface ServerContextType {
   activeServer: ServerWithChannels | null;
   setActiveServer: (server: ServerWithChannels | null) => void;
@@ -29,59 +29,60 @@ interface ServerContextType {
   removeChannel: (channelId: string) => void;
   updateChannel: (channel: Channel) => void;
   addCategory: (category: Category) => void;
+  updateCategory: (category: Category) => void;
+  removeCategory: (categoryId: string) => void;
   members: ServerMember[];
   setMembers: (members: ServerMember[]) => void;
 }
 
-const ServerContext = createContext<ServerContextType>({
+const ServerContext = createContext<ServerContextType | null>(null);
-  activeServer: null,
-  setActiveServer: () => {},
-  addChannel: () => {},
-  removeChannel: () => {},
-  updateChannel: () => {},
-  addCategory: () => {},
-  members: [],
-  setMembers: () => {},
-});
 
-/** Provider component that wraps the application layout to provide global access to active server state and member listings. */
+/** Provides active server, channel, and member management state to child components. */
 export function ServerProvider({ children }: { children: React.ReactNode }) {
   const [activeServer, setActiveServer] = useState<ServerWithChannels | null>(
     null,
   );
   const [members, setMembers] = useState<ServerMember[]>([]);
 
-  /** Helper function to update channels within the active server state. */
+  /** Updates the active server state using a partial updater function. */
-  const updateChannels = (fn: (channels: Channel[]) => Channel[]) => {
+  const updateServer = (
-    setActiveServer((prev) =>
+    fn: (prev: ServerWithChannels) => Partial<ServerWithChannels>,
-      prev ? { ...prev, channels: fn(prev.channels) } : prev,
+  ) => {
-    );
+    setActiveServer((prev) => (prev ? { ...prev, ...fn(prev) } : null));
   };
 
   /** Adds a new channel to the active server. */
-  const addChannel = (channel: Channel) =>
+  const addChannel = (ch: Channel) =>
-    updateChannels((prev) => [...prev, channel]);
+    updateServer((s) => ({ channels: [...s.channels, ch] }));
 
-  /** Removes a channel from the active server by its identifier. */
+  /** Removes a channel by ID from the active server. */
-  const removeChannel = (channelId: string) =>
+  const removeChannel = (id: string) =>
-    updateChannels((prev) => prev.filter((c) => c.id !== channelId));
+    updateServer((s) => ({ channels: s.channels.filter((c) => c.id !== id) }));
 
-  /** Updates an existing channel within the active server. */
+  /** Updates an existing channel in the active server. */
-  const updateChannel = (updatedChannel: Channel) =>
+  const updateChannel = (ch: Channel) =>
-    updateChannels((prev) =>
+    updateServer((s) => ({
-      prev.map((c) => (c.id === updatedChannel.id ? updatedChannel : c)),
+      channels: s.channels.map((c) => (c.id === ch.id ? ch : c)),
-    );
+    }));
 
-  const addCategory = (category: Category) => {
+  /** Adds a new category to the active server. */
-    setActiveServer((prev) =>
+  const addCategory = (cat: Category) =>
-      prev
+    updateServer((s) => ({ categories: [...(s.categories || []), cat] }));
-        ? {
+
-            ...prev,
+  /** Updates an existing category in the active server. */
-            categories: [...(prev.categories || []), category],
+  const updateCategory = (cat: Category) =>
-          }
+    updateServer((s) => ({
-        : prev,
+      categories: s.categories.map((c) => (c.id === cat.id ? cat : c)),
-    );
+    }));
-  };
+
+  /** Removes a category by ID and unassigns its channels. */
+  const removeCategory = (id: string) =>
+    updateServer((s) => ({
+      categories: s.categories.filter((c) => c.id !== id),
+      channels: s.channels.map((c) =>
+        c.categoryId === id ? { ...c, categoryId: null } : c,
+      ),
+    }));
 
   return (
     <ServerContext.Provider
@@ -92,6 +93,8 @@ export function ServerProvider({ children }: { children: React.ReactNode }) {
         removeChannel,
         updateChannel,
         addCategory,
+        updateCategory,
+        removeCategory,
         members,
         setMembers,
       }}
@@ -101,7 +104,7 @@ export function ServerProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
-/** Custom hook to access the active server context. */
+/** Custom hook to consume active server context state. */
 export function useActiveServer() {
   const context = useContext(ServerContext);
   if (!context) {