clay-server 2.7.2 → 2.8.0

package/lib/public/modules/notifications.js

@@ -3,7 +3,7 @@ import { iconHtml, refreshIcons } from './icons.js';
 
 var ctx;
 var basePath = "/";
-var onboardingBanner, onboardingText, onboardingClose, onboardingDismissed;
+var onboardingPill, onboardingText, onboardingClose, onboardingDismissed;
 var notifAlertEnabled, notifSoundEnabled, notifPermission;
 var audioCtx = null;
 
@@ -13,12 +13,12 @@ export function getNotifPermission() { return notifPermission; }
 
 export function showOnboarding(html) {
   onboardingText.innerHTML = html;
-  onboardingBanner.classList.remove("hidden");
+  onboardingPill.classList.remove("hidden");
   refreshIcons();
 }
 
 export function hideOnboarding() {
-  onboardingBanner.classList.add("hidden");
+  onboardingPill.classList.add("hidden");
 }
 
 export function playDoneSound() {
@@ -80,69 +80,57 @@ export function initNotifications(_ctx) {
     window.visualViewport.addEventListener("scroll", onViewportChange);
   }
 
-  // --- Update banner ---
+  // --- Update pill badge ---
   (function () {
-    var banner = $("update-banner");
-    var closeBtn = $("update-banner-close");
-    var howBtn = $("update-how");
+    var pillWrap = $("update-pill-wrap");
+    var pillBtn = $("update-pill");
+    var popover = $("update-popover");
     var updateNowBtn = $("update-now");
-    if (!banner) return;
-
-    // Build popover (manual update instructions)
-    var popover = document.createElement("div");
-    popover.id = "update-popover";
-    popover.innerHTML =
-      '<div class="popover-label">Run in your terminal:</div>' +
-      '<div class="popover-cmd">' +
-      '<code>npx clay-server@latest</code>' +
-      '<button class="popover-copy" title="Copy">' + iconHtml("copy") + '</button>' +
-      '</div>';
-    banner.appendChild(popover);
-    refreshIcons();
+    if (!pillWrap) return;
 
     var copyBtn = popover.querySelector(".popover-copy");
-    copyBtn.addEventListener("click", function () {
-      copyToClipboard("npx clay-server@latest").then(function () {
-        copyBtn.classList.add("copied");
-        copyBtn.innerHTML = iconHtml("check");
-        refreshIcons();
-        setTimeout(function () {
-          copyBtn.classList.remove("copied");
-          copyBtn.innerHTML = iconHtml("copy");
+    if (copyBtn) {
+      copyBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        copyToClipboard("npx clay-server@latest").then(function () {
+          copyBtn.classList.add("copied");
+          copyBtn.innerHTML = iconHtml("check");
           refreshIcons();
-        }, 1500);
+          setTimeout(function () {
+            copyBtn.classList.remove("copied");
+            copyBtn.innerHTML = iconHtml("copy");
+            refreshIcons();
+          }, 1500);
+        });
       });
-    });
+    }
 
     // "Update now" button — trigger server-side update + restart
     if (updateNowBtn) {
-      updateNowBtn.addEventListener("click", function () {
+      updateNowBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
         if (ctx.ws && ctx.connected) {
           ctx.ws.send(JSON.stringify({ type: "update_now" }));
-          updateNowBtn.textContent = "Updating...";
+          var textNode = updateNowBtn.lastChild;
+          if (textNode) textNode.textContent = " Updating...";
           updateNowBtn.disabled = true;
         }
       });
     }
 
-    // "?" button — toggle manual instructions popover
-    howBtn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      popover.classList.toggle("visible");
-    });
+    // Toggle popover on pill click
+    if (pillBtn) {
+      pillBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        popover.classList.toggle("visible");
+      });
+    }
 
     document.addEventListener("click", function (e) {
-      if (!popover.contains(e.target) && e.target !== howBtn) {
+      if (!popover.contains(e.target) && e.target !== pillBtn && !pillBtn.contains(e.target)) {
         popover.classList.remove("visible");
       }
     });
-
-    if (closeBtn) {
-      closeBtn.addEventListener("click", function () {
-        banner.classList.add("hidden");
-        popover.classList.remove("visible");
-      });
-    }
   })();
 
   // --- Settings: Check for updates ---
@@ -199,10 +187,10 @@ export function initNotifications(_ctx) {
     }
   })();
 
-  // --- Onboarding banner (HTTPS / Push) ---
-  onboardingBanner = $("onboarding-banner");
-  onboardingText = $("onboarding-banner-text");
-  onboardingClose = $("onboarding-banner-close");
+  // --- Onboarding pill badge (HTTPS / Push) ---
+  onboardingPill = $("onboarding-pill");
+  onboardingText = $("onboarding-pill-text");
+  onboardingClose = $("onboarding-pill-close");
   onboardingDismissed = localStorage.getItem("onboarding-dismissed");
 
   if (onboardingClose) {
@@ -218,7 +206,7 @@ export function initNotifications(_ctx) {
     if (!onboardingDismissed) {
       showOnboarding(
         iconHtml("bell-ring") +
-        ' Get alerts on your phone when Claude is done. <a href="/setup">Set up HTTPS</a>'
+        ' <a href="/setup">Set up HTTPS</a>'
       );
     }
   }
@@ -563,8 +551,7 @@ export function initNotifications(_ctx) {
             if (!onboardingDismissed) {
               showOnboarding(
                 iconHtml("bell-ring") +
-                ' Get notified when Claude responds. ' +
-                '<button class="onboarding-cta" id="onboarding-enable-push">Enable push notifications</button>'
+                ' <button class="onboarding-cta" id="onboarding-enable-push">Enable push</button>'
               );
               var enableBtn = $("onboarding-enable-push");
               if (enableBtn) {
@@ -596,13 +583,13 @@ export function initNotifications(_ctx) {
       var open = debugMenu.classList.toggle("hidden");
       debugBtn.classList.toggle("active", !open);
 
-      // Sync toggle states with current banner visibility
-      var updateBanner = $("update-banner");
-      if (debugToggleUpdate && updateBanner) {
-        debugToggleUpdate.checked = !updateBanner.classList.contains("hidden");
+      // Sync toggle states with current pill visibility
+      var updatePillWrap = $("update-pill-wrap");
+      if (debugToggleUpdate && updatePillWrap) {
+        debugToggleUpdate.checked = !updatePillWrap.classList.contains("hidden");
       }
-      if (debugToggleOnboarding && onboardingBanner) {
-        debugToggleOnboarding.checked = !onboardingBanner.classList.contains("hidden");
+      if (debugToggleOnboarding && onboardingPill) {
+        debugToggleOnboarding.checked = !onboardingPill.classList.contains("hidden");
       }
     });
 
@@ -615,15 +602,15 @@ export function initNotifications(_ctx) {
 
     if (debugToggleUpdate) {
       debugToggleUpdate.addEventListener("change", function () {
-        var banner = $("update-banner");
-        if (!banner) return;
+        var pillWrap = $("update-pill-wrap");
+        if (!pillWrap) return;
         if (debugToggleUpdate.checked) {
           // Trigger real update check from server (debug mode uses v0.0.9)
           if (ctx.ws && ctx.connected) {
             ctx.ws.send(JSON.stringify({ type: "check_update" }));
           }
         } else {
-          banner.classList.add("hidden");
+          pillWrap.classList.add("hidden");
         }
         refreshIcons();
       });
@@ -635,10 +622,10 @@ export function initNotifications(_ctx) {
           if (!onboardingText.innerHTML.trim()) {
             showOnboarding(
               iconHtml("bell-ring") +
-              ' Get alerts on your phone when Claude is done. <a href="/setup">Set up HTTPS</a>'
+              ' <a href="/setup">Set up HTTPS</a>'
             );
           } else {
-            onboardingBanner.classList.remove("hidden");
+            onboardingPill.classList.remove("hidden");
           }
         } else {
           hideOnboarding();