debugging

frontend/vue-app/src/components/notification/PushOptIn.vue

@@ -1,6 +1,13 @@
 <template>
   <div v-if="showBanner" class="push-opt-in-banner" role="status" aria-live="polite">
-    <template v-if="permissionState === 'default'">
+    <template v-if="errorDetail">
+      <span class="push-opt-in-text push-opt-in-error">
+        Notification setup failed: {{ errorDetail }}
+      </span>
+      <button class="btn btn-primary push-opt-in-btn" @click="onEnable">Retry</button>
+      <button class="push-opt-in-dismiss" @click="dismiss" aria-label="Dismiss">✕</button>
+    </template>
+    <template v-else-if="permissionState === 'default'">
       <span class="push-opt-in-text"
         >Enable notifications to stay updated on chores and rewards.</span
       >
@@ -18,39 +25,49 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { subscribeToPush, getPushPermissionState } from '@/services/pushSubscription'
+import { subscribeToPushWithResult, getPushPermissionState } from '@/services/pushSubscription'
 
 const permissionState = ref<NotificationPermission | 'unsupported'>('default')
 const dismissed = ref(false)
+const errorDetail = ref<string | null>(null)
 
 const showBanner = ref(false)
 
-onMounted(() => {
+onMounted(async () => {
   if (!('Notification' in window)) {
     return
   }
   permissionState.value = Notification.permission
   if (permissionState.value === 'granted') {
     // Already granted — ensure subscription is registered silently
-    subscribeToPush()
+    const result = await subscribeToPushWithResult()
+    if (!result.ok) {
+      errorDetail.value = result.detail ?? result.reason
+      showBanner.value = true
+    }
     return
   }
   showBanner.value = true
 })
 
 async function onEnable() {
-  const success = await subscribeToPush()
-  if (success) {
+  errorDetail.value = null
+  const result = await subscribeToPushWithResult()
+  if (result.ok) {
     permissionState.value = 'granted'
     showBanner.value = false
   } else {
     permissionState.value = Notification.permission as NotificationPermission
+    if (result.reason !== 'permission_denied') {
+      errorDetail.value = result.detail ?? result.reason
+    }
   }
 }
 
 function dismiss() {
   dismissed.value = true
   showBanner.value = false
+  errorDetail.value = null
 }
 </script>
 
@@ -88,4 +105,10 @@ function dismiss() {
   padding: 0 0.25rem;
   line-height: 1;
 }
+
+.push-opt-in-error {
+  color: var(--danger, #c0392b);
+  font-size: 0.82rem;
+  word-break: break-all;
+}
 </style>