From 8544f83225be85b70472e9bc09dded70e68eac4c Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Tue, 5 May 2026 23:24:19 +0200
Subject: [PATCH] refactor: drop unwired ConnectInstanceModal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.).
---
 .../src/components/chat/FriendsPage.test.tsx  |   5 -
 .../modals/ConnectInstanceModal.tsx           | 161 ------------------
 2 files changed, 166 deletions(-)
 delete mode 100644 packages/web/src/components/modals/ConnectInstanceModal.tsx

diff --git a/packages/web/src/components/chat/FriendsPage.test.tsx b/packages/web/src/components/chat/FriendsPage.test.tsx
index 82ec41ec..c1c2f551 100644
--- a/packages/web/src/components/chat/FriendsPage.test.tsx
+++ b/packages/web/src/components/chat/FriendsPage.test.tsx
@@ -108,11 +108,6 @@ vi.mock('../../stores/activityStore', () => ({
   ),
 }));
 
-// Mock ConnectInstanceModal
-vi.mock('../modals/ConnectInstanceModal', () => ({
-  ConnectInstanceModal: () => null,
-}));
-
 const mockNavigate = vi.fn();
 vi.mock('react-router-dom', async () => {
   const actual = await vi.importActual('react-router-dom');
diff --git a/packages/web/src/components/modals/ConnectInstanceModal.tsx b/packages/web/src/components/modals/ConnectInstanceModal.tsx
deleted file mode 100644
index 4676af4e..00000000
--- a/packages/web/src/components/modals/ConnectInstanceModal.tsx
+++ /dev/null
@@ -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&apos;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
-  );
-}