feat(notifications): added notification system w/ interwoven refactoring

components/UserHeader/NotificationWidgetPanel.vue

@@ -0,0 +1,43 @@
+<template>
+  <PanelWidget class="flex-col gap-y-2">
+    <div class="border-b border-zinc-700 pb-3 p-2">
+      <div
+        class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap"
+      >
+        <div class="ml-4 mt-2">
+          <h3 class="text-base font-semibold text-zinc-100 text-sm">
+            Unread notifications
+          </h3>
+        </div>
+        <div class="ml-4 mt-2 shrink-0">
+          <NuxtLink
+            to="/account/notifications"
+            type="button"
+            class="text-sm text-zinc-500"
+          >
+            View all &rarr;
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-y-2 max-h-[300px] overflow-y-scroll">
+      <Notification
+        v-for="notification in props.notifications"
+        :notification="notification"
+      />
+    </div>
+    <div
+      v-if="props.notifications.length == 0"
+      class="text-sm text-zinc-600 p-3 text-center w-full"
+    >
+      No notifications
+    </div>
+  </PanelWidget>
+</template>
+
+<script setup lang="ts">
+import type { Notification } from "@prisma/client";
+
+const props = defineProps<{ notifications: Array<Notification> }>();
+</script>

components/UserHeader/UserWidget.vue

@@ -0,0 +1,87 @@
+<template>
+  <Menu v-if="user" as="div" class="relative inline-block">
+    <MenuButton>
+      <UserHeaderWidget>
+        <div class="inline-flex items-center text-zinc-300 hover:text-white">
+          <img
+            :src="useObject(user.profilePicture)"
+            class="w-5 h-5 rounded-sm"
+          />
+          <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
+          <ChevronDownIcon class="ml-3 h-4" />
+        </div>
+      </UserHeaderWidget>
+    </MenuButton>
+
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <MenuItems
+        class="absolute right-0 top-10 z-50 w-56 origin-top-right focus:outline-none shadow-md"
+      >
+        <PanelWidget class="flex-col gap-y-2">
+          <NuxtLink
+            :to="`/user/${user.id}`"
+            class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
+          >
+            <div class="inline-flex items-center text-zinc-300">
+              <img
+                :src="useObject(user.profilePicture)"
+                class="w-5 h-5 rounded-sm"
+              />
+              <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
+            </div>
+          </NuxtLink>
+          <div class="h-0.5 rounded-full w-full bg-zinc-800" />
+          <div class="flex flex-col">
+            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active }">
+              <NuxtLink
+                :href="nav.route"
+                :class="[
+                  active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
+                  'transition block px-4 py-2 text-sm',
+                ]"
+              >
+                {{ nav.label }}</NuxtLink
+              >
+            </MenuItem>
+          </div>
+        </PanelWidget>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { ChevronDownIcon } from "@heroicons/vue/16/solid";
+import { useObject } from "~/composables/objects";
+import type { NavigationItem } from "~/composables/types";
+
+const user = useUser();
+
+const navigation: NavigationItem[] = [
+  user.value?.admin
+    ? {
+        label: "Admin Dashboard",
+        route: "/admin",
+        prefix: "",
+      }
+    : undefined,
+  {
+    label: "Account settings",
+    route: "/account",
+    prefix: "",
+  },
+  {
+    label: "Sign out",
+    route: "/signout",
+    prefix: "",
+  },
+].filter((e) => e !== undefined);
+</script>

components/UserHeader/Widget.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    :class="[
+      'transition inline-flex items-center justify-center cursor-pointer rounded-sm px-4 py-2 relative',
+      showNotifications
+        ? 'bg-blue-300 text-zinc-900 hover:bg-blue-200 hover:text-zinc-950'
+        : 'bg-zinc-900 text-zinc-600 hover:bg-zinc-800 hover:text-zinc-300',
+    ]"
+  >
+    <slot />
+    <TransitionRoot
+      :show="showNotifications"
+      enter="ease-out duration-150"
+      enter-from="opacity-0"
+      enter-to="opacity-100"
+      leave="ease-in duration-150"
+      leave-from="opacity-100"
+      leave-to="opacity-0"
+    >
+      <div
+        class="w-4 h-4 absolute top-0 right-0 translate-x-[30%] translate-y-[-30%] rounded-full bg-blue-300 inline-flex items-center justify-center text-xs text-zinc-900 font-bold"
+      >
+        {{ props.notifications }}
+      </div>
+    </TransitionRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TransitionRoot } from "@headlessui/vue";
+
+const props = defineProps<{
+  notifications?: number;
+}>();
+
+const showNotifications = computed(() => !!props.notifications);
+</script>