From d2821c4ea50c4cacaabe8c01282159ff76a73c73 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 5 Aug 2022 22:19:24 +0200
Subject: [PATCH] refactor(gui-v2): use project title as tooltip

---
 packages/nc-gui-v2/app.vue                        | 6 ++++--
 packages/nc-gui-v2/pages/nc/[projectId]/index.vue | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 7b4434eb71..075d33d994 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/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']"
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index 9ae062f5b6..0235403fa9 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/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);
 }