Add push notification functionality with tests and digest scheduler

- Implemented push subscription API with tests for subscribing and unsubscribing users.
- Created web push notification tests triggered by child actions.
- Added digest scheduler to send email digests to users at 9 PM local time.
- Developed utility functions for creating and validating digest action tokens.
- Integrated web push sender to handle sending notifications to users.
- Added service worker for handling push notifications in the frontend.
- Created a push opt-in component for user notification preferences.
- Implemented tests for the push opt-in component to ensure correct behavior.
- Updated frontend services to manage push subscriptions and permissions.

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

@@ -32,6 +32,29 @@
         </div>
       </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 +147,10 @@ const showDeleteSuccess = ref(false)
 const showDeleteError = ref(false)
 const deleteErrorMessage = ref('')
 
+const emailDigestEnabled = ref(true)
+const savingDigest = ref(false)
+const digestError = ref('')
+
 const initialData = ref<{
   image_id: string | null
   first_name: string
@@ -162,6 +189,7 @@ onMounted(async () => {
       last_name: data.last_name || '',
       email: data.email || '',
     }
+    emailDigestEnabled.value = data.email_digest_enabled !== false
   } catch {
     errorMsg.value = 'Could not load user profile.'
   } finally {
@@ -283,6 +311,25 @@ async function resetPassword() {
   }
 }
 
+async function toggleDigest() {
+  digestError.value = ''
+  const newValue = !emailDigestEnabled.value
+  savingDigest.value = true
+  try {
+    const res = await fetch('/api/user/profile', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email_digest_enabled: newValue }),
+    })
+    if (!res.ok) throw new Error('Failed to update preference')
+    emailDigestEnabled.value = newValue
+  } catch {
+    digestError.value = 'Failed to save notification preference.'
+  } finally {
+    savingDigest.value = false
+  }
+}
+
 function goToChangeParentPin() {
   router.push({ name: 'ParentPinSetup' })
 }
@@ -429,4 +476,80 @@ 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>