feat(web): overhaul ConnectedInstances with persistent registry list, filters, expandable rows, and delete identity dialog
This commit is contained in:
Jannis Braun
@@ -1,8 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { InstanceInfoResponse } from '@backspace/shared';
|
||||
import ReactDOM from 'react-dom';
|
||||
import type { InstanceInfoResponse, FederationRegistryEntry } from '@backspace/shared';
|
||||
import { useInstanceStore, DifferentPasswordError } from '../../stores/instanceStore';
|
||||
import type { ConnectedInstance } from '../../stores/instanceStore';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
import { isElectron } from '../../platform/platform';
|
||||
import { ConfirmDialog } from '../ui/ConfirmDialog';
|
||||
|
||||
// ─── Status indicator ────────────────────────────────────────────────────────
|
||||
|
||||
@@ -15,6 +18,53 @@ function StatusDot({ status }: { status: string }) {
|
||||
return <div className={`w-2 h-2 rounded-full shrink-0 ${colorClass}`} />;
|
||||
}
|
||||
|
||||
// ─── Registry status helpers ────────────────────────────────────────────────
|
||||
|
||||
function registryStatusColor(status: string): string {
|
||||
switch (status) {
|
||||
case 'connected': return 'bg-status-online/15 text-status-online';
|
||||
case 'disconnected': return 'bg-white/5 text-txt-tertiary';
|
||||
case 'unreachable': return 'bg-accent-amber/15 text-accent-amber';
|
||||
case 'auth_expired': return 'bg-accent-rose/15 text-accent-rose';
|
||||
default: return 'bg-white/5 text-txt-tertiary';
|
||||
}
|
||||
}
|
||||
|
||||
function registryStatusDotColor(status: string): string {
|
||||
switch (status) {
|
||||
case 'connected': return 'bg-status-online';
|
||||
case 'unreachable': return 'bg-accent-amber';
|
||||
case 'auth_expired': return 'bg-accent-rose';
|
||||
default: return 'bg-txt-tertiary';
|
||||
}
|
||||
}
|
||||
|
||||
function registryStatusLabel(status: string): string {
|
||||
switch (status) {
|
||||
case 'connected': return 'Connected';
|
||||
case 'disconnected': return 'Disconnected';
|
||||
case 'unreachable': return 'Unreachable';
|
||||
case 'auth_expired': return 'Auth Expired';
|
||||
default: return status;
|
||||
}
|
||||
}
|
||||
|
||||
function formatRelativeTime(timestamp: number | null): string {
|
||||
if (!timestamp) return 'Never';
|
||||
const seconds = Math.floor((Date.now() - timestamp) / 1000);
|
||||
if (seconds < 60) return 'Just now';
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
function formatAbsoluteDate(timestamp: number): string {
|
||||
return new Date(timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
}
|
||||
|
||||
// ─── Add Instance flow ───────────────────────────────────────────────────────
|
||||
|
||||
type AddStep = 'url' | 'auth' | 'done';
|
||||
@@ -263,141 +313,528 @@ function AddInstanceFlow({ onDone }: { onDone: () => void }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main component ──────────────────────────────────────────────────────────
|
||||
// ─── Filter / Sort types ────────────────────────────────────────────────────
|
||||
|
||||
function InstanceRow({ inst }: { inst: import('../../stores/instanceStore').ConnectedInstance }) {
|
||||
const disconnectInstance = useInstanceStore((s) => s.disconnectInstance);
|
||||
const reconnectInstance = useInstanceStore((s) => s.reconnectInstance);
|
||||
const reauthenticateInstance = useInstanceStore((s) => s.reauthenticateInstance);
|
||||
const hasPendingSync = useInstanceStore((s) => s.pendingSyncOrigins.includes(inst.origin));
|
||||
type StatusFilter = 'all' | 'connected' | 'disconnected' | 'issues';
|
||||
type SortBy = 'name' | 'dateAdded' | 'lastConnected';
|
||||
|
||||
const [showReauth, setShowReauth] = useState(false);
|
||||
const [reauthPassword, setReauthPassword] = useState('');
|
||||
const [reauthLoading, setReauthLoading] = useState(false);
|
||||
const [reauthError, setReauthError] = useState('');
|
||||
// ─── RegistryFilterBar ──────────────────────────────────────────────────────
|
||||
|
||||
const isTokenless = !inst.token;
|
||||
function RegistryFilterBar({
|
||||
filter,
|
||||
setFilter,
|
||||
sortBy,
|
||||
setSortBy,
|
||||
counts,
|
||||
}: {
|
||||
filter: StatusFilter;
|
||||
setFilter: (f: StatusFilter) => void;
|
||||
sortBy: SortBy;
|
||||
setSortBy: (s: SortBy) => void;
|
||||
counts: { all: number; connected: number; disconnected: number; issues: number };
|
||||
}) {
|
||||
const [sortOpen, setSortOpen] = useState(false);
|
||||
|
||||
const handleReauth = async () => {
|
||||
if (!reauthPassword) return;
|
||||
setReauthError('');
|
||||
setReauthLoading(true);
|
||||
try {
|
||||
await reauthenticateInstance(inst.origin, reauthPassword);
|
||||
setShowReauth(false);
|
||||
setReauthPassword('');
|
||||
} catch (err) {
|
||||
setReauthError((err as Error).message);
|
||||
} finally {
|
||||
setReauthLoading(false);
|
||||
}
|
||||
};
|
||||
const tabs: Array<{ key: StatusFilter; label: string; count: number }> = [
|
||||
{ key: 'all', label: 'All', count: counts.all },
|
||||
{ key: 'connected', label: 'Connected', count: counts.connected },
|
||||
{ key: 'disconnected', label: 'Disconnected', count: counts.disconnected },
|
||||
{ key: 'issues', label: 'Issues', count: counts.issues },
|
||||
];
|
||||
|
||||
const sortOptions: Array<{ key: SortBy; label: string }> = [
|
||||
{ key: 'name', label: 'Name (A-Z)' },
|
||||
{ key: 'dateAdded', label: 'Date Added' },
|
||||
{ key: 'lastConnected', label: 'Last Connected' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-3 bg-surface-channel rounded-lg space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<StatusDot status={inst.status} />
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm text-txt-primary font-medium truncate">
|
||||
{inst.label}
|
||||
</div>
|
||||
<div className="text-xs text-txt-tertiary truncate">
|
||||
{new URL(inst.origin).host}
|
||||
{inst.username && (
|
||||
<span className="ml-1 text-txt-quaternary">as {inst.username}</span>
|
||||
)}
|
||||
</div>
|
||||
{(inst.status === 'disconnected' || inst.status === 'error') && inst.error && (
|
||||
<div className="text-xs text-accent-amber mt-0.5">{inst.error}</div>
|
||||
)}
|
||||
{hasPendingSync && inst.status === 'connected' && (
|
||||
<div className="text-xs text-accent-amber mt-0.5" title="Password not synced — re-authenticate to sync">
|
||||
Password not synced
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0 ml-2">
|
||||
{hasPendingSync && inst.status === 'connected' && (
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex bg-white/[0.04] rounded-md p-0.5">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
onClick={() => setShowReauth(!showReauth)}
|
||||
className="px-2 py-1 text-xs text-accent-primary hover:bg-accent-primary/10 rounded transition-colors"
|
||||
key={tab.key}
|
||||
type="button"
|
||||
onClick={() => setFilter(tab.key)}
|
||||
className={`px-3 py-1 text-xs font-medium rounded transition-colors ${
|
||||
filter === tab.key ? 'bg-white/[0.08] text-txt-primary' : 'text-txt-tertiary hover:text-txt-secondary'
|
||||
}`}
|
||||
>
|
||||
Sync now
|
||||
{tab.label} <span className="text-[10px] text-txt-tertiary ml-0.5">{tab.count}</span>
|
||||
</button>
|
||||
)}
|
||||
{(inst.status === 'disconnected' || inst.status === 'error') && (
|
||||
isTokenless ? (
|
||||
<button
|
||||
onClick={() => setShowReauth(!showReauth)}
|
||||
className="px-2 py-1 text-xs text-accent-primary hover:bg-accent-primary/10 rounded transition-colors"
|
||||
>
|
||||
Re-authenticate
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => reconnectInstance(inst.origin)}
|
||||
className="px-2 py-1 text-xs text-accent-primary hover:bg-accent-primary/10 rounded transition-colors"
|
||||
>
|
||||
Reconnect
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
<button
|
||||
onClick={() => disconnectInstance(inst.origin)}
|
||||
className="px-2 py-1 text-xs text-txt-danger hover:bg-accent-rose/10 rounded transition-colors"
|
||||
title="Disconnect"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Inline re-authentication prompt */}
|
||||
{showReauth && (
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleReauth(); }} className="space-y-2 pt-1">
|
||||
<input type="text" autoComplete="username" value={inst.username} readOnly tabIndex={-1} className="sr-only" />
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="password"
|
||||
value={reauthPassword}
|
||||
onChange={(e) => setReauthPassword(e.target.value)}
|
||||
placeholder={hasPendingSync && inst.status === 'connected' ? 'Enter your current password' : 'Your account password'}
|
||||
className="input-standard flex-1 py-1.5"
|
||||
disabled={reauthLoading}
|
||||
autoFocus
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={reauthLoading || !reauthPassword}
|
||||
className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-xs font-medium rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
{reauthLoading ? 'Connecting...' : (hasPendingSync && inst.status === 'connected' ? 'Sync' : 'Connect')}
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setShowReauth(false); setReauthPassword(''); setReauthError(''); }}
|
||||
className="px-2 py-1.5 text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
|
||||
onClick={() => setSortOpen(!sortOpen)}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 text-[11px] text-txt-tertiary hover:text-txt-secondary bg-white/[0.04] hover:bg-white/[0.06] rounded transition-colors"
|
||||
>
|
||||
Cancel
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" className="opacity-60">
|
||||
<path d="M2 4h12M4 8h8M6 12h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
Sort
|
||||
<span className="text-[10px]">▾</span>
|
||||
</button>
|
||||
|
||||
{sortOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={() => setSortOpen(false)} />
|
||||
<div className="absolute right-0 top-full mt-1 z-50 glass rounded-lg p-1.5 w-44">
|
||||
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider px-2 py-1">Sort by</div>
|
||||
{sortOptions.map((opt) => (
|
||||
<button
|
||||
key={opt.key}
|
||||
type="button"
|
||||
onClick={() => { setSortBy(opt.key); setSortOpen(false); }}
|
||||
className={`w-full text-left px-2 py-1.5 text-xs rounded ${
|
||||
sortBy === opt.key ? 'text-accent-lavender bg-accent-lavender/[0.08]' : 'text-txt-primary'
|
||||
} hover:bg-white/[0.06] transition-colors`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{reauthError && (
|
||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">
|
||||
{reauthError}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── DeleteIdentityDialog ───────────────────────────────────────────────────
|
||||
|
||||
type DeletionMode = 'leave' | 'nuke' | 'evaporate';
|
||||
type DeletionScope = 'this' | 'select' | 'all';
|
||||
|
||||
function DeleteIdentityDialog({
|
||||
origin,
|
||||
label,
|
||||
onClose,
|
||||
}: {
|
||||
origin: string;
|
||||
label: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const deleteIdentity = useInstanceStore((s) => s.deleteIdentity);
|
||||
const [mode, setMode] = useState<DeletionMode>('leave');
|
||||
const [scope, setScope] = useState<DeletionScope>('this');
|
||||
|
||||
const handleConfirm = () => {
|
||||
deleteIdentity(origin);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<div className="fixed inset-0 z-[10000] flex items-center justify-center animate-fade-in">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="relative max-w-md w-full mx-4 glass-modal rounded-xl p-6 animate-slide-up">
|
||||
<h3 className="text-base font-semibold text-txt-primary mb-1">Delete Identity</h3>
|
||||
<p className="text-xs text-txt-tertiary mb-4">
|
||||
Remove your federated identity on <span className="text-txt-secondary font-medium">{label}</span>. Choose how your data should be handled.
|
||||
</p>
|
||||
|
||||
{/* Deletion mode selection */}
|
||||
<div className="space-y-2 mb-4">
|
||||
{/* Leave quietly */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('leave')}
|
||||
className={`w-full text-left p-3 rounded-lg border transition-colors ${
|
||||
mode === 'leave'
|
||||
? 'bg-white/[0.03] border-white/[0.08]'
|
||||
: 'bg-transparent border-white/[0.04] hover:border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<div className="text-sm font-medium text-txt-primary">Leave quietly</div>
|
||||
<div className="text-[11px] text-txt-tertiary mt-0.5">
|
||||
Remove the connection. Your messages and data remain on the remote instance.
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Nuke everything */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('nuke')}
|
||||
className={`w-full text-left p-3 rounded-lg border transition-colors ${
|
||||
mode === 'nuke'
|
||||
? 'bg-accent-rose/[0.04] border-accent-rose/20'
|
||||
: 'bg-transparent border-white/[0.04] hover:border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-sm font-medium ${mode === 'nuke' ? 'text-txt-danger' : 'text-txt-primary'}`}>
|
||||
Nuke everything
|
||||
</div>
|
||||
<div className="text-[11px] text-txt-tertiary mt-0.5">
|
||||
Delete your account and all associated data on the remote instance.
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Evaporate (coming soon) */}
|
||||
<div
|
||||
className="w-full text-left p-3 rounded-lg border border-dashed border-white/[0.04] opacity-40 cursor-not-allowed"
|
||||
>
|
||||
<div className="text-sm font-medium text-txt-primary">Evaporate</div>
|
||||
<div className="text-[11px] text-txt-tertiary mt-0.5">
|
||||
Gradually fade your presence — coming soon.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scope selector */}
|
||||
<div className="mb-4">
|
||||
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">Scope</div>
|
||||
<div className="flex gap-1.5">
|
||||
{([
|
||||
{ key: 'this' as DeletionScope, label: 'This instance only' },
|
||||
{ key: 'select' as DeletionScope, label: 'Select instances...' },
|
||||
{ key: 'all' as DeletionScope, label: 'All remote instances' },
|
||||
]).map((opt) => (
|
||||
<button
|
||||
key={opt.key}
|
||||
type="button"
|
||||
onClick={() => setScope(opt.key)}
|
||||
className={`flex-1 px-2 py-1.5 text-[11px] font-medium rounded transition-colors ${
|
||||
scope === opt.key
|
||||
? 'bg-accent-lavender/15 text-accent-lavender'
|
||||
: 'bg-white/[0.04] text-txt-tertiary hover:text-txt-secondary'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
className="px-3 py-1.5 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
|
||||
>
|
||||
Delete Identity
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
// ─── RegistryRow ────────────────────────────────────────────────────────────
|
||||
|
||||
function RegistryRow({
|
||||
entry,
|
||||
expanded,
|
||||
onToggleExpand,
|
||||
}: {
|
||||
entry: FederationRegistryEntry;
|
||||
expanded: boolean;
|
||||
onToggleExpand: () => void;
|
||||
}) {
|
||||
const instances = useInstanceStore((s) => s.instances);
|
||||
const disconnectInstance = useInstanceStore((s) => s.disconnectInstance);
|
||||
const reconnectInstance = useInstanceStore((s) => s.reconnectInstance);
|
||||
const forceRemoveEntry = useInstanceStore((s) => s.forceRemoveEntry);
|
||||
|
||||
const [showForceRemoveConfirm, setShowForceRemoveConfirm] = useState(false);
|
||||
const [showDeleteIdentity, setShowDeleteIdentity] = useState(false);
|
||||
|
||||
const name = entry.label || new URL(entry.origin).host;
|
||||
const isDisconnected = entry.status === 'disconnected';
|
||||
const isConnected = entry.status === 'connected';
|
||||
const hasIssue = entry.status === 'unreachable' || entry.status === 'auth_expired';
|
||||
|
||||
// Check if there's a live ConnectedInstance for reconnect actions
|
||||
const liveInstance = instances.find((i) => i.origin === entry.origin);
|
||||
|
||||
// Build context-dependent metadata line
|
||||
let metadataText = '';
|
||||
if (isConnected) {
|
||||
metadataText = `Added ${formatAbsoluteDate(entry.addedAt)}`;
|
||||
if (entry.lastConnectedAt) {
|
||||
metadataText += ` · Connected ${formatRelativeTime(entry.lastConnectedAt)}`;
|
||||
}
|
||||
} else if (isDisconnected) {
|
||||
metadataText = `Added ${formatAbsoluteDate(entry.addedAt)}`;
|
||||
if (entry.disconnectedAt) {
|
||||
metadataText += ` · Disconnected ${formatRelativeTime(entry.disconnectedAt)}`;
|
||||
}
|
||||
} else {
|
||||
metadataText = `Added ${formatAbsoluteDate(entry.addedAt)}`;
|
||||
if (entry.lastConnectedAt) {
|
||||
metadataText += ` · Last connected ${formatRelativeTime(entry.lastConnectedAt)}`;
|
||||
}
|
||||
}
|
||||
|
||||
const handleDisconnect = () => {
|
||||
disconnectInstance(entry.origin);
|
||||
};
|
||||
|
||||
const handleReconnect = () => {
|
||||
if (liveInstance) {
|
||||
reconnectInstance(entry.origin);
|
||||
}
|
||||
};
|
||||
|
||||
const handleForceRemove = () => {
|
||||
forceRemoveEntry(entry.origin);
|
||||
setShowForceRemoveConfirm(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`bg-white/[0.02] rounded-md transition-colors ${isDisconnected ? 'opacity-70' : ''} ${expanded ? 'border border-white/[0.06]' : ''}`}>
|
||||
{/* Compact row */}
|
||||
<div
|
||||
className="flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-white/[0.02] rounded-md"
|
||||
onClick={onToggleExpand}
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<div className={`w-2 h-2 rounded-full shrink-0 ${registryStatusDotColor(entry.status)}`} />
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-txt-primary truncate">{name}</span>
|
||||
<span className={`inline-flex items-center text-[10px] font-medium px-1.5 py-0.5 rounded ${registryStatusColor(entry.status)}`}>
|
||||
{registryStatusLabel(entry.status)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[11px] text-txt-tertiary truncate">
|
||||
{new URL(entry.origin).host}
|
||||
{entry.username && (
|
||||
<span className="ml-1">as {entry.username}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-[10px] text-txt-tertiary">{metadataText}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-txt-tertiary text-xs shrink-0 ml-2">{expanded ? '\u25BE' : '\u25B8'}</span>
|
||||
</div>
|
||||
|
||||
{/* Expanded details */}
|
||||
{expanded && (
|
||||
<div className="px-3 pb-3">
|
||||
<div className="border-t border-white/[0.05] pt-3">
|
||||
{/* Stats grid */}
|
||||
<div className="grid grid-cols-3 gap-3 mb-3">
|
||||
<div>
|
||||
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider mb-0.5">Remote User ID</div>
|
||||
<div className="text-xs text-txt-secondary truncate" title={entry.remoteUserId || 'Unknown'}>
|
||||
{entry.remoteUserId ? entry.remoteUserId.slice(0, 12) + '...' : 'Unknown'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider mb-0.5">Added</div>
|
||||
<div className="text-xs text-txt-secondary">{formatAbsoluteDate(entry.addedAt)}</div>
|
||||
</div>
|
||||
<div>
|
||||
{isDisconnected && entry.disconnectedAt ? (
|
||||
<>
|
||||
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider mb-0.5">Disconnected</div>
|
||||
<div className="text-xs text-txt-secondary">{formatAbsoluteDate(entry.disconnectedAt)}</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider mb-0.5">Last Connected</div>
|
||||
<div className="text-xs text-txt-secondary">
|
||||
{entry.lastConnectedAt ? formatAbsoluteDate(entry.lastConnectedAt) : 'Never'}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
{entry.errorMessage && (
|
||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs mb-3">
|
||||
{entry.errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{isConnected && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); handleDisconnect(); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-white/[0.06] hover:bg-white/[0.1] text-txt-secondary rounded transition-colors"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
className="px-3 py-1.5 text-xs font-medium bg-accent-rose/10 text-txt-danger rounded opacity-50 cursor-not-allowed"
|
||||
title="Disconnect first to delete identity"
|
||||
>
|
||||
Delete Identity
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isDisconnected && (
|
||||
<>
|
||||
{liveInstance && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); handleReconnect(); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-accent-lavender/15 text-accent-lavender hover:bg-accent-lavender/25 rounded transition-colors"
|
||||
>
|
||||
Reconnect
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); setShowDeleteIdentity(true); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-accent-rose/10 text-txt-danger hover:bg-accent-rose/20 rounded transition-colors"
|
||||
>
|
||||
Delete Identity
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasIssue && (
|
||||
<>
|
||||
{entry.status === 'unreachable' && liveInstance && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); handleReconnect(); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-accent-lavender/15 text-accent-lavender hover:bg-accent-lavender/25 rounded transition-colors"
|
||||
>
|
||||
Reconnect
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); setShowForceRemoveConfirm(true); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-white/[0.06] hover:bg-white/[0.1] text-txt-secondary rounded transition-colors"
|
||||
>
|
||||
Force Remove
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); setShowDeleteIdentity(true); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-accent-rose/10 text-txt-danger hover:bg-accent-rose/20 rounded transition-colors"
|
||||
>
|
||||
Delete Identity
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Force Remove confirmation dialog */}
|
||||
<ConfirmDialog
|
||||
isOpen={showForceRemoveConfirm}
|
||||
onClose={() => setShowForceRemoveConfirm(false)}
|
||||
onConfirm={handleForceRemove}
|
||||
title="Force Remove Entry"
|
||||
description={`This will remove the registry entry for ${name}. The remote instance will not be notified. Use this only if the instance is permanently unreachable.`}
|
||||
confirmLabel="Force Remove"
|
||||
variant="danger"
|
||||
/>
|
||||
|
||||
{/* Delete Identity dialog */}
|
||||
{showDeleteIdentity && (
|
||||
<DeleteIdentityDialog
|
||||
origin={entry.origin}
|
||||
label={name}
|
||||
onClose={() => setShowDeleteIdentity(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Sorting ────────────────────────────────────────────────────────────────
|
||||
|
||||
function sortEntries(entries: FederationRegistryEntry[], sortBy: SortBy): FederationRegistryEntry[] {
|
||||
return [...entries].sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'name': {
|
||||
const nameA = (a.label || new URL(a.origin).host).toLowerCase();
|
||||
const nameB = (b.label || new URL(b.origin).host).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
}
|
||||
case 'dateAdded':
|
||||
return b.addedAt - a.addedAt;
|
||||
case 'lastConnected':
|
||||
return (b.lastConnectedAt ?? 0) - (a.lastConnectedAt ?? 0);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Main component ──────────────────────────────────────────────────────────
|
||||
|
||||
export function ConnectedInstances() {
|
||||
const instances = useInstanceStore((s) => s.instances);
|
||||
const registry = useInstanceStore((s) => s.registry);
|
||||
const user = useAuthStore((s) => s.user);
|
||||
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [filter, setFilter] = useState<StatusFilter>('all');
|
||||
const [sortBy, setSortBy] = useState<SortBy>('name');
|
||||
const [expandedOrigins, setExpandedOrigins] = useState<Set<string>>(new Set());
|
||||
|
||||
const toggleExpand = (origin: string) => {
|
||||
setExpandedOrigins((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(origin)) {
|
||||
next.delete(origin);
|
||||
} else {
|
||||
next.add(origin);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
// Convert registry Map to array
|
||||
const registryEntries = Array.from(registry.values());
|
||||
|
||||
// Compute filter counts
|
||||
const counts = {
|
||||
all: registryEntries.length,
|
||||
connected: registryEntries.filter((e) => e.status === 'connected').length,
|
||||
disconnected: registryEntries.filter((e) => e.status === 'disconnected').length,
|
||||
issues: registryEntries.filter((e) => e.status === 'unreachable' || e.status === 'auth_expired').length,
|
||||
};
|
||||
|
||||
// Filter entries
|
||||
const filteredEntries = registryEntries.filter((entry) => {
|
||||
switch (filter) {
|
||||
case 'all': return true;
|
||||
case 'connected': return entry.status === 'connected';
|
||||
case 'disconnected': return entry.status === 'disconnected';
|
||||
case 'issues': return entry.status === 'unreachable' || entry.status === 'auth_expired';
|
||||
default: return true;
|
||||
}
|
||||
});
|
||||
|
||||
// Sort entries
|
||||
const sortedEntries = sortEntries(filteredEntries, sortBy);
|
||||
|
||||
// Empty state message
|
||||
const emptyMessage = registryEntries.length === 0
|
||||
? null
|
||||
: filteredEntries.length === 0
|
||||
? 'No instances match the current filter.'
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -407,7 +844,7 @@ export function ConnectedInstances() {
|
||||
<p className="text-xs text-txt-tertiary mb-2">Link accounts across federated Backspace instances.</p>
|
||||
|
||||
<div className="rounded-lg bg-white/[0.02] p-3 space-y-2">
|
||||
{/* Home instance (always shown, non-removable) */}
|
||||
{/* Home instance (always pinned, non-filterable) */}
|
||||
<div className="flex items-center justify-between p-3 bg-surface-channel rounded-lg">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<StatusDot status="connected" />
|
||||
@@ -417,6 +854,9 @@ export function ConnectedInstances() {
|
||||
</div>
|
||||
<div className="text-xs text-txt-tertiary truncate">
|
||||
{window.location.host}
|
||||
{user?.username && (
|
||||
<span className="ml-1">as {user.username}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -433,10 +873,41 @@ export function ConnectedInstances() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Remote instances */}
|
||||
{instances.map((inst) => (
|
||||
<InstanceRow key={inst.origin} inst={inst} />
|
||||
{/* Filter bar (only if registry has entries) */}
|
||||
{registryEntries.length > 0 && (
|
||||
<RegistryFilterBar
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
sortBy={sortBy}
|
||||
setSortBy={setSortBy}
|
||||
counts={counts}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Registry rows */}
|
||||
{sortedEntries.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{sortedEntries.map((entry) => (
|
||||
<RegistryRow
|
||||
key={entry.origin}
|
||||
entry={entry}
|
||||
expanded={expandedOrigins.has(entry.origin)}
|
||||
onToggleExpand={() => toggleExpand(entry.origin)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{emptyMessage && (
|
||||
<div className="text-xs text-txt-tertiary py-2">{emptyMessage}</div>
|
||||
)}
|
||||
|
||||
{registryEntries.length === 0 && !showAddForm && (
|
||||
<div className="text-xs text-txt-tertiary py-2">
|
||||
No remote instances connected. Add one to start federating.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add instance button / flow */}
|
||||
{showAddForm ? (
|
||||
|
||||
Reference in New Issue
Block a user