From 768f58cc9c32504b587aff89c570843109723ff0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 2 Sep 2024 14:19:04 +0000
Subject: [PATCH] fix(nc-gui): add separator line in tabs

---
 .../nc-gui/components/extensions/Market.vue   | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/extensions/Market.vue b/packages/nc-gui/components/extensions/Market.vue
index 85177cdec3..fc52dc779f 100644
--- a/packages/nc-gui/components/extensions/Market.vue
+++ b/packages/nc-gui/components/extensions/Market.vue
@@ -91,12 +91,20 @@ const handleSetActiveTab = (tab: TabItem) => {
         </div>
         <div class="flex bg-nc-gray-medium rounded-lg p-1">
           <div class="flex items-center">
-            <NcTooltip v-for="(tab, idx) of tabs" :key="idx" :disabled="tab.tabKey === 'extensions'">
+            <NcTooltip
+              v-for="(tab, idx) of tabs"
+              :key="idx"
+              :disabled="tab.tabKey === 'extensions'"
+              class="nc-extension-market-header-tab-item"
+              :class="{
+                'selected ': activeTab === tab.tabKey,
+              }"
+            >
               <template #title> {{ $t('msg.toast.futureRelease') }}</template>
               <div
                 class="px-3 py-1 flex items-center gap-2 text-xs rounded-md select-none"
                 :class="{
-                  'active-tab bg-white text-nc-gray-emphasis': activeTab === tab.tabKey,
+                  'bg-white text-nc-gray-emphasis': activeTab === tab.tabKey,
                   'text-nc-gray-subtle2': activeTab !== tab.tabKey,
                   'cursor-not-allowed opacity-60': tab.isDisabled,
                   'cursor-pointer': !tab.isDisabled,
@@ -239,8 +247,32 @@ const handleSetActiveTab = (tab: TabItem) => {
   }
 
   .nc-extension-market-header {
-    .active-tab {
-      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
+    .nc-extension-market-header-tab-item {
+      @apply relative;
+
+      // Add vertical line to all items except the last one
+      &:not(:last-child)::after {
+        @apply absolute right-0 top-[4px] h-[16px] w-[1px] bg-nc-gray-dark; // Use WindiCSS utilities for line
+
+        content: '';
+        transform: scaleY(0); // Hide by default
+        transition: transform 0.18s;
+      }
+
+      // Handle lines visibility based on selection
+      &.selected {
+        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
+      }
+
+      // Ensure lines are shown between non-selected items
+      &:not(.selected)::after {
+        transform: scaleY(1);
+      }
+
+      // If supported, this will hide the line to the right of the selected item
+      &:has(+ .selected)::after {
+        transform: scaleY(0); // Hide the line on the right of the selected item
+      }
     }
   }
 }