refactor(gui-v2): use project title as tooltip

packages/nc-gui-v2/app.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
-import { computed, ref, useBreakpoints, useGlobal, useRoute, useRouter, useSidebar } from '#imports'
+import { computed, ref, useBreakpoints, useGlobal, useProject, useRoute, useRouter, useSidebar } from '#imports'
 
 /** get current breakpoints (for enabling sidebar) */
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -10,6 +10,8 @@ const { signOut, signedIn, isLoading, user } = useGlobal()
 
 const { isOpen } = useSidebar({ isOpen: signedIn.value && breakpoints.isGreater('md') })
 
+const { project } = useProject()
+
 const router = useRouter()
 
 const route = useRoute()
@@ -78,7 +80,7 @@ const logout = () => {
         </a-tooltip>
 
         <a-tooltip placement="right">
-          <template #title>Project {{ route.params.projectId }}</template>
+          <template v-if="project" #title>{{ project.title }}</template>
 
           <div
             :class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']"

packages/nc-gui-v2/pages/nc/[projectId]/index.vue

@@ -79,7 +79,7 @@ await loadTables()
         </div>
 
         <template #overlay>
-          <a-menu class="ml-2 !p-0 min-w-32 leading-8 !rounded">
+          <a-menu class="ml-2 min-w-32 leading-8 !rounded">
             <a-menu-item-group title="Project Settings">
               <a-menu-item>
                 <div class="nc-project-menu-item group">
@@ -180,6 +180,10 @@ await loadTables()
   @apply border-b-1;
 }
 
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
 :deep(.ant-dropdown-menu-item) {
   @apply !py-0 active:(ring ring-pink-500);
 }