refactor: drop unwired ConnectInstanceModal
Commit 7309f44 removed the friend-add trigger because the server now
handles all routing/peering/lookup; the commit message reserved the
modal for 'Connections settings and space-join flows' but neither flow
ever wired it back in. grep across packages/web/src finds only
self-references — pure dead code.
Removing 162 lines of UI plus the stale vi.mock in FriendsPage.test.tsx.
If a per-instance password-re-entry consent UX is ever needed, the
useInstanceConnect hook is the actual abstraction and the modal can be
rebuilt cleanly with current primitives (Modal mobileStyle="fullscreen",
ContextMenuRenderer's bottom-sheet, etc.).
This commit is contained in:
Jannis Braun
@@ -108,11 +108,6 @@ vi.mock('../../stores/activityStore', () => ({
|
|||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// Mock ConnectInstanceModal
|
|
||||||
vi.mock('../modals/ConnectInstanceModal', () => ({
|
|
||||||
ConnectInstanceModal: () => null,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const mockNavigate = vi.fn();
|
const mockNavigate = vi.fn();
|
||||||
vi.mock('react-router-dom', async () => {
|
vi.mock('react-router-dom', async () => {
|
||||||
const actual = await vi.importActual('react-router-dom');
|
const actual = await vi.importActual('react-router-dom');
|
||||||
|
|||||||
@@ -1,161 +0,0 @@
|
|||||||
import React, { useState, useEffect, useRef } from 'react';
|
|
||||||
import { createPortal } from 'react-dom';
|
|
||||||
import { useInstanceConnect } from '../../hooks/useInstanceConnect';
|
|
||||||
|
|
||||||
interface ConnectInstanceModalProps {
|
|
||||||
domain: string;
|
|
||||||
targetDisplayName: string;
|
|
||||||
isReconnect?: boolean;
|
|
||||||
actionLabel?: string;
|
|
||||||
onConnected(result: 'new' | 'reconnect'): void;
|
|
||||||
onCancel(): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ConnectInstanceModal({
|
|
||||||
domain,
|
|
||||||
targetDisplayName,
|
|
||||||
isReconnect = false,
|
|
||||||
actionLabel,
|
|
||||||
onConnected,
|
|
||||||
onCancel,
|
|
||||||
}: ConnectInstanceModalProps) {
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const { connect, isConnecting, error, clearError } = useInstanceConnect();
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
const resolvedLabel = actionLabel
|
|
||||||
?? (isReconnect ? 'Reconnect & Add Friend' : 'Connect & Add Friend');
|
|
||||||
|
|
||||||
// Focus password input on mount
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => inputRef.current?.focus(), 50);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Escape key handler — stop propagation to prevent parent modal from closing
|
|
||||||
useEffect(() => {
|
|
||||||
const handleKey = (e: KeyboardEvent) => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
e.stopPropagation();
|
|
||||||
onCancel();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('keydown', handleKey, true); // capture phase
|
|
||||||
return () => document.removeEventListener('keydown', handleKey, true);
|
|
||||||
}, [onCancel]);
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!password.trim() || isConnecting) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await connect(domain, password.trim());
|
|
||||||
onConnected(result);
|
|
||||||
} catch {
|
|
||||||
// Error state is managed by the hook — UI updates via `error`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return createPortal(
|
|
||||||
<div className="fixed inset-0 z-[210] flex items-center justify-center animate-fade-in">
|
|
||||||
{/* Lighter backdrop to avoid compounding with parent modal */}
|
|
||||||
<div className="absolute inset-0 bg-black/30" onClick={onCancel} />
|
|
||||||
|
|
||||||
<div className="relative w-full max-w-sm mx-4 glass-modal rounded-lg animate-slide-up overflow-hidden">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="px-5 pt-5 pb-0">
|
|
||||||
<div className="flex items-center gap-3 mb-3">
|
|
||||||
<div className="w-10 h-10 rounded-lg bg-accent-lavender/15 flex items-center justify-center flex-shrink-0">
|
|
||||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" className="text-accent-lavender">
|
|
||||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-[16px] font-bold text-txt-primary">
|
|
||||||
{isReconnect ? 'Reconnect to Instance' : 'Connect to Instance'}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-[13px] text-txt-secondary leading-relaxed mb-4">
|
|
||||||
{isReconnect ? (
|
|
||||||
<>
|
|
||||||
Your connection to <strong className="text-txt-primary font-semibold">{domain}</strong> was lost.
|
|
||||||
Re-enter your password to reconnect and send a friend request to{' '}
|
|
||||||
<strong className="text-txt-primary font-semibold">{targetDisplayName}</strong>.
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<strong className="text-txt-primary font-semibold">{targetDisplayName}</strong> is on{' '}
|
|
||||||
<strong className="text-txt-primary font-semibold">{domain}</strong>, an instance you
|
|
||||||
haven't connected to yet. Connect to send a friend request.
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Instance badge */}
|
|
||||||
<div className="flex items-center gap-2.5 px-3 py-2.5 bg-white/[0.03] border border-white/[0.06] rounded-lg mb-4">
|
|
||||||
<div className="w-7 h-7 rounded-md bg-accent-sky/12 flex items-center justify-center flex-shrink-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-accent-sky">
|
|
||||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-[12px] font-semibold text-txt-primary">{domain}</div>
|
|
||||||
<div className="text-[11px] text-txt-tertiary">Remote Backspace instance</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Form */}
|
|
||||||
<form onSubmit={handleSubmit} className="px-5 pb-5">
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type="password"
|
|
||||||
className="input-standard w-full py-2.5 mb-1"
|
|
||||||
placeholder="Your password"
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPassword(e.target.value);
|
|
||||||
if (error) clearError();
|
|
||||||
}}
|
|
||||||
disabled={isConnecting}
|
|
||||||
autoComplete="current-password"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Error text */}
|
|
||||||
{error && (
|
|
||||||
<p className="text-[12px] text-txt-danger mt-1 mb-2">{error}</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-2 mt-3">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isConnecting || !password.trim()}
|
|
||||||
className="flex-1 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-accent-primary hover:bg-accent-primary/80 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
|
|
||||||
>
|
|
||||||
{isConnecting ? (
|
|
||||||
<>
|
|
||||||
<svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
|
|
||||||
<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>
|
|
||||||
Connecting...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
resolvedLabel
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onCancel}
|
|
||||||
disabled={isConnecting}
|
|
||||||
className="py-2.5 px-4 rounded-lg text-[13px] font-medium text-txt-tertiary border border-white/[0.06] hover:bg-white/[0.06] transition-colors disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
document.body
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user