From 1a1e61eb0c843cce1b4f266e4443513d9a07c14b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 7 Sep 2023 12:09:13 +0530
Subject: [PATCH] fix(nocohub): Fixed view scroll not coming and auto scroll on
 active view

---
 .../components/smartsheet/sidebar/MenuTop.vue | 28 ++++++++++++++++++-
 .../components/smartsheet/sidebar/index.vue   |  2 +-
 packages/nc-gui/utils/domUtils.ts             |  5 ++--
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index 451577c05f..94031e9ecf 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -297,13 +297,38 @@ const setIcon = async (icon: string, view: ViewType) => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const scrollViewNode = () => {
+  const activeViewDom = document.querySelector(`.nc-views-menu [data-view-id="${activeView.value?.id}"]`) as HTMLElement
+  if (!activeViewDom) return
+
+  if (isElementInvisible(activeViewDom)) {
+    // Scroll to the view node
+    activeViewDom?.scrollIntoView({ behavior: 'auto', inline: 'start' })
+  }
+}
+
+watch(
+  () => activeView.value?.id,
+  () => {
+    if (!activeView.value?.id) return
+
+    // TODO: Find a better way to scroll to the view node
+    setTimeout(() => {
+      scrollViewNode()
+    }, 800)
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <template>
   <a-menu
     ref="menuRef"
     :class="{ dragging }"
-    class="nc-views-menu flex flex-col !ml-3 !mr-2.5 w-full !border-r-0 !bg-inherit nc-scrollbar-md"
+    class="nc-views-menu flex flex-col !ml-3 w-full !border-r-0 !bg-inherit"
     :selected-keys="selected"
   >
     <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
@@ -319,6 +344,7 @@ const setIcon = async (icon: string, view: ViewType) => {
         'active': activeView?.id === view.id,
         [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
       }"
+      :data-view-id="view.id"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
       @delete="openDeleteDialog"
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index 4c01f34c45..6460697e35 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -186,7 +186,7 @@ function onOpenModal({
 
     <div class="flex-1 flex flex-col min-h-0">
       <div class="flex flex-col h-full justify-between w-full">
-        <div class="flex flex-grow w-full">
+        <div class="flex flex-grow nc-scrollbar-md pr-1.75 mr-0.5">
           <div v-if="isViewsLoading" class="flex flex-col w-full">
             <div class="flex flex-row items-center w-full mt-1.5 ml-5 gap-x-3">
               <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
diff --git a/packages/nc-gui/utils/domUtils.ts b/packages/nc-gui/utils/domUtils.ts
index 65065fef03..1e2238a8f4 100644
--- a/packages/nc-gui/utils/domUtils.ts
+++ b/packages/nc-gui/utils/domUtils.ts
@@ -1,6 +1,5 @@
-const isElementInvisible = (el: HTMLElement | Element) => {
-  const rect = el.getBoundingClientRect()
-  return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight
+const isElementInvisible = (elem: HTMLElement) => {
+  return !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length)
 }
 
 export { isElementInvisible }