From 42c15df8c94ea2bf074a7e6cae19a0a08aff27c5 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Sat, 11 Jul 2026 12:36:30 +0300
Subject: [PATCH] Close client instructions panel on outside click

---
 src/web/components/ClientOverviewPage.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/web/components/ClientOverviewPage.jsx b/src/web/components/ClientOverviewPage.jsx
index 5eafff8..785fff3 100644
--- a/src/web/components/ClientOverviewPage.jsx
+++ b/src/web/components/ClientOverviewPage.jsx
@@ -97,6 +97,8 @@ export function ClientOverviewPage({
   const subscriptionInputRef = useRef(null);
   const subscriptionRef = useRef(null);
   const copyTimerRef = useRef(null);
+  const instructionsPanelRef = useRef(null);
+  const instructionsToggleRef = useRef(null);
   const serverKey = servers.map((server) => `${server.tag}:${server.server}:${server.server_port}`).join('|');
   const gatewayAddress = isGateway ? window.location.hostname : '127.0.0.1';
   const proxyUrls = localProxyUrls(state?.proxyPort, gatewayAddress);
@@ -210,6 +212,17 @@ export function ClientOverviewPage({
     return () => document.removeEventListener('keydown', closeOnEscape);
   }, [instructionsOpen]);
 
+  useEffect(() => {
+    if (!instructionsOpen) return undefined;
+    const closeInstructionsOutside = (event) => {
+      if (instructionsPanelRef.current?.contains(event.target)) return;
+      if (instructionsToggleRef.current?.contains(event.target)) return;
+      setInstructionsOpen(false);
+    };
+    document.addEventListener('pointerdown', closeInstructionsOutside);
+    return () => document.removeEventListener('pointerdown', closeInstructionsOutside);
+  }, [instructionsOpen]);
+
   async function toggleConnection() {
     const action = connectionAction({ connected, selectedTag, configExists: state?.configExists });
     if (action?.type === 'stop') return onStop();
@@ -278,6 +291,7 @@ export function ClientOverviewPage({
   return (
     <div className="client-shell">
       {hasSubscription && <button
+        ref={instructionsToggleRef}
         className={`client-instructions-toggle${instructionsOpen ? ' is-open' : ''}`}
         type="button"
         aria-expanded={instructionsOpen}
@@ -542,6 +556,7 @@ export function ClientOverviewPage({
       </main>
 
       {hasSubscription && <aside
+        ref={instructionsPanelRef}
         id="client-instructions"
         className={`client-instructions${instructionsOpen ? ' is-open' : ''}`}
         aria-labelledby="instructions-title"