feat: refactor space settings into panel components with roles management
Restructure SpaceSettings modal from 778-line monolith into thin orchestrator with extracted panel components. Add full role CRUD with permission editor (create, edit name/color/permissions, delete). Backend: expose role permissions in GET response, accept permissions in POST/PATCH role endpoints with BigInt validation, broadcast pushReadyPayload to all space members on role mutations.
This commit is contained in:
Jannis Braun
@@ -0,0 +1,396 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useSpaceStore } from '../../../stores/spaceStore';
|
||||
import { api } from '../../../api/client';
|
||||
import { PermissionBits, stringToPermissions, permissionsToString } from '../../../utils/permissions';
|
||||
import type { Role } from '@backspace/shared';
|
||||
|
||||
// ─── Permission display groups ─────────────────────────────────────────────
|
||||
|
||||
interface PermDef {
|
||||
bit: bigint;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const PERMISSION_GROUPS: { name: string; perms: PermDef[] }[] = [
|
||||
{
|
||||
name: 'General',
|
||||
perms: [
|
||||
{ bit: PermissionBits.ADMINISTRATOR, label: 'Administrator' },
|
||||
{ bit: PermissionBits.VIEW_CHANNEL, label: 'View Channels' },
|
||||
{ bit: PermissionBits.MANAGE_CHANNELS, label: 'Manage Channels' },
|
||||
{ bit: PermissionBits.MANAGE_ROLES, label: 'Manage Roles' },
|
||||
{ bit: PermissionBits.MANAGE_SPACE, label: 'Manage Space' },
|
||||
{ bit: PermissionBits.CREATE_INVITE, label: 'Create Invite' },
|
||||
{ bit: PermissionBits.KICK_MEMBERS, label: 'Kick Members' },
|
||||
{ bit: PermissionBits.BAN_MEMBERS, label: 'Ban Members' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
perms: [
|
||||
{ bit: PermissionBits.SEND_MESSAGES, label: 'Send Messages' },
|
||||
{ bit: PermissionBits.MANAGE_MESSAGES, label: 'Manage Messages' },
|
||||
{ bit: PermissionBits.ATTACH_FILES, label: 'Attach Files' },
|
||||
{ bit: PermissionBits.READ_MESSAGE_HISTORY, label: 'Read Message History' },
|
||||
{ bit: PermissionBits.ADD_REACTIONS, label: 'Add Reactions' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Voice',
|
||||
perms: [
|
||||
{ bit: PermissionBits.CONNECT, label: 'Connect' },
|
||||
{ bit: PermissionBits.SPEAK, label: 'Speak' },
|
||||
{ bit: PermissionBits.MUTE_MEMBERS, label: 'Mute Members' },
|
||||
{ bit: PermissionBits.DEAFEN_MEMBERS, label: 'Deafen Members' },
|
||||
{ bit: PermissionBits.MOVE_MEMBERS, label: 'Move Members' },
|
||||
{ bit: PermissionBits.USE_VOICE_ACTIVITY, label: 'Voice Activity' },
|
||||
{ bit: PermissionBits.STREAM, label: 'Stream' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const PRESET_COLORS = [
|
||||
'#b9bbbe', '#a5f3c4', '#ffc9a9', '#c4b5fd', '#93c5fd',
|
||||
'#fbbf24', '#fda4af', '#f87171', '#60a5fa', '#34d399',
|
||||
];
|
||||
|
||||
// ─── Component ──────────────────────────────────────────────────────────────
|
||||
|
||||
interface RolesPanelProps {
|
||||
spaceId: string;
|
||||
}
|
||||
|
||||
export function RolesPanel({ spaceId }: RolesPanelProps) {
|
||||
const roles = useSpaceStore((s) => s.roles);
|
||||
const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail);
|
||||
|
||||
const [editingRoleId, setEditingRoleId] = useState<string | null>(null);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Sort: non-everyone roles by position desc, @everyone always last
|
||||
const sortedRoles = [...roles].sort((a, b) => {
|
||||
const aIsEveryone = a.id === spaceId;
|
||||
const bIsEveryone = b.id === spaceId;
|
||||
if (aIsEveryone) return 1;
|
||||
if (bIsEveryone) return -1;
|
||||
return b.position - a.position;
|
||||
});
|
||||
|
||||
const handleCreateRole = async () => {
|
||||
setCreating(true);
|
||||
setError('');
|
||||
try {
|
||||
const newRole = await api.roles.create(spaceId, { name: 'new role' });
|
||||
await loadSpaceDetail(spaceId);
|
||||
setEditingRoleId(newRole.id);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to create role');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (editingRoleId) {
|
||||
const role = roles.find((r) => r.id === editingRoleId);
|
||||
if (!role) {
|
||||
setEditingRoleId(null);
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<RoleEditView
|
||||
role={role}
|
||||
spaceId={spaceId}
|
||||
onBack={() => setEditingRoleId(null)}
|
||||
onDeleted={() => setEditingRoleId(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{error && (
|
||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleCreateRole}
|
||||
disabled={creating}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
{creating ? 'Creating...' : 'Create Role'}
|
||||
</button>
|
||||
|
||||
<div className="space-y-1">
|
||||
{sortedRoles.map((role) => {
|
||||
const isEveryone = role.id === spaceId;
|
||||
return (
|
||||
<button
|
||||
key={role.id}
|
||||
onClick={() => setEditingRoleId(role.id)}
|
||||
className="w-full flex items-center justify-between px-3 py-2 rounded hover:bg-interactive-hover transition-colors text-left group"
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: role.color }}
|
||||
/>
|
||||
<span className="text-sm text-txt-primary truncate">
|
||||
{isEveryone ? '@everyone' : role.name}
|
||||
</span>
|
||||
</div>
|
||||
<svg
|
||||
className="w-4 h-4 text-txt-tertiary group-hover:text-txt-secondary transition-colors flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Role Edit View ─────────────────────────────────────────────────────────
|
||||
|
||||
interface RoleEditViewProps {
|
||||
role: Role;
|
||||
spaceId: string;
|
||||
onBack: () => void;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
|
||||
function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail);
|
||||
const isEveryone = role.id === spaceId;
|
||||
|
||||
const [draftName, setDraftName] = useState(role.name);
|
||||
const [draftColor, setDraftColor] = useState(role.color);
|
||||
const [draftPermissions, setDraftPermissions] = useState<bigint>(
|
||||
stringToPermissions(role.permissions)
|
||||
);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [saveError, setSaveError] = useState('');
|
||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
|
||||
const hasNameChange = !isEveryone && draftName.trim() !== role.name;
|
||||
const hasColorChange = !isEveryone && draftColor !== role.color;
|
||||
const hasPermChange = permissionsToString(draftPermissions) !== (role.permissions ?? '0');
|
||||
const hasChanges = hasNameChange || hasColorChange || hasPermChange;
|
||||
|
||||
const togglePermission = (bit: bigint) => {
|
||||
setDraftPermissions((prev) => (prev & bit) !== 0n ? prev & ~bit : prev | bit);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setSaveError('');
|
||||
setSaveSuccess(false);
|
||||
try {
|
||||
const data: { name?: string; color?: string; permissions?: string } = {};
|
||||
if (hasNameChange) data.name = draftName.trim();
|
||||
if (hasColorChange) data.color = draftColor;
|
||||
if (hasPermChange) data.permissions = permissionsToString(draftPermissions);
|
||||
await api.roles.update(spaceId, role.id, data);
|
||||
await loadSpaceDetail(spaceId);
|
||||
setSaveSuccess(true);
|
||||
setTimeout(() => setSaveSuccess(false), 2000);
|
||||
} catch (err) {
|
||||
setSaveError(err instanceof Error ? err.message : 'Failed to save role');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscard = () => {
|
||||
setDraftName(role.name);
|
||||
setDraftColor(role.color);
|
||||
setDraftPermissions(stringToPermissions(role.permissions));
|
||||
setSaveError('');
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirmDelete) {
|
||||
setConfirmDelete(true);
|
||||
return;
|
||||
}
|
||||
setDeleting(true);
|
||||
setSaveError('');
|
||||
try {
|
||||
await api.roles.delete(spaceId, role.id);
|
||||
await loadSpaceDetail(spaceId);
|
||||
onDeleted();
|
||||
} catch (err) {
|
||||
setSaveError(err instanceof Error ? err.message : 'Failed to delete role');
|
||||
setConfirmDelete(false);
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-1 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to roles
|
||||
</button>
|
||||
|
||||
{/* Role Name (not editable for @everyone) */}
|
||||
{!isEveryone && (
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
||||
Role Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={draftName}
|
||||
onChange={(e) => setDraftName(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Role Color (not editable for @everyone) */}
|
||||
{!isEveryone && (
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
||||
Role Color
|
||||
</label>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{PRESET_COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
onClick={() => setDraftColor(c)}
|
||||
className={`w-7 h-7 rounded-full border-2 transition-all ${
|
||||
draftColor === c ? 'border-white scale-110' : 'border-transparent hover:scale-105'
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
<label className="relative w-7 h-7 rounded-full border-2 border-border-subtle hover:border-accent-primary transition-colors cursor-pointer overflow-hidden">
|
||||
<input
|
||||
type="color"
|
||||
value={draftColor}
|
||||
onChange={(e) => setDraftColor(e.target.value)}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
<div className="w-full h-full rounded-full bg-gradient-to-br from-red-400 via-green-400 to-blue-400" />
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={draftColor}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (/^#[0-9a-fA-F]{0,6}$/.test(v)) setDraftColor(v);
|
||||
}}
|
||||
className="w-20 px-2 py-1 bg-surface-input rounded text-xs text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary font-mono"
|
||||
maxLength={7}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Permissions */}
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
|
||||
Permissions
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
{PERMISSION_GROUPS.map((group) => (
|
||||
<div key={group.name}>
|
||||
<div className="text-[11px] text-txt-tertiary font-medium mb-1.5 uppercase tracking-wider">
|
||||
{group.name}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{group.perms.map((perm) => {
|
||||
const isOn = (draftPermissions & perm.bit) !== 0n;
|
||||
const isAdmin = perm.bit === PermissionBits.ADMINISTRATOR;
|
||||
return (
|
||||
<label
|
||||
key={perm.label}
|
||||
className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-interactive-hover cursor-pointer group/perm"
|
||||
>
|
||||
<span className={`text-sm ${isAdmin ? 'text-txt-danger font-medium' : 'text-txt-primary'}`}>
|
||||
{perm.label}
|
||||
</span>
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
togglePermission(perm.bit);
|
||||
}}
|
||||
className={`relative w-9 h-5 rounded-full transition-colors cursor-pointer ${
|
||||
isOn ? 'bg-accent-primary' : 'bg-interactive-muted'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform ${
|
||||
isOn ? 'translate-x-4' : 'translate-x-0.5'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save / Discard */}
|
||||
{saveError && (
|
||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{saveError}</div>
|
||||
)}
|
||||
{saveSuccess && (
|
||||
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Role saved</div>
|
||||
)}
|
||||
{hasChanges && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || (!isEveryone && !draftName.trim())}
|
||||
className="px-4 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDiscard}
|
||||
className="px-4 py-1.5 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Role (not for @everyone) */}
|
||||
{!isEveryone && (
|
||||
<div className="pt-4 border-t border-border-soft">
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="px-4 py-1.5 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
{deleting ? 'Deleting...' : confirmDelete ? 'Click again to confirm' : 'Delete Role'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user