refactor: update UI components for Nuxt UI 4

Author: calebsmithdev

src/app.config.ts

@@ -1,6 +1,8 @@
 export default defineAppConfig({
   ui: {
-    primary: 'sky',
-    gray: 'cool',
+    colors: {
+      primary: 'sky',
+      neutral: 'slate',
+    }
   }
 })

src/app.vue

@@ -1,5 +1,7 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
-</template>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>

src/components/AppHeader.vue

@@ -1,29 +1,27 @@
 <template>
   <UpdateBanner />
-  <header class="border-b border-gray-200 dark:border-gray-800">
-    <div class="logo">WoWthing Sync</div>
-    <UHorizontalNavigation :links="links" />
+  <header class="border-b border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900">
+    <div class="mx-auto flex w-full max-w-5xl items-center gap-6 pl-6 pr-4 pt-2">
+      <p class="text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
+        WoWthing Sync
+      </p>
+      <div class="ml-auto">
+        <UNavigationMenu
+          :items="navigationItems"
+          highlight
+          variant="pill"
+          class="justify-end"
+        />
+      </div>
+    </div>
   </header>
 </template>
 
 <script lang="ts" setup>
-const links = [
+import type { NavigationMenuItem } from '@nuxt/ui';
+
+const navigationItems = [
   { label: 'Dashboard', to: '/' },
   { label: 'Settings', to: '/settings' },
-];
+] satisfies NavigationMenuItem[];
 </script>
-
-<style scoped>
-header {
-  display: flex;
-  align-items: center;
-}
-
-.logo {
-  white-space: nowrap;
-  margin-bottom: 4px;
-  font-size: 25px;
-  user-select: none;
-  padding: 10px 50px 10px 30px;
-}
-</style>

src/layouts/default.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div class="pb-14">
     <AppHeader />
-    <main>
+    <main class="mx-auto w-full max-w-5xl px-6 py-6">
       <slot />
     </main>
     <AppFooter />
   </div>
-</template>
+</template>

src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container py-16">
+  <div class="container py-10">
     <div class="text-center">
       <h1 class="mb-5">Addon Sync</h1>
 

src/pages/settings.vue

@@ -1,38 +1,78 @@
 <template>
-  <div class="container pt-5">
-    <h1 class="mb-5">Settings</h1>
+  <div class="space-y-6">
+    <h1>Settings</h1>
 
-    <UFormGroup label="API Key" name="apiKey" help="Visit Settings -> Account to find your API Key." class="mb-6">
-      <UInput v-model="apiKey" autocomplete="off" :ui="{ icon: { trailing: { pointer: '' } } }" :type="showPassword ? 'text' : 'password'">
+    <UFormField
+      label="API Key"
+      name="apiKey"
+      help="Visit Settings -> Account to find your API Key."
+      class="w-full"
+    >
+      <UInput
+        v-model="apiKey"
+        autocomplete="off"
+        class="w-full"
+        :ui="{ icon: { trailing: { pointer: '' } } }"
+        :type="showPassword ? 'text' : 'password'"
+      >
         <template #trailing>
           <UButton
             color="gray"
             variant="link"
             :icon="showPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
             :padded="false"
+            class="cursor-pointer"
             @click="toggleShowPassword"
           />
         </template>
       </UInput>
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup label='World of Warcraft "_retail_" Folder' name="folder" class="mb-6">
-      <UInput v-model="folder" readonly @click="openFolderDialog">
+    <UFormField
+      label='World of Warcraft "_retail_" Folder'
+      name="folder"
+      class="w-full"
+    >
+      <UInput
+        v-model="folder"
+        readonly
+        class="w-full"
+        :ui="{
+          root: 'cursor-pointer',
+          base: 'cursor-pointer select-none',
+          trailing: 'cursor-pointer pointer-events-auto text-right'
+        }"
+        @click="openFolderDialog"
+      >
         <template #trailing>
-          <span class="text-gray-500 dark:text-gray-400 text-xs">Choose Directory</span>
+          <span
+            class="text-gray-500 dark:text-gray-400 text-xs cursor-pointer"
+            @click.stop="openFolderDialog"
+          >
+            Choose Directory
+          </span>
         </template>
       </UInput>
-    </UFormGroup>
+    </UFormField>
 
-    <UCheckbox label="Enable desktop notifications" v-model="notificationsEnabled" class="mb-2" />
+    <div class="space-y-3">
+      <UCheckbox
+        label="Enable desktop notifications"
+        v-model="notificationsEnabled"
+        class="w-full justify-start"
+      />
 
-    <UCheckbox label="Launch WoWthing Sync when you start your computer" v-model="autoStart" class="mb-2" />
+      <UCheckbox
+        label="Launch WoWthing Sync when you start your computer"
+        v-model="autoStart"
+        class="w-full justify-start"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
   import { open } from '@tauri-apps/plugin-dialog';
-  import { enable, isEnabled, disable } from "@tauri-apps/plugin-autostart";
 
   const apiKey = useApiKeys();
   const autoStart = useAutoStart();