devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 25 Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jannis Braun
2026-03-12 01:46:27 +01:00
parent c51d6b1a0e
commit 873215d848
5 changed files with 208 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/src/routes/spaces.ts
+34 -1
View File
@@ -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
+2
View File
@@ -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
+51 -14
View File
@@ -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 (
<div key={category.id} className="mb-[19px]">
{/* Category header */}
const categoryHeader = (
<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 () => {
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);
}
}
}}
onClick={() => openModal('createCategory')}
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
+89
View File
@@ -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
+1
View File
@@ -6,6 +6,7 @@ type ModalType =
| 'createSpace'
| 'joinSpace'
| 'createChannel'
| 'createCategory'
| 'invite'
| 'userSettings'
| 'spaceSettings'