Initial commit

app/app.vue

@@ -0,0 +1,150 @@
+<template>
+  <UApp
+    :locale="locales[locale]"
+  >
+    <div class="inside-safe-area">
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+import * as locales from '@nuxt/ui/locale'
+import type { URLOpenListenerEvent } from '@capacitor/app'
+import { Capacitor } from '@capacitor/core'
+import { App } from '@capacitor/app'
+import type {
+  Token,
+  ActionPerformed,
+  PushNotificationSchema } from '@capacitor/push-notifications'
+import {
+  PushNotifications
+} from '@capacitor/push-notifications'
+import type { UsersLanguageOptions } from './types/pocketbase.types'
+
+const { locale, t, setLocale } = useI18n()
+
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang,
+    dir
+  }
+})
+
+const title = t('hero.title')
+const description = t('hero.description')
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description
+})
+
+const { isAuthenticated } = storeToRefs(useUser())
+const { addFcmToken } = useNotifications()
+const toast = useToast()
+
+const registerPushNotifications = async () => {
+  if (Capacitor.isNativePlatform() && isAuthenticated.value) {
+  // Request permission to use push notifications
+  // iOS will prompt user and return if they granted permission or not
+  // Android will just grant without prompting
+    PushNotifications.requestPermissions().then((result) => {
+      if (result.receive === 'granted') {
+      // Register with Apple / Google to receive push via APNS/FCM
+        PushNotifications.register()
+      } else {
+      // Show some error
+      }
+    })
+
+    // On success, we should be able to receive notifications
+    PushNotifications.addListener('registration',
+      (token: Token) => {
+      // Add the FCM token for the current user
+        addFcmToken(token.value)
+      }
+    )
+
+    // Some issue with our setup and push will not work
+    PushNotifications.addListener('registrationError',
+      (error) => {
+        console.warn('Error on push notification registration:', JSON.stringify(error))
+      }
+    )
+
+    // Show the notification payload as toast message if the app is open on our device
+    PushNotifications.addListener('pushNotificationReceived',
+      (notification: PushNotificationSchema) => {
+        toast.add({
+          title: notification.title,
+          description: notification.subtitle ?? notification.body,
+          color: 'primary'
+        })
+      }
+    )
+
+    // Method called when tapping on a notification
+    PushNotifications.addListener('pushNotificationActionPerformed',
+      (notification: ActionPerformed) => {
+        console.log('Push action performed:', JSON.stringify(notification))
+      }
+    )
+  }
+}
+
+// handle locale based on user prefs
+const { updateUser, user } = useUser()
+watch(isAuthenticated, async () => {
+  if (isAuthenticated.value) {
+    // Fetch the user profile after successful sign-in
+    const prefLanguage = user?.language
+    if (prefLanguage) {
+      // Set the locale based on the user's profile locale
+      setLocale(prefLanguage)
+    } else {
+      // If the locale was not yet saved to the profile, update it
+      updateUser({ language: locale.value as UsersLanguageOptions })
+    }
+
+    // Register push notifications after successful sign-in
+    registerPushNotifications()
+  }
+}, { immediate: true })
+
+// Activate Capacitor features if we are on native platform (Android/iOS)
+if (Capacitor.isNativePlatform()) {
+  const router = useRouter()
+  // Register and handle deep links
+  App.addListener('appUrlOpen', function (event: URLOpenListenerEvent) {
+    const slug = event.url.split('.app').pop()
+    if (slug) {
+      router.push({
+        path: slug
+      })
+    }
+  })
+}
+</script>
+
+<style>
+/* Safe area insets needed for mobile app to avoid notches and safe areas */
+.inside-safe-area {
+  margin-top: env(safe-area-inset-top, unset);
+  padding-right: env(safe-area-inset-right, unset);
+  padding-bottom: env(safe-area-inset-bottom, unset);
+  padding-left: env(safe-area-inset-left, unset);
+}
+</style>