From 3c9ff36ca1f4e8276c0296e143be3ecc214704c1 Mon Sep 17 00:00:00 2001
From: louzt <179385168+louzt@users.noreply.github.com>
Date: Wed, 22 Apr 2026 18:23:07 -0600
Subject: [PATCH 1/2] fix(connection): allow cancel/delete while server is
 connecting

Normalize stored server URLs back into editable host/port fields so Edit Server no longer re-saves values like ircs://host:6697:6697. Keep the loading overlay non-blocking, clear global connecting state when a connecting server is deleted or disconnected, and avoid sending QUIT before a socket is actually open.\n\nAlso adds focused regressions for URL normalization, safe disconnect during CONNECTING, and deleting a server while the UI is still in a connecting state.
---
 src/components/ui/AddServerModal.tsx     |  56 ++++++------
 src/components/ui/EditServerModal.tsx    |  54 +++++++++--
 src/components/ui/LoadingOverlay.tsx     |   2 +-
 src/lib/irc/IRCClient.ts                 |  16 +++-
 src/lib/serverConnectionUrl.ts           | 111 +++++++++++++++++++++++
 src/store/index.ts                       |  27 ++++--
 tests/lib/ircClient.test.ts              |  23 +++++
 tests/lib/serverConnectionUrl.test.ts    |  64 +++++++++++++
 tests/store/serverConnectionFlow.test.ts |  49 ++++++++++
 9 files changed, 356 insertions(+), 46 deletions(-)
 create mode 100644 src/lib/serverConnectionUrl.ts
 create mode 100644 tests/lib/serverConnectionUrl.test.ts
 create mode 100644 tests/store/serverConnectionFlow.test.ts

diff --git a/src/components/ui/AddServerModal.tsx b/src/components/ui/AddServerModal.tsx
index 62fba956..440c4fc3 100644
--- a/src/components/ui/AddServerModal.tsx
+++ b/src/components/ui/AddServerModal.tsx
@@ -4,6 +4,10 @@ import { FaQuestionCircle } from "react-icons/fa";
 import BaseModal from "../../lib/modal/BaseModal";
 import { Button, ModalBody, ModalFooter } from "../../lib/modal/components";
 import { isTauri } from "../../lib/platformUtils";
+import {
+  buildServerConnectionUrl,
+  getServerConnectionFields,
+} from "../../lib/serverConnectionUrl";
 import useStore from "../../store";
 import { TextInput } from "./TextInput";
 
@@ -16,15 +20,17 @@ export const AddServerModal: React.FC = () => {
     ui: { prefillServerDetails, isAddServerModalOpen },
   } = useStore();
 
-  const [serverName, setServerName] = useState(
-    prefillServerDetails?.name || "",
-  );
-  const [serverHost, setServerHost] = useState(
+  const initialConnectionFields = getServerConnectionFields(
     prefillServerDetails?.host || "",
-  );
-  const [serverPort, setServerPort] = useState(
     prefillServerDetails?.port || (isTauri() ? "6697" : "443"),
+    prefillServerDetails?.useWebSocket ?? false,
+  );
+
+  const [serverName, setServerName] = useState(
+    prefillServerDetails?.name || "",
   );
+  const [serverHost, setServerHost] = useState(initialConnectionFields.host);
+  const [serverPort, setServerPort] = useState(initialConnectionFields.port);
   const [nickname, setNickname] = useState(
     prefillServerDetails?.nickname || `user${Math.floor(Math.random() * 1000)}`,
   );
@@ -36,7 +42,7 @@ export const AddServerModal: React.FC = () => {
   const [showAccount, setShowAccount] = useState(false);
   const [registerAccount, setRegisterAccount] = useState(false);
   const [useWebSocket, setUseWebSocket] = useState(
-    prefillServerDetails?.useWebSocket ?? false,
+    initialConnectionFields.useWebSocket,
   );
   const [registerEmail, setRegisterEmail] = useState("");
   const [registerPassword, setRegisterPassword] = useState("");
@@ -44,14 +50,20 @@ export const AddServerModal: React.FC = () => {
   const [error, setError] = useState("");
 
   useEffect(() => {
+    const nextFields = getServerConnectionFields(
+      prefillServerDetails?.host || "",
+      prefillServerDetails?.port || (isTauri() ? "6697" : "443"),
+      prefillServerDetails?.useWebSocket ?? false,
+    );
+
     setServerName(prefillServerDetails?.name || "");
-    setServerHost(prefillServerDetails?.host || "");
-    setServerPort(prefillServerDetails?.port || (isTauri() ? "6697" : "443"));
+    setServerHost(nextFields.host);
+    setServerPort(nextFields.port);
     setNickname(
       prefillServerDetails?.nickname ||
         `user${Math.floor(Math.random() * 1000)}`,
     );
-    setUseWebSocket(prefillServerDetails?.useWebSocket || false);
+    setUseWebSocket(nextFields.useWebSocket);
   }, [prefillServerDetails]);
 
   useEffect(() => {
@@ -96,22 +108,16 @@ export const AddServerModal: React.FC = () => {
     }
 
     try {
-      let finalHost = serverHost;
-      if (isTauri()) {
-        const port = Number.parseInt(serverPort, 10);
-        const cleanHost = serverHost.replace(
-          /^(https?|wss|ircs?|irc):\/\//,
-          "",
-        );
-        finalHost = useWebSocket
-          ? `wss://${cleanHost}:${port}`
-          : `ircs://${cleanHost}:${port}`;
-      }
+      const port = Number.parseInt(serverPort, 10);
+      const finalHost = buildServerConnectionUrl(serverHost, port, {
+        isTauri: isTauri(),
+        useWebSocket,
+      });
 
       await connect(
         finalServerName,
         finalHost,
-        Number.parseInt(serverPort, 10),
+        port,
         nickname,
         !!saslPassword,
         password,
@@ -167,11 +173,7 @@ export const AddServerModal: React.FC = () => {
                 </label>
                 <TextInput
                   inputMode="url"
-                  value={
-                    disableServerConnectionInfo && serverHost.includes("://")
-                      ? new URL(serverHost).hostname
-                      : serverHost || ""
-                  }
+                  value={serverHost || ""}
                   onChange={(e) => setServerHost(e.target.value)}
                   placeholder="irc.example.com"
                   className={`w-full rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary ${
diff --git a/src/components/ui/EditServerModal.tsx b/src/components/ui/EditServerModal.tsx
index e824a786..3b4dc6da 100644
--- a/src/components/ui/EditServerModal.tsx
+++ b/src/components/ui/EditServerModal.tsx
@@ -1,6 +1,11 @@
 import type React from "react";
 import { useState } from "react";
 import { FaQuestionCircle, FaTimes } from "react-icons/fa";
+import { isTauri } from "../../lib/platformUtils";
+import {
+  buildServerConnectionUrl,
+  getServerConnectionFields,
+} from "../../lib/serverConnectionUrl";
 import useStore, { loadSavedServers } from "../../store";
 import type { ServerConfig } from "../../types";
 import { TextInput } from "./TextInput";
@@ -19,16 +24,22 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
   const server = servers.find((s) => s.id === serverId);
   const savedServers = loadSavedServers();
   const serverConfig = savedServers.find((s) => s.id === serverId);
+  const initialConnectionFields = getServerConnectionFields(
+    serverConfig?.host || server?.host || "",
+    serverConfig?.port?.toString() ||
+      server?.port?.toString() ||
+      (isTauri() ? "6697" : "443"),
+    false,
+  );
 
   // Initialize state with current server values
   const [serverName, setServerName] = useState(
     serverConfig?.name || server?.name || "",
   );
-  const [serverHost, setServerHost] = useState(
-    serverConfig?.host || server?.host || "",
-  );
-  const [serverPort, setServerPort] = useState(
-    serverConfig?.port?.toString() || server?.port?.toString() || "443",
+  const [serverHost, setServerHost] = useState(initialConnectionFields.host);
+  const [serverPort, setServerPort] = useState(initialConnectionFields.port);
+  const [useWebSocket, setUseWebSocket] = useState(
+    initialConnectionFields.useWebSocket,
   );
   const [nickname, setNickname] = useState(serverConfig?.nickname || "");
   const [password, setPassword] = useState("");
@@ -87,11 +98,16 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
     }
 
     try {
+      const parsedPort = Number.parseInt(serverPort, 10);
+
       // Update server configuration
       const updatedConfig: Partial<ServerConfig> = {
         name: finalServerName,
-        host: serverHost.trim(),
-        port: Number.parseInt(serverPort, 10),
+        host: buildServerConnectionUrl(serverHost, parsedPort, {
+          isTauri: isTauri(),
+          useWebSocket,
+        }),
+        port: parsedPort,
         nickname: nickname.trim(),
         password: password.trim() || undefined,
         saslAccountName: finalSaslAccountName || undefined,
@@ -163,6 +179,7 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
                 value={serverHost}
                 onChange={(e) => setServerHost(e.target.value)}
                 placeholder="irc.example.com"
+                inputMode="url"
                 className="w-full bg-discord-dark-400 text-discord-text-normal rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-discord-primary"
               />
             </div>
@@ -176,6 +193,7 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
                 />
               </label>
               <TextInput
+                inputMode="numeric"
                 value={serverPort}
                 onChange={(e) => setServerPort(e.target.value)}
                 placeholder="443"
@@ -184,6 +202,28 @@ export const EditServerModal: React.FC<EditServerModalProps> = ({
             </div>
           </div>
 
+          {isTauri() && (
+            <div className="mb-4 flex items-center">
+              <input
+                type="checkbox"
+                id="editUseWebSocket"
+                checked={useWebSocket}
+                onChange={() => setUseWebSocket(!useWebSocket)}
+                className="accent-discord-accent rounded"
+              />
+              <label
+                htmlFor="editUseWebSocket"
+                className="text-discord-text-muted text-sm flex items-center ml-2"
+              >
+                WSS{" "}
+                <FaQuestionCircle
+                  title="Toggle WebSocket instead of direct IRC-over-TLS"
+                  className="inline-block text-discord-text-muted cursor-help text-xs ml-1"
+                />
+              </label>
+            </div>
+          )}
+
           <div className="mb-4">
             <label className="block text-discord-text-muted text-sm font-medium mb-1">
               Nickname
diff --git a/src/components/ui/LoadingOverlay.tsx b/src/components/ui/LoadingOverlay.tsx
index 39e43907..043c6714 100644
--- a/src/components/ui/LoadingOverlay.tsx
+++ b/src/components/ui/LoadingOverlay.tsx
@@ -3,7 +3,7 @@ import LoadingSpinner from "./LoadingSpinner";
 
 export const LoadingOverlay: React.FC = () => {
   return (
-    <div className="fixed inset-0 z-[100001] flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <div className="pointer-events-none fixed inset-0 z-[100001] flex items-center justify-center bg-black/50 backdrop-blur-sm">
       <LoadingSpinner size="lg" text="" />
     </div>
   );
diff --git a/src/lib/irc/IRCClient.ts b/src/lib/irc/IRCClient.ts
index 5b1d500e..7e0c17a0 100644
--- a/src/lib/irc/IRCClient.ts
+++ b/src/lib/irc/IRCClient.ts
@@ -713,9 +713,19 @@ export class IRCClient implements IRCClientContext {
   disconnect(serverId: string, quitMessage?: string): void {
     const socket = this.sockets.get(serverId);
     if (socket) {
-      const message = quitMessage || "ObsidianIRC - Bringing IRC to the future";
-      socket.send(`QUIT :${message}`);
-      socket.close();
+      const CONNECTING = 0;
+      const OPEN = 1;
+
+      if (socket.readyState === OPEN) {
+        const message =
+          quitMessage || "ObsidianIRC - Bringing IRC to the future";
+        socket.send(`QUIT :${message}`);
+      }
+
+      if (socket.readyState === CONNECTING || socket.readyState === OPEN) {
+        socket.close();
+      }
+
       this.sockets.delete(serverId);
     }
     const server = this.servers.get(serverId);
diff --git a/src/lib/serverConnectionUrl.ts b/src/lib/serverConnectionUrl.ts
new file mode 100644
index 00000000..f7876654
--- /dev/null
+++ b/src/lib/serverConnectionUrl.ts
@@ -0,0 +1,111 @@
+import { parseIrcUrl } from "./ircUrlParser";
+
+export interface ServerConnectionFields {
+  host: string;
+  port: string;
+  useWebSocket: boolean;
+}
+
+function parseStandardUrl(url: string): {
+  host: string;
+  port: string;
+  useWebSocket: boolean;
+} | null {
+  try {
+    const parsed = new URL(url);
+    const useWebSocket =
+      parsed.protocol === "wss:" || parsed.protocol === "ws:";
+    return {
+      host: parsed.hostname,
+      port: parsed.port,
+      useWebSocket,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function parseHostWithOptionalPort(value: string): {
+  host: string;
+  port?: string;
+} {
+  const trimmed = value.trim();
+  const match = trimmed.match(/^([^:/?#\s]+):(\d+)$/);
+  if (!match) {
+    return { host: trimmed };
+  }
+
+  return {
+    host: match[1],
+    port: match[2],
+  };
+}
+
+export function getServerConnectionFields(
+  rawHost: string | null | undefined,
+  rawPort: string | number | null | undefined,
+  fallbackUseWebSocket = false,
+): ServerConnectionFields {
+  const fallbackPort = String(rawPort ?? "").trim();
+  const host = rawHost?.trim() ?? "";
+
+  if (!host) {
+    return {
+      host: "",
+      port: fallbackPort,
+      useWebSocket: fallbackUseWebSocket,
+    };
+  }
+
+  if (host.startsWith("ircs://") || host.startsWith("irc://")) {
+    const parsed = parseIrcUrl(host);
+    return {
+      host: parsed.host,
+      port: String(parsed.port || fallbackPort),
+      useWebSocket: false,
+    };
+  }
+
+  if (host.startsWith("wss://") || host.startsWith("ws://")) {
+    const parsed = parseStandardUrl(host);
+    if (parsed) {
+      return {
+        host: parsed.host,
+        port: parsed.port || fallbackPort,
+        useWebSocket: parsed.useWebSocket,
+      };
+    }
+  }
+
+  const parsedHost = parseHostWithOptionalPort(host);
+  return {
+    host: parsedHost.host,
+    port: parsedHost.port || fallbackPort,
+    useWebSocket: fallbackUseWebSocket,
+  };
+}
+
+export function buildServerConnectionUrl(
+  hostInput: string,
+  port: number,
+  options: {
+    isTauri: boolean;
+    useWebSocket: boolean;
+  },
+): string {
+  const { host } = getServerConnectionFields(
+    hostInput,
+    String(port),
+    options.useWebSocket,
+  );
+  const trimmedHost = host.trim();
+  if (!trimmedHost) return "";
+
+  const scheme = options.isTauri
+    ? options.useWebSocket
+      ? "wss"
+      : "ircs"
+    : "wss";
+
+  return `${scheme}://${trimmedHost}:${port}`;
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 7ef1cff3..586afc0e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1194,10 +1194,15 @@ const useStore = create<AppState>((set, get) => ({
         }
       }
 
-      const clearConnectionState =
-        state.connectingServerId === serverId
-          ? { isConnecting: false, connectingServerId: null }
-          : {};
+      const targetServer = state.servers.find((s) => s.id === serverId);
+      const shouldClearConnectionState =
+        state.connectingServerId === serverId ||
+        targetServer?.connectionState === "connecting" ||
+        targetServer?.connectionState === "reconnecting";
+
+      const clearConnectionState = shouldClearConnectionState
+        ? { isConnecting: false, connectingServerId: null }
+        : {};
 
       return {
         servers: updatedServers,
@@ -2412,6 +2417,8 @@ const useStore = create<AppState>((set, get) => ({
 
     // Update server state to connecting
     set((state) => ({
+      isConnecting: true,
+      connectingServerId: serverId,
       servers: state.servers.map((s) =>
         s.id === serverId
           ? { ...s, connectionState: "connecting" as const }
@@ -2490,10 +2497,14 @@ const useStore = create<AppState>((set, get) => ({
       const newSelectedServerId =
         remainingServers.length > 0 ? remainingServers[0].id : null;
 
-      const clearConnectionState =
-        state.connectingServerId === serverId
-          ? { isConnecting: false, connectingServerId: null }
-          : {};
+      const shouldClearConnectionState =
+        state.connectingServerId === serverId ||
+        serverToDelete?.connectionState === "connecting" ||
+        serverToDelete?.connectionState === "reconnecting";
+
+      const clearConnectionState = shouldClearConnectionState
+        ? { isConnecting: false, connectingServerId: null }
+        : {};
 
       return {
         servers: remainingServers,
diff --git a/tests/lib/ircClient.test.ts b/tests/lib/ircClient.test.ts
index ec7b0a57..ea9a4801 100644
--- a/tests/lib/ircClient.test.ts
+++ b/tests/lib/ircClient.test.ts
@@ -166,6 +166,29 @@ describe("IRCClient", () => {
     });
   });
 
+  describe("disconnect", () => {
+    test("does not send QUIT while socket is still connecting", () => {
+      const mockSocket = new MockWebSocket("wss://irc.example.com:443");
+      MockWebSocketSpy.mockReturnValue(mockSocket);
+
+      client.connect(
+        "Test Server",
+        "irc.example.com",
+        443,
+        "testuser",
+        undefined,
+        undefined,
+        undefined,
+        "server-1",
+      );
+
+      client.disconnect("server-1");
+
+      expect(mockSocket.sentMessages).toEqual([]);
+      expect(mockSocket.readyState).toBe(WebSocket.CLOSED);
+    });
+  });
+
   describe("message handling", () => {
     test("should handle PRIVMSG correctly", async () => {
       const mockSocket = new MockWebSocket("ws://irc.example.com:443");
diff --git a/tests/lib/serverConnectionUrl.test.ts b/tests/lib/serverConnectionUrl.test.ts
new file mode 100644
index 00000000..1d5f4e4a
--- /dev/null
+++ b/tests/lib/serverConnectionUrl.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildServerConnectionUrl,
+  getServerConnectionFields,
+} from "../../src/lib/serverConnectionUrl";
+
+describe("serverConnectionUrl", () => {
+  it("splits ircs urls into hostname and port fields", () => {
+    expect(
+      getServerConnectionFields("ircs://irc.h4ks.com:6697", "6697", false),
+    ).toEqual({
+      host: "irc.h4ks.com",
+      port: "6697",
+      useWebSocket: false,
+    });
+  });
+
+  it("splits wss urls into hostname and port fields", () => {
+    expect(
+      getServerConnectionFields("wss://irc.h4ks.com:443", "443", true),
+    ).toEqual({
+      host: "irc.h4ks.com",
+      port: "443",
+      useWebSocket: true,
+    });
+  });
+
+  it("extracts a trailing port from plain host input", () => {
+    expect(
+      getServerConnectionFields("irc.h4ks.com:6697", "443", false),
+    ).toEqual({
+      host: "irc.h4ks.com",
+      port: "6697",
+      useWebSocket: false,
+    });
+  });
+
+  it("builds ircs endpoints for tauri raw connections", () => {
+    expect(
+      buildServerConnectionUrl("ircs://irc.h4ks.com:6697", 6697, {
+        isTauri: true,
+        useWebSocket: false,
+      }),
+    ).toBe("ircs://irc.h4ks.com:6697");
+  });
+
+  it("builds wss endpoints for tauri websocket mode", () => {
+    expect(
+      buildServerConnectionUrl("irc.h4ks.com", 443, {
+        isTauri: true,
+        useWebSocket: true,
+      }),
+    ).toBe("wss://irc.h4ks.com:443");
+  });
+
+  it("always builds wss endpoints on web", () => {
+    expect(
+      buildServerConnectionUrl("ircs://irc.h4ks.com:6697", 443, {
+        isTauri: false,
+        useWebSocket: false,
+      }),
+    ).toBe("wss://irc.h4ks.com:443");
+  });
+});
diff --git a/tests/store/serverConnectionFlow.test.ts b/tests/store/serverConnectionFlow.test.ts
new file mode 100644
index 00000000..5b660079
--- /dev/null
+++ b/tests/store/serverConnectionFlow.test.ts
@@ -0,0 +1,49 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import ircClient from "../../src/lib/ircClient";
+import type { AppState } from "../../src/store";
+import useStore from "../../src/store";
+
+describe("server connection flow", () => {
+  beforeEach(() => {
+    useStore.setState({
+      servers: [
+        {
+          id: "srv-1",
+          name: "h4ks.com",
+          host: "irc.h4ks.com",
+          port: 6697,
+          channels: [],
+          privateChats: [],
+          isConnected: false,
+          connectionState: "connecting",
+          users: [],
+        },
+      ],
+      isConnecting: true,
+      connectingServerId: null,
+      ui: {
+        ...useStore.getState().ui,
+        selectedServerId: "srv-1",
+      },
+    } as unknown as Partial<AppState>);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("deleteServer clears connecting state for a connecting server", () => {
+    const removeServerSpy = vi
+      .spyOn(ircClient, "removeServer")
+      .mockImplementation(() => {});
+
+    useStore.getState().deleteServer("srv-1");
+
+    const state = useStore.getState();
+    expect(removeServerSpy).toHaveBeenCalledWith("srv-1");
+    expect(state.servers).toEqual([]);
+    expect(state.isConnecting).toBe(false);
+    expect(state.connectingServerId).toBeNull();
+    expect(state.ui.selectedServerId).toBeNull();
+  });
+});
\ No newline at end of file

From e2830287db163ab3278ce7d7362fdb796e8085b9 Mon Sep 17 00:00:00 2001
From: louzt <179385168+louzt@users.noreply.github.com>
Date: Wed, 22 Apr 2026 18:43:18 -0600
Subject: [PATCH 2/2] test(store): normalize trailing newline in connection
 flow regression

---
 tests/store/serverConnectionFlow.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/store/serverConnectionFlow.test.ts b/tests/store/serverConnectionFlow.test.ts
index 5b660079..7c4b7f33 100644
--- a/tests/store/serverConnectionFlow.test.ts
+++ b/tests/store/serverConnectionFlow.test.ts
@@ -46,4 +46,4 @@ describe("server connection flow", () => {
     expect(state.connectingServerId).toBeNull();
     expect(state.ui.selectedServerId).toBeNull();
   });
-});
\ No newline at end of file
+});