Fix clipper spinning wait cursor remaining after clipping

brave-extension/popup.html

@@ -18,7 +18,9 @@
     .mode-btn.active { background: #00a82d; border-color: #00a82d; color: #fff; }
     .save-btn { width: 100%; margin-top: 14px; padding: 9px; border-radius: 8px; border: none; background: #00a82d; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
     .save-btn:hover { background: #008f26; }
-    .save-btn:disabled { opacity: 0.5; cursor: wait; }
+    .save-btn.loading { opacity: 0.7; cursor: wait; }
+    .save-btn.success { background: #16a34a; color: #fff; cursor: default; opacity: 1; }
+    .save-btn:disabled:not(.loading) { opacity: 0.7; cursor: default; }
     .status { margin-top: 10px; font-size: 12px; padding: 8px; border-radius: 6px; display: none; }
     .status.ok { display: block; background: rgba(0, 168, 45, 0.2); border: 1px solid #00a82d; color: #86efac; }
     .status.err { display: block; background: rgba(220, 38, 38, 0.2); border: 1px solid #dc2626; color: #fca5a5; }

brave-extension/popup.js

@@ -79,6 +79,8 @@ async function handleClip() {
   const statusBox = document.getElementById('statusBox');
   statusBox.className = 'status';
   btn.disabled = true;
+  btn.classList.add('loading');
+  btn.classList.remove('success');
   btn.textContent = 'Clipping & saving graphics...';
 
   try {
@@ -171,13 +173,27 @@ async function handleClip() {
       throw new Error(data.error || `HTTP ${res.status}`);
     }
 
+    btn.classList.remove('loading');
+    btn.classList.add('success');
+    btn.disabled = true;
+    btn.textContent = '✓ Clipped!';
+
     statusBox.className = 'status ok';
     statusBox.innerHTML = `✓ Saved to <strong>${notebook}</strong>! <a href="${serverUrl}/?noteId=${data.noteId}" target="_blank" style="color:#fff;text-decoration:underline;margin-left:6px;">Open Note</a>`;
-    btn.textContent = 'Clipped!';
+
+    let closeTimer = setTimeout(() => {
+      window.close();
+    }, 3500);
+
+    statusBox.addEventListener('mouseenter', () => {
+      if (closeTimer) clearTimeout(closeTimer);
+    });
   } catch (err) {
     statusBox.className = 'status err';
     statusBox.textContent = 'Error: ' + (err.message || String(err));
     btn.disabled = false;
+    btn.classList.remove('loading');
+    btn.classList.remove('success');
     btn.textContent = 'Save Clip to Everclone';
   }
 }

src/app/api/extension/route.ts

@@ -36,7 +36,9 @@ function buildExtensionFiles(defaultServerUrl: string, defaultApiKey: string) {
     .mode-btn.active { background: #00a82d; border-color: #00a82d; color: #fff; }
     .save-btn { width: 100%; margin-top: 14px; padding: 9px; border-radius: 8px; border: none; background: #00a82d; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
     .save-btn:hover { background: #008f26; }
-    .save-btn:disabled { opacity: 0.5; cursor: wait; }
+    .save-btn.loading { opacity: 0.7; cursor: wait; }
+    .save-btn.success { background: #16a34a; color: #fff; cursor: default; opacity: 1; }
+    .save-btn:disabled:not(.loading) { opacity: 0.7; cursor: default; }
     .status { margin-top: 10px; font-size: 12px; padding: 8px; border-radius: 6px; display: none; }
     .status.ok { display: block; background: rgba(0, 168, 45, 0.2); border: 1px solid #00a82d; color: #86efac; }
     .status.err { display: block; background: rgba(220, 38, 38, 0.2); border: 1px solid #dc2626; color: #fca5a5; }
@@ -171,6 +173,8 @@ async function handleClip() {
   const statusBox = document.getElementById('statusBox');
   statusBox.className = 'status';
   btn.disabled = true;
+  btn.classList.add('loading');
+  btn.classList.remove('success');
   btn.textContent = 'Clipping & saving graphics...';
 
   try {
@@ -263,13 +267,27 @@ async function handleClip() {
       throw new Error(data.error || \`HTTP \${res.status}\`);
     }
 
+    btn.classList.remove('loading');
+    btn.classList.add('success');
+    btn.disabled = true;
+    btn.textContent = '✓ Clipped!';
+
     statusBox.className = 'status ok';
     statusBox.innerHTML = \`✓ Saved to <strong>\${notebook}</strong>! <a href="\${serverUrl}/?noteId=\${data.noteId}" target="_blank" style="color:#fff;text-decoration:underline;margin-left:6px;">Open Note</a>\`;
-    btn.textContent = 'Clipped!';
+
+    let closeTimer = setTimeout(() => {
+      window.close();
+    }, 3500);
+
+    statusBox.addEventListener('mouseenter', () => {
+      if (closeTimer) clearTimeout(closeTimer);
+    });
   } catch (err) {
     statusBox.className = 'status err';
     statusBox.textContent = 'Error: ' + (err.message || String(err));
     btn.disabled = false;
+    btn.classList.remove('loading');
+    btn.classList.remove('success');
     btn.textContent = 'Save Clip to Everclone';
   }
 }