feat: update docker-compose for backend data volume and enhance ParentLayout with push subscription handling

docker-compose.test.yml

@@ -19,7 +19,8 @@ services:
       - SEED_PIN=${SEED_PIN}
       - SEED_FIRST_NAME=${SEED_FIRST_NAME}
       - SEED_LAST_NAME=${SEED_LAST_NAME}
-    # Add volumes, networks, etc., as needed
+    volumes:
+      - chores-test-app-backend-data:/app/data
 
   chores-test-app-frontend: # Test frontend service name
     image: git.ryankegel.com:3000/kegel/chores/frontend:next # Use latest next tag

frontend/vue-app/src/layout/ParentLayout.vue

@@ -3,6 +3,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import LoginButton from '../components/shared/LoginButton.vue'
 import PushOptIn from '../components/notification/PushOptIn.vue'
+import { subscribeToPush } from '@/services/pushSubscription'
 import { eventBus } from '@/common/eventBus'
 import type {
   Event,
@@ -68,10 +69,18 @@ function handleChoreConfirmationBadge(event: Event) {
 
 // Version fetching
 const appVersion = ref('')
+
+function onVisibilityChange() {
+  if (document.visibilityState === 'visible') {
+    subscribeToPush()
+  }
+}
+
 onMounted(async () => {
   await fetchNotificationCount()
   eventBus.on('child_reward_request', handleRewardRequestBadge)
   eventBus.on('child_chore_confirmation', handleChoreConfirmationBadge)
+  document.addEventListener('visibilitychange', onVisibilityChange)
 
   try {
     const resp = await fetch('/api/version')
@@ -87,6 +96,7 @@ onMounted(async () => {
 onUnmounted(() => {
   eventBus.off('child_reward_request', handleRewardRequestBadge)
   eventBus.off('child_chore_confirmation', handleChoreConfirmationBadge)
+  document.removeEventListener('visibilitychange', onVisibilityChange)
 })
 </script>