update to nuxt 4

app/components/UserHeader/NotificationWidgetPanel.vue

@@ -0,0 +1,52 @@
+<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">
+            {{ $t("account.notifications.unread") }}
+          </h3>
+        </div>
+        <div class="ml-4 mt-2 shrink-0">
+          <NuxtLink
+            to="/account/notifications"
+            type="button"
+            class="text-sm text-zinc-400"
+          >
+            <i18n-t
+              keypath="account.notifications.all"
+              tag="span"
+              scope="global"
+            >
+              <template #arrow>
+                <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+              </template>
+            </i18n-t>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-y-2 max-h-[300px] overflow-y-scroll">
+      <NotificationItem
+        v-for="notification in props.notifications"
+        :key="notification.id"
+        :notification="notification"
+      />
+    </div>
+    <div
+      v-if="props.notifications.length == 0"
+      class="text-sm text-zinc-400 p-3 text-center w-full"
+    >
+      {{ $t("account.notifications.none") }}
+    </div>
+  </PanelWidget>
+</template>
+
+<script setup lang="ts">
+import type { NotificationModel } from "~~/prisma/client/models";
+
+const props = defineProps<{ notifications: Array<NotificationModel> }>();
+</script>

app/components/UserHeader/UserWidget.vue

@@ -0,0 +1,108 @@
+<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.profilePictureObjectId)"
+            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.profilePictureObjectId)"
+                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"
+              :key="navIdx"
+              v-slot="{ active, close }"
+              hydrate-on-visible
+              as="div"
+            >
+              <NuxtLink
+                :to="nav.route"
+                :class="[
+                  active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
+                  'w-full text-left transition block px-4 py-2 text-sm',
+                ]"
+                @click="close"
+              >
+                {{ nav.label }}
+              </NuxtLink>
+            </MenuItem>
+            <MenuItem v-slot="{ active, close }" hydrate-on-visible as="div">
+              <NuxtLink
+                to="/auth/signout"
+                :class="[
+                  active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
+                  'w-full text-left transition block px-4 py-2 text-sm',
+                ]"
+                :data-comment="'external=true is required because we implemented the signout as a route on the server for performance'"
+                :external="true"
+                @click="close"
+              >
+                {{ $t("auth.signout") }}
+              </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";
+
+const user = useUser();
+
+const navigation = computed<NavigationItem[]>(() =>
+  [
+    user.value?.admin
+      ? {
+          label: $t("userHeader.profile.admin"),
+          route: "/admin",
+          prefix: "",
+        }
+      : undefined,
+    {
+      label: $t("userHeader.profile.settings"),
+      route: "/account",
+      prefix: "",
+    },
+    {
+      label: "Authorize client",
+      route: "/client/code",
+      prefix: "",
+    },
+  ].filter((e) => e !== undefined),
+);
+</script>

app/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>