From 8e7070cbafc70a2cbf8e9f443521c6023988cda9 Mon Sep 17 00:00:00 2001
From: platform-mcp <platform-mcp@service.local>
Date: Wed, 24 Jun 2026 02:39:37 +0530
Subject: [PATCH] feat(footer): make push notification button reflect
 subscription state

The WRNexus web-push button always showed "Enable notifications". It now
reads WRNexusPush.isSubscribed() on load and renders the correct state:
- hides entirely when SDK/browser push support is missing
- "Enable notifications" -> calls prompt() (user gesture)
- "Unsubscribe" when already subscribed -> calls unsubscribe()
- disabled "Notifications blocked" when permission is denied
- in-progress disabled state to prevent double-clicks; re-reads state after
  each action and re-renders the label

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/Footer.astro | 112 ++++++++++++++++++++++++++++++++++--
 1 file changed, 106 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index e578af1..c7cee88 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -167,16 +167,21 @@ const currentYear = new Date().getFullYear();
           <a href="/privacy" class="text-primary hover:underline">Privacy Policy</a>.
         </p>
 
-        <!-- Web push opt-in (WRNexus). User-gesture subscribe control. -->
+        <!-- Web push opt-in (WRNexus). User-gesture subscribe control.
+             Hidden by default; the client script below reveals it only when the
+             WRNexus SDK + browser push support are available, and sets the
+             correct label based on the visitor's current subscription state. -->
         <button
           id="wrnexus-subscribe"
           type="button"
-          class="mt-6 w-full px-4 py-3 bg-secondary-800 border border-secondary-700 text-white font-medium rounded-lg hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-secondary-900 transition-all duration-200 text-sm flex items-center justify-center gap-2"
+          hidden
+          aria-label="Enable notifications"
+          class="mt-6 w-full px-4 py-3 bg-secondary-800 border border-secondary-700 text-white font-medium rounded-lg hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-secondary-900 transition-all duration-200 text-sm flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
         >
-          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
           </svg>
-          <span>Enable notifications</span>
+          <span id="wrnexus-subscribe-label">Enable notifications</span>
         </button>
       </div>
     </div>
@@ -205,9 +210,104 @@ const currentYear = new Date().getFullYear();
   </div>
 </footer>
 
-<!-- WRNexus push subscribe: wired via addEventListener (Astro strips inline on* handlers). -->
+<!-- WRNexus push subscribe: state-aware control wired via addEventListener
+     (Astro strips inline on* handlers). The button reflects whether the
+     visitor is already subscribed and lets them toggle the subscription. -->
 <script is:inline>
-  document.getElementById('wrnexus-subscribe')?.addEventListener('click', () => window.WRNexusPush?.subscribe());
+  (function () {
+    function init() {
+      var btn = document.getElementById('wrnexus-subscribe');
+      var label = document.getElementById('wrnexus-subscribe-label');
+      if (!btn || !label) return;
+
+      var push = window.WRNexusPush;
+      var supported =
+        push &&
+        'Notification' in window &&
+        'serviceWorker' in navigator &&
+        'PushManager' in window;
+
+      // No SDK or no browser push support: keep the button hidden entirely.
+      if (!supported) {
+        btn.hidden = true;
+        return;
+      }
+
+      // Permission permanently blocked by the user: the SDK can't re-prompt,
+      // so surface a clear, non-actionable disabled state instead of a button
+      // that silently does nothing.
+      if (window.Notification && Notification.permission === 'denied') {
+        label.textContent = 'Notifications blocked';
+        btn.setAttribute('aria-label', 'Notifications are blocked in your browser settings');
+        btn.disabled = true;
+        btn.hidden = false;
+        return;
+      }
+
+      // Render the button for a given subscription state.
+      // Default UX: subscribed users get an actionable "Unsubscribe" toggle
+      // rather than a dead "Already subscribed" label.
+      // (Alternative: render a disabled "Already subscribed" indicator instead
+      //  of the Unsubscribe toggle if product prefers a non-actionable state.)
+      function render(subscribed) {
+        if (subscribed) {
+          label.textContent = 'Unsubscribe';
+          btn.setAttribute('aria-label', 'Unsubscribe from notifications');
+        } else {
+          label.textContent = 'Enable notifications';
+          btn.setAttribute('aria-label', 'Enable notifications');
+        }
+        btn.dataset.subscribed = subscribed ? 'true' : 'false';
+        btn.disabled = false;
+        btn.hidden = false;
+      }
+
+      async function refresh() {
+        try {
+          var subscribed = await push.isSubscribed();
+          render(!!subscribed);
+        } catch (err) {
+          // On error, fall back to the unsubscribed label so the control stays usable.
+          console.error('[wrnexus-push] isSubscribed() failed:', err);
+          render(false);
+        }
+      }
+
+      btn.addEventListener('click', async function () {
+        if (btn.disabled) return;
+
+        var wasSubscribed = btn.dataset.subscribed === 'true';
+        var busyLabel = wasSubscribed ? 'Unsubscribing…' : 'Enabling…';
+
+        // In-progress state to prevent double-clicks while the promise is pending.
+        btn.disabled = true;
+        label.textContent = busyLabel;
+
+        try {
+          if (wasSubscribed) {
+            await push.unsubscribe();
+          } else {
+            // prompt() must run from this real user gesture.
+            await push.prompt();
+          }
+        } catch (err) {
+          console.error('[wrnexus-push] toggle failed:', err);
+        } finally {
+          // Re-read the authoritative state and re-render the label.
+          await refresh();
+        }
+      });
+
+      // Determine and render the initial state.
+      refresh();
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
 </script>
 
 <script>