feat: header

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": ["randomizedalpn", "randomizednoalpn"],
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "cSpell.words": ["randomizedalpn", "randomizednoalpn"]
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vue.server.hybridMode": false
 }

components/ResourceConfig.vue

@@ -4,7 +4,7 @@ import * as mutations from '~/mutations'
 import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
-const defaults = await apiStore.getDefaults()
+const { data: defaults } = useAsyncData(() => apiStore.getDefaults())
 
 const isCreateConfigModalOpen = ref(false)
 const createConfigFormModalRef = ref<InstanceType<typeof ConfigFormModal>>()
@@ -22,7 +22,7 @@ const { data: configs, execute: reloadConfigs } = useAsyncData(
 
 const isRemovingConfig = ref(false)
 
-const removeConfig = async (id: string | number) => {
+const removeConfig = async (id: string) => {
   isRemovingConfig.value = true
 
   try {
@@ -36,7 +36,7 @@ const removeConfig = async (id: string | number) => {
 
 const isSelectingConfig = ref(false)
 
-const selectConfig = async (id: string | number) => {
+const selectConfig = async (id: string) => {
   isSelectingConfig.value = true
 
   try {

components/ResourceDNS.vue

@@ -3,7 +3,7 @@ import * as mutations from '~/mutations'
 import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
-const defaults = await apiStore.getDefaults()
+const { data: defaults } = useAsyncData(() => apiStore.getDefaults())
 
 const { data: dnss, execute: reloadDNSs } = useAsyncData(
   'routings',
@@ -16,7 +16,7 @@ const { data: dnss, execute: reloadDNSs } = useAsyncData(
 
 const isRemovingDNS = ref(false)
 
-const removeDNS = async (id: string | number) => {
+const removeDNS = async (id: string) => {
   isRemovingDNS.value = true
 
   try {
@@ -30,7 +30,7 @@ const removeDNS = async (id: string | number) => {
 
 const isSelectingDNS = ref(false)
 
-const selectDNS = async (id: string | number) => {
+const selectDNS = async (id: string) => {
   isSelectingDNS.value = true
 
   try {

components/ResourceGroup.vue

@@ -4,7 +4,7 @@ import * as mutations from '~/mutations'
 import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
-const defaults = await apiStore.getDefaults()
+const { data: defaults } = useAsyncData(() => apiStore.getDefaults())
 
 const isCreateModalOpen = ref(false)
 const createFormModalRef = ref<InstanceType<typeof ConfigFormModal>>()
@@ -22,7 +22,7 @@ const { data: groups, execute: reloadGroups } = useAsyncData(
 
 const isRemovingGroup = ref(false)
 
-const removeGroup = async (id: string | number) => {
+const removeGroup = async (id: string) => {
   isRemovingGroup.value = true
 
   try {

components/ResourceRouting.vue

@@ -3,7 +3,7 @@ import * as mutations from '~/mutations'
 import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
-const defaults = await apiStore.getDefaults()
+const { data: defaults } = useAsyncData(() => apiStore.getDefaults())
 
 const { data: routings, execute: reloadRoutings } = useAsyncData(
   'routings',
@@ -16,7 +16,7 @@ const { data: routings, execute: reloadRoutings } = useAsyncData(
 
 const isRemovingRouting = ref(false)
 
-const removeRouting = async (id: string | number) => {
+const removeRouting = async (id: string) => {
   isRemovingRouting.value = true
 
   try {
@@ -30,7 +30,7 @@ const removeRouting = async (id: string | number) => {
 
 const isSelectingRouting = ref(false)
 
-const selectRouting = async (id: string | number) => {
+const selectRouting = async (id: string) => {
   isSelectingRouting.value = true
 
   try {

components/TextLogo.vue

@@ -0,0 +1,6 @@
+<template>
+  <h1 class="text-3xl font-bold">
+    <span class="text-amber-500">dae</span>
+    <span class="text-green-500">d</span>
+  </h1>
+</template>

layouts/default.vue

@@ -1,7 +1,117 @@
+<script setup lang="ts">
+import * as queries from '~/queries'
+
+const apiStore = useAPIStore()
+
+const { data: user } = useAsyncData(
+  async () => (await apiStore.apiClient?.query(queries.user, {}))?.data?.user
+)
+
+const isSettingsModalOpen = ref(false)
+
+const onFileChange = async (event: Event) => {
+  const formData = new FormData()
+  const file = (event.target as HTMLInputElement).files?.[0]
+
+  if (!file) return
+
+  formData.append('hello', file)
+
+  const data = await $fetch('/api/avatar', {
+    method: 'post',
+    body: formData
+  })
+
+  console.log(data)
+}
+
+const items = [
+  [
+    {
+      slot: 'account',
+      disabled: true
+    }
+  ],
+  [
+    {
+      label: 'Settings',
+      icon: 'i-heroicons-cog-8-tooth',
+      click() {
+        isSettingsModalOpen.value = true
+      }
+    }
+  ],
+  [
+    {
+      label: 'Documentation',
+      icon: 'i-heroicons-book-open'
+    },
+    {
+      label: 'Changelog',
+      icon: 'i-heroicons-megaphone'
+    },
+    {
+      label: 'Status',
+      icon: 'i-heroicons-signal'
+    }
+  ],
+  [
+    {
+      label: 'Sign out',
+      icon: 'i-heroicons-arrow-left-on-rectangle'
+    }
+  ]
+]
+</script>
+
 <template>
-  <main class="container mx-auto p-2 font-inter">
+  <UContainer>
+    <header class="flex items-center justify-between py-4">
+      <TextLogo />
+
+      <div>
+        <UDropdown
+          :items="items"
+          :ui="{ item: { disabled: 'cursor-text select-text' } }"
+          :popper="{ placement: 'bottom-start' }"
+        >
+          <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+
+          <template #account>
+            <span class="truncate font-medium text-gray-900 dark:text-white">
+              {{ user?.username }}
+            </span>
+          </template>
+
+          <template #item="{ item }">
+            <span class="truncate">{{ item.label }}</span>
+
+            <UIcon
+              :name="item.icon"
+              class="ms-auto h-4 w-4 flex-shrink-0 text-gray-400 dark:text-gray-500"
+            />
+          </template>
+        </UDropdown>
+      </div>
+
+      <UModal v-model="isSettingsModalOpen">
+        <UCard>
+          <template #header>Settings</template>
+
+          hello world
+
+          <template #footer>
+            <div class="flex items-center justify-end gap-2">
+              <UButton color="black">Reset</UButton>
+              <UButton>Submit</UButton>
+            </div>
+          </template>
+        </UCard>
+      </UModal>
+    </header>
+
     <slot />
-  </main>
+  </UContainer>
 </template>
 
 <style>

modules/1.bootstrap.ts

@@ -0,0 +1,13 @@
+import envPaths from 'env-paths'
+import fs from 'node:fs/promises'
+import { defineNuxtModule } from 'nuxt/kit'
+import { resolveAvatarDataPath } from '../utils/path.server'
+
+export default defineNuxtModule({
+  async setup() {
+    const { data } = envPaths('daed')
+
+    await fs.mkdir(data, { recursive: true })
+    await fs.mkdir(resolveAvatarDataPath(), { recursive: true })
+  }
+})

package.json

@@ -12,7 +12,7 @@
     "preview": "nuxt preview"
   },
   "dependencies": {
-    "@0no-co/graphqlsp": "^1.7.0",
+    "@0no-co/graphqlsp": "^1.7.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/fonts": "^0.4.0",
@@ -26,10 +26,11 @@
     "@vueuse/nuxt": "^10.9.0",
     "commitlint": "^19.2.1",
     "dayjs": "^1.11.10",
+    "env-paths": "^3.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "gql.tada": "^1.4.0",
+    "gql.tada": "^1.4.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "lodash-es": "^4.17.21",