From 5e09c5cca3e9c5b343b2e918896d825f3ffb4833 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 2 Oct 2023 11:43:00 +0000
Subject: [PATCH] fix: Improved breadcrumb UI

---
 .../nc-gui/components/general/ProjectIcon.vue |  4 +-
 .../nc-gui/components/smartsheet/Topbar.vue   | 12 +--
 .../smartsheet/toolbar/ViewInfo.vue           | 80 +++++++++++++++----
 packages/nc-gui/utils/iconUtils.ts            |  2 +
 4 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui/components/general/ProjectIcon.vue b/packages/nc-gui/components/general/ProjectIcon.vue
index 625e1fc639..d935e0620f 100644
--- a/packages/nc-gui/components/general/ProjectIcon.vue
+++ b/packages/nc-gui/components/general/ProjectIcon.vue
@@ -6,8 +6,8 @@ const { hoverable } = defineProps<{
 </script>
 
 <template>
-  <img
-    src="~/assets/nc-icons/database.svg"
+  <GeneralIcon
+    icon="ncDatabase"
     class="text-[#2824FB] nc-project-icon"
     :class="{
       'nc-project-icon-hoverable': hoverable,
diff --git a/packages/nc-gui/components/smartsheet/Topbar.vue b/packages/nc-gui/components/smartsheet/Topbar.vue
index c9ec52d545..51228910c1 100644
--- a/packages/nc-gui/components/smartsheet/Topbar.vue
+++ b/packages/nc-gui/components/smartsheet/Topbar.vue
@@ -29,18 +29,10 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
       <GeneralOpenLeftSidebarBtn />
       <LazySmartsheetToolbarViewInfo v-if="!isPublic" />
 
-      <div class="flex-1" />
-
-      <div
-        v-if="!isSharedBase && !isMobileMode"
-        class="absolute mx-auto transition-all duration-150 right-0 w-47.5"
-        :class="{
-          '-left-1/10': isLeftSidebarOpen,
-          '-left-0': !isLeftSidebarOpen,
-        }"
-      >
+      <div v-if="!isSharedBase && !isMobileMode" class="w-47.5">
         <SmartsheetTopbarSelectMode />
       </div>
+      <div class="flex-1" />
 
       <GeneralApiLoader v-if="!isMobileMode" />
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index a8d6064969..cc474701ca 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -5,6 +5,8 @@ const { isMobileMode } = useGlobal()
 
 const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
 
+const { project } = storeToRefs(useProject())
+
 const { activeTable } = storeToRefs(useTablesStore())
 </script>
 
@@ -12,13 +14,31 @@ const { activeTable } = storeToRefs(useTablesStore())
   <div
     class="flex flex-row font-medium items-center border-gray-50 mt-0.5"
     :class="{
-      'min-w-2/5 max-w-2/5': !isMobileMode && activeView?.type !== ViewTypes.KANBAN,
+      'min-w-37/100 max-w-37/100': !isMobileMode && activeView?.type !== ViewTypes.KANBAN,
       'min-w-1/4 max-w-1/4': !isMobileMode && activeView?.type === ViewTypes.KANBAN,
       'w-2/3 text-base ml-1.5': isMobileMode,
     }"
   >
+    <template v-if="!isMobileMode">
+      <NcTooltip class="ml-0.75">
+        <template #title>
+          {{ project?.title }}
+        </template>
+        <div class="flex flex-row items-center gap-x-1.5">
+          <GeneralProjectIcon
+            :meta="{ type: project?.type }"
+            class="!grayscale"
+            :style="{
+              filter: 'grayscale(100%)',
+            }"
+          />
+          <div class="text-gray-500">..</div>
+        </div>
+      </NcTooltip>
+      <div class="px-1.5 text-gray-500">/</div>
+    </template>
     <template v-if="!(isMobileMode && !activeView?.is_default)">
-      <LazyGeneralEmojiPicker :emoji="activeTable?.meta?.icon" readonly size="xsmall">
+      <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeTable?.meta?.icon" readonly size="xsmall">
         <template #default>
           <MdiTable
             class="min-w-5"
@@ -29,35 +49,61 @@ const { activeTable } = storeToRefs(useTablesStore())
           />
         </template>
       </LazyGeneralEmojiPicker>
-      <span
-        class="text-ellipsis overflow-hidden pl-1 text-gray-500"
+      <NcTooltip
+        class="truncate nc-active-table-title"
         :class="{
-          'text-gray-500': !isMobileMode,
-          'text-gray-700 max-w-1/2': isMobileMode,
+          'max-w-1/3': !isMobileMode,
+          'max-w-1/4': isMobileMode,
         }"
-        :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
       >
-        {{ activeTable?.title }}
-      </span>
+        <template #title>
+          {{ activeTable?.title }}
+        </template>
+        <span
+          class="text-ellipsis overflow-hidden text-gray-500"
+          :class="{
+            'text-gray-500': !isMobileMode,
+            'text-gray-700': isMobileMode,
+          }"
+          :style="{
+            wordBreak: 'keep-all',
+            whiteSpace: 'nowrap',
+            display: 'inline',
+          }"
+        >
+          {{ activeTable?.title }}
+        </span>
+      </NcTooltip>
     </template>
 
-    <div v-if="!isMobileMode" class="px-2 text-gray-300">/</div>
+    <div v-if="!isMobileMode" class="px-1 text-gray-500">/</div>
 
     <template v-if="!(isMobileMode && activeView?.is_default)">
-      <LazyGeneralEmojiPicker :emoji="activeView?.meta?.icon" readonly size="xsmall">
+      <!-- <LazyGeneralEmojiPicker :emoji="activeView?.meta?.icon" readonly size="xsmall">
         <template #default>
           <GeneralViewIcon :meta="{ type: activeView?.type }" class="min-w-4.5 text-lg flex" />
         </template>
-      </LazyGeneralEmojiPicker>
+      </LazyGeneralEmojiPicker> -->
 
-      <span
-        class="truncate pl-1.25 text-gray-700"
+      <NcTooltip
+        class="truncate nc-active-view-title"
         :class="{
-          'max-w-28/100': !isMobileMode,
+          'max-w-1/3': !isMobileMode,
+          'max-w-1/4': isMobileMode,
         }"
       >
-        {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
-      </span>
+        <template #title>
+          {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
+        </template>
+        <span
+          class="truncate pl-1.25 text-gray-800 font-medium"
+          :class="{
+            'max-w-28/100': !isMobileMode,
+          }"
+        >
+          {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
+        </span>
+      </NcTooltip>
     </template>
 
     <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view' && !isMobileMode" />
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 18d42e2db2..89d4961725 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -80,6 +80,7 @@ import PhTriangleFill from '~icons/ph/triangle-fill'
 import LcSend from '~icons/lucide/send'
 import NcCommentHere from '~icons/nc-icons/comment-here'
 import NcAddDataSource from '~icons/nc-icons/add-data-source'
+import NcDatabaseIcon from '~icons/nc-icons/database'
 
 // Roles
 import MaterialSymbolsManageAccountsOutline from '~icons/material-symbols/manage-accounts-outline'
@@ -414,6 +415,7 @@ export const iconMap = {
   heightExtra: NcIconsRowHeightExtraTall,
   databaseSearch: MdiDatabaseSearch,
   layers: NcLayers,
+  ncDatabase: NcDatabaseIcon,
   magic: PhSparkleFill,
   magic1: MdiMagicStaff,
   workspace: h('span', { class: 'material-symbols' }, 'dataset'),