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,185 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Avatar } from '../../ui/Avatar';
|
||||
import { useSpaceStore } from '../../../stores/spaceStore';
|
||||
import { useAuthStore } from '../../../stores/authStore';
|
||||
import { api } from '../../../api/client';
|
||||
import { hasPermissionBit, PermissionBits } from '../../../utils/permissions';
|
||||
import type { MemberWithUser } from '@backspace/shared';
|
||||
|
||||
interface MembersPanelProps {
|
||||
spaceId: string;
|
||||
}
|
||||
|
||||
export function MembersPanel({ spaceId }: MembersPanelProps) {
|
||||
const spaces = useSpaceStore((s) => s.spaces);
|
||||
const members = useSpaceStore((s) => s.members);
|
||||
const roles = useSpaceStore((s) => s.roles);
|
||||
const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail);
|
||||
const currentUser = useAuthStore((s) => s.user);
|
||||
const spacePermissions = useSpaceStore((s) => s.spacePermissions);
|
||||
|
||||
const space = spaces.find((s) => s.id === spaceId);
|
||||
const myPerms = spacePermissions.get(spaceId);
|
||||
const canManageRoles = hasPermissionBit(myPerms, PermissionBits.MANAGE_ROLES);
|
||||
const canKick = hasPermissionBit(myPerms, PermissionBits.KICK_MEMBERS);
|
||||
|
||||
const [pendingRoleChanges, setPendingRoleChanges] = useState<Map<string, Set<string>>>(new Map());
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Assignable roles: exclude @everyone (where role.id === spaceId)
|
||||
const assignableRoles = roles.filter((r) => r.id !== spaceId);
|
||||
|
||||
if (!space) return null;
|
||||
|
||||
const getMemberRoleIds = (member: MemberWithUser): Set<string> => {
|
||||
const pending = pendingRoleChanges.get(member.userId);
|
||||
if (pending) return pending;
|
||||
return new Set(member.roles?.map((r) => r.id) ?? []);
|
||||
};
|
||||
|
||||
const handleRoleToggle = (userId: string, roleId: string, currentRoleIds: Set<string>) => {
|
||||
const updated = new Set(currentRoleIds);
|
||||
if (updated.has(roleId)) {
|
||||
updated.delete(roleId);
|
||||
} else {
|
||||
updated.add(roleId);
|
||||
}
|
||||
setPendingRoleChanges((prev) => new Map(prev).set(userId, updated));
|
||||
};
|
||||
|
||||
const handleSaveRoles = async (userId: string) => {
|
||||
const roleIds = pendingRoleChanges.get(userId);
|
||||
if (!roleIds) return;
|
||||
try {
|
||||
await api.spaces.updateMember(spaceId, userId, { roleIds: Array.from(roleIds) });
|
||||
setPendingRoleChanges((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.delete(userId);
|
||||
return next;
|
||||
});
|
||||
await loadSpaceDetail(spaceId);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update roles');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelRoleChange = (userId: string) => {
|
||||
setPendingRoleChanges((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.delete(userId);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleKick = async (userId: string) => {
|
||||
try {
|
||||
await api.spaces.removeMember(spaceId, userId);
|
||||
await loadSpaceDetail(spaceId);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to kick member');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{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="space-y-2 max-h-[400px] overflow-y-auto scrollbar-thin">
|
||||
{members.map((member) => {
|
||||
const displayName = member.user.displayName ?? member.user.username;
|
||||
const isOwner = member.userId === space.ownerId;
|
||||
const memberRoleIds = getMemberRoleIds(member);
|
||||
const hasPendingChanges = pendingRoleChanges.has(member.userId);
|
||||
|
||||
return (
|
||||
<div key={member.userId} className="p-2 rounded hover:bg-interactive-hover">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar
|
||||
src={member.user.avatar}
|
||||
name={displayName}
|
||||
size={32}
|
||||
status={member.user.status}
|
||||
user={member.user}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-medium">{displayName}</div>
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{isOwner && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-accent-rose/20 text-txt-danger font-medium">
|
||||
Owner
|
||||
</span>
|
||||
)}
|
||||
{member.roles?.filter((r) => r.id !== spaceId).map((r) => (
|
||||
<span
|
||||
key={r.id}
|
||||
className="text-[10px] px-1.5 py-0.5 rounded font-medium"
|
||||
style={{ backgroundColor: `${r.color}20`, color: r.color }}
|
||||
>
|
||||
{r.name}
|
||||
</span>
|
||||
))}
|
||||
{!isOwner && (!member.roles || member.roles.filter((r) => r.id !== spaceId).length === 0) && (
|
||||
<span className="text-[10px] text-txt-tertiary">No roles</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canKick && member.userId !== currentUser?.id && !isOwner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleKick(member.userId)}
|
||||
className="px-2 py-1 text-xs text-txt-danger hover:bg-accent-rose/10 rounded transition-colors"
|
||||
>
|
||||
Kick
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Role checkboxes — shown for non-self, non-owner members when user can manage roles */}
|
||||
{canManageRoles && member.userId !== currentUser?.id && !isOwner && assignableRoles.length > 0 && (
|
||||
<div className="mt-2 ml-10 space-y-1">
|
||||
{assignableRoles.map((role) => (
|
||||
<label key={role.id} className="flex items-center gap-2 cursor-pointer group/role">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={memberRoleIds.has(role.id)}
|
||||
onChange={() => handleRoleToggle(member.userId, role.id, memberRoleIds)}
|
||||
className="w-3.5 h-3.5 rounded border-txt-tertiary accent-accent-primary"
|
||||
/>
|
||||
<span
|
||||
className="text-xs font-medium"
|
||||
style={{ color: role.color !== '#9ca3af' ? role.color : undefined }}
|
||||
>
|
||||
{role.name}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
{hasPendingChanges && (
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<button
|
||||
onClick={() => handleSaveRoles(member.userId)}
|
||||
className="px-2 py-0.5 text-xs bg-accent-primary hover:bg-accent-primary/80 text-white rounded transition-colors"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCancelRoleChange(member.userId)}
|
||||
className="px-2 py-0.5 text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { ImageCropModal } from '../../ui/ImageCropModal';
|
||||
import { Avatar } from '../../ui/Avatar';
|
||||
import { useSpaceStore } from '../../../stores/spaceStore';
|
||||
import { useAuthStore } from '../../../stores/authStore';
|
||||
import { useUIStore } from '../../../stores/uiStore';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { api } from '../../../api/client';
|
||||
import { hasPermissionBit, PermissionBits } from '../../../utils/permissions';
|
||||
|
||||
interface OverviewPanelProps {
|
||||
spaceId: string;
|
||||
}
|
||||
|
||||
export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
const spaces = useSpaceStore((s) => s.spaces);
|
||||
const updateSpace = useSpaceStore((s) => s.updateSpace);
|
||||
const deleteSpace = useSpaceStore((s) => s.deleteSpace);
|
||||
const currentUser = useAuthStore((s) => s.user);
|
||||
const closeModal = useUIStore((s) => s.closeModal);
|
||||
const spacePermissions = useSpaceStore((s) => s.spacePermissions);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const space = spaces.find((s) => s.id === spaceId);
|
||||
const isOwner = space?.ownerId === currentUser?.id;
|
||||
const myPerms = spacePermissions.get(spaceId);
|
||||
const canManageSpace = hasPermissionBit(myPerms, PermissionBits.MANAGE_SPACE);
|
||||
|
||||
const [spaceName, setSpaceName] = useState(space?.name ?? '');
|
||||
// null = no change, '' = remove icon, 'filename.png' = new icon uploaded
|
||||
const [iconFilename, setIconFilename] = useState<string | null>(null);
|
||||
const [iconPreview, setIconPreview] = useState<string | null>(null);
|
||||
const [uploadingIcon, setUploadingIcon] = useState(false);
|
||||
const [cropSrc, setCropSrc] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState('');
|
||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (space) {
|
||||
setSpaceName(space.name);
|
||||
// Reset icon state when space data changes externally
|
||||
setIconFilename(null);
|
||||
if (iconPreview) {
|
||||
URL.revokeObjectURL(iconPreview);
|
||||
setIconPreview(null);
|
||||
}
|
||||
}
|
||||
}, [space?.name, space?.icon]);
|
||||
|
||||
if (!space) return null;
|
||||
|
||||
const hasNameChange = spaceName.trim() !== space.name;
|
||||
const hasIconChange = iconFilename !== null;
|
||||
const hasChanges = hasNameChange || hasIconChange;
|
||||
|
||||
const currentIconUrl = space.icon ? api.uploads.url(space.icon) : null;
|
||||
|
||||
const handleIconSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => setCropSrc(reader.result as string);
|
||||
reader.readAsDataURL(file);
|
||||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||
};
|
||||
|
||||
const handleCropComplete = async (blob: Blob) => {
|
||||
if (iconPreview) URL.revokeObjectURL(iconPreview);
|
||||
const previewUrl = URL.createObjectURL(blob);
|
||||
setIconPreview(previewUrl);
|
||||
setCropSrc(null);
|
||||
|
||||
const file = new File([blob], 'icon.png', { type: 'image/png' });
|
||||
setUploadingIcon(true);
|
||||
try {
|
||||
const attachment = await api.uploads.upload(file);
|
||||
setIconFilename(attachment.filename);
|
||||
} catch {
|
||||
setSaveError('Failed to upload icon');
|
||||
setIconPreview(null);
|
||||
URL.revokeObjectURL(previewUrl);
|
||||
} finally {
|
||||
setUploadingIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveIcon = () => {
|
||||
if (iconPreview) URL.revokeObjectURL(iconPreview);
|
||||
setIconPreview(null);
|
||||
setIconFilename(''); // '' signals removal
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setSaveError('');
|
||||
setSaveSuccess(false);
|
||||
try {
|
||||
const updates: { name?: string; icon?: string } = {};
|
||||
if (hasNameChange) updates.name = spaceName.trim();
|
||||
if (hasIconChange) {
|
||||
// Empty string signals icon removal to the backend (sets to null)
|
||||
updates.icon = iconFilename === '' ? '' : iconFilename!;
|
||||
}
|
||||
await updateSpace(spaceId, updates);
|
||||
setIconFilename(null);
|
||||
if (iconPreview) {
|
||||
URL.revokeObjectURL(iconPreview);
|
||||
setIconPreview(null);
|
||||
}
|
||||
setSaveSuccess(true);
|
||||
setTimeout(() => setSaveSuccess(false), 2000);
|
||||
} catch (err) {
|
||||
setSaveError(err instanceof Error ? err.message : 'Failed to save');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscard = () => {
|
||||
setSpaceName(space.name);
|
||||
setIconFilename(null);
|
||||
if (iconPreview) {
|
||||
URL.revokeObjectURL(iconPreview);
|
||||
setIconPreview(null);
|
||||
}
|
||||
setSaveError('');
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirmDelete) {
|
||||
setConfirmDelete(true);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteSpace(spaceId);
|
||||
closeModal();
|
||||
navigate('/channels/@me');
|
||||
} catch (err) {
|
||||
setSaveError(err instanceof Error ? err.message : 'Failed to delete space');
|
||||
}
|
||||
};
|
||||
|
||||
// Determine what icon to show: preview of pending upload, or current space icon
|
||||
const displayIconSrc = iconPreview ?? (iconFilename === '' ? null : currentIconUrl);
|
||||
const displayIconName = space.name;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
{/* Space Icon */}
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
|
||||
Space Icon
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => canManageSpace && fileInputRef.current?.click()}
|
||||
disabled={!canManageSpace || uploadingIcon}
|
||||
className={`relative w-16 h-16 rounded-full bg-surface-input border-2 border-dashed border-border-subtle flex items-center justify-center overflow-hidden group ${
|
||||
canManageSpace ? 'hover:border-accent-primary cursor-pointer' : 'cursor-default'
|
||||
} transition-colors`}
|
||||
>
|
||||
{displayIconSrc ? (
|
||||
<>
|
||||
<img src={displayIconSrc} alt="Space icon" className="w-full h-full object-cover" />
|
||||
{canManageSpace && (
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Avatar name={displayIconName} size={64} />
|
||||
)}
|
||||
{uploadingIcon && (
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleIconSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
{canManageSpace && (displayIconSrc || space.icon) && iconFilename !== '' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRemoveIcon}
|
||||
className="text-xs text-txt-tertiary hover:text-txt-danger transition-colors"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Space Name */}
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
|
||||
Space Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={spaceName}
|
||||
onChange={(e) => setSpaceName(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"
|
||||
disabled={!canManageSpace}
|
||||
/>
|
||||
</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">Settings saved</div>
|
||||
)}
|
||||
{canManageSpace && hasChanges && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || uploadingIcon || !spaceName.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>
|
||||
)}
|
||||
|
||||
{/* Danger Zone */}
|
||||
{isOwner && (
|
||||
<div className="pt-4 border-t border-border-soft">
|
||||
<h3 className="text-sm font-bold text-txt-danger mb-2">Danger Zone</h3>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-4 py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
|
||||
>
|
||||
{confirmDelete ? 'Click again to confirm deletion' : 'Delete Space'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ImageCropModal
|
||||
isOpen={cropSrc !== null}
|
||||
onClose={() => setCropSrc(null)}
|
||||
imageSrc={cropSrc ?? ''}
|
||||
onCropComplete={handleCropComplete}
|
||||
title="Crop Space Icon"
|
||||
cropShape="round"
|
||||
aspectRatio={1}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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