feat: migrate to @nuxt/ui-pro v3

app/_components/TeamsDropdown.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const teams = [{
+  label: 'Nuxt',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/23360933?s=200&v=4'
+  },
+  click: () => {
+    team.value = teams[0]
+  }
+}, {
+  label: 'NuxtLabs',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/62017400?s=200&v=4'
+  },
+  click: () => {
+    team.value = teams[1]
+  }
+}]
+
+const actions = [{
+  label: 'Create team',
+  icon: 'i-heroicons-plus-circle'
+}, {
+  label: 'Manage teams',
+  icon: 'i-heroicons-cog-8-tooth'
+}]
+
+const team = ref(teams[0])
+</script>
+
+<template>
+  <UDropdown
+    v-slot="{ open }"
+    mode="hover"
+    :items="[teams, actions]"
+    class="w-full"
+    :ui="{ width: 'w-full' }"
+    :popper="{ strategy: 'absolute' }"
+  >
+    <UButton
+      color="gray"
+      variant="ghost"
+      :class="[open && 'bg-gray-50 dark:bg-gray-800']"
+      class="w-full"
+    >
+      <UAvatar
+        :src="team.avatar.src"
+        size="2xs"
+      />
+
+      <span class="truncate text-gray-900 dark:text-white font-semibold">{{ team.label }}</span>
+    </UButton>
+  </UDropdown>
+</template>

app/_components/UserDropdown.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const { isHelpSlideoverOpen } = useDashboard()
+const { isDashboardSearchModalOpen } = useUIState()
+const { metaSymbol } = useShortcuts()
+
+const items = computed(() => [
+  [{
+    slot: 'account',
+    label: '',
+    disabled: true
+  }], [{
+    label: 'Settings',
+    icon: 'i-heroicons-cog-8-tooth',
+    to: '/settings'
+  }, {
+    label: 'Command menu',
+    icon: 'i-heroicons-command-line',
+    shortcuts: [metaSymbol.value, 'K'],
+    click: () => {
+      isDashboardSearchModalOpen.value = true
+    }
+  }, {
+    label: 'Help & Support',
+    icon: 'i-heroicons-question-mark-circle',
+    shortcuts: ['?'],
+    click: () => isHelpSlideoverOpen.value = true
+  }], [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: 'https://ui.nuxt.com/pro/getting-started',
+    target: '_blank'
+  }, {
+    label: 'GitHub repository',
+    icon: 'i-simple-icons-github',
+    to: 'https://github.com/nuxt-ui-pro/dashboard',
+    target: '_blank'
+  }, {
+    label: 'Buy Nuxt UI Pro',
+    icon: 'i-heroicons-credit-card',
+    to: 'https://ui.nuxt.com/pro/purchase',
+    target: '_blank'
+  }], [{
+    label: 'Sign out',
+    icon: 'i-heroicons-arrow-left-on-rectangle'
+  }]
+])
+</script>
+
+<template>
+  <UDropdown
+    mode="hover"
+    :items="items"
+    :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }"
+    :popper="{ strategy: 'absolute', placement: 'top' }"
+    class="w-full"
+  >
+    <template #default="{ open }">
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="w-full"
+        label="Benjamin"
+        :class="[open && 'bg-gray-50 dark:bg-gray-800']"
+      >
+        <template #leading>
+          <UAvatar
+            src="https://avatars.githubusercontent.com/u/739984?v=4"
+            size="2xs"
+          />
+        </template>
+
+        <template #trailing>
+          <UIcon
+            name="i-heroicons-ellipsis-vertical"
+            class="w-5 h-5 ml-auto"
+          />
+        </template>
+      </UButton>
+    </template>
+
+    <template #account>
+      <div class="text-left">
+        <p>
+          Signed in as
+        </p>
+        <p class="truncate font-medium text-gray-900 dark:text-white">
+          [email protected]
+        </p>
+      </div>
+    </template>
+  </UDropdown>
+</template>

app/_components/inbox/InboxList.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { format, isToday } from 'date-fns'
+import type { Mail } from '~/types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<Mail | null>,
+    default: null
+  },
+  mails: {
+    type: Array as PropType<Mail[]>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mailsRefs = ref<Element[]>([])
+
+const selectedMail = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: Mail | null) {
+    emit('update:modelValue', value)
+  }
+})
+
+watch(selectedMail, () => {
+  if (!selectedMail.value) {
+    return
+  }
+
+  const ref = mailsRefs.value[selectedMail.value.id]
+  if (ref) {
+    ref.scrollIntoView({ block: 'nearest' })
+  }
+})
+
+defineShortcuts({
+  arrowdown: () => {
+    const index = props.mails.findIndex(mail => mail.id === selectedMail.value?.id)
+
+    if (index === -1) {
+      selectedMail.value = props.mails[0]
+    } else if (index < props.mails.length - 1) {
+      selectedMail.value = props.mails[index + 1]
+    }
+  },
+  arrowup: () => {
+    const index = props.mails.findIndex(mail => mail.id === selectedMail.value?.id)
+
+    if (index === -1) {
+      selectedMail.value = props.mails[props.mails.length - 1]
+    } else if (index > 0) {
+      selectedMail.value = props.mails[index - 1]
+    }
+  }
+})
+</script>
+
+<template>
+  <UDashboardPanelContent class="p-0">
+    <div
+      v-for="(mail, index) in mails"
+      :key="index"
+      :ref="el => { mailsRefs[mail.id] = el as Element }"
+    >
+      <div
+        class="p-4 text-sm cursor-pointer border-l-2"
+        :class="[
+          mail.unread ? 'text-gray-900 dark:text-white' : 'text-gray-600 dark:text-gray-300',
+          selectedMail && selectedMail.id === mail.id ? 'border-primary-500 dark:border-primary-400 bg-primary-100 dark:bg-primary-900/25' : 'border-white dark:border-gray-900 hover:border-primary-500/25 dark:hover:border-primary-400/25 hover:bg-primary-100/50 dark:hover:bg-primary-900/10'
+        ]"
+        @click="selectedMail = mail"
+      >
+        <div
+          class="flex items-center justify-between"
+          :class="[mail.unread && 'font-semibold']"
+        >
+          <div class="flex items-center gap-3">
+            {{ mail.from.name }}
+
+            <UChip v-if="mail.unread" />
+          </div>
+
+          <span>{{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}</span>
+        </div>
+        <p :class="[mail.unread && 'font-semibold']">
+          {{ mail.subject }}
+        </p>
+        <p class="text-gray-400 dark:text-gray-500 line-clamp-1">
+          {{ mail.body }}
+        </p>
+      </div>
+
+      <UDivider />
+    </div>
+  </UDashboardPanelContent>
+</template>