Dashboard rewrite

packages/dashboard/.gitignore

@@ -1,29 +1,26 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+# Node dependencies
+node_modules
 
-# testing
-/coverage
+# Logs
+logs
+*.log
 
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
+# Misc
 .DS_Store
-*.pem
+.fleet
+.idea
 
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
+# Local env files
+.env
+.env.*
+!.env.example
 
-# local env files
-.env*.local
+.next

packages/dashboard/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

packages/dashboard/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'neutral',
+    gray: 'zinc',
+  },
+});

packages/dashboard/components/AppBar.vue

@@ -0,0 +1,124 @@
+<template>
+  <header
+    class="border-b-1 sticky top-0 z-40 flex w-full items-center gap-4 border-transparent px-4 py-4 backdrop-blur"
+  >
+    <router-link to="/">
+      <img src="/icon-black.png" alt="Icon" class="w-6 dark:hidden" />
+      <img src="/icon-white.png" alt="Dark icon" class="hidden w-6 dark:block" />
+    </router-link>
+
+    <UPopover v-model:open="orgSelectOpen">
+      <UButton color="white" class="w-48">
+        <UAvatar :alt="selectedOrganization?.name" size="xs" />
+        <span>{{ selectedOrganization?.name }}</span>
+        <UIcon
+          name="i-heroicons-chevron-down-20-solid"
+          class="ms-auto h-4 w-4 transform transition-transform"
+          :class="{
+            'rotate-180': orgSelectOpen,
+          }"
+        />
+      </UButton>
+
+      <template #panel>
+        <div class="flex w-48 flex-col divide-y divide-gray-200 dark:divide-gray-700">
+          <div class="p-1" @click="orgSelectOpen = !orgSelectOpen">
+            <UButton
+              v-for="organization in organizations"
+              :key="organization.id"
+              :label="organization.name"
+              size="sm"
+              :to="`/organizations/${organization.id}`"
+              variant="ghost"
+              class="w-full"
+              @click="authStore.selectOrganization(organization.id)"
+            >
+              <UAvatar :alt="organization.name" size="xs" />
+              <span class="truncate">{{ organization.name }}</span>
+              <UIcon
+                v-if="organization.id === selectedOrganization?.id"
+                name="i-heroicons-check-20-solid"
+                class="ml-auto h-4 w-4"
+              />
+            </UButton>
+          </div>
+          <div class="p-1">
+            <UButton
+              label="Create organization"
+              icon="i-heroicons-plus"
+              variant="ghost"
+              class="w-full"
+              to="/organizations/create"
+            />
+          </div>
+        </div>
+      </template>
+    </UPopover>
+
+    <template v-if="selectedOrganization">
+      <TabButton :to="`/organizations/${selectedOrganization.id}`" label="Projects" />
+      <TabButton :to="`/organizations/${selectedOrganization.id}/settings`" label="Settings" />
+    </template>
+
+    <div class="ml-auto flex items-center gap-4">
+      <ClientOnly>
+        <UButton
+          :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+          color="gray"
+          variant="ghost"
+          aria-label="Theme"
+          @click="isDark = !isDark"
+        />
+
+        <template #fallback>
+          <div class="h-8 w-8" />
+        </template>
+      </ClientOnly>
+
+      <a href="https://docs.lagoss.com" rel="noopener noreferrer" target="_blank">
+        <UButton label="Docs" size="xs" color="white" />
+      </a>
+
+      <UPopover v-if="authStore.user" class="flex items-center">
+        <UAvatar :src="authStore.user.image || ''" alt="User avatar" size="sm" :initials="authStore.user.name" />
+
+        <template #panel>
+          <div class="flex w-48 flex-col items-center gap-2">
+            <div class="my-4 flex flex-col items-center gap-2">
+              <UAvatar :src="authStore.user.image || ''" alt="User avatar" size="xl" :initials="authStore.user.name" />
+              <span>{{ authStore.user.name }}</span>
+            </div>
+
+            <div class="flex w-full flex-col border-t border-gray-200 p-2 dark:border-gray-800">
+              <UButton label="Settings" variant="ghost" to="/settings" class="w-full" />
+              <UButton label="Logout" variant="ghost" class="w-full" @click="authStore.logout" />
+            </div>
+          </div>
+        </template>
+      </UPopover>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark';
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
+  },
+});
+
+const authStore = useAuth();
+
+const { data: organizations } = await useFetch('/api/organizations');
+
+const selectedOrganization = computed(
+  () => organizations.value?.find(org => org.id === authStore.user?.currentOrganizationId),
+);
+
+const orgSelectOpen = ref(false);
+</script>

packages/dashboard/components/Card.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full rounded-md border border-gray-300 p-4 dark:border-zinc-600">
+    <slot />
+  </div>
+</template>