feat: add Daily Digest and Push Notifications toggles to User Profile with corresponding functionality

frontend/vue-app/src/components/profile/UserProfile.vue

@@ -15,6 +15,22 @@
       <template #custom-field-email="{ modelValue }">
         <div class="email-actions">
           <input id="email" type="email" :value="modelValue" disabled class="readonly-input" />
+          <ToggleField
+            label="Daily Digest"
+            :modelValue="emailDigestEnabled"
+            :disabled="savingDigest"
+            description="Receive a 9pm summary of pending chore and reward requests with one-click approve/deny links."
+            :error="digestError"
+            @update:modelValue="toggleDigest"
+          />
+          <ToggleField
+            label="Push Notifications"
+            :modelValue="pushEnabled"
+            :disabled="savingPush || getPushPermissionState() === 'denied'"
+            description="Receive instant push notifications when a chore or reward needs your approval."
+            :error="pushError"
+            @update:modelValue="togglePush"
+          />
           <button type="button" class="btn-link btn-link-space" @click="goToChangeParentPin">
             Change Parent PIN
           </button>
@@ -33,28 +49,6 @@
       </template>
     </EntityEditForm>
 
-    <div class="digest-section">
-      <div class="digest-row">
-        <div class="digest-label">
-          <span class="digest-title">Daily Email Digest</span>
-          <span class="digest-desc"
-            >Receive a 9pm summary of pending chore and reward requests with one-click approve/deny
-            links.</span
-          >
-        </div>
-        <button
-          type="button"
-          :class="['toggle-btn', { active: emailDigestEnabled }]"
-          :aria-pressed="emailDigestEnabled"
-          :disabled="savingDigest"
-          @click="toggleDigest"
-        >
-          <span class="toggle-knob" />
-        </button>
-      </div>
-      <div v-if="digestError" class="error-message digest-error">{{ digestError }}</div>
-    </div>
-
     <div v-if="errorMsg" class="error-message" aria-live="polite">{{ errorMsg }}</div>
     <ModalDialog
       v-if="showModal"
@@ -124,6 +118,13 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
 import ModalDialog from '../shared/ModalDialog.vue'
+import ToggleField from '../shared/ToggleField.vue'
+import {
+  isSubscribedToPush,
+  subscribeToPushWithResult,
+  unsubscribeFromPush,
+  getPushPermissionState,
+} from '@/services/pushSubscription'
 import { parseErrorResponse, isEmailValid } from '@/common/api'
 import { ALREADY_MARKED } from '@/common/errorCodes'
 import { logoutUser, suppressForceLogout } from '@/stores/auth'
@@ -151,6 +152,10 @@ const emailDigestEnabled = ref(true)
 const savingDigest = ref(false)
 const digestError = ref('')
 
+const pushEnabled = ref(false)
+const savingPush = ref(false)
+const pushError = ref('')
+
 const initialData = ref<{
   image_id: string | null
   first_name: string
@@ -190,6 +195,7 @@ onMounted(async () => {
       email: data.email || '',
     }
     emailDigestEnabled.value = data.email_digest_enabled !== false
+    pushEnabled.value = await isSubscribedToPush()
   } catch {
     errorMsg.value = 'Could not load user profile.'
   } finally {
@@ -311,9 +317,8 @@ async function resetPassword() {
   }
 }
 
-async function toggleDigest() {
+async function toggleDigest(newValue: boolean) {
   digestError.value = ''
-  const newValue = !emailDigestEnabled.value
   savingDigest.value = true
   try {
     const res = await fetch('/api/user/profile', {
@@ -330,6 +335,28 @@ async function toggleDigest() {
   }
 }
 
+async function togglePush(newValue: boolean) {
+  pushError.value = ''
+  savingPush.value = true
+  try {
+    if (newValue) {
+      const result = await subscribeToPushWithResult()
+      if (result.ok) {
+        pushEnabled.value = true
+      } else if (result.reason === 'permission_denied') {
+        pushError.value = 'Notifications are blocked. Enable them in your browser settings.'
+      } else {
+        pushError.value = 'Failed to enable push notifications.'
+      }
+    } else {
+      await unsubscribeFromPush()
+      pushEnabled.value = false
+    }
+  } finally {
+    savingPush.value = false
+  }
+}
+
 function goToChangeParentPin() {
   router.push({ name: 'ParentPinSetup' })
 }
@@ -476,80 +503,4 @@ function closeDeleteError() {
   outline: none;
   border-color: var(--btn-primary, #4a90e2);
 }
-
-.digest-section {
-  margin-top: 1.5rem;
-  padding: 1rem 1.2rem;
-  border-radius: 10px;
-  background: var(--list-item-bg, #f9f9f9);
-  border: 1px solid var(--form-input-border, #e6e6e6);
-}
-
-.digest-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.digest-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-
-.digest-title {
-  font-weight: 600;
-  font-size: 0.97rem;
-  color: var(--text, #1a1a1a);
-}
-
-.digest-desc {
-  font-size: 0.83rem;
-  color: var(--text-muted, #666);
-  line-height: 1.4;
-}
-
-.digest-error {
-  margin-top: 0.5rem;
-}
-
-.toggle-btn {
-  flex-shrink: 0;
-  width: 44px;
-  height: 24px;
-  border-radius: 12px;
-  border: none;
-  background: var(--form-input-border, #ccc);
-  cursor: pointer;
-  position: relative;
-  transition: background 0.2s;
-  padding: 0;
-}
-
-.toggle-btn.active {
-  background: var(--btn-primary, #4a90e2);
-}
-
-.toggle-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.toggle-knob {
-  display: block;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: white;
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  transition: left 0.2s;
-  pointer-events: none;
-}
-
-.toggle-btn.active .toggle-knob {
-  left: 23px;
-}
 </style>

frontend/vue-app/src/components/shared/ToggleField.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="toggle-field-row">
+    <span class="toggle-field-label">{{ label }}</span>
+    <button
+      type="button"
+      :class="['toggle-btn', { active: modelValue }]"
+      :aria-pressed="modelValue"
+      :disabled="disabled"
+      @click="$emit('update:modelValue', !modelValue)"
+    >
+      <span class="toggle-knob" />
+    </button>
+    <button
+      v-if="description"
+      type="button"
+      class="toggle-expand-btn"
+      :aria-expanded="expanded"
+      @click.stop="expanded = !expanded"
+      :aria-label="expanded ? 'Collapse info' : 'Show info'"
+    >
+      <span class="toggle-chevron" :class="{ open: expanded }">›</span>
+    </button>
+  </div>
+  <p v-if="description && expanded" class="toggle-desc-text">{{ description }}</p>
+  <p v-if="error" class="toggle-error">{{ error }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  label: string
+  modelValue: boolean
+  disabled?: boolean
+  description?: string
+  error?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const expanded = ref(false)
+</script>
+
+<style scoped>
+.toggle-field-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.toggle-field-label {
+  flex: 1;
+  font-size: 0.95rem;
+  color: var(--form-label, #444);
+}
+
+.toggle-expand-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted, #888);
+  padding: 0 0.15rem;
+  font-size: 1.2rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+}
+
+.toggle-chevron {
+  display: inline-block;
+  transition: transform 0.2s;
+}
+
+.toggle-chevron.open {
+  transform: rotate(90deg);
+}
+
+.toggle-desc-text {
+  font-size: 0.83rem;
+  color: var(--text-muted, #666);
+  margin: 0.3rem 0 0;
+  line-height: 1.4;
+}
+
+.toggle-error {
+  font-size: 0.9rem;
+  color: var(--error, #e53e3e);
+  margin: 0.2rem 0 0;
+}
+
+.toggle-btn {
+  flex-shrink: 0;
+  width: 44px;
+  height: 24px;
+  border-radius: 12px;
+  border: none;
+  background: var(--form-input-border, #ccc);
+  cursor: pointer;
+  position: relative;
+  transition: background 0.2s;
+  padding: 0;
+}
+
+.toggle-btn.active {
+  background: var(--btn-primary, #4a90e2);
+}
+
+.toggle-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.toggle-knob {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: white;
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  transition: left 0.2s;
+  pointer-events: none;
+}
+
+.toggle-btn.active .toggle-knob {
+  left: 23px;
+}
+</style>

frontend/vue-app/src/services/pushSubscription.ts

@@ -172,3 +172,17 @@ export function getPushPermissionState(): NotificationPermission | 'unsupported'
   if (!('Notification' in window)) return 'unsupported'
   return Notification.permission
 }
+
+/**
+ * Returns true if the browser currently has an active push subscription.
+ */
+export async function isSubscribedToPush(): Promise<boolean> {
+  if (!('serviceWorker' in navigator) || !('PushManager' in window)) return false
+  try {
+    const registration = await navigator.serviceWorker.ready
+    const subscription = await registration.pushManager.getSubscription()
+    return subscription !== null
+  } catch {
+    return false
+  }
+}