refactor(gui-v2): replace v-app with ant-layout

packages/nc-gui-v2/app.vue

@@ -12,23 +12,18 @@ const signOut = () => {
   $state.signOut()
   navigateTo('/signin')
 }
+
+const toggleSidebar = useToggle($state.sidebarOpen)
 </script>
 
 <template>
-  <v-app>
-    <v-app-bar class="shadow-md bg-primary" height="48">
-      <div class="flex items-center flex-1 md:ml-4">
-        <v-toolbar-title>
-          <v-tooltip bottom>
-            {{ $t('general.home') }}
-            <span class="caption font-weight-light pointer">(version)</span>
-          </v-tooltip>
-
+  <a-layout>
+    <a-layout-header class="flex !bg-primary items-center text-white">
+      <div class="flex items-center flex-1">
         <div class="flex items-center gap-2">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl" @click="navigateTo('/')">NocoDB</span>
         </div>
-        </v-toolbar-title>
 
         <!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading
         <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
@@ -41,12 +36,7 @@ const signOut = () => {
          -->
       </div>
 
-      <div class="flex justify-end">
-        <v-toolbar-items class="flex gap-4 nc-topright-menu">
-          <!-- todo: implement components
-          <release-info />
-          -->
-
+      <div class="flex justify-end gap-4">
         <general-color-mode-switcher v-model="$state.darkMode.value" />
 
         <general-language class="mr-3" />
@@ -54,42 +44,37 @@ const signOut = () => {
         <MaterialSymbolsMenu
           v-if="$state.signedIn.value"
           class="block text-xl cursor-pointer xl:(hidden)"
-            @click="$state.sidebarOpen.value = !$state.sidebarOpen.value"
+          @click="toggleSidebar"
         />
 
         <template v-if="$state.signedIn.value">
-            <v-menu class="leading-8">
-              <template #activator="{ props }">
-                <MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" />
-              </template>
+          <a-dropdown :trigger="['click']">
+            <MdiDotsVertical class="md:text-xl cursor-pointer" @click.prevent />
 
-              <v-list class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800)">
-                <nuxt-link
-                  v-t="['c:navbar:user:email']"
-                  class="group hover:(bg-gray-200) dark:(hover:bg-gray-600) flex items-center p-2 no-underline"
-                  to="/user"
-                >
+            <template #overlay>
+              <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
+                <a-menu-item key="0" class="!rounded">
+                  <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                     <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
                     <span class="prose">{{ email }}</span>
                   </nuxt-link>
+                </a-menu-item>
 
-                <v-divider />
+                <a-menu-divider class="!m-0" />
 
-                <div
-                  v-t="['a:navbar:user:sign-out']"
-                  class="group flex flex-row cursor-pointer hover:bg-gray-200 dark:(hover:bg-gray-600) flex items-center p-2"
-                  @click="signOut"
-                >
+                <a-menu-item class="!rounded" key="1">
+                  <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
                     <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
                     <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
                   </div>
-              </v-list>
-            </v-menu>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
         </template>
-        </v-toolbar-items>
       </div>
-    </v-app-bar>
+    </a-layout-header>
 
     <NuxtPage />
-  </v-app>
+  </a-layout>
 </template>

packages/nc-gui-v2/components.d.ts

@@ -7,6 +7,13 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    ALayout: typeof import('ant-design-vue/es')['Layout']
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     ATable: typeof import('ant-design-vue/es')['Table']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

packages/nc-gui-v2/layouts/default.vue

@@ -18,11 +18,11 @@ export default {
 </script>
 
 <template>
-  <v-main>
+  <a-layout-content>
     <slot name="sidebar">
       <div id="sidebar" />
     </slot>
 
     <slot />
-  </v-main>
+  </a-layout-content>
 </template>

packages/nc-gui-v2/windi.config.ts

@@ -15,7 +15,7 @@ import colors, { themeColors } from './utils/colorsUtils'
 
 export default defineConfig({
   extract: {
-    include: ['**/*.{vue,html,jsx,tsx,css}'],
+    include: ['**/*.{vue,html,jsx,tsx,css,scss}'],
     exclude: ['node_modules', '.git'],
   },