feat: start migration

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/_pages/inbox.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { Mail } from '~/types'
+
+const tabItems = [{
+  label: 'All'
+}, {
+  label: 'Unread'
+}]
+const selectedTab = ref(0)
+
+const dropdownItems = [[{
+  label: 'Mark as unread',
+  icon: 'i-heroicons-check-circle'
+}, {
+  label: 'Mark as important',
+  icon: 'i-heroicons-exclamation-circle'
+}], [{
+  label: 'Star thread',
+  icon: 'i-heroicons-star'
+}, {
+  label: 'Mute thread',
+  icon: 'i-heroicons-pause-circle'
+}]]
+
+const { data: mails } = await useFetch<Mail[]>('/api/mails', { default: () => [] })
+
+// Filter mails based on the selected tab
+const filteredMails = computed(() => {
+  if (selectedTab.value === 1) {
+    return mails.value.filter(mail => !!mail.unread)
+  }
+
+  return mails.value
+})
+
+const selectedMail = ref<Mail | null>()
+
+const isMailPanelOpen = computed({
+  get() {
+    return !!selectedMail.value
+  },
+  set(value: boolean) {
+    if (!value) {
+      selectedMail.value = null
+    }
+  }
+})
+
+// Reset selected mail if it's not in the filtered mails
+watch(filteredMails, () => {
+  if (!filteredMails.value.find(mail => mail.id === selectedMail.value?.id)) {
+    selectedMail.value = null
+  }
+})
+</script>
+
+<template>
+  <UDashboardPage>
+    <UDashboardPanel
+      id="inbox"
+      :width="400"
+      :resizable="{ min: 300, max: 500 }"
+    >
+      <UDashboardNavbar
+        title="Inbox"
+        :badge="filteredMails.length"
+      >
+        <template #right>
+          <UTabs
+            v-model="selectedTab"
+            :items="tabItems"
+            :ui="{ wrapper: '', list: { height: 'h-9', tab: { height: 'h-7', size: 'text-[13px]' } } }"
+          />
+        </template>
+      </UDashboardNavbar>
+
+      <!-- ~/components/inbox/InboxList.vue -->
+      <InboxList
+        v-model="selectedMail"
+        :mails="filteredMails"
+      />
+    </UDashboardPanel>
+
+    <UDashboardPanel
+      v-model="isMailPanelOpen"
+      collapsible
+      grow
+      side="right"
+    >
+      <template v-if="selectedMail">
+        <UDashboardNavbar>
+          <template #toggle>
+            <UDashboardNavbarToggle icon="i-heroicons-x-mark" />
+
+            <UDivider
+              orientation="vertical"
+              class="mx-1.5 lg:hidden"
+            />
+          </template>
+
+          <template #left>
+            <UTooltip text="Archive">
+              <UButton
+                icon="i-heroicons-archive-box"
+                color="gray"
+                variant="ghost"
+              />
+            </UTooltip>
+
+            <UTooltip text="Move to junk">
+              <UButton
+                icon="i-heroicons-archive-box-x-mark"
+                color="gray"
+                variant="ghost"
+              />
+            </UTooltip>
+
+            <UDivider
+              orientation="vertical"
+              class="mx-1.5"
+            />
+
+            <UPopover :popper="{ placement: 'bottom-start' }">
+              <template #default="{ open }">
+                <UTooltip
+                  text="Snooze"
+                  :prevent="open"
+                >
+                  <UButton
+                    icon="i-heroicons-clock"
+                    color="gray"
+                    variant="ghost"
+                    :class="[open && 'bg-gray-50 dark:bg-gray-800']"
+                  />
+                </UTooltip>
+              </template>
+
+              <template #panel="{ close }">
+                <DatePicker @close="close" />
+              </template>
+            </UPopover>
+          </template>
+
+          <template #right>
+            <UTooltip text="Reply">
+              <UButton
+                icon="i-heroicons-arrow-uturn-left"
+                color="gray"
+                variant="ghost"
+              />
+            </UTooltip>
+
+            <UTooltip text="Forward">
+              <UButton
+                icon="i-heroicons-arrow-uturn-right"
+                color="gray"
+                variant="ghost"
+              />
+            </UTooltip>
+
+            <UDivider
+              orientation="vertical"
+              class="mx-1.5"
+            />
+
+            <UDropdown :items="dropdownItems">
+              <UButton
+                icon="i-heroicons-ellipsis-vertical"
+                color="gray"
+                variant="ghost"
+              />
+            </UDropdown>
+          </template>
+        </UDashboardNavbar>
+
+        <!-- ~/components/inbox/InboxMail.vue -->
+        <InboxMail :mail="selectedMail" />
+      </template>
+      <div
+        v-else
+        class="flex-1 hidden lg:flex items-center justify-center"
+      >
+        <UIcon
+          name="i-heroicons-inbox"
+          class="w-32 h-32 text-gray-400 dark:text-gray-500"
+        />
+      </div>
+    </UDashboardPanel>
+  </UDashboardPage>
+</template>