Initial commit

app/components/App/Header.vue

@@ -0,0 +1,51 @@
+<template>
+  <UHeader :toggle="false">
+    <template #left>
+      <ULink to="/">
+        <NuxtImg
+          src="logo.png"
+          alt="Logo"
+          class="size-12"
+        />
+      </ULink>
+
+      <ProfileLangSelect />
+    </template>
+
+    <template #right>
+      <UColorModeButton />
+      <AppNotifications v-if="isAuthenticated" />
+      <UDropdownMenu :items="items">
+        <ProfileAvatar
+          size="xl"
+        />
+      </UDropdownMenu>
+    </template>
+  </UHeader>
+</template>
+
+<script setup lang="ts">
+const { isAuthenticated } = storeToRefs(useUser())
+const { signOut } = useUser()
+
+const items = computed(() => {
+  if (isAuthenticated.value) {
+    return [[{
+      label: 'Logout',
+      icon: 'i-lucide-log-out',
+      onSelect: () => {
+        signOut()
+        navigateTo('/')
+      } }]
+    ]
+  } else {
+    return [[{
+      label: 'Sign In',
+      icon: 'i-lucide-log-in',
+      onSelect: () => {
+        navigateTo('/login')
+      } }]
+    ]
+  }
+})
+</script>

app/components/App/Notifications.vue

@@ -0,0 +1,85 @@
+<template>
+  <UTooltip
+    :text="$t('notifications')"
+    :shortcuts="['N']"
+  >
+    <UButton
+      color="neutral"
+      variant="ghost"
+      square
+      @click="drawerOpen = true"
+    >
+      <UChip
+        color="error"
+        :show="hasUnreadNotifications"
+        inset
+      >
+        <UIcon
+          name="i-lucide-bell"
+          class="size-5 shrink-0"
+        />
+      </UChip>
+    </UButton>
+  </UTooltip>
+  <USlideover
+    v-model:open="drawerOpen"
+    :title="$t('notifications')"
+  >
+    <template #body>
+      <div
+        v-for="notification in notifications"
+        :key="notification.id"
+        v-on-visible="() => markAsRead(notification.id)"
+        class="px-3 py-2.5 rounded-md hover:bg-elevated/50 flex items-center gap-3 relative -mx-3 first:-mt-3 last:-mb-3"
+      >
+        <UChip
+          color="error"
+          :show="!notification.isRead"
+          inset
+        >
+          <UAvatar
+            alt="Nuxt"
+            size="md"
+          />
+        </UChip>
+
+        <div class="text-sm flex-1">
+          <p class="flex items-center justify-between">
+            <span class="text-highlighted font-medium">{{ notification.title }}</span>
+
+            <time
+              :datetime="notification.created"
+              class="text-muted text-xs"
+              v-text="$d(new Date(notification.created), { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })"
+            />
+          </p>
+
+          <p class="text-dimmed">
+            {{ notification.body }}
+          </p>
+        </div>
+      </div>
+    </template>
+  </USlideover>
+</template>
+
+<script setup lang="ts">
+const { fetchNotifications, subscribeToChanges, unsubscribe, markAsRead } = useNotifications()
+const { notifications } = storeToRefs(useNotifications())
+
+const drawerOpen = ref(false)
+const hasUnreadNotifications = computed(() => notifications.value.some(n => !n.isRead))
+
+// Fetch the notifications once on page load
+fetchNotifications()
+
+onMounted(() => {
+  // Subscribe to realtime changes of notifications
+  subscribeToChanges()
+})
+
+// Unsubscribe for cleanup
+onUnmounted(() => {
+  unsubscribe()
+})
+</script>