From 0509b993e534901184f2c8d8b1a6da223db7f643 Mon Sep 17 00:00:00 2001
From: Timo <6156589+Shik3i@users.noreply.github.com>
Date: Wed, 22 Apr 2026 12:29:09 +0200
Subject: [PATCH] feat: implement one-click auto-join and self-closing bridge
 with countdown

---
 extension/background.js |  3 +++
 extension/popup.js      |  9 +++++++++
 website/app.js          | 23 +++++++++++++++++++----
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/extension/background.js b/extension/background.js
index 538e4be..1c7a91f 100644
--- a/extension/background.js
+++ b/extension/background.js
@@ -596,6 +596,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             useCustomServer: !!useCustomServer,
             serverUrl: serverUrl || ''
         }, () => {
+            broadcastConnectionStatus('connecting');
             if (socket && socket.readyState === WebSocket.OPEN && isNamespaceJoined) {
                 // FORCE TRANSITION: Emit Join Room directly if already connected
                 getSettings().then(settings => {
@@ -612,7 +613,9 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             } else {
                 connect();
             }
+            sendResponse({ status: 'ok' });
         });
+        return true; // Keep channel open for async getSettings
     } else if (message.type === 'REGENERATE_ID') {
         const newId = self.crypto.randomUUID().substring(0, 8);
         chrome.storage.local.set({ peerId: newId }, () => {
diff --git a/extension/popup.js b/extension/popup.js
index a11f550..7e7d0e5 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -286,6 +286,15 @@ function applyConnectionStatus(status) {
 
     elements.connText.textContent = connected ? 'Connected' : (connecting ? 'Connecting...' : (failed ? 'Failed' : 'Disconnected'));
     elements.retryBtn.style.display = failed ? 'block' : 'none';
+
+    // Update Join Button during auto-transition
+    if (connecting) {
+        elements.joinBtn.disabled = true;
+        elements.joinBtn.textContent = 'Connecting...';
+    } else if (!connected) {
+        elements.joinBtn.disabled = false;
+        elements.joinBtn.textContent = 'Join Room';
+    }
 }
 
 function updateHistory(history) {
diff --git a/website/app.js b/website/app.js
index 4c8b8e2..0c52d66 100644
--- a/website/app.js
+++ b/website/app.js
@@ -78,9 +78,24 @@ document.addEventListener('DOMContentLoaded', () => {
                                 `;
                             } else {
                                 actions.innerHTML = `
-                                    <button class="primary" id="webJoinBtn" style="padding: 1.2rem; width:100%; cursor: pointer;">JOIN ROOM NOW</button>
-                                    <p style="text-align:center; font-size:0.8rem; color:var(--success); margin-top: 0.8rem; font-weight: 600;">✅ Extension detected and ready.</p>
+                                    <div class="joining-spinner" style="text-align:center; padding: 1rem;">
+                                        <div style="font-size: 1.2rem; margin-bottom: 0.5rem;">🚀</div>
+                                        <div style="font-weight: 600; color: var(--accent);">Joining room automatically...</div>
+                                        <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">Your extension is taking care of it.</p>
+                                    </div>
                                 `;
+                                
+                                // AUTO-TRIGGER JOIN
+                                setTimeout(() => {
+                                    window.dispatchEvent(new CustomEvent('KOALASYNC_JOIN_REQUEST', {
+                                        detail: { 
+                                            roomId, 
+                                            password,
+                                            useCustomServer: serverFlag === '1',
+                                            serverUrl: serverUrl
+                                        }
+                                    }));
+                                }, 500);
                             }
                         }
                     } else {
@@ -134,9 +149,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (icon) icon.textContent = '✅';
                 title.textContent = 'Erfolgreich!';
                 
-                let count = 5;
+                let count = 3;
                 const updateCountdown = () => {
-                    desc.textContent = `Du bist dem Raum beigetreten. Dieser Tab schließt sich in ${count} Sekunden...`;
+                    desc.innerHTML = `Du bist dem Raum beigetreten. <br><span style="color:var(--accent); font-weight:bold;">Dieser Tab schließt sich in ${count} Sekunden...</span>`;
                     if (count <= 0) {
                         window.close();
                         desc.textContent = 'Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schließen.';