fix: federated space icon display/upload in settings, restyle settings panels
Fix three federation bugs in Space Settings: icon URL was double-wrapped through home API, upload targeted home instance instead of remote, and updateSpace used home API client. Also restyle settings panels (User, Space, Members, Roles, Connected Instances) with consistent section headers, grouped cards, and improved layout.
This commit is contained in:
Jannis Braun
@@ -381,12 +381,13 @@ export function ConnectedInstances() {
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="border-t border-white/[0.06] pt-4">
|
||||
<h3 className="text-xs font-bold text-txt-secondary uppercase mb-3">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
||||
Connected Instances
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-xs text-txt-tertiary mb-2">Link accounts across federated Backspace instances.</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="rounded-lg bg-white/[0.02] p-3 space-y-2">
|
||||
{/* Home instance (always shown, non-removable) */}
|
||||
<div className="flex items-center justify-between p-3 bg-surface-channel rounded-lg">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
|
||||
@@ -84,14 +84,19 @@ function StreamingLimitsPanel() {
|
||||
const pillOff = 'bg-surface-elevated text-txt-secondary hover:bg-interactive-hover';
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-5">
|
||||
<div className="text-xs text-txt-tertiary">
|
||||
These limits apply to all users on this instance. Users can pick values within these bounds.
|
||||
</div>
|
||||
|
||||
{/* Bandwidth */}
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Bandwidth</div>
|
||||
<p className="text-xs text-txt-tertiary mb-2">Minimum and maximum bitrate bounds, and the step size for the quality slider.</p>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
|
||||
{/* Bitrate Range */}
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
|
||||
<div className="text-xs text-txt-secondary mb-1.5">
|
||||
Bitrate Range
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -132,7 +137,7 @@ function StreamingLimitsPanel() {
|
||||
|
||||
{/* Bitrate Step */}
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
||||
<div className="text-xs text-txt-secondary mb-1.5">
|
||||
Slider Step
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -151,10 +156,17 @@ function StreamingLimitsPanel() {
|
||||
<span className="text-[12px] text-txt-tertiary">kbps</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quality */}
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Quality</div>
|
||||
<p className="text-xs text-txt-tertiary mb-2">Available resolution and frame rate options for screen sharing.</p>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
|
||||
{/* Allowed Resolutions */}
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
||||
<div className="text-xs text-txt-secondary mb-1.5">
|
||||
Allowed Resolutions
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
@@ -172,7 +184,7 @@ function StreamingLimitsPanel() {
|
||||
|
||||
{/* Allowed Frame Rates */}
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
||||
<div className="text-xs text-txt-secondary mb-1.5">
|
||||
Allowed Frame Rates
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
@@ -187,6 +199,8 @@ function StreamingLimitsPanel() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save / Reset */}
|
||||
{saveError && (
|
||||
@@ -276,7 +290,7 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-5">
|
||||
{!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.
|
||||
@@ -284,9 +298,9 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
|
||||
Visibility
|
||||
</div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Visibility</div>
|
||||
<p className="text-xs text-txt-tertiary mb-2">Control who can discover and join this space.</p>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5">
|
||||
<div className="space-y-1.5">
|
||||
{visibilityOptions.map((opt) => (
|
||||
<label
|
||||
@@ -313,11 +327,12 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
||||
Description
|
||||
</div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Description</div>
|
||||
<p className="text-xs text-txt-tertiary mb-2">A short summary shown on the Explore page.</p>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5">
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value.slice(0, 200))}
|
||||
@@ -327,6 +342,7 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
|
||||
/>
|
||||
<div className="text-[11px] text-txt-tertiary text-right">{description.length}/200</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{saveError && (
|
||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{saveError}</div>
|
||||
@@ -334,6 +350,12 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
|
||||
{saveSuccess && (
|
||||
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div>
|
||||
)}
|
||||
|
||||
{/* Pending Join Requests — only shown when visibility is 'request' */}
|
||||
{(visibility === 'request' || (space.visibility as SpaceVisibility) === 'request') && (
|
||||
<JoinRequestsSection spaceId={spaceId} />
|
||||
)}
|
||||
|
||||
{hasChanges && (
|
||||
<div className="sticky bottom-0 z-10 pointer-events-none">
|
||||
<div className="flex justify-center pt-3 pb-1">
|
||||
@@ -355,11 +377,6 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Join Requests — only shown when visibility is 'request' */}
|
||||
{(visibility === 'request' || (space.visibility as SpaceVisibility) === 'request') && (
|
||||
<JoinRequestsSection spaceId={spaceId} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -493,9 +510,9 @@ export function SpaceSettingsModal() {
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={closeModal} title="Space Settings" maxWidth="max-w-xl">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex gap-4 h-[min(460px,65vh)]">
|
||||
{/* Tabs */}
|
||||
<div className="w-32 flex-shrink-0 sticky top-0 self-start z-10">
|
||||
<div className="w-32 flex-shrink-0 self-start z-10">
|
||||
<div className="glass-bubble rounded-lg p-1.5 space-y-0.5">
|
||||
<button onClick={() => setTab('overview')} className={tabClass('overview')}>
|
||||
Overview
|
||||
@@ -522,7 +539,7 @@ export function SpaceSettingsModal() {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex-1 min-w-0 overflow-y-auto scrollbar-thin">
|
||||
{tab === 'overview' && <OverviewPanel spaceId={currentSpaceId} />}
|
||||
{tab === 'discovery' && canManageSpace && <DiscoveryPanel spaceId={currentSpaceId} />}
|
||||
{tab === 'members' && <MembersPanel spaceId={currentSpaceId} />}
|
||||
|
||||
@@ -57,7 +57,7 @@ export function UserSettingsModal() {
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={closeModal} title="User Settings" maxWidth="max-w-lg">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-5">
|
||||
{/* Profile preview */}
|
||||
<div className="flex items-center gap-4 p-4 bg-surface-channel rounded-lg">
|
||||
<Avatar
|
||||
@@ -83,8 +83,12 @@ export function UserSettingsModal() {
|
||||
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">{success}</div>
|
||||
)}
|
||||
|
||||
{/* Profile section card */}
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Profile</div>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs text-txt-secondary mb-1.5">
|
||||
Status
|
||||
</label>
|
||||
<select
|
||||
@@ -99,7 +103,7 @@ export function UserSettingsModal() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
|
||||
<label className="block text-xs text-txt-secondary mb-1.5">
|
||||
Display Name
|
||||
</label>
|
||||
<input
|
||||
@@ -111,7 +115,7 @@ export function UserSettingsModal() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
|
||||
<label className="block text-xs text-txt-secondary mb-1.5">
|
||||
Custom Status
|
||||
</label>
|
||||
<input
|
||||
@@ -122,13 +126,15 @@ export function UserSettingsModal() {
|
||||
placeholder="What are you up to?"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Voice Processing */}
|
||||
<div className="border-t border-white/[0.06] pt-4">
|
||||
<h3 className="text-xs font-bold text-txt-secondary uppercase mb-3">
|
||||
{/* Voice Processing section card */}
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
||||
Voice Processing
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5">
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<div className="text-sm text-txt-primary">AI Noise Suppression</div>
|
||||
@@ -168,6 +174,7 @@ export function UserSettingsModal() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connected Instances */}
|
||||
<ConnectedInstances />
|
||||
|
||||
@@ -24,6 +24,7 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
|
||||
const canKick = hasPermissionBit(myPerms, PermissionBits.KICK_MEMBERS);
|
||||
|
||||
const [pendingRoleChanges, setPendingRoleChanges] = useState<Map<string, Set<string>>>(new Map());
|
||||
const [expandedMemberId, setExpandedMemberId] = useState<string | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Assignable roles: exclude @everyone (where role.id === spaceId)
|
||||
@@ -57,6 +58,7 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
|
||||
next.delete(userId);
|
||||
return next;
|
||||
});
|
||||
setExpandedMemberId(null);
|
||||
await loadSpaceDetail(spaceId);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update roles');
|
||||
@@ -80,22 +82,43 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const canExpandMember = (member: MemberWithUser) =>
|
||||
canManageRoles && member.userId !== currentUser?.id && member.userId !== space.ownerId && assignableRoles.length > 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="space-y-4">
|
||||
{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="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">
|
||||
<p className="text-xs text-txt-tertiary">Manage members of this space. Click a member to edit their roles.</p>
|
||||
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
||||
Members ({members.length})
|
||||
</div>
|
||||
<div className="rounded-lg bg-white/[0.02] p-2">
|
||||
<div className="space-y-0.5">
|
||||
{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);
|
||||
const isExpanded = expandedMemberId === member.userId;
|
||||
const expandable = canExpandMember(member);
|
||||
|
||||
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">
|
||||
<div key={member.userId}>
|
||||
<div
|
||||
className={`flex items-center justify-between p-2 rounded transition-colors ${
|
||||
expandable ? 'cursor-pointer hover:bg-interactive-hover' : ''
|
||||
} ${isExpanded ? 'bg-interactive-hover' : ''}`}
|
||||
onClick={() => {
|
||||
if (expandable) {
|
||||
setExpandedMemberId(isExpanded ? null : member.userId);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Avatar
|
||||
src={member.user.avatar}
|
||||
name={displayName}
|
||||
@@ -103,8 +126,8 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
|
||||
status={member.user.status}
|
||||
user={member.user}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-medium">{displayName}</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium truncate">{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">
|
||||
@@ -127,21 +150,32 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{canKick && member.userId !== currentUser?.id && !isOwner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleKick(member.userId)}
|
||||
onClick={(e) => { e.stopPropagation(); handleKick(member.userId); }}
|
||||
className="px-2 py-1 text-xs text-txt-danger hover:bg-accent-rose/10 rounded transition-colors"
|
||||
>
|
||||
Kick
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{expandable && (
|
||||
<svg
|
||||
className={`w-4 h-4 text-txt-tertiary transition-transform ${isExpanded ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
)}
|
||||
</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">
|
||||
{/* Role checkboxes — only shown when expanded */}
|
||||
{isExpanded && expandable && (
|
||||
<div className="mt-1 mb-1 ml-10 space-y-1">
|
||||
{assignableRoles.map((role) => (
|
||||
<label key={role.id} className="flex items-center gap-2 cursor-pointer group/role">
|
||||
<input
|
||||
@@ -181,5 +215,7 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useAuthStore } from '../../../stores/authStore';
|
||||
import { useUIStore } from '../../../stores/uiStore';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { api } from '../../../api/client';
|
||||
import { getApiForOrigin } from '../../../stores/spaceStore';
|
||||
import { hasPermissionBit, PermissionBits } from '../../../utils/permissions';
|
||||
|
||||
interface OverviewPanelProps {
|
||||
@@ -56,7 +57,9 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
const hasIconChange = iconFilename !== null;
|
||||
const hasChanges = hasNameChange || hasIconChange;
|
||||
|
||||
const currentIconUrl = space.icon ? api.uploads.url(space.icon) : null;
|
||||
const currentIconUrl = space.icon
|
||||
? (space.icon.startsWith('http') ? space.icon : api.uploads.url(space.icon))
|
||||
: null;
|
||||
|
||||
const handleIconSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
@@ -76,7 +79,8 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
const file = new File([blob], 'icon.png', { type: 'image/png' });
|
||||
setUploadingIcon(true);
|
||||
try {
|
||||
const attachment = await api.uploads.upload(file);
|
||||
const spaceApi = getApiForOrigin(space._instanceOrigin);
|
||||
const attachment = await spaceApi.uploads.upload(file);
|
||||
setIconFilename(attachment.filename);
|
||||
} catch {
|
||||
setSaveError('Failed to upload icon');
|
||||
@@ -149,10 +153,14 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-5">
|
||||
{/* Space Identity */}
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Space Identity</div>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
|
||||
{/* Space Icon */}
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
|
||||
<label className="block text-xs text-txt-secondary mb-1.5">
|
||||
Space Icon
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -209,7 +217,7 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
|
||||
{/* Space Name */}
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
|
||||
<label className="block text-xs text-txt-secondary mb-1.5">
|
||||
Space Name
|
||||
</label>
|
||||
<input
|
||||
@@ -220,6 +228,8 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
disabled={!canManageSpace}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save / Discard */}
|
||||
{saveError && (
|
||||
@@ -228,6 +238,22 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
{saveSuccess && (
|
||||
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div>
|
||||
)}
|
||||
{/* Danger Zone */}
|
||||
{isOwner && (
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-danger uppercase tracking-wider mb-1.5">Danger Zone</div>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5">
|
||||
<p className="text-xs text-txt-tertiary mb-3">Permanently delete this space and all its data. This cannot be undone.</p>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{canManageSpace && hasChanges && (
|
||||
<div className="sticky bottom-0 z-10 pointer-events-none">
|
||||
<div className="flex justify-center pt-3 pb-1">
|
||||
@@ -249,19 +275,6 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
|
||||
</div>
|
||||
</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
|
||||
|
||||
@@ -108,7 +108,7 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-5">
|
||||
{error && (
|
||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
|
||||
)}
|
||||
@@ -127,7 +127,11 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Roles</div>
|
||||
<p className="text-xs text-txt-tertiary mb-2">Roles define what permissions members have. Higher roles take priority.</p>
|
||||
<div className="rounded-lg bg-white/[0.02] p-2">
|
||||
<div className="space-y-0.5">
|
||||
{sortedRoles.map((role) => {
|
||||
const isEveryone = role.id === spaceId;
|
||||
return (
|
||||
@@ -159,6 +163,8 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -190,12 +196,14 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
const hasColorChange = !isEveryone && draftColor !== role.color;
|
||||
const hasPermChange = permissionsToString(draftPermissions) !== (role.permissions ?? '0');
|
||||
const hasChanges = hasNameChange || hasColorChange || hasPermChange;
|
||||
const showPill = hasChanges || !isEveryone;
|
||||
|
||||
const togglePermission = (bit: bigint) => {
|
||||
setDraftPermissions((prev) => (prev & bit) !== 0n ? prev & ~bit : prev | bit);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setConfirmDelete(false);
|
||||
setSaving(true);
|
||||
setSaveError('');
|
||||
setSaveSuccess(false);
|
||||
@@ -219,6 +227,7 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
setDraftName(role.name);
|
||||
setDraftColor(role.color);
|
||||
setDraftPermissions(stringToPermissions(role.permissions));
|
||||
setConfirmDelete(false);
|
||||
setSaveError('');
|
||||
};
|
||||
|
||||
@@ -242,7 +251,7 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-5">
|
||||
{/* Back button */}
|
||||
<div className="sticky top-0 z-10 pointer-events-none pb-3">
|
||||
<button
|
||||
@@ -256,10 +265,13 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Role Name (not editable for @everyone) */}
|
||||
{/* Identity card (Name + Color — not shown for @everyone) */}
|
||||
{!isEveryone && (
|
||||
<div>
|
||||
<label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Identity</div>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs text-txt-secondary mb-1.5">
|
||||
Role Name
|
||||
</label>
|
||||
<input
|
||||
@@ -269,12 +281,8 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
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">
|
||||
<label className="block text-xs text-txt-secondary mb-1.5">
|
||||
Role Color
|
||||
</label>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
@@ -309,19 +317,17 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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 — each gets its own section card */}
|
||||
{PERMISSION_GROUPS.map((group) => (
|
||||
<div key={group.name}>
|
||||
<div className="text-[11px] text-txt-tertiary font-medium mb-1.5 uppercase tracking-wider">
|
||||
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
||||
{group.name}
|
||||
</div>
|
||||
<div className="rounded-lg bg-white/[0.02] p-3.5">
|
||||
<div className="space-y-1">
|
||||
{group.perms.map((perm) => {
|
||||
const isOn = (draftPermissions & perm.bit) !== 0n;
|
||||
@@ -354,21 +360,23 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
})}
|
||||
</div>
|
||||
</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 && (
|
||||
{showPill && (
|
||||
<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-4 py-2 flex items-center gap-2 animate-slide-up pointer-events-auto">
|
||||
<div className={`glass-bubble rounded-full px-4 py-2 flex items-center gap-2 pointer-events-auto${
|
||||
isEveryone ? ' animate-slide-up' : ''
|
||||
}`}>
|
||||
{hasChanges && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleDiscard}
|
||||
className="px-3 py-1 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
||||
@@ -382,21 +390,26 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!isEveryone && hasChanges && (
|
||||
<div className="w-px h-5 bg-white/10" />
|
||||
)}
|
||||
|
||||
{/* 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"
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-full transition-colors disabled:opacity-50 ${
|
||||
confirmDelete
|
||||
? 'bg-accent-rose/15 text-accent-rose'
|
||||
: 'text-accent-rose hover:bg-accent-rose/10'
|
||||
}`}
|
||||
>
|
||||
{deleting ? 'Deleting...' : confirmDelete ? 'Click again to confirm' : 'Delete Role'}
|
||||
{deleting ? 'Deleting...' : confirmDelete ? 'Confirm?' : 'Delete Role'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -24,21 +24,39 @@ interface CachedInstanceToken {
|
||||
username: string;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'backspace_instances';
|
||||
const STORAGE_KEY_PREFIX = 'backspace_instances';
|
||||
const LEGACY_STORAGE_KEY = 'backspace_instances';
|
||||
|
||||
function storageKey(userId: string): string {
|
||||
return `${STORAGE_KEY_PREFIX}_${userId}`;
|
||||
}
|
||||
|
||||
// ─── localStorage helpers ────────────────────────────────────────────────────
|
||||
|
||||
function loadCachedTokens(): Record<string, CachedInstanceToken> {
|
||||
function loadCachedTokens(userId: string): Record<string, CachedInstanceToken> {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return {};
|
||||
const scopedKey = storageKey(userId);
|
||||
const raw = localStorage.getItem(scopedKey);
|
||||
if (raw) {
|
||||
return JSON.parse(raw) as Record<string, CachedInstanceToken>;
|
||||
}
|
||||
|
||||
// One-time migration: adopt legacy unscoped key if it exists
|
||||
const legacy = localStorage.getItem(LEGACY_STORAGE_KEY);
|
||||
if (legacy) {
|
||||
const parsed = JSON.parse(legacy) as Record<string, CachedInstanceToken>;
|
||||
localStorage.setItem(scopedKey, legacy);
|
||||
localStorage.removeItem(LEGACY_STORAGE_KEY);
|
||||
return parsed;
|
||||
}
|
||||
|
||||
return {};
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function saveCachedTokens(instances: ConnectedInstance[]): void {
|
||||
function saveCachedTokens(instances: ConnectedInstance[], userId: string): void {
|
||||
const cache: Record<string, CachedInstanceToken> = {};
|
||||
for (const inst of instances) {
|
||||
// Skip tokenless placeholders — writing an empty token would cause
|
||||
@@ -50,7 +68,7 @@ function saveCachedTokens(instances: ConnectedInstance[]): void {
|
||||
username: inst.username,
|
||||
};
|
||||
}
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
|
||||
localStorage.setItem(storageKey(userId), JSON.stringify(cache));
|
||||
}
|
||||
|
||||
// ─── Network error detection ────────────────────────────────────────────────
|
||||
@@ -216,7 +234,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
|
||||
set((state) => {
|
||||
const updated = [...state.instances, instance];
|
||||
saveCachedTokens(updated);
|
||||
saveCachedTokens(updated, currentUser.id);
|
||||
return { instances: updated, isLoading: false };
|
||||
});
|
||||
|
||||
@@ -255,7 +273,8 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
|
||||
set((state) => {
|
||||
const updated = [...state.instances, instance];
|
||||
saveCachedTokens(updated);
|
||||
const userId = useAuthStore.getState().user?.id;
|
||||
if (userId) saveCachedTokens(updated, userId);
|
||||
return { instances: updated, isLoading: false };
|
||||
});
|
||||
|
||||
@@ -284,7 +303,8 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
|
||||
set((state) => {
|
||||
const updated = state.instances.filter(i => i.origin !== origin);
|
||||
saveCachedTokens(updated);
|
||||
const userId = useAuthStore.getState().user?.id;
|
||||
if (userId) saveCachedTokens(updated, userId);
|
||||
return { instances: updated };
|
||||
});
|
||||
|
||||
@@ -405,7 +425,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
return;
|
||||
}
|
||||
|
||||
const cached = loadCachedTokens();
|
||||
const cached = loadCachedTokens(currentUser.id);
|
||||
|
||||
// Split server-known instances into two groups:
|
||||
// - withToken: have a cached token → attempt reconnection
|
||||
@@ -543,7 +563,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
|
||||
// Save final state to localStorage — persist ALL instances regardless of status
|
||||
// so disconnected instances survive page reload and can auto-reconnect later
|
||||
saveCachedTokens(get().instances);
|
||||
saveCachedTokens(get().instances, currentUser.id);
|
||||
|
||||
// Mark auto-connect complete so syncInstanceList is now safe to run
|
||||
set({ _autoConnectDone: true });
|
||||
@@ -560,7 +580,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
disconnectAllRemote();
|
||||
|
||||
set({ instances: [], isLoading: false, error: null, _autoConnectDone: false });
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
// Token cache preserved — scoped per user, survives logout for seamless reconnect
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
@@ -199,7 +199,14 @@ export const useSpaceStore = create<SpaceState>((set, get) => ({
|
||||
},
|
||||
|
||||
updateSpace: async (spaceId: string, data: UpdateSpaceRequest) => {
|
||||
const updated = await api.spaces.update(spaceId, data);
|
||||
const space = get().spaces.find(s => s.id === spaceId);
|
||||
const origin = space?._instanceOrigin ?? '';
|
||||
const client = getApiForOrigin(origin);
|
||||
const updated = await client.spaces.update(spaceId, data);
|
||||
// Normalize remote asset URL so the icon displays correctly in-app
|
||||
if (origin && updated.icon) {
|
||||
updated.icon = resolveAssetUrl(updated.icon, origin) ?? updated.icon;
|
||||
}
|
||||
set((state) => ({
|
||||
spaces: state.spaces.map(s => s.id === spaceId ? { ...s, ...updated } : s),
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user