Jannis Braun
31db1a7bd3
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.
526 lines
20 KiB
TypeScript
526 lines
20 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Modal } from '../ui/Modal';
|
|
import { useUIStore } from '../../stores/uiStore';
|
|
import { useSpaceStore } from '../../stores/spaceStore';
|
|
import { useSettingsStore } from '../../stores/settingsStore';
|
|
import { Avatar } from '../ui/Avatar';
|
|
import { api } from '../../api/client';
|
|
import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
|
|
import { OverviewPanel } from './spaceSettingsPanels/OverviewPanel';
|
|
import { MembersPanel } from './spaceSettingsPanels/MembersPanel';
|
|
import { RolesPanel } from './spaceSettingsPanels/RolesPanel';
|
|
import type { InstanceStreamingLimits, SpaceVisibility, JoinRequest } from '@backspace/shared';
|
|
|
|
const VALID_RESOLUTIONS = [540, 720, 1080] as const;
|
|
const VALID_FRAMERATES = [30, 45, 60] as const;
|
|
|
|
function formatKbps(kbps: number): string {
|
|
return kbps >= 1000
|
|
? `${(kbps / 1000).toFixed(kbps % 1000 === 0 ? 0 : 1)} Mbps`
|
|
: `${kbps} kbps`;
|
|
}
|
|
|
|
function StreamingLimitsPanel() {
|
|
const limits = useSettingsStore((s) => s.streamingLimits);
|
|
const updateStreamingLimits = useSettingsStore((s) => s.updateStreamingLimits);
|
|
|
|
const [draft, setDraft] = useState<InstanceStreamingLimits | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
const [saveError, setSaveError] = useState('');
|
|
const [saveSuccess, setSaveSuccess] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (limits) setDraft({ ...limits });
|
|
}, [limits]);
|
|
|
|
if (!draft) return <div className="text-sm text-txt-tertiary">Loading settings...</div>;
|
|
|
|
const hasChanges = JSON.stringify(draft) !== JSON.stringify(limits);
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
setSaveError('');
|
|
setSaveSuccess(false);
|
|
try {
|
|
await updateStreamingLimits(draft);
|
|
setSaveSuccess(true);
|
|
setTimeout(() => setSaveSuccess(false), 2000);
|
|
} catch (err) {
|
|
setSaveError(err instanceof Error ? err.message : 'Failed to save');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
if (limits) setDraft({ ...limits });
|
|
setSaveError('');
|
|
};
|
|
|
|
const toggleResolution = (res: number) => {
|
|
const current = new Set(draft.allowedResolutions);
|
|
if (current.has(res)) {
|
|
if (current.size <= 1) return; // Must have at least one
|
|
current.delete(res);
|
|
} else {
|
|
current.add(res);
|
|
}
|
|
setDraft({ ...draft, allowedResolutions: Array.from(current).sort((a, b) => a - b) });
|
|
};
|
|
|
|
const toggleFramerate = (fps: number) => {
|
|
const current = new Set(draft.allowedFramerates);
|
|
if (current.has(fps)) {
|
|
if (current.size <= 1) return;
|
|
current.delete(fps);
|
|
} else {
|
|
current.add(fps);
|
|
}
|
|
setDraft({ ...draft, allowedFramerates: Array.from(current).sort((a, b) => a - b) });
|
|
};
|
|
|
|
const pillBase = 'px-3 py-1.5 rounded text-[13px] font-medium transition-colors cursor-pointer select-none';
|
|
const pillOn = 'bg-accent-primary text-white';
|
|
const pillOff = 'bg-surface-elevated text-txt-secondary hover:bg-interactive-hover';
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-xs text-txt-tertiary">
|
|
These limits apply to all users on this instance. Users can pick values within these bounds.
|
|
</div>
|
|
|
|
{/* Bitrate Range */}
|
|
<div>
|
|
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
|
|
Bitrate Range
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex-1">
|
|
<label className="text-[11px] text-txt-tertiary mb-1 block">Min</label>
|
|
<input
|
|
type="range"
|
|
min={100}
|
|
max={draft.maxBitrateKbps - 500}
|
|
step={100}
|
|
value={draft.minBitrateKbps}
|
|
onChange={(e) => setDraft({ ...draft, minBitrateKbps: Number(e.target.value) })}
|
|
className="w-full h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
|
|
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
|
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
|
|
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0"
|
|
/>
|
|
<div className="text-[11px] text-txt-secondary mt-0.5">{formatKbps(draft.minBitrateKbps)}</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="text-[11px] text-txt-tertiary mb-1 block">Max</label>
|
|
<input
|
|
type="range"
|
|
min={draft.minBitrateKbps + 500}
|
|
max={50000}
|
|
step={500}
|
|
value={draft.maxBitrateKbps}
|
|
onChange={(e) => setDraft({ ...draft, maxBitrateKbps: Number(e.target.value) })}
|
|
className="w-full h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
|
|
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
|
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
|
|
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0"
|
|
/>
|
|
<div className="text-[11px] text-txt-secondary mt-0.5">{formatKbps(draft.maxBitrateKbps)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bitrate Step */}
|
|
<div>
|
|
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
|
Slider Step
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
min={50}
|
|
max={5000}
|
|
step={50}
|
|
value={draft.bitrateStepKbps}
|
|
onChange={(e) => {
|
|
const v = Number(e.target.value);
|
|
if (v >= 50 && v <= 5000) setDraft({ ...draft, bitrateStepKbps: v });
|
|
}}
|
|
className="w-24 px-2 py-1 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary"
|
|
/>
|
|
<span className="text-[12px] text-txt-tertiary">kbps</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Allowed Resolutions */}
|
|
<div>
|
|
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
|
Allowed Resolutions
|
|
</div>
|
|
<div className="flex gap-1.5">
|
|
{VALID_RESOLUTIONS.map((res) => (
|
|
<button
|
|
key={res}
|
|
onClick={() => toggleResolution(res)}
|
|
className={`${pillBase} ${draft.allowedResolutions.includes(res) ? pillOn : pillOff}`}
|
|
>
|
|
{res}p
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Allowed Frame Rates */}
|
|
<div>
|
|
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
|
Allowed Frame Rates
|
|
</div>
|
|
<div className="flex gap-1.5">
|
|
{VALID_FRAMERATES.map((fps) => (
|
|
<button
|
|
key={fps}
|
|
onClick={() => toggleFramerate(fps)}
|
|
className={`${pillBase} ${draft.allowedFramerates.includes(fps) ? pillOn : pillOff}`}
|
|
>
|
|
{fps} fps
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save / Reset */}
|
|
{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>
|
|
)}
|
|
{hasChanges && (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
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={handleReset}
|
|
className="px-4 py-1.5 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DiscoveryPanel({ spaceId }: { spaceId: string }) {
|
|
const spaces = useSpaceStore((s) => s.spaces);
|
|
const updateSpace = useSpaceStore((s) => s.updateSpace);
|
|
const discoveryEnabled = useSettingsStore((s) => s.streamingLimits?.discoveryEnabled ?? true);
|
|
|
|
const space = spaces.find(s => s.id === spaceId);
|
|
|
|
const [visibility, setVisibility] = useState<SpaceVisibility>(
|
|
(space?.visibility as SpaceVisibility) ?? 'private'
|
|
);
|
|
const [description, setDescription] = useState(space?.description ?? '');
|
|
const [saving, setSaving] = useState(false);
|
|
const [saveError, setSaveError] = useState('');
|
|
const [saveSuccess, setSaveSuccess] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (space) {
|
|
setVisibility((space.visibility as SpaceVisibility) ?? 'private');
|
|
setDescription(space.description ?? '');
|
|
}
|
|
}, [space]);
|
|
|
|
if (!space) return null;
|
|
|
|
const hasChanges =
|
|
visibility !== ((space.visibility as SpaceVisibility) ?? 'private') ||
|
|
description !== (space.description ?? '');
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
setSaveError('');
|
|
setSaveSuccess(false);
|
|
try {
|
|
await api.spaces.update(spaceId, { visibility, description: description.trim() });
|
|
setSaveSuccess(true);
|
|
setTimeout(() => setSaveSuccess(false), 2000);
|
|
} catch (err) {
|
|
setSaveError(err instanceof Error ? err.message : 'Failed to save');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setVisibility((space.visibility as SpaceVisibility) ?? 'private');
|
|
setDescription(space.description ?? '');
|
|
setSaveError('');
|
|
};
|
|
|
|
const visibilityOptions: { value: SpaceVisibility; label: string; desc: string }[] = [
|
|
{ value: 'private', label: 'Private', desc: 'Only people with an invite link can join' },
|
|
{ value: 'request', label: 'Request to Join', desc: 'Visible in Explore — people can request to join' },
|
|
{ value: 'public', label: 'Public', desc: 'Visible in Explore — anyone can join instantly' },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{!discoveryEnabled && (
|
|
<div className="p-2.5 bg-accent-amber/10 border border-accent-amber/30 rounded text-[13px] text-accent-amber">
|
|
Space discovery is disabled by the instance administrator. Changing visibility will have no effect until discovery is re-enabled.
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
|
|
Visibility
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{visibilityOptions.map((opt) => (
|
|
<label
|
|
key={opt.value}
|
|
className={`flex items-start gap-3 p-2.5 rounded cursor-pointer transition-colors ${
|
|
visibility === opt.value
|
|
? 'bg-interactive-selected'
|
|
: 'hover:bg-interactive-hover'
|
|
}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="visibility"
|
|
value={opt.value}
|
|
checked={visibility === opt.value}
|
|
onChange={() => setVisibility(opt.value)}
|
|
className="mt-0.5 accent-accent-primary"
|
|
/>
|
|
<div>
|
|
<div className="text-sm font-medium text-txt-primary">{opt.label}</div>
|
|
<div className="text-xs text-txt-tertiary">{opt.desc}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
|
Description
|
|
</div>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value.slice(0, 200))}
|
|
placeholder="A short description for the Explore page..."
|
|
rows={3}
|
|
className="w-full px-3 py-2 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary resize-none placeholder:text-txt-tertiary"
|
|
/>
|
|
<div className="text-[11px] text-txt-tertiary text-right">{description.length}/200</div>
|
|
</div>
|
|
|
|
{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>
|
|
)}
|
|
{hasChanges && (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
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={handleReset}
|
|
className="px-4 py-1.5 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pending Join Requests — only shown when visibility is 'request' */}
|
|
{(visibility === 'request' || (space.visibility as SpaceVisibility) === 'request') && (
|
|
<JoinRequestsSection spaceId={spaceId} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function JoinRequestsSection({ spaceId }: { spaceId: string }) {
|
|
const [requests, setRequests] = useState<JoinRequest[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [actionError, setActionError] = useState('');
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
api.explore.getJoinRequests(spaceId, 'pending')
|
|
.then(({ requests: reqs }) => {
|
|
if (!cancelled) {
|
|
setRequests(reqs);
|
|
setLoading(false);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setLoading(false);
|
|
});
|
|
return () => { cancelled = true; };
|
|
}, [spaceId]);
|
|
|
|
const handleDecide = async (requestId: string, action: 'accept' | 'decline') => {
|
|
setActionError('');
|
|
try {
|
|
await api.explore.decideJoinRequest(spaceId, requestId, action);
|
|
setRequests(prev => prev.filter(r => r.id !== requestId));
|
|
} catch (err) {
|
|
setActionError(err instanceof Error ? err.message : 'Action failed');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="pt-4 border-t border-border-soft">
|
|
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
|
|
Pending Join Requests
|
|
</div>
|
|
|
|
{actionError && (
|
|
<div className="mb-2 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">
|
|
{actionError}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="text-sm text-txt-tertiary">Loading...</div>
|
|
) : requests.length === 0 ? (
|
|
<div className="text-sm text-txt-tertiary">No pending join requests</div>
|
|
) : (
|
|
<div className="space-y-2 max-h-[240px] overflow-y-auto scrollbar-thin">
|
|
{requests.map((req) => {
|
|
const user = req.user;
|
|
const displayName = user?.displayName ?? user?.username ?? 'Unknown';
|
|
|
|
return (
|
|
<div key={req.id} className="flex items-start gap-3 p-2.5 rounded bg-surface-base">
|
|
<Avatar
|
|
src={user?.avatar}
|
|
name={displayName}
|
|
size={32}
|
|
userId={user?.homeUserId ?? user?.id}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-sm font-medium text-txt-primary truncate">{displayName}</span>
|
|
{user?.username && (
|
|
<span className="text-xs text-txt-tertiary">@{user.username}</span>
|
|
)}
|
|
</div>
|
|
{req.message && (
|
|
<p className="text-xs text-txt-secondary mt-0.5 line-clamp-2">{req.message}</p>
|
|
)}
|
|
<span className="text-[10px] text-txt-tertiary">
|
|
{new Date(req.createdAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 flex-shrink-0">
|
|
<button
|
|
onClick={() => handleDecide(req.id, 'accept')}
|
|
className="p-1.5 rounded text-status-online hover:bg-status-online/20 transition-colors"
|
|
title="Accept"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onClick={() => handleDecide(req.id, 'decline')}
|
|
className="p-1.5 rounded text-txt-danger hover:bg-accent-rose/20 transition-colors"
|
|
title="Decline"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SpaceSettingsModal() {
|
|
const activeModal = useUIStore((s) => s.activeModal);
|
|
const closeModal = useUIStore((s) => s.closeModal);
|
|
const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
|
|
const spaces = useSpaceStore((s) => s.spaces);
|
|
const isAdmin = useSettingsStore((s) => s.isAdmin);
|
|
const spacePermissions = useSpaceStore((s) => s.spacePermissions);
|
|
|
|
const [tab, setTab] = useState<'overview' | 'discovery' | 'members' | 'roles' | 'streaming'>('overview');
|
|
|
|
const isOpen = activeModal === 'spaceSettings';
|
|
const space = spaces.find(s => s.id === currentSpaceId);
|
|
const mySpacePerms = currentSpaceId ? spacePermissions.get(currentSpaceId) : undefined;
|
|
const canManageSpace = hasPermissionBit(mySpacePerms, PermissionBits.MANAGE_SPACE);
|
|
const canManageRoles = hasPermissionBit(mySpacePerms, PermissionBits.MANAGE_ROLES);
|
|
|
|
if (!space || !currentSpaceId) return null;
|
|
|
|
const tabClass = (t: typeof tab) =>
|
|
`w-full text-left px-3 py-1.5 rounded text-sm transition-colors ${
|
|
tab === t ? 'bg-interactive-selected text-txt-primary' : 'text-txt-tertiary hover:text-txt-secondary hover:bg-interactive-hover'
|
|
}`;
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={closeModal} title="Space Settings" maxWidth="max-w-xl">
|
|
<div className="flex gap-4">
|
|
{/* Tabs */}
|
|
<div className="w-32 flex-shrink-0 space-y-1">
|
|
<button onClick={() => setTab('overview')} className={tabClass('overview')}>
|
|
Overview
|
|
</button>
|
|
{canManageSpace && (
|
|
<button onClick={() => setTab('discovery')} className={tabClass('discovery')}>
|
|
Discovery
|
|
</button>
|
|
)}
|
|
<button onClick={() => setTab('members')} className={tabClass('members')}>
|
|
Members
|
|
</button>
|
|
{canManageRoles && (
|
|
<button onClick={() => setTab('roles')} className={tabClass('roles')}>
|
|
Roles
|
|
</button>
|
|
)}
|
|
{isAdmin && (
|
|
<button onClick={() => setTab('streaming')} className={tabClass('streaming')}>
|
|
Streaming
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-w-0">
|
|
{tab === 'overview' && <OverviewPanel spaceId={currentSpaceId} />}
|
|
{tab === 'discovery' && canManageSpace && <DiscoveryPanel spaceId={currentSpaceId} />}
|
|
{tab === 'members' && <MembersPanel spaceId={currentSpaceId} />}
|
|
{tab === 'roles' && canManageRoles && <RolesPanel spaceId={currentSpaceId} />}
|
|
{tab === 'streaming' && isAdmin && <StreamingLimitsPanel />}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|