feat: category management UI — create modal and delete context menu

Add CreateCategory modal (replaces browser prompt) and right-click
"Delete Category" context menu on category headers with confirmation
dialog explaining channels will be uncategorized, not deleted.

packages/server/src/routes/spaces.ts

@@ -85,11 +85,14 @@ export async function spaceRoutes(app: FastifyInstance): Promise<void> {
 
     const db = getDb();
     const spaceId = generateSnowflake();
+    const textCategoryId = generateSnowflake();
+    const voiceCategoryId = generateSnowflake();
     const channelId = generateSnowflake();
+    const voiceChannelId = generateSnowflake();
     const now = Date.now();
     const inviteCode = generateInviteCode();
 
-    // Create server, owner membership, default channel, and @everyone role atomically
+    // Create server, owner membership, default categories + channels, and @everyone role atomically
     db.transaction((tx) => {
       tx.insert(schema.spaces).values({
         id: spaceId,
@@ -110,12 +113,42 @@ export async function spaceRoutes(app: FastifyInstance): Promise<void> {
         joinedAt: now,
       }).run();
 
+      // Default categories
+      tx.insert(schema.channelCategories).values({
+        id: textCategoryId,
+        spaceId,
+        name: 'text-channels',
+        position: 0,
+        createdAt: now,
+      }).run();
+
+      tx.insert(schema.channelCategories).values({
+        id: voiceCategoryId,
+        spaceId,
+        name: 'voice-channels',
+        position: 1,
+        createdAt: now,
+      }).run();
+
+      // Default text channel in text-channels category
       tx.insert(schema.channels).values({
         id: channelId,
         spaceId,
         name: 'general',
         type: 'text',
         position: 0,
+        categoryId: textCategoryId,
+        createdAt: now,
+      }).run();
+
+      // Default voice channel in voice-channels category
+      tx.insert(schema.channels).values({
+        id: voiceChannelId,
+        spaceId,
+        name: 'voice',
+        type: 'voice',
+        position: 0,
+        categoryId: voiceCategoryId,
         createdAt: now,
       }).run();
 

packages/web/src/components/layout/AppLayout.tsx

@@ -9,6 +9,7 @@ import { ImagePreview } from '../chat/ImagePreview';
 import { CreateSpaceModal } from '../modals/CreateSpace';
 import { JoinSpaceModal } from '../modals/JoinSpace';
 import { CreateChannelModal } from '../modals/CreateChannel';
+import { CreateCategoryModal } from '../modals/CreateCategory';
 import { InviteModal } from '../modals/InviteModal';
 import { UserSettingsModal } from '../modals/UserSettings';
 import { SpaceSettingsModal } from '../modals/SpaceSettings';
@@ -271,6 +272,7 @@ export function AppLayout() {
       <CreateSpaceModal />
       <JoinSpaceModal />
       <CreateChannelModal />
+      <CreateCategoryModal />
       <InviteModal />
       <UserSettingsModal />
       <SpaceSettingsModal />

packages/web/src/components/layout/ChannelSidebar.tsx

@@ -17,6 +17,7 @@ import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import { parseFederatedUsername, isSelf } from '../../utils/identity';
 import { joinVoiceChannel, broadcastVoiceStatus, broadcastDeafenViaLiveKit } from '../../utils/voice';
 import { ContextMenu } from '../ui/ContextMenu';
+import { ConfirmDialog } from '../ui/ConfirmDialog';
 
 export function ChannelSidebar() {
   const spaces = useSpaceStore((s) => s.spaces);
@@ -103,6 +104,10 @@ export function ChannelSidebar() {
   const [channelDragState, setChannelDragState] = useState<{ dragType: 'channel' | 'category'; dragId: string } | null>(null);
   const [dropIndicator, setDropIndicator] = useState<{ targetId: string; position: 'before' | 'after'; type: 'channel' | 'category' } | null>(null);
 
+  // Delete category confirmation state
+  const [deleteCategoryId, setDeleteCategoryId] = useState<string | null>(null);
+  const [deleteCategoryLoading, setDeleteCategoryLoading] = useState(false);
+
   // Collapse state — persisted in localStorage
   const collapseKey = `backspace:collapsed-categories:${currentSpaceId}`;
   const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(() => {
@@ -621,9 +626,7 @@ export function ChannelSidebar() {
           const isCollapsed = collapsedCategories.has(category.id);
           const hasUnread = isCollapsed && categoryHasUnread(category.id);
 
-          return (
+          const categoryHeader = (
-            <div key={category.id} className="mb-[19px]">
-              {/* Category header */}
                 <div
                   className={`flex items-center justify-between px-1 mb-1 group cursor-pointer ${
                     channelDragState?.dragType === 'category' && channelDragState.dragId === category.id ? 'opacity-50' : ''
@@ -658,6 +661,29 @@ export function ChannelSidebar() {
                     </button>
                   )}
                 </div>
+          );
+
+          return (
+            <div key={category.id} className="mb-[19px]">
+              {/* Category header */}
+              {canManageChannels ? (
+                <ContextMenu
+                  items={[
+                    {
+                      label: 'Delete Category',
+                      danger: true,
+                      icon: (
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                          <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                        </svg>
+                      ),
+                      onClick: () => setDeleteCategoryId(category.id),
+                    },
+                  ]}
+                >
+                  {categoryHeader}
+                </ContextMenu>
+              ) : categoryHeader}
 
               {/* Category channels (hidden when collapsed, unless active) */}
               {!isCollapsed && (
@@ -715,17 +741,7 @@ export function ChannelSidebar() {
         {canManageChannels && (
           <div className="px-1">
             <button
-              onClick={async () => {
+              onClick={() => openModal('createCategory')}
-                if (!currentSpaceId) return;
-                const name = prompt('Category name:');
-                if (name?.trim()) {
-                  try {
-                    await useSpaceStore.getState().createCategory(currentSpaceId, name.trim());
-                  } catch (err) {
-                    console.error('Failed to create category:', err);
-                  }
-                }
-              }}
               className="w-full flex items-center gap-1.5 px-[10px] h-8 rounded-[6px] text-txt-tertiary hover:text-txt-secondary hover:bg-interactive-hover transition-colors"
             >
               <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="flex-shrink-0">
@@ -740,6 +756,27 @@ export function ChannelSidebar() {
 
     </div>
     {floatingPanel}
+    <ConfirmDialog
+      isOpen={deleteCategoryId !== null}
+      onClose={() => setDeleteCategoryId(null)}
+      onConfirm={async () => {
+        if (!deleteCategoryId) return;
+        setDeleteCategoryLoading(true);
+        try {
+          await useSpaceStore.getState().deleteCategory(deleteCategoryId);
+          setDeleteCategoryId(null);
+        } catch {
+          // deleteCategory already shows a toast on error
+        } finally {
+          setDeleteCategoryLoading(false);
+        }
+      }}
+      title="Delete Category"
+      description="Are you sure you want to delete this category? Channels in this category will be moved to uncategorized — no channels will be deleted."
+      confirmLabel="Delete"
+      variant="danger"
+      loading={deleteCategoryLoading}
+    />
     </>
   );
 }

packages/web/src/components/modals/CreateCategory.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Modal } from '../ui/Modal';
+import { useUIStore } from '../../stores/uiStore';
+import { useSpaceStore } from '../../stores/spaceStore';
+
+export function CreateCategoryModal() {
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const activeModal = useUIStore((s) => s.activeModal);
+  const closeModal = useUIStore((s) => s.closeModal);
+  const createCategory = useSpaceStore((s) => s.createCategory);
+  const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
+
+  const isOpen = activeModal === 'createCategory';
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!name.trim()) {
+      setError('Category name is required');
+      return;
+    }
+
+    if (!currentSpaceId) {
+      setError('No space selected');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await createCategory(currentSpaceId, name.trim());
+      closeModal();
+      setName('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create category');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={closeModal} title="Create Category">
+      <form onSubmit={handleSubmit}>
+        {error && (
+          <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
+            {error}
+          </div>
+        )}
+
+        <div className="mb-4">
+          <label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
+            Category Name
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full px-3 py-2 bg-surface-input border border-border-soft rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary transition-colors"
+            placeholder="new-category"
+            autoFocus
+          />
+        </div>
+
+        <div className="sticky bottom-0 z-10 pointer-events-none">
+          <div className="flex justify-center pt-3 pb-1">
+            <div className="glass-bubble rounded-full px-3 py-2 flex items-center gap-3 pointer-events-auto">
+              <button
+                type="button"
+                onClick={closeModal}
+                className="px-3 py-1 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
+              >
+                {isLoading ? 'Creating...' : 'Create Category'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+}

packages/web/src/stores/uiStore.ts

@@ -6,6 +6,7 @@ type ModalType =
   | 'createSpace'
   | 'joinSpace'
   | 'createChannel'
+  | 'createCategory'
   | 'invite'
   | 'userSettings'
   | 'spaceSettings'