auth

src/components/NotificationsList.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { usePushNotifications } from '@/composables/usePushNotifications.ts'
+import NotificationsListElement from '@/components/NotificationsListElement.vue'
+
+const status = ref<NotificationPermission | 'unsupported'>(
+  'Notification' in window ? Notification.permission : 'unsupported',
+)
+const loading = ref(false)
+const push = usePushNotifications()
+
+async function onClick() {
+  loading.value = true
+  try {
+    status.value = await push.enable()
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!navigator.permissions) return
+  const perm = await navigator.permissions.query({ name: 'notifications' })
+  perm.onchange = () => {
+    status.value = Notification.permission
+  }
+})
+</script>
+
+<template>
+  <div class="d-flex">
+    <v-menu>
+      <template v-slot:activator="{ props }">
+        <v-btn rounded="0" icon v-bind="props" class="">
+          <v-badge bordered location="top right" color="error" content="9+" :offset-x="1" :offset-y="-3">
+            <v-icon icon="mdi-bell" />
+          </v-badge>
+        </v-btn>
+      </template>
+      <v-list width="15rem" border nav density="compact" class="pa-1">
+        <v-list-item>
+          <v-sheet class="d-flex align-center ga-2">
+            <span v-if="status === 'granted' && push.installationId.value"> Уведомления включены </span>
+            <span v-else-if="status === 'default' || status === 'granted'" class="d-flex flex-column align-center ga-1">
+              <v-btn
+                color="primary"
+                variant="flat"
+                density="compact"
+                :disabled="loading"
+                @click="onClick"
+                text="Enable notifications"
+              />
+              <span>And choose 'Allow'</span>
+            </span>
+            <span v-else-if="status === 'denied'">Notifications blocked</span>
+            <span v-else>Браузер не поддерживает уведомления</span>
+          </v-sheet>
+        </v-list-item>
+        <v-divider />
+        <notifications-list-element v-for="(el, idx) in [1, 2, 3, 4, 5]" :key="idx" />
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/components/NotificationsListElement.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+  <v-list-item>
+    <v-sheet class="d-flex flex-column">
+      <div>Title</div>
+      <div>Subtitle</div>
+    </v-sheet>
+  </v-list-item>
+</template>
+
+<style scoped lang="scss"></style>

src/components/PushEnable.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { usePushNotifications } from '@/composables/usePushNotifications.ts'
-
-const status = ref<NotificationPermission | 'unsupported'>(
-  'Notification' in window ? Notification.permission : 'unsupported',
-)
-const loading = ref(false)
-const push = usePushNotifications()
-
-async function onClick() {
-  loading.value = true
-  try {
-    status.value = await push.enable()
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(async () => {
-  if (!navigator.permissions) return
-  const perm = await navigator.permissions.query({ name: 'notifications' })
-  perm.onchange = () => {
-    status.value = Notification.permission
-  }
-})
-</script>
-
-<template>
-  <div class="mr-2">
-    <span v-if="status === 'granted' && push.installationId.value">Уведомления включены</span>
-    <button v-else-if="status === 'default' || status === 'granted'" :disabled="loading" @click="onClick">
-      Включить уведомления
-    </button>
-    <span v-else-if="status === 'denied'">Уведомления заблокированы.</span>
-    <span v-else>Браузер не поддерживает уведомления</span>
-  </div>
-</template>
-
-<style scoped lang="scss"></style>