feat: pwa with push notifications (#337)

pages/notifications.vue

@@ -4,6 +4,8 @@ definePageMeta({
 })
 
 const { t } = useI18n()
+const showSettings = ref(false)
+const pwaEnabled = useRuntimeConfig().public.pwaEnabled
 
 const tabs = $computed(() => [
   {
@@ -17,6 +19,10 @@ const tabs = $computed(() => [
     display: t('tab.notifications_mention'),
   },
 ] as const)
+
+onActivated(() => {
+  showSettings.value = false
+})
 </script>
 
 <template>
@@ -28,9 +34,26 @@ const tabs = $computed(() => [
       </NuxtLink>
     </template>
 
+    <template v-if="pwaEnabled" #actions>
+      <button
+        flex rounded-4 p1
+        hover:bg-active cursor-pointer transition-100
+        :title="$t(showSettings ? 'notification.settings.close_btn' : 'notification.settings.show_btn')"
+        @click="showSettings = !showSettings"
+      >
+        <span aria-hidden="true" w-1.75em h-1.75em :class="showSettings ? 'i-ri:close-circle-line' : 'i-ri:settings-3-fill'" />
+      </button>
+    </template>
+
     <template #header>
       <CommonRouteTabs replace :options="tabs" />
     </template>
-    <NuxtPage />
+
+    <slot>
+      <template v-if="pwaEnabled">
+        <NotificationPreferences :show="showSettings" />
+      </template>
+      <NuxtPage />
+    </slot>
   </MainContent>
 </template>