From fce4f88d3ead867d4b9362a1bbc047d75d62a908 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:47 +0000
Subject: [PATCH 01/30] feat(nc-gui): update fields menu dropdown with new
 design

---
 .../placeholder/no-search-result-found.png    | Bin 0 -> 14799 bytes
 packages/nc-gui/assets/style.scss             |   2 +-
 .../smartsheet/toolbar/FieldsMenu.vue         |  81 ++++++++++++------
 packages/nc-gui/lang/en.json                  |   3 +-
 packages/nc-gui/windi.config.ts               |   2 +
 5 files changed, 59 insertions(+), 29 deletions(-)
 create mode 100644 packages/nc-gui/assets/img/placeholder/no-search-result-found.png

diff --git a/packages/nc-gui/assets/img/placeholder/no-search-result-found.png b/packages/nc-gui/assets/img/placeholder/no-search-result-found.png
new file mode 100644
index 0000000000000000000000000000000000000000..26d270c3cf2679f9bb88897903959b564451f788
GIT binary patch
literal 14799
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

literal 0
HcmV?d00001

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 0687d9ea7a..a9ed94e610 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -658,7 +658,7 @@ a {
 }
 
 .nc-toolbar-dropdown {
-  @apply !rounded-2xl;
+  @apply !rounded-lg;
 }
 
 input[type='number'] {
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 6e85fe1ed0..a288e5fcbf 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -300,6 +300,17 @@ const showSystemField = computed({
   },
 })
 
+const fieldsMenuSearchRef = ref<HTMLInputElement>()
+
+watch(open, (value) => {
+  if (value) {
+    console.log('value', fieldsMenuSearchRef.value)
+    setTimeout(() => {
+      fieldsMenuSearchRef.value?.focus()
+    }, 100)
+  }
+})
+
 useMenuCloseOnEsc(open)
 </script>
 
@@ -337,40 +348,47 @@ useMenuCloseOnEsc(open)
     </div>
 
     <template #overlay>
-      <div class="p-4 pr-0 bg-white w-90 rounded-2xl nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
+      <div class="py-2 bg-white w-80 rounded-2xl nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
         <div
           v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
-          class="flex flex-col gap-y-2 pr-4 mb-6"
+          class="flex flex-col gap-y-2 px-2 mb-6"
         >
           <div class="flex text-sm select-none">Select cover image field</div>
           <a-select
             v-model:value="coverImageColumnId"
             :options="coverOptions"
             class="w-full"
-            dropdown-class-name="nc-dropdown-cover-image"
+            dropdown-class-name="nc-dropdown-cover-image !rounded-lg"
             @click.stop
           >
             <template #suffixIcon><GeneralIcon class="text-gray-700" icon="arrowDown" /></template>
           </a-select>
         </div>
 
-        <div class="pr-4" @click.stop>
-          <a-input v-model:value="filterQuery" :placeholder="$t('placeholder.searchFields')" class="!rounded-lg">
-            <template #prefix> <img class="h-3.5 w-3.5 mr-1" src="~/assets/nc-icons/search.svg" /> </template
+        <div class="px-2" @click.stop>
+          <a-input
+            ref="fieldsMenuSearchRef"
+            v-model:value="filterQuery"
+            :placeholder="$t('placeholder.searchFields')"
+            class="!rounded-lg nc-fields-menu-search-field"
+          >
+            <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
           ></a-input>
         </div>
 
-        <div v-if="!filterQuery" class="pr-4">
+        <div v-if="!filterQuery" class="px-2">
           <div class="pt-0.25 w-full bg-gray-50"></div>
         </div>
 
-        <div class="flex flex-col my-1.5 nc-scrollbar-md max-h-[47.5vh] pr-3">
+        <div class="flex flex-col mt-2 pb-2 nc-scrollbar-thin max-h-[47vh] px-2">
           <div class="nc-fields-list">
             <div
               v-if="!fields?.filter((el) => el.title.toLowerCase().includes(filterQuery.toLowerCase())).length"
-              class="px-0.5 py-2 text-gray-500"
+              class="px-0.5 py-6 text-gray-500 flex flex-col items-center gap-6"
             >
-              {{ $t('title.noFieldsFound') }}
+              <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+
+              {{ $t('title.noResultsMatchedYourSearch') }}
             </div>
             <Draggable v-model="fields" item-key="id" @change="onMove($event)">
               <template #item="{ element: field }">
@@ -382,13 +400,13 @@ useMenuCloseOnEsc(open)
                   "
                   :key="field.id"
                   :data-testid="`nc-fields-menu-${field.title}`"
-                  class="px-2 py-2 flex flex-row items-center first:border-t-1 border-b-1 border-x-1 first:rounded-t-lg last:rounded-b-lg border-gray-200"
+                  class="pl-2 flex flex-row items-center"
                   @click.stop
                 >
                   <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
                   <div
                     v-e="['a:fields:show-hide']"
-                    class="flex flex-row items-center w-full truncate cursor-pointer ml-1"
+                    class="flex flex-row items-center w-full truncate cursor-pointer ml-1 py-2 pr-2"
                     @click="
                       () => {
                         field.show = !field.show
@@ -397,7 +415,7 @@ useMenuCloseOnEsc(open)
                     "
                   >
                     <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                    <NcTooltip class="flex-1 px-1 truncate" show-on-truncate-only>
+                    <NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only>
                       <template #title>
                         {{ field.title }}
                       </template>
@@ -453,7 +471,7 @@ useMenuCloseOnEsc(open)
                     'rounded-lg': filteredFieldList.length === 1,
                   }"
                   :data-testid="`nc-fields-menu-${gridDisplayValueField.title}`"
-                  class="pl-7.4 pr-2 py-2 flex flex-row items-center border-1 border-gray-200"
+                  class="pl-7.4 pr-2 py-2 flex flex-row items-center"
                   @click.stop
                 >
                   <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
@@ -468,24 +486,23 @@ useMenuCloseOnEsc(open)
             </Draggable>
           </div>
         </div>
-        <div class="flex pr-4 mt-1 gap-2">
-          <NcButton
-            v-if="!filterQuery"
-            class="nc-fields-show-all-fields !text-gray-500 !w-1/2"
-            size="small"
-            type="ghost"
-            @click="showAllColumns = !showAllColumns"
+        <div v-if="!filterQuery" class="flex items-center justify-between gap-2 px-2 pt-2 border-t-1 border-gray-200">
+          <div
+            v-if="!isPublic"
+            class="flex items-center gap-2 text-black-100 cursor-pointer select-none"
+            @click.stop="showSystemField = !showSystemField"
           >
-            {{ showAllColumns ? $t('title.hideAll') : $t('general.showAll') }} {{ $t('objects.fields').toLowerCase() }}
-          </NcButton>
+            <NcSwitch :checked="showSystemField" class="nc-fields-show-system-fields" />
+            {{ $t('activity.showSystemFields') }}
+          </div>
+
           <NcButton
-            v-if="!isPublic && !filterQuery"
-            class="nc-fields-show-system-fields !text-gray-500 !w-1/2"
+            class="nc-fields-show-all-fields !text-black-100"
             size="small"
             type="ghost"
-            @click="showSystemField = !showSystemField"
+            @click="showAllColumns = !showAllColumns"
           >
-            {{ showSystemField ? $t('title.hideSystemFields') : $t('activity.showSystemFields') }}
+            {{ showAllColumns ? $t('title.hideAll') : $t('general.showAll') }}
           </NcButton>
         </div>
       </div>
@@ -505,4 +522,14 @@ useMenuCloseOnEsc(open)
 :deep(.xxsmall) {
   @apply !min-w-0;
 }
+
+.nc-fields-menu-search-field {
+  .nc-search-icon {
+    @apply text-gray-500;
+  }
+
+  &.ant-input-affix-wrapper-focused .nc-search-icon {
+    @apply text-gray-800;
+  }
+}
 </style>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index f91f51549f..0496b98a03 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -433,7 +433,8 @@
     },
     "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here",
     "noOptionsFound": "No options found",
-    "surveyFormSubmitConfirmMsg": "Are you sure you want to submit this form?"
+    "surveyFormSubmitConfirmMsg": "Are you sure you want to submit this form?",
+    "noResultsMatchedYourSearch": "No results matched your search"
   },
   "labels": {
     "selectYear": "Select Year",
diff --git a/packages/nc-gui/windi.config.ts b/packages/nc-gui/windi.config.ts
index f4aa6f022b..a67886ec28 100644
--- a/packages/nc-gui/windi.config.ts
+++ b/packages/nc-gui/windi.config.ts
@@ -46,6 +46,8 @@ export default defineConfig({
     'color-transition': 'transition-colors duration-100 ease-in',
     'scrollbar-thin-primary': 'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white',
     'scrollbar-thin-dull': 'scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-100 scrollbar-track-white',
+    'nc-scrollbar-thin':
+      'scrollbar scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300 scrollbar-track-transparent',
   },
 
   theme: {

From 813fd894285ae68745976d66678f4ef8724308ed Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:47 +0000
Subject: [PATCH 02/30] feat(nc-gui): reduce icon & switch size from fields
 dropdown

---
 packages/nc-gui/components/nc/Switch.vue      | 38 +++++++++++++++++-
 .../smartsheet/toolbar/FieldsMenu.vue         | 39 ++++++++++++++-----
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/nc/Switch.vue b/packages/nc-gui/components/nc/Switch.vue
index f5d9af077e..55a833484e 100644
--- a/packages/nc-gui/components/nc/Switch.vue
+++ b/packages/nc-gui/components/nc/Switch.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small' }>(), {
+const props = withDefaults(defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small' | 'xsmall' }>(), {
   size: 'small',
 })
 
@@ -13,9 +13,43 @@ const onChange = (e: boolean) => {
 </script>
 
 <template>
-  <a-switch v-model:checked="checked" :disabled="disabled" class="nc-switch" v-bind="$attrs" :size="size" @change="onChange">
+  <a-switch
+    v-model:checked="checked"
+    :disabled="disabled"
+    class="nc-switch"
+    :class="{
+      'size-xsmall': size === 'xsmall',
+    }"
+    v-bind="$attrs"
+    :size="size === 'xsmall' ? undefined : size"
+    @change="onChange"
+  >
   </a-switch>
   <span v-if="$slots.default" class="cursor-pointer pl-2" @click="checked = !checked">
     <slot />
   </span>
 </template>
+
+<style lang="scss" scoped>
+.size-xsmall {
+  @apply h-3.5 min-w-[26px] leading-[14px];
+
+  :deep(.ant-switch-handle) {
+    @apply h-[10px] w-[10px] top-[2px] left-[calc(100%_-_24px)];
+  }
+
+  :deep(.ant-switch-inner) {
+    @apply !mr-[5px] !ml-[18px] !my-0;
+  }
+
+  &.ant-switch-checked {
+    :deep(.ant-switch-handle) {
+      @apply left-[calc(100%_-_12px)];
+    }
+
+    :deep(.ant-switch-inner) {
+      @apply !mr-[18px] !ml-[5px];
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index a288e5fcbf..e77718c5ba 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -300,6 +300,8 @@ const showSystemField = computed({
   },
 })
 
+const isDragging = ref<boolean>(false)
+
 const fieldsMenuSearchRef = ref<HTMLInputElement>()
 
 watch(open, (value) => {
@@ -390,7 +392,14 @@ useMenuCloseOnEsc(open)
 
               {{ $t('title.noResultsMatchedYourSearch') }}
             </div>
-            <Draggable v-model="fields" item-key="id" @change="onMove($event)">
+            <Draggable
+              v-model="fields"
+              item-key="id"
+              ghost-class="nc-fields-menu-items-ghost"
+              @change="onMove($event)"
+              @start="isDragging = true"
+              @end="isDragging = false"
+            >
               <template #item="{ element: field }">
                 <div
                   v-if="
@@ -400,13 +409,13 @@ useMenuCloseOnEsc(open)
                   "
                   :key="field.id"
                   :data-testid="`nc-fields-menu-${field.title}`"
-                  class="pl-2 flex flex-row items-center"
+                  class="pl-2 flex flex-row items-center rounded-lg hover:bg-gray-50"
                   @click.stop
                 >
                   <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
                   <div
                     v-e="['a:fields:show-hide']"
-                    class="flex flex-row items-center w-full truncate cursor-pointer ml-1 py-2 pr-2"
+                    class="flex flex-row items-center w-full truncate cursor-pointer ml-1 py-1.5 pr-2"
                     @click="
                       () => {
                         field.show = !field.show
@@ -414,8 +423,8 @@ useMenuCloseOnEsc(open)
                       }
                     "
                   >
-                    <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                    <NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only>
+                    <component :is="getIcon(metaColumnById[field.fk_column_id])" class="!w-3.5 !h-3.5 !text-gray-700" />
+                    <NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only :disabled="isDragging">
                       <template #title>
                         {{ field.title }}
                       </template>
@@ -456,7 +465,12 @@ useMenuCloseOnEsc(open)
                         <component :is="iconMap.underline" class="!w-3 !h-3" />
                       </NcButton>
                     </div>
-                    <NcSwitch :checked="field.show" :disabled="field.isViewEssentialField" @change="$t('a:fields:show-hide')" />
+                    <NcSwitch
+                      :checked="field.show"
+                      :disabled="field.isViewEssentialField"
+                      @change="$t('a:fields:show-hide')"
+                      size="xsmall"
+                    />
                   </div>
 
                   <div class="flex-1" />
@@ -474,13 +488,16 @@ useMenuCloseOnEsc(open)
                   class="pl-7.4 pr-2 py-2 flex flex-row items-center"
                   @click.stop
                 >
-                  <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
-                  <NcTooltip class="px-1 flex-1 truncate" show-on-truncate-only>
+                  <component
+                    :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])"
+                    class="!w-3.5 !h-3.5 !text-gray-700"
+                  />
+                  <NcTooltip class="px-1 flex-1 truncate" show-on-truncate-only :disabled="isDragging">
                     <template #title>{{ filteredFieldList[0].title }}</template>
                     <template #default>{{ filteredFieldList[0].title }}</template>
                   </NcTooltip>
 
-                  <NcSwitch :checked="true" :disabled="true" />
+                  <NcSwitch :checked="true" :disabled="true" size="xsmall" />
                 </div>
               </template>
             </Draggable>
@@ -532,4 +549,8 @@ useMenuCloseOnEsc(open)
     @apply text-gray-800;
   }
 }
+
+.nc-fields-menu-items-ghost {
+  @apply bg-gray-50;
+}
 </style>

From d7736fd06ac961c6c95aa9c8f0988ec59948968a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:47 +0000
Subject: [PATCH 03/30] fix(nc-gui): keep old fields menu dropdown footer

---
 .../smartsheet/toolbar/FieldsMenu.vue         | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index e77718c5ba..688ff9f4ee 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -503,23 +503,23 @@ useMenuCloseOnEsc(open)
             </Draggable>
           </div>
         </div>
-        <div v-if="!filterQuery" class="flex items-center justify-between gap-2 px-2 pt-2 border-t-1 border-gray-200">
-          <div
-            v-if="!isPublic"
-            class="flex items-center gap-2 text-black-100 cursor-pointer select-none"
-            @click.stop="showSystemField = !showSystemField"
-          >
-            <NcSwitch :checked="showSystemField" class="nc-fields-show-system-fields" />
-            {{ $t('activity.showSystemFields') }}
-          </div>
-
+        <div v-if="!filterQuery" class="flex px-2 gap-2 pt-2 border-t-1 border-gray-200">
           <NcButton
-            class="nc-fields-show-all-fields !text-black-100"
+            class="nc-fields-show-all-fields !text-gray-500 !w-1/2"
             size="small"
             type="ghost"
             @click="showAllColumns = !showAllColumns"
           >
-            {{ showAllColumns ? $t('title.hideAll') : $t('general.showAll') }}
+            {{ showAllColumns ? 'Hide all' : 'Show all' }} fields
+          </NcButton>
+          <NcButton
+            v-if="!isPublic"
+            class="nc-fields-show-system-fields !text-gray-500 !w-1/2"
+            size="small"
+            type="ghost"
+            @click="showSystemField = !showSystemField"
+          >
+            {{ showSystemField ? 'Hide system fields' : 'Show system fields' }}
           </NcButton>
         </div>
       </div>

From ee0b0bc79ac5aaf617e1a56c2f247f75149a7fcc Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:48 +0000
Subject: [PATCH 04/30] fix(nc-gui): remove console

---
 .../components/smartsheet/toolbar/FieldsMenu.vue     | 12 ++----------
 .../components/smartsheet/toolbar/RowHeight.vue      |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 688ff9f4ee..6026e67979 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -306,7 +306,6 @@ const fieldsMenuSearchRef = ref<HTMLInputElement>()
 
 watch(open, (value) => {
   if (value) {
-    console.log('value', fieldsMenuSearchRef.value)
     setTimeout(() => {
       fieldsMenuSearchRef.value?.focus()
     }, 100)
@@ -528,23 +527,16 @@ useMenuCloseOnEsc(open)
 </template>
 
 <style lang="scss" scoped>
-// :deep(.ant-checkbox-inner) {
-//   @apply transform scale-60;
-// }
-
-// :deep(.ant-checkbox) {
-//   @apply top-auto;
-// }
-
 :deep(.xxsmall) {
   @apply !min-w-0;
 }
 
 .nc-fields-menu-search-field {
   .nc-search-icon {
-    @apply text-gray-500;
+    @apply text-gray-400;
   }
 
+  &:hover .nc-search-icon,
   &.ant-input-affix-wrapper-focused .nc-search-icon {
     @apply text-gray-800;
   }
diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index 7f60d6c14c..dca7f557ac 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -94,7 +94,7 @@ useMenuCloseOnEsc(open)
     </div>
     <template #overlay>
       <div
-        class="w-full bg-white shadow-lg p-1.5 menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden w-[160px]"
+        class="w-full bg-white shadow-lg p-1.5 menu-filter-dropdown border-1 border-gray-200 rounded-lg overflow-hidden w-[160px]"
         data-testid="nc-height-menu"
       >
         <div class="flex flex-col w-full text-sm" @click.stop>

From 4bf264d6560af391631c6e4193779150b1e80a6e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:48 +0000
Subject: [PATCH 05/30] feat(nc-gui): update toolbar groupBy and sort menu
 dropdown with new design

---
 packages/nc-gui/assets/style.scss             | 62 +++++++++++--------
 .../smartsheet/toolbar/CreateGroupBy.vue      | 28 ++++++---
 .../smartsheet/toolbar/CreateSort.vue         | 30 ++++++---
 3 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index a9ed94e610..d4c893a484 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -37,7 +37,7 @@ body {
 }
 
 .rc-virtual-list-holder-inner {
-  @apply !px-1.5
+  @apply !px-1.5;
 }
 .ant-layout-header {
   height: var(--topbar-height) !important;
@@ -51,13 +51,17 @@ main {
   @apply m-0 h-full w-full bg-white;
 }
 
-
 .nc-input-md {
   @apply !rounded-lg !py-2 !px-3 mb-1;
 }
 
 .mobile {
-  .nc-scrollbar-md, .nc-scrollbar-lg, .nc-scrollbar-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg {
+  .nc-scrollbar-md,
+  .nc-scrollbar-lg,
+  .nc-scrollbar-x-md,
+  .nc-scrollbar-dark-md,
+  .nc-scrollbar-x-md-dark,
+  .nc-scrollbar-x-lg {
     &::-webkit-scrollbar {
       width: 0px;
     }
@@ -116,7 +120,6 @@ main {
   overflow-x: auto !important;
   scrollbar-width: thin !important;
 
-
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
@@ -131,7 +134,6 @@ main {
     -webkit-border-radius: 10px;
     border-radius: 10px;
 
-
     width: 4px;
     @apply bg-gray-200;
   }
@@ -145,7 +147,6 @@ main {
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
-
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
@@ -177,7 +178,6 @@ main {
   overflow-x: auto !important;
   scrollbar-width: thin !important;
 
-  
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
@@ -192,14 +192,11 @@ main {
     -webkit-border-radius: 10px;
     border-radius: 10px;
 
-
     width: 4px;
-    background-color: rgba(0, 0, 0, 0.3)
-
+    background-color: rgba(0, 0, 0, 0.3);
   }
   &::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(0, 0, 0, 0.4)
-
+    background-color: rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -220,7 +217,6 @@ main {
     -webkit-border-radius: 10px;
     border-radius: 10px;
 
-
     width: 8px;
     @apply bg-gray-200;
   }
@@ -255,11 +251,11 @@ a {
   .rc-virtual-list-scrollbar {
     @apply !w-1;
   }
-  
-  .rc-virtual-list-scrollbar-thumb{
+
+  .rc-virtual-list-scrollbar-thumb {
     @apply !bg-gray-200;
 
-    &:hover{
+    &:hover {
       @apply !bg-gray-300;
     }
   }
@@ -465,9 +461,9 @@ a {
 
 .ant-dropdown-menu-submenu {
   @apply !py-0;
-  
-  &.ant-dropdown-menu-submenu-popup{
-    @apply border-1 border-gray-200
+
+  &.ant-dropdown-menu-submenu-popup {
+    @apply border-1 border-gray-200;
   }
   .ant-dropdown-menu,
   .ant-menu {
@@ -545,11 +541,11 @@ a {
   @apply bg-gray-300 bg-opacity-20;
 }
 
-.ant-select-item-option:hover{
+.ant-select-item-option:hover {
   @apply !bg-gray-100;
 }
 
-.ant-select-item-option-selected{
+.ant-select-item-option-selected {
   @apply !bg-white;
 }
 /* Hide the element with id nc-selected-item-icon */
@@ -712,7 +708,8 @@ input[type='number'] {
   .nc-emoji {
     @apply xs:(text-lg);
   }
-  .material-symbols, .nc-icon {
+  .material-symbols,
+  .nc-icon {
     @apply !xs:(text-xl -mt-0.25);
   }
 
@@ -729,7 +726,6 @@ input[type='number'] {
   @apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
 }
 
-
 .nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
   @apply xs:(opacity-100 hover:bg-gray-50);
 
@@ -740,18 +736,18 @@ input[type='number'] {
 
 .ant-message-notice-content {
   @apply !rounded-md;
-  .ant-message-custom-content{
+  .ant-message-custom-content {
     @apply flex items-center;
   }
 }
 
-svg.nc-cell-icon, svg.nc-virtual-cell-icon {
+svg.nc-cell-icon,
+svg.nc-virtual-cell-icon {
   @apply w-1em h-1em flex-none;
   font-size: 1rem;
 }
 
-
-// For select type field list layout 
+// For select type field list layout
 .nc-field-layout-list {
   @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
 
@@ -786,3 +782,15 @@ svg.nc-cell-icon, svg.nc-virtual-cell-icon {
   }
 }
 
+.nc-toolbar-dropdown-search-field-input {
+  @apply !rounded-lg;
+
+  .nc-search-icon {
+    @apply text-gray-400;
+  }
+
+  &:hover .nc-search-icon,
+  &.ant-input-affix-wrapper-focused .nc-search-icon {
+    @apply text-gray-800;
+  }
+}
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
index f58b0aed5f..e07e746928 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
@@ -71,6 +71,7 @@ watch(
   () => {
     if (!isParentOpen.value) return
 
+    search.value = ''
     setTimeout(() => {
       inputRef.value?.focus()
     }, 100)
@@ -96,28 +97,41 @@ const onArrowUp = () => {
 
 <template>
   <div
-    class="flex flex-col w-full pt-4 pb-2 min-w-64 nc-group-by-create-modal"
+    class="flex flex-col w-full pt-2 w-80 nc-group-by-create-modal"
     @keydown.arrow-down.prevent="onArrowDown"
     @keydown.arrow-up.prevent="onArrowUp"
     @keydown.enter.prevent="onClick(options[activeFieldIndex])"
   >
-    <div class="flex pb-3 px-4 border-b-1 border-gray-100">
-      <input ref="inputRef" v-model="search" class="w-full focus:outline-none" :placeholder="$t('msg.selectFieldToGroup')" />
+    <div class="w-full pb-3 px-2" @click.stop>
+      <a-input
+        ref="inputRef"
+        v-model:value="search"
+        :placeholder="$t('msg.selectFieldToGroup')"
+        class="nc-toolbar-dropdown-search-field-input"
+      >
+        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
+      ></a-input>
     </div>
-    <div class="flex-col w-full max-h-100 max-w-76 nc-scrollbar-md !overflow-y-auto">
-      <div v-if="!options.length" class="flex text-gray-500 px-4 py-2.25">{{ $t('general.empty') }}</div>
+
+    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
+      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
+        <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+
+        {{ $t('title.noResultsMatchedYourSearch') }}
+      </div>
+
       <div
         v-for="(option, index) in options"
         :key="index"
         v-e="['c:group-by:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2.5 hover:bg-gray-100 cursor-pointer nc-group-by-column-search-item"
+        class="flex flex-row h-10 items-center gap-x-1.5 px-2 hover:bg-gray-100 cursor-pointer nc-group-by-column-search-item rounded-md"
         :class="{
           'bg-gray-100': activeFieldIndex === index,
         }"
         @click="onClick(option)"
       >
         <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate">
+        <NcTooltip class="truncate" show-on-truncate-only>
           <template #title> {{ option.title }}</template>
           <span>
             {{ option.title }}
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index e8111f44cb..b3584d2e5d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -68,6 +68,7 @@ watch(
   () => {
     if (!isParentOpen.value) return
 
+    search.value = ''
     setTimeout(() => {
       inputRef.value?.focus()
     }, 100)
@@ -93,21 +94,34 @@ const onArrowUp = () => {
 
 <template>
   <div
-    class="flex flex-col w-full pt-4 pb-2 min-w-64 nc-sort-create-modal"
+    class="flex flex-col w-full pt-2 w-80 nc-sort-create-modal"
     @keydown.arrow-down.prevent="onArrowDown"
     @keydown.arrow-up.prevent="onArrowUp"
     @keydown.enter.prevent="onClick(options[activeFieldIndex])"
   >
-    <div class="flex pb-3 px-4 border-b-1 border-gray-100">
-      <input ref="inputRef" v-model="search" class="w-full focus:outline-none" :placeholder="$t('msg.selectFieldToSort')" />
+    <div class="w-full pb-3 px-2" @click.stop>
+      <a-input
+        ref="inputRef"
+        v-model:value="search"
+        :placeholder="$t('msg.selectFieldToSort')"
+        class="nc-toolbar-dropdown-search-field-input"
+      >
+        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
+      ></a-input>
     </div>
-    <div class="flex-col w-full max-h-100 max-w-76 nc-scrollbar-md !overflow-y-auto">
-      <div v-if="!options.length" class="flex text-gray-500 px-4 py-2.25">{{ $t('general.empty') }}</div>
+
+    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
+      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
+        <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+
+        {{ $t('title.noResultsMatchedYourSearch') }}
+      </div>
+
       <div
         v-for="(option, index) in options"
         :key="index"
         v-e="['c:sort:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2.5 rounded-md m-1.5 hover:bg-gray-100 cursor-pointer nc-sort-column-search-item"
+        class="flex flex-row h-10 items-center gap-x-1.5 px-2 rounded-md hover:bg-gray-100 cursor-pointer nc-sort-column-search-item"
         :class="{
           'bg-gray-100': activeFieldIndex === index,
         }"
@@ -116,9 +130,9 @@ const onArrowUp = () => {
         <SmartsheetHeaderIcon :column="option" />
         <NcTooltip class="truncate" show-on-truncate-only>
           <template #title> {{ option.title }}</template>
-          <template #default>
+          <span>
             {{ option.title }}
-          </template>
+          </span>
         </NcTooltip>
       </div>
     </div>

From 7b32f6d7215dd92e6af80d90ba6361d665ba2eb5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:48 +0000
Subject: [PATCH 06/30] fix(nc-gui): remove display value field from fields
 menu in grid view only

---
 .../smartsheet/toolbar/FieldsMenu.vue         | 45 +++----------------
 1 file changed, 5 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 6026e67979..c22aa0ef98 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -349,7 +349,7 @@ useMenuCloseOnEsc(open)
     </div>
 
     <template #overlay>
-      <div class="py-2 bg-white w-80 rounded-2xl nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
+      <div class="pt-2 bg-white w-80 rounded-lg nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
         <div
           v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
           class="flex flex-col gap-y-2 px-2 mb-6"
@@ -371,7 +371,7 @@ useMenuCloseOnEsc(open)
             ref="fieldsMenuSearchRef"
             v-model:value="filterQuery"
             :placeholder="$t('placeholder.searchFields')"
-            class="!rounded-lg nc-fields-menu-search-field"
+            class="nc-toolbar-dropdown-search-field-input"
           >
             <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
           ></a-input>
@@ -385,7 +385,7 @@ useMenuCloseOnEsc(open)
           <div class="nc-fields-list">
             <div
               v-if="!fields?.filter((el) => el.title.toLowerCase().includes(filterQuery.toLowerCase())).length"
-              class="px-0.5 py-6 text-gray-500 flex flex-col items-center gap-6"
+              class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6"
             >
               <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
 
@@ -408,7 +408,7 @@ useMenuCloseOnEsc(open)
                   "
                   :key="field.id"
                   :data-testid="`nc-fields-menu-${field.title}`"
-                  class="pl-2 flex flex-row items-center rounded-lg hover:bg-gray-50"
+                  class="pl-2 flex flex-row items-center rounded-md hover:bg-gray-50"
                   @click.stop
                 >
                   <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
@@ -475,34 +475,10 @@ useMenuCloseOnEsc(open)
                   <div class="flex-1" />
                 </div>
               </template>
-              <template v-if="activeView?.type === ViewTypes.GRID" #header>
-                <div
-                  v-if="gridDisplayValueField && filteredFieldList[0].title.toLowerCase().includes(filterQuery.toLowerCase())"
-                  :key="`pv-${gridDisplayValueField.id}`"
-                  :class="{
-                    'rounded-t-lg': filteredFieldList.length > 1,
-                    'rounded-lg': filteredFieldList.length === 1,
-                  }"
-                  :data-testid="`nc-fields-menu-${gridDisplayValueField.title}`"
-                  class="pl-7.4 pr-2 py-2 flex flex-row items-center"
-                  @click.stop
-                >
-                  <component
-                    :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])"
-                    class="!w-3.5 !h-3.5 !text-gray-700"
-                  />
-                  <NcTooltip class="px-1 flex-1 truncate" show-on-truncate-only :disabled="isDragging">
-                    <template #title>{{ filteredFieldList[0].title }}</template>
-                    <template #default>{{ filteredFieldList[0].title }}</template>
-                  </NcTooltip>
-
-                  <NcSwitch :checked="true" :disabled="true" size="xsmall" />
-                </div>
-              </template>
             </Draggable>
           </div>
         </div>
-        <div v-if="!filterQuery" class="flex px-2 gap-2 pt-2 border-t-1 border-gray-200">
+        <div v-if="!filterQuery" class="flex px-2 gap-2 py-2 border-t-1 border-gray-200">
           <NcButton
             class="nc-fields-show-all-fields !text-gray-500 !w-1/2"
             size="small"
@@ -531,17 +507,6 @@ useMenuCloseOnEsc(open)
   @apply !min-w-0;
 }
 
-.nc-fields-menu-search-field {
-  .nc-search-icon {
-    @apply text-gray-400;
-  }
-
-  &:hover .nc-search-icon,
-  &.ant-input-affix-wrapper-focused .nc-search-icon {
-    @apply text-gray-800;
-  }
-}
-
 .nc-fields-menu-items-ghost {
   @apply bg-gray-50;
 }

From eb5edb23a7f28dde76d57011f76006070fa6142c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:48 +0000
Subject: [PATCH 07/30] fix(nc-gui): reduce gap between fields

---
 packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index c22aa0ef98..ffba0e774a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -414,7 +414,7 @@ useMenuCloseOnEsc(open)
                   <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
                   <div
                     v-e="['a:fields:show-hide']"
-                    class="flex flex-row items-center w-full truncate cursor-pointer ml-1 py-1.5 pr-2"
+                    class="flex flex-row items-center w-full truncate cursor-pointer ml-1 py-[5px] pr-2"
                     @click="
                       () => {
                         field.show = !field.show

From ca9ba8b430b00f211479471726db0e81cbd4802a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:48 +0000
Subject: [PATCH 08/30] fix(nc-gui): reduce groupby & sort toolbar menu
 dropdown size & clear field menu search on open dropdown

---
 .../components/smartsheet/toolbar/CreateGroupBy.vue   |  2 +-
 .../components/smartsheet/toolbar/CreateSort.vue      |  2 +-
 .../components/smartsheet/toolbar/FieldsMenu.vue      | 11 ++++++-----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
index e07e746928..cc4a311cff 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
@@ -97,7 +97,7 @@ const onArrowUp = () => {
 
 <template>
   <div
-    class="flex flex-col w-full pt-2 w-80 nc-group-by-create-modal"
+    class="flex flex-col w-full pt-2 w-64 nc-group-by-create-modal"
     @keydown.arrow-down.prevent="onArrowDown"
     @keydown.arrow-up.prevent="onArrowUp"
     @keydown.enter.prevent="onClick(options[activeFieldIndex])"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index b3584d2e5d..ab2361eed4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -94,7 +94,7 @@ const onArrowUp = () => {
 
 <template>
   <div
-    class="flex flex-col w-full pt-2 w-80 nc-sort-create-modal"
+    class="flex flex-col w-full pt-2 w-64 nc-sort-create-modal"
     @keydown.arrow-down.prevent="onArrowDown"
     @keydown.arrow-up.prevent="onArrowUp"
     @keydown.enter.prevent="onClick(options[activeFieldIndex])"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index ffba0e774a..304beb0b13 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -305,11 +305,12 @@ const isDragging = ref<boolean>(false)
 const fieldsMenuSearchRef = ref<HTMLInputElement>()
 
 watch(open, (value) => {
-  if (value) {
-    setTimeout(() => {
-      fieldsMenuSearchRef.value?.focus()
-    }, 100)
-  }
+  if (!value) return
+
+  filterQuery.value = ''
+  setTimeout(() => {
+    fieldsMenuSearchRef.value?.focus()
+  }, 100)
 })
 
 useMenuCloseOnEsc(open)

From 74ff3158a151656e56ec029a42d8e947036272b6 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 09/30] fix(nc-gui): small changes

---
 .../nc-gui/components/smartsheet/toolbar/FieldsMenu.vue   | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 304beb0b13..8492fb271c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -378,10 +378,6 @@ useMenuCloseOnEsc(open)
           ></a-input>
         </div>
 
-        <div v-if="!filterQuery" class="px-2">
-          <div class="pt-0.25 w-full bg-gray-50"></div>
-        </div>
-
         <div class="flex flex-col mt-2 pb-2 nc-scrollbar-thin max-h-[47vh] px-2">
           <div class="nc-fields-list">
             <div
@@ -481,7 +477,7 @@ useMenuCloseOnEsc(open)
         </div>
         <div v-if="!filterQuery" class="flex px-2 gap-2 py-2 border-t-1 border-gray-200">
           <NcButton
-            class="nc-fields-show-all-fields !text-gray-500 !w-1/2"
+            class="nc-fields-show-all-fields !text-gray-500 !w-1/2 !text-xs"
             size="small"
             type="ghost"
             @click="showAllColumns = !showAllColumns"
@@ -490,7 +486,7 @@ useMenuCloseOnEsc(open)
           </NcButton>
           <NcButton
             v-if="!isPublic"
-            class="nc-fields-show-system-fields !text-gray-500 !w-1/2"
+            class="nc-fields-show-system-fields !text-gray-500 !w-1/2 !text-xs"
             size="small"
             type="ghost"
             @click="showSystemField = !showSystemField"

From b6bb605f9911575f71f3c91da60dcf0b54c76371 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 10/30] fix(nc-gui): field menu search field issue on other
 than grid view

---
 packages/nc-gui/composables/useViewColumns.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index fe1dc9cda7..6664b1fe28 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -220,7 +220,12 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
     const filteredFieldList = computed(() => {
       return (
         fields.value?.filter((field: Field) => {
-          if (metaColumnById?.value?.[field.fk_column_id!]?.pv) return true
+          if (
+            metaColumnById?.value?.[field.fk_column_id!]?.pv &&
+            (!filterQuery.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase()))
+          ) {
+            return true
+          }
 
           // hide system columns if not enabled
           if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {

From 272c54a05a624f4ac33c5fb2815721f96ea5fd47 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 11/30] fix(nc-gui): add alt attribute for image

---
 .../nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue  | 6 +++++-
 .../nc-gui/components/smartsheet/toolbar/CreateSort.vue     | 6 +++++-
 .../nc-gui/components/smartsheet/toolbar/FieldsMenu.vue     | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
index cc4a311cff..11c828d8ce 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
@@ -115,7 +115,11 @@ const onArrowUp = () => {
 
     <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
       <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
-        <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+        <img
+          src="~assets/img/placeholder/no-search-result-found.png"
+          class="!w-[164px] flex-none"
+          alt="No search results found"
+        />
 
         {{ $t('title.noResultsMatchedYourSearch') }}
       </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index ab2361eed4..485ecf2b74 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -112,7 +112,11 @@ const onArrowUp = () => {
 
     <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
       <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
-        <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+        <img
+          src="~assets/img/placeholder/no-search-result-found.png"
+          class="!w-[164px] flex-none"
+          alt="No search results found"
+        />
 
         {{ $t('title.noResultsMatchedYourSearch') }}
       </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 8492fb271c..ebefc6f286 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -384,7 +384,11 @@ useMenuCloseOnEsc(open)
               v-if="!fields?.filter((el) => el.title.toLowerCase().includes(filterQuery.toLowerCase())).length"
               class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6"
             >
-              <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+              <img
+                src="~assets/img/placeholder/no-search-result-found.png"
+                class="!w-[164px] flex-none"
+                alt="No search results found"
+              />
 
               {{ $t('title.noResultsMatchedYourSearch') }}
             </div>

From 1f57c172fd6136330ed4cd9acbe7672a294fd50c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 12/30] feat(nc-gui): create generic component to display field
 with search input

---
 .../toolbar/FieldListWithSearch.vue           | 181 ++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
new file mode 100644
index 0000000000..975f065e1c
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import type { ColumnType } from 'nocodb-sdk'
+
+const props = defineProps<{
+  // As we need to focus search box when the parent is opened
+  isParentOpen: boolean
+  toolbarMenu: 'groupBy' | 'sort' | 'globalSearch'
+  searchInputPlaceholder?: string
+  selectedOptionId?: string
+  options: ColumnType[]
+  showSelectedOption?: boolean
+}>()
+
+const emits = defineEmits(['selected'])
+
+const { isParentOpen, toolbarMenu, searchInputPlaceholder, selectedOptionId, options, showSelectedOption } = toRefs(props)
+
+const searchQuery = ref('')
+
+const filteredOptions = computed(
+  () => options.value?.filter((c: ColumnType) => c.title?.toLowerCase().includes(searchQuery.value.toLowerCase())) ?? [],
+)
+
+const inputRef = ref()
+
+const activeFieldIndex = ref(-1)
+
+const configByToolbarMenu = computed(() => {
+  switch (toolbarMenu.value) {
+    case 'groupBy':
+      return {
+        selectOptionEvent: ['c:group-by:add:column:select'],
+        optionClassName: 'nc-group-by-column-search-item',
+      }
+    case 'sort':
+      return {
+        selectOptionEvent: ['c:sort:add:column:select'],
+        optionClassName: 'nc-sort-column-search-item',
+      }
+    case 'globalSearch':
+      return {
+        selectOptionEvent: ['c:search:field:select'],
+        optionClassName: '',
+      }
+    default:
+      return {
+        selectOptionEvent: undefined,
+        optionClassName: '',
+      }
+  }
+})
+
+const onClick = (column: ColumnType) => {
+  if (!column) return
+
+  emits('selected', column)
+}
+
+const handleAutoScrollOption = () => {
+  const option = document.querySelector('.nc-field-list-option-active')
+
+  if (option) {
+    setTimeout(() => {
+      option?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }, 50)
+  }
+}
+
+const onArrowDown = () => {
+  activeFieldIndex.value = Math.min(activeFieldIndex.value + 1, filteredOptions.value.length - 1)
+  handleAutoScrollOption()
+}
+
+const onArrowUp = () => {
+  activeFieldIndex.value = Math.max(activeFieldIndex.value - 1, 0)
+  handleAutoScrollOption()
+}
+
+const handleKeydownEnter = (e: KeyboardEvent) => {
+  if (!filteredOptions.value[activeFieldIndex.value]) return
+
+  onClick(filteredOptions.value[activeFieldIndex.value])
+}
+
+onMounted(() => {
+  searchQuery.value = ''
+  activeFieldIndex.value = -1
+})
+
+watch(
+  isParentOpen,
+  () => {
+    if (!isParentOpen.value) return
+
+    searchQuery.value = ''
+    setTimeout(() => {
+      inputRef.value?.focus()
+    }, 100)
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="flex flex-col pt-2 w-64"
+    @keydown.arrow-down.prevent="onArrowDown"
+    @keydown.arrow-up.prevent="onArrowUp"
+    @keydown.enter.prevent="onClick(filteredOptions[activeFieldIndex])"
+  >
+    <div class="w-full pb-3 px-2" @click.stop>
+      <a-input
+        ref="inputRef"
+        v-model:value="searchQuery"
+        :placeholder="searchInputPlaceholder || $t('placeholder.searchFields')"
+        class="nc-toolbar-dropdown-search-field-input"
+        @keydown.enter.stop="handleKeydownEnter"
+      >
+        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
+      ></a-input>
+    </div>
+
+    <div class="nc-field-list-wrapper flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
+      <div v-if="!filteredOptions.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
+        <img
+          src="~assets/img/placeholder/no-search-result-found.png"
+          class="!w-[164px] flex-none"
+          alt="No search results found"
+        />
+
+        {{ $t('title.noResultsMatchedYourSearch') }}
+      </div>
+
+      <div
+        v-for="(option, index) in filteredOptions"
+        :key="index"
+        v-e="configByToolbarMenu.selectOptionEvent"
+        class="flex w-full h-10 items-center justify-between px-2 hover:bg-gray-100 cursor-pointer rounded-md"
+        :class="[
+          `${configByToolbarMenu.optionClassName}`,
+          `nc-field-list-option-${index}`,
+          {
+            'bg-gray-100 nc-field-list-option-active': activeFieldIndex === index,
+          },
+        ]"
+        @click="onClick(option)"
+      >
+        <div
+          class="flex items-center gap-x-1.5"
+          :class="{
+            'max-w-[calc(100%_-_28px)]': showSelectedOption,
+            'max-w-full': !showSelectedOption,
+          }"
+        >
+          <SmartsheetHeaderIcon :column="option" />
+          <NcTooltip class="truncate" show-on-truncate-only>
+            <template #title> {{ option.title }}</template>
+            <span>
+              {{ option.title }}
+            </span>
+          </NcTooltip>
+        </div>
+
+        <GeneralIcon
+          v-if="showSelectedOption && option.id === selectedOptionId"
+          icon="check"
+          id="nc-selected-item-icon"
+          class="flex-none text-primary w-4 h-4"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-field-list-wrapper {
+  max-height: min(400px, calc(100vh - 120px));
+}
+</style>

From 926f1bb17f0892b4571685b4e8e54533dfe1c516 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 13/30] fix(nc-gui): update groupBy, sort and global search
 dropdown

---
 .../smartsheet/toolbar/CreateGroupBy.vue      | 63 ++----------
 .../smartsheet/toolbar/CreateSort.vue         | 63 ++----------
 .../smartsheet/toolbar/SearchData.vue         | 97 ++++++++-----------
 3 files changed, 54 insertions(+), 169 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
index 11c828d8ce..24c2b24d97 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
@@ -85,63 +85,16 @@ onMounted(() => {
   search.value = ''
   activeFieldIndex.value = -1
 })
-
-const onArrowDown = () => {
-  activeFieldIndex.value = Math.min(activeFieldIndex.value + 1, options.value.length - 1)
-}
-
-const onArrowUp = () => {
-  activeFieldIndex.value = Math.max(activeFieldIndex.value - 1, 0)
-}
 </script>
 
 <template>
-  <div
-    class="flex flex-col w-full pt-2 w-64 nc-group-by-create-modal"
-    @keydown.arrow-down.prevent="onArrowDown"
-    @keydown.arrow-up.prevent="onArrowUp"
-    @keydown.enter.prevent="onClick(options[activeFieldIndex])"
-  >
-    <div class="w-full pb-3 px-2" @click.stop>
-      <a-input
-        ref="inputRef"
-        v-model:value="search"
-        :placeholder="$t('msg.selectFieldToGroup')"
-        class="nc-toolbar-dropdown-search-field-input"
-      >
-        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
-      ></a-input>
-    </div>
-
-    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
-      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
-        <img
-          src="~assets/img/placeholder/no-search-result-found.png"
-          class="!w-[164px] flex-none"
-          alt="No search results found"
-        />
-
-        {{ $t('title.noResultsMatchedYourSearch') }}
-      </div>
-
-      <div
-        v-for="(option, index) in options"
-        :key="index"
-        v-e="['c:group-by:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2 hover:bg-gray-100 cursor-pointer nc-group-by-column-search-item rounded-md"
-        :class="{
-          'bg-gray-100': activeFieldIndex === index,
-        }"
-        @click="onClick(option)"
-      >
-        <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate" show-on-truncate-only>
-          <template #title> {{ option.title }}</template>
-          <span>
-            {{ option.title }}
-          </span>
-        </NcTooltip>
-      </div>
-    </div>
+  <div class="nc-group-by-create-modal">
+    <SmartsheetToolbarFieldListWithSearch
+      :is-parent-open="isParentOpen"
+      :search-input-placeholder="$t('msg.selectFieldToGroup')"
+      :options="options"
+      toolbar-menu="groupBy"
+      @selected="onClick"
+    />
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index 485ecf2b74..58dfc9c2e3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -82,63 +82,16 @@ onMounted(() => {
   search.value = ''
   activeFieldIndex.value = -1
 })
-
-const onArrowDown = () => {
-  activeFieldIndex.value = Math.min(activeFieldIndex.value + 1, options.value.length - 1)
-}
-
-const onArrowUp = () => {
-  activeFieldIndex.value = Math.max(activeFieldIndex.value - 1, 0)
-}
 </script>
 
 <template>
-  <div
-    class="flex flex-col w-full pt-2 w-64 nc-sort-create-modal"
-    @keydown.arrow-down.prevent="onArrowDown"
-    @keydown.arrow-up.prevent="onArrowUp"
-    @keydown.enter.prevent="onClick(options[activeFieldIndex])"
-  >
-    <div class="w-full pb-3 px-2" @click.stop>
-      <a-input
-        ref="inputRef"
-        v-model:value="search"
-        :placeholder="$t('msg.selectFieldToSort')"
-        class="nc-toolbar-dropdown-search-field-input"
-      >
-        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
-      ></a-input>
-    </div>
-
-    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
-      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
-        <img
-          src="~assets/img/placeholder/no-search-result-found.png"
-          class="!w-[164px] flex-none"
-          alt="No search results found"
-        />
-
-        {{ $t('title.noResultsMatchedYourSearch') }}
-      </div>
-
-      <div
-        v-for="(option, index) in options"
-        :key="index"
-        v-e="['c:sort:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2 rounded-md hover:bg-gray-100 cursor-pointer nc-sort-column-search-item"
-        :class="{
-          'bg-gray-100': activeFieldIndex === index,
-        }"
-        @click="onClick(option)"
-      >
-        <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate" show-on-truncate-only>
-          <template #title> {{ option.title }}</template>
-          <span>
-            {{ option.title }}
-          </span>
-        </NcTooltip>
-      </div>
-    </div>
+  <div class="nc-sort-create-modal">
+    <SmartsheetToolbarFieldListWithSearch
+      :is-parent-open="isParentOpen"
+      :search-input-placeholder="$t('msg.selectFieldToSort')"
+      :options="options"
+      toolbar-menu="groupBy"
+      @selected="onClick"
+    />
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 657ab38b92..9d31a459b4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
-import type { TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   ReloadViewDataHookInj,
@@ -27,19 +27,8 @@ const { isMobileMode } = useGlobal()
 
 const isFocused = ref(false)
 
-const searchDropdown = ref(null)
-
-onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
-
-const columns = computed(() =>
-  (meta.value as TableType)?.columns
-    ?.filter((column) => !isSystemColumn(column) && column?.uidt !== UITypes.Links)
-    ?.map((column) => ({
-      value: column.id,
-      label: column.title,
-      column,
-      primaryValue: column.pv,
-    })),
+const columns = computed(
+  () => (meta.value as TableType)?.columns?.filter((column) => !isSystemColumn(column) && column?.uidt !== UITypes.Links) ?? [],
 )
 
 watch(
@@ -59,10 +48,12 @@ function onPressEnter() {
 const displayColumnLabel = computed(() => {
   if (search.value.field) {
     // use search field label if specified
-    return columns.value?.find((column) => column.value === search.value.field)?.label
+    return columns.value?.find((column) => column.id === search.value.field)?.title
   }
   // use primary value label by default
-  return columns.value?.find((column) => column.primaryValue)?.label
+  const pvColumn = columns.value?.find((column) => column.pv)
+  search.value.field = pvColumn?.id as string
+  return pvColumn?.title
 })
 
 watchDebounced(
@@ -76,11 +67,10 @@ watchDebounced(
   },
 )
 
-watch(columns, () => {
-  if (columns.value?.length) {
-    search.value.field = columns.value[0].value as string
-  }
-})
+const onSelectOption = (column: ColumnType) => {
+  search.value.field = column.id as string
+  isDropdownOpen.value = false
+}
 </script>
 
 <template>
@@ -88,46 +78,35 @@ watch(columns, () => {
     class="flex flex-row border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden"
     :class="{ 'border-primary': search.query.length !== 0 || isFocused }"
   >
-    <div
-      ref="searchDropdown"
-      class="flex items-center group relative px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
-      :class="{ 'bg-gray-50 ': isDropdownOpen }"
-      @click="isDropdownOpen = !isDropdownOpen"
+    <NcDropdown
+      v-model:visible="isDropdownOpen"
+      :trigger="['click']"
+      overlay-class-name="nc-dropdown-toolbar-search-field-option"
     >
-      <GeneralIcon icon="search" class="ml-1 mr-2 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
-      <div v-if="!isMobileMode" class="w-16 text-[0.75rem] font-medium text-gray-400 truncate">
-        {{ displayColumnLabel }}
-      </div>
-      <div class="xs:(text-gray-600) group-hover:text-gray-700 sm:(text-gray-400)">
-        <component :is="iconMap.arrowDown" class="text-sm text-inherit" />
-      </div>
-      <a-select
-        v-model:value="search.field"
-        v-e="['c:search:field:select:open']"
-        :open="isDropdownOpen"
-        size="small"
-        :dropdown-match-select-width="false"
-        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option max-w-64"
-        class="py-1 !absolute top-2 left-0 w-full h-full z-10 text-xs opacity-0"
-        @change="onPressEnter"
+      <div
+        class="flex items-center group relative px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
+        :class="{ 'bg-gray-50 ': isDropdownOpen }"
+        @click="isDropdownOpen = !isDropdownOpen"
       >
-        <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
-          <div class="text-sm flex items-center gap-2">
-            <SmartsheetHeaderIcon :column="op.column" />
-            <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>
-              <template #title>{{ op.label }}</template>
-              {{ op.label }}
-            </NcTooltip>
-            <component
-              :is="iconMap.check"
-              v-if="search.field === op.value"
-              id="nc-selected-item-icon"
-              class="text-primary w-4 h-4"
-            />
-          </div>
-        </a-select-option>
-      </a-select>
-    </div>
+        <GeneralIcon icon="search" class="ml-1 mr-2 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
+        <div v-if="!isMobileMode" class="w-16 text-xs font-medium text-gray-400 truncate">
+          {{ displayColumnLabel }}
+        </div>
+        <div class="xs:(text-gray-600) group-hover:text-gray-700 sm:(text-gray-400)">
+          <component :is="iconMap.arrowDown" class="text-sm text-inherit" />
+        </div>
+      </div>
+      <template #overlay>
+        <SmartsheetToolbarFieldListWithSearch
+          :is-parent-open="isDropdownOpen"
+          :selected-option-id="search.field"
+          show-selected-option
+          :options="columns"
+          toolbar-menu="globalSearch"
+          @selected="onSelectOption"
+        />
+      </template>
+    </NcDropdown>
 
     <a-input
       v-model:value="search.query"

From 8f4daa7c5c647ece1032d550adf08c059ae33aa1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 14/30] chore(nc-gui): lint

---
 .../components/smartsheet/toolbar/FieldListWithSearch.vue    | 2 +-
 packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue | 2 +-
 .../nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue  | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index 975f065e1c..ddf21c79e5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -165,8 +165,8 @@ watch(
 
         <GeneralIcon
           v-if="showSelectedOption && option.id === selectedOptionId"
-          icon="check"
           id="nc-selected-item-icon"
+          icon="check"
           class="flex-none text-primary w-4 h-4"
         />
       </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index ebefc6f286..cdb6b44a3b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -468,8 +468,8 @@ useMenuCloseOnEsc(open)
                     <NcSwitch
                       :checked="field.show"
                       :disabled="field.isViewEssentialField"
-                      @change="$t('a:fields:show-hide')"
                       size="xsmall"
+                      @change="$t('a:fields:show-hide')"
                     />
                   </div>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index dbba7ac319..262310b531 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -153,7 +153,10 @@ const onDelete = async () => {
   >
     <NcTooltip>
       <template #title> {{ $t('labels.clickToCopyViewID') }} </template>
-      <div class="flex items-center justify-between p-2 mx-1.5 rounded-md cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
+      <div
+        class="flex items-center justify-between p-2 mx-1.5 rounded-md cursor-pointer hover:bg-gray-100 group"
+        @click="onViewIdCopy"
+      >
         <div class="flex text-xs font-bold text-gray-500 ml-1">
           {{
             $t('labels.viewIdColon', {

From 55fd0a740a2e49163c8558cf20107678d4a5ad8d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 15/30] fix(nc-gui): add support to search and press enter to
 select first field from field list

---
 .../smartsheet/toolbar/FieldListWithSearch.vue         |  9 ++++++---
 .../components/smartsheet/toolbar/SearchData.vue       | 10 +++-------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index ddf21c79e5..a2c7b589fb 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -77,9 +77,11 @@ const onArrowUp = () => {
 }
 
 const handleKeydownEnter = (e: KeyboardEvent) => {
-  if (!filteredOptions.value[activeFieldIndex.value]) return
-
-  onClick(filteredOptions.value[activeFieldIndex.value])
+  if (filteredOptions.value[activeFieldIndex.value]) {
+    onClick(filteredOptions.value[activeFieldIndex.value])
+  } else if (filteredOptions.value[0]) {
+    onClick(filteredOptions.value[activeFieldIndex.value])
+  }
 }
 
 onMounted(() => {
@@ -117,6 +119,7 @@ watch(
         :placeholder="searchInputPlaceholder || $t('placeholder.searchFields')"
         class="nc-toolbar-dropdown-search-field-input"
         @keydown.enter.stop="handleKeydownEnter"
+        @change="activeFieldIndex = 0"
       >
         <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
       ></a-input>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 9d31a459b4..c468e80e40 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -25,8 +25,6 @@ const isDropdownOpen = ref(false)
 
 const { isMobileMode } = useGlobal()
 
-const isFocused = ref(false)
-
 const columns = computed(
   () => (meta.value as TableType)?.columns?.filter((column) => !isSystemColumn(column) && column?.uidt !== UITypes.Links) ?? [],
 )
@@ -75,8 +73,8 @@ const onSelectOption = (column: ColumnType) => {
 
 <template>
   <div
-    class="flex flex-row border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden"
-    :class="{ 'border-primary': search.query.length !== 0 || isFocused }"
+    class="flex flex-row border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden focus-within:border-primary"
+    :class="{ 'border-primary': search.query.length !== 0 }"
   >
     <NcDropdown
       v-model:visible="isDropdownOpen"
@@ -84,7 +82,7 @@ const onSelectOption = (column: ColumnType) => {
       overlay-class-name="nc-dropdown-toolbar-search-field-option"
     >
       <div
-        class="flex items-center group relative px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
+        class="flex items-center group px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
         :class="{ 'bg-gray-50 ': isDropdownOpen }"
         @click="isDropdownOpen = !isDropdownOpen"
       >
@@ -116,8 +114,6 @@ const onSelectOption = (column: ColumnType) => {
       :bordered="false"
       data-testid="search-data-input"
       @press-enter="onPressEnter"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
     >
     </a-input>
   </div>

From 268a0f984f78bc3dfcbf3162a012e01ab4ea286b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:49 +0000
Subject: [PATCH 16/30] chore(nc-gui): lint

---
 .../components/smartsheet/toolbar/FieldListWithSearch.vue       | 2 +-
 packages/nc-gui/components/smartsheet/toolbar/SearchData.vue    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index a2c7b589fb..d4cb245589 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -76,7 +76,7 @@ const onArrowUp = () => {
   handleAutoScrollOption()
 }
 
-const handleKeydownEnter = (e: KeyboardEvent) => {
+const handleKeydownEnter = () => {
   if (filteredOptions.value[activeFieldIndex.value]) {
     onClick(filteredOptions.value[activeFieldIndex.value])
   } else if (filteredOptions.value[0]) {
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index c468e80e40..dccfe83b9a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -7,7 +7,6 @@ import {
   computed,
   iconMap,
   inject,
-  onClickOutside,
   ref,
   useFieldQuery,
   useSmartsheetStoreOrThrow,

From 8089dc9c6152dca8acdd11f3aa98ea51abbdae69 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:50 +0000
Subject: [PATCH 17/30] fix(nc-gui): add outline for switch btn on focus
 visible

---
 packages/nc-gui/assets/style.scss              | 6 ++++++
 packages/nc-gui/components/smartsheet/Form.vue | 7 -------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index d4c893a484..718be11a0b 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -794,3 +794,9 @@ svg.nc-virtual-cell-icon {
     @apply text-gray-800;
   }
 }
+
+// switch - on tab focus show outline
+.ant-switch:focus-visible,
+.ant-switch-checked:focus-visible {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
+}
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 52d029c9f9..f6688eff93 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -2028,13 +2028,6 @@ useEventListener(
     }
   }
 }
-
-.nc-form-wrapper {
-  .ant-switch:focus-visible,
-  .ant-switch-checked:focus-visible {
-    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
-  }
-}
 </style>
 
 <style lang="scss">

From 1443cd656d76db8110d0ad1733adfe19fbff97c1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:50 +0000
Subject: [PATCH 18/30] fix(nc-gui): remove bottom border from field menu

---
 .../components/smartsheet/toolbar/FieldsMenu.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index cdb6b44a3b..fe7a9d9ad4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -479,18 +479,13 @@ useMenuCloseOnEsc(open)
             </Draggable>
           </div>
         </div>
-        <div v-if="!filterQuery" class="flex px-2 gap-2 py-2 border-t-1 border-gray-200">
-          <NcButton
-            class="nc-fields-show-all-fields !text-gray-500 !w-1/2 !text-xs"
-            size="small"
-            type="ghost"
-            @click="showAllColumns = !showAllColumns"
-          >
+        <div v-if="!filterQuery" class="flex px-2 gap-2 py-2">
+          <NcButton class="nc-fields-show-all-fields" size="small" type="ghost" @click="showAllColumns = !showAllColumns">
             {{ showAllColumns ? 'Hide all' : 'Show all' }} fields
           </NcButton>
           <NcButton
             v-if="!isPublic"
-            class="nc-fields-show-system-fields !text-gray-500 !w-1/2 !text-xs"
+            class="nc-fields-show-system-fields"
             size="small"
             type="ghost"
             @click="showSystemField = !showSystemField"
@@ -511,4 +506,9 @@ useMenuCloseOnEsc(open)
 .nc-fields-menu-items-ghost {
   @apply bg-gray-50;
 }
+
+.nc-fields-show-all-fields,
+.nc-fields-show-system-fields {
+  @apply !text-xs !w-1/2 !text-gray-500 !border-none bg-gray-100 hover:(!text-gray-600 bg-gray-200);
+}
 </style>

From af4c98b928de0291b6343bc90a420ba1e57a94b7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:50 +0000
Subject: [PATCH 19/30] fix(nc-gui): group, sort, search menu field list
 padding between fields

---
 .../components/smartsheet/toolbar/FieldListWithSearch.vue   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index d4cb245589..c9b3ce096a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -112,7 +112,7 @@ watch(
     @keydown.arrow-up.prevent="onArrowUp"
     @keydown.enter.prevent="onClick(filteredOptions[activeFieldIndex])"
   >
-    <div class="w-full pb-3 px-2" @click.stop>
+    <div class="w-full pb-2 px-2" @click.stop>
       <a-input
         ref="inputRef"
         v-model:value="searchQuery"
@@ -140,7 +140,7 @@ watch(
         v-for="(option, index) in filteredOptions"
         :key="index"
         v-e="configByToolbarMenu.selectOptionEvent"
-        class="flex w-full h-10 items-center justify-between px-2 hover:bg-gray-100 cursor-pointer rounded-md"
+        class="flex w-full py-[5px] items-center justify-between px-2 hover:bg-gray-100 cursor-pointer rounded-md"
         :class="[
           `${configByToolbarMenu.optionClassName}`,
           `nc-field-list-option-${index}`,
@@ -157,7 +157,7 @@ watch(
             'max-w-full': !showSelectedOption,
           }"
         >
-          <SmartsheetHeaderIcon :column="option" />
+          <SmartsheetHeaderIcon :column="option" class="!w-3.5 !h-3.5 !text-gray-700" />
           <NcTooltip class="truncate" show-on-truncate-only>
             <template #title> {{ option.title }}</template>
             <span>

From 425393da8ce4c8c7541f79f8a40b73b7a0a9c026 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:50 +0000
Subject: [PATCH 20/30] fix(nc-gui): select input dropdown tick mark always to
 the right

---
 packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue | 2 +-
 .../nc-gui/components/smartsheet/toolbar/SortListMenu.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index e704057798..1dde906677 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -284,7 +284,7 @@ watch(meta, async () => {
                 :key="j"
                 :value="option.value"
               >
-                <div class="flex items-center justify-between gap-2">
+                <div class="w-full flex items-center justify-between gap-2">
                   <div class="truncate flex-1">{{ option.text }}</div>
                   <component
                     :is="iconMap.check"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 27d43d10e2..5af98027ac 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -160,7 +160,7 @@ onMounted(() => {
               v-model:value="sort.direction"
               class="shrink grow-0 nc-sort-dir-select"
               :label="$t('labels.operation')"
-              dropdown-class-name="sort-dir-dropdown nc-dropdown-sort-dir"
+              dropdown-class-name="sort-dir-dropdown nc-dropdown-sort-dir !rounded-lg"
               @click.stop
               @select="saveOrUpdate(sort, i)"
             >
@@ -170,7 +170,7 @@ onMounted(() => {
                 v-e="['c:sort:operation:select']"
                 :value="option.value"
               >
-                <div class="flex items-center justify-between gap-2">
+                <div class="w-full flex items-center justify-between gap-2">
                   <div class="truncate flex-1">{{ option.text }}</div>
                   <component
                     :is="iconMap.check"

From 84c84f713b3fcef609c1cb13d63d2afecf08acce Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:50 +0000
Subject: [PATCH 21/30] fix(nc-gui): select input dropdown border radius should
 be same in all the places

---
 packages/nc-gui/components/nc/Select.vue                     | 4 ++--
 packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index 1335ddd4d5..bd109bdcf2 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -106,7 +106,7 @@ const onChange = (value: string) => {
 }
 
 .nc-select-dropdown {
-  @apply !rounded-xl py-1.5;
+  @apply !rounded-lg py-1.5;
 
   .rc-virtual-list-holder {
     overflow-y: auto;
@@ -129,7 +129,7 @@ const onChange = (value: string) => {
     }
     &::-webkit-scrollbar-thumb {
       width: 4px;
-      @apply bg-gray-300;
+      @apply bg-gray-300 rounded-md;
     }
     &::-webkit-scrollbar-thumb:hover {
       @apply bg-gray-400;
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index fe7a9d9ad4..888cd068ea 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -409,7 +409,7 @@ useMenuCloseOnEsc(open)
                   "
                   :key="field.id"
                   :data-testid="`nc-fields-menu-${field.title}`"
-                  class="pl-2 flex flex-row items-center rounded-md hover:bg-gray-50"
+                  class="pl-2 flex flex-row items-center rounded-md hover:bg-gray-100"
                   @click.stop
                 >
                   <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />

From 5214d1ec50ca4c1d96a12c8be17569d1501e5fa5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:50 +0000
Subject: [PATCH 22/30] fix(nc-gui): update toolbar field list component props

---
 packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index 58dfc9c2e3..adb9077939 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -90,7 +90,7 @@ onMounted(() => {
       :is-parent-open="isParentOpen"
       :search-input-placeholder="$t('msg.selectFieldToSort')"
       :options="options"
-      toolbar-menu="groupBy"
+      toolbar-menu="sort"
       @selected="onClick"
     />
   </div>

From d06a737847a8c4134e7871e4d1d093a5f0d1ceab Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:50 +0000
Subject: [PATCH 23/30] fix(test): groupBy test fail issue

---
 tests/playwright/pages/Dashboard/common/Toolbar/Groupby.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/Groupby.ts b/tests/playwright/pages/Dashboard/common/Toolbar/Groupby.ts
index 10d48b34be..e6e7f73e55 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/Groupby.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/Groupby.ts
@@ -93,14 +93,14 @@ export class ToolbarGroupByPage extends BasePage {
 
     await this.rootPage
       .locator('.nc-group-by-create-modal')
-      .locator('.nc-group-by-column-search-item >> div', { hasText: regexTitle })
+      .locator('.nc-group-by-column-search-item', { hasText: regexTitle })
       .scrollIntoViewIfNeeded();
 
     // select column
     const selectColumn = async () =>
       await this.rootPage
         .locator('.nc-group-by-create-modal')
-        .locator('.nc-group-by-column-search-item  >> div', { hasText: regexTitle })
+        .locator('.nc-group-by-column-search-item', { hasText: regexTitle })
         .click({ force: true });
 
     await this.waitForResponse({

From b29c0b9cfbdcc27bda4d67b50b63ff06ad2966c3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:51 +0000
Subject: [PATCH 24/30] fix(nc-gui): mark icons in grey from tookbar menu
 dropdown

---
 .../smartsheet/toolbar/FieldListAutoCompleteDropdown.vue        | 2 +-
 .../components/smartsheet/toolbar/FieldListWithSearch.vue       | 2 +-
 packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 48afcc01f1..ddbee528dd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -95,7 +95,7 @@ if (!localValue.value && allowEmpty !== true) {
     <a-select-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
       <div class="flex items-center w-full justify-between w-full gap-2 max-w-50">
         <div class="flex gap-1 flex-1 items-center truncate items-center h-full">
-          <component :is="option.icon" class="min-w-5 !mx-0" />
+          <component :is="option.icon" class="min-w-5 !mx-0 !text-gray-500" />
           <NcTooltip
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             class="max-w-[15rem] truncate select-none"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index c9b3ce096a..0d026a7e47 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -157,7 +157,7 @@ watch(
             'max-w-full': !showSelectedOption,
           }"
         >
-          <SmartsheetHeaderIcon :column="option" class="!w-3.5 !h-3.5 !text-gray-700" />
+          <SmartsheetHeaderIcon :column="option" class="!w-3.5 !h-3.5 !text-gray-500" />
           <NcTooltip class="truncate" show-on-truncate-only>
             <template #title> {{ option.title }}</template>
             <span>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 888cd068ea..e604ef89fd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -423,7 +423,7 @@ useMenuCloseOnEsc(open)
                       }
                     "
                   >
-                    <component :is="getIcon(metaColumnById[field.fk_column_id])" class="!w-3.5 !h-3.5 !text-gray-700" />
+                    <component :is="getIcon(metaColumnById[field.fk_column_id])" class="!w-3.5 !h-3.5 !text-gray-500" />
                     <NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only :disabled="isDragging">
                       <template #title>
                         {{ field.title }}

From 969398ca19cfc19d5436a666bbf554df73b25d98 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:51 +0000
Subject: [PATCH 25/30] fix(nc-gui): reduce icon size from field list
 autocomplete dropdown

---
 .../smartsheet/toolbar/FieldListAutoCompleteDropdown.vue      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index ddbee528dd..afc2a95c17 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -94,8 +94,8 @@ if (!localValue.value && allowEmpty !== true) {
   >
     <a-select-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
       <div class="flex items-center w-full justify-between w-full gap-2 max-w-50">
-        <div class="flex gap-1 flex-1 items-center truncate items-center h-full">
-          <component :is="option.icon" class="min-w-5 !mx-0 !text-gray-500" />
+        <div class="flex gap-1.5 flex-1 items-center truncate items-center h-full">
+          <component :is="option.icon" class="!w-3.5 !h-3.5 !mx-0 !text-gray-500" />
           <NcTooltip
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             class="max-w-[15rem] truncate select-none"

From 48f59f9b2d8ac0004f07c6c5bbe00ab5b0d83d8a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:51 +0000
Subject: [PATCH 26/30] fix(nc-gui): update modal size

---
 packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index e604ef89fd..e9868e356d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -350,7 +350,7 @@ useMenuCloseOnEsc(open)
     </div>
 
     <template #overlay>
-      <div class="pt-2 bg-white w-80 rounded-lg nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
+      <div class="pt-2 bg-white w-full min-w-72 max-w-80 rounded-lg nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
         <div
           v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
           class="flex flex-col gap-y-2 px-2 mb-6"

From 0ac80c942061d27c727c1434c300062cc0571424 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:51 +0000
Subject: [PATCH 27/30] fix(nc-gui): toolbar menu dropdown outer padding issue

---
 .../smartsheet/toolbar/ColumnFilter.vue       | 24 +++++++++++++++----
 .../toolbar/FieldListWithSearch.vue           |  2 +-
 .../smartsheet/toolbar/GroupByMenu.vue        | 21 +++++++---------
 .../smartsheet/toolbar/SortListMenu.vue       | 20 ++++++++--------
 4 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 09485de0d9..51ce686719 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -337,15 +337,16 @@ function isDateType(uidt: UITypes) {
   <div
     class="menu-filter-dropdown"
     :class="{
-      'max-h-[max(80vh,500px)] min-w-112 py-6 pl-6': !nested,
+      'max-h-[max(80vh,500px)] min-w-112 py-2 pl-4': !nested,
       'w-full ': nested,
+      'py-4': !filters.length,
     }"
   >
     <div
       v-if="filters && filters.length"
       ref="wrapperDomRef"
-      class="flex flex-col gap-y-3 nc-filter-grid pb-2 w-full"
-      :class="{ 'max-h-420px nc-scrollbar-md  pr-3.5 nc-filter-top-wrapper': !nested }"
+      class="flex flex-col gap-y-3 nc-filter-grid w-full"
+      :class="{ 'max-h-420px nc-scrollbar-thin nc-filter-top-wrapper pr-4 my-2 py-1': !nested }"
       @click.stop
     >
       <template v-for="(filter, i) in filters" :key="i">
@@ -544,7 +545,14 @@ function isDateType(uidt: UITypes) {
     </div>
 
     <template v-if="isEeUI && !isPublic">
-      <div v-if="filtersCount < getPlanLimit(PlanLimitTypes.FILTER_LIMIT)" ref="addFiltersRowDomRef" class="flex gap-2">
+      <div
+        v-if="filtersCount < getPlanLimit(PlanLimitTypes.FILTER_LIMIT)"
+        ref="addFiltersRowDomRef"
+        class="flex gap-2"
+        :class="{
+          'mt-1 mb-2': filters.length,
+        }"
+      >
         <NcButton size="small" type="text" class="!text-brand-500" @click.stop="addFilter()">
           <div class="flex items-center gap-1">
             <component :is="iconMap.plus" />
@@ -563,7 +571,13 @@ function isDateType(uidt: UITypes) {
       </div>
     </template>
     <template v-else>
-      <div ref="addFiltersRowDomRef" class="flex gap-2">
+      <div
+        ref="addFiltersRowDomRef"
+        class="flex gap-2"
+        :class="{
+          'mt-1 mb-2': filters.length,
+        }"
+      >
         <NcButton size="small" type="text" class="!text-brand-500" @click.stop="addFilter()">
           <div class="flex items-center gap-1">
             <component :is="iconMap.plus" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index 0d026a7e47..602d86fc17 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -133,7 +133,7 @@ watch(
           alt="No search results found"
         />
 
-        {{ $t('title.noResultsMatchedYourSearch') }}
+        {{ options.length ? $t('title.noResultsMatchedYourSearch') : 'The list is empty' }}
       </div>
 
       <div
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 1dde906677..3ebee777f8 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -251,19 +251,14 @@ watch(meta, async () => {
       />
       <div
         v-else
-        :class="{ ' min-w-[400px]': _groupBy.length }"
-        class="flex flex-col bg-white overflow-auto nc-group-by-list menu-filter-dropdown max-h-[max(80vh,500px)] py-6 pl-6"
+        class="flex flex-col bg-white overflow-auto nc-group-by-list menu-filter-dropdown max-h-[max(80vh,500px)] min-w-102 pt-2 pb-2 pl-4"
         data-testid="nc-group-by-menu"
       >
-        <div
-          class="group-by-grid pb-1 max-h-100 nc-scrollbar-md pr-5"
-          :class="{ 'mb-2': availableColumns.length && fieldsToGroupBy.length > _groupBy.length && _groupBy.length < 3 }"
-          @click.stop
-        >
+        <div class="group-by-grid max-h-100 nc-scrollbar-thing pr-4 py-2" @click.stop>
           <template v-for="[i, group] of Object.entries(_groupBy)" :key="`grouped-by-${group.fk_column_id}`">
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="group.fk_column_id"
-              class="caption nc-sort-field-select"
+              class="caption nc-sort-field-select w-44 flex flex-grow"
               :columns="fieldsToGroupBy"
               :allow-empty="true"
               @change="saveGroupBy"
@@ -296,10 +291,10 @@ watch(meta, async () => {
               </a-select-option>
             </NcSelect>
 
-            <a-tooltip placement="right" title="Remove">
+            <a-tooltip placement="right" title="Remove" class="flex-none min-w-40">
               <NcButton
                 v-e="['c:group-by:remove']"
-                class="nc-group-by-item-remove-btn"
+                class="nc-group-by-item-remove-btn min-w-40"
                 size="small"
                 type="text"
                 @click.stop="removeFieldFromGroupBy(i)"
@@ -317,7 +312,7 @@ watch(meta, async () => {
         >
           <NcButton
             v-e="['c:group-by:add']"
-            class="nc-add-group-by-btn !text-brand-500"
+            class="nc-add-group-by-btn !text-brand-500 mt-1 mb-2"
             style="width: fit-content"
             size="small"
             type="text"
@@ -346,7 +341,7 @@ watch(meta, async () => {
 <style scoped>
 .group-by-grid {
   display: grid;
-  grid-template-columns: auto 150px 22px;
-  @apply gap-[12px];
+  grid-template-columns: auto 150px auto;
+  @apply gap-x-2 gap-y-3;
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 5af98027ac..baf0e0b180 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -139,13 +139,8 @@ onMounted(() => {
     </div>
     <template #overlay>
       <SmartsheetToolbarCreateSort v-if="!sorts.length" :is-parent-open="open" @created="addSort" />
-      <div
-        v-else
-        :class="{ 'min-w-102': sorts.length }"
-        class="py-6 pl-6 nc-filter-list max-h-[max(80vh,30rem)]"
-        data-testid="nc-sorts-menu"
-      >
-        <div class="sort-grid max-h-120 nc-scrollbar-md" :class="{ 'pr-3.5': sorts?.length }" @click.stop>
+      <div v-else class="pt-2 pb-2 pl-4 nc-filter-list max-h-[max(80vh,30rem)] min-w-102" data-testid="nc-sorts-menu">
+        <div class="sort-grid max-h-120 nc-scrollbar-thin pr-4 my-2 py-1" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
             <SmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"
@@ -198,14 +193,13 @@ onMounted(() => {
           v-if="availableColumns.length"
           v-model:visible="showCreateSort"
           :trigger="['click']"
-          class="mt-3"
           overlay-class-name="nc-toolbar-dropdown"
         >
           <template v-if="isEeUI && !isPublic">
             <NcButton
               v-if="sorts.length < getPlanLimit(PlanLimitTypes.SORT_LIMIT)"
               v-e="['c:sort:add']"
-              class="!text-brand-500"
+              class="!text-brand-500 mt-1 mb-2"
               type="text"
               size="small"
               @click.stop="showCreateSort = true"
@@ -219,7 +213,13 @@ onMounted(() => {
             <span v-else></span>
           </template>
           <template v-else>
-            <NcButton v-e="['c:sort:add']" class="!text-brand-500" type="text" size="small" @click.stop="showCreateSort = true">
+            <NcButton
+              v-e="['c:sort:add']"
+              class="!text-brand-500 mt-1 mb-2"
+              type="text"
+              size="small"
+              @click.stop="showCreateSort = true"
+            >
               <div class="flex gap-1 items-center">
                 <component :is="iconMap.plus" />
                 <!-- Add Sort Option -->

From 2c121f15f4b77d11da884f6cf610dc025d01f3b7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:51 +0000
Subject: [PATCH 28/30] fix(nc-gui): remove unwanted code

---
 .../smartsheet/toolbar/CreateGroupBy.vue      | 29 +------------------
 .../smartsheet/toolbar/CreateSort.vue         | 29 +------------------
 .../smartsheet/toolbar/FieldsMenu.vue         |  6 +++-
 3 files changed, 7 insertions(+), 57 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
index 24c2b24d97..98c9cfb82d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue
@@ -12,12 +12,6 @@ const emits = defineEmits(['created'])
 
 const { isParentOpen, columns } = toRefs(props)
 
-const inputRef = ref()
-
-const search = ref('')
-
-const activeFieldIndex = ref(-1)
-
 const activeView = inject(ActiveViewInj, ref())
 
 const meta = inject(MetaInj, ref())
@@ -58,33 +52,12 @@ const options = computed<ColumnType[]>(
           )
         }
       })
-      .filter((c: ColumnType) => !groupBy.value.find((g) => g.column?.id === c.id))
-      .filter((c: ColumnType) => c.title?.toLowerCase().includes(search.value.toLowerCase())) ?? [],
+      .filter((c: ColumnType) => !groupBy.value.find((g) => g.column?.id === c.id)) ?? [],
 )
 
 const onClick = (column: ColumnType) => {
   emits('created', column)
 }
-
-watch(
-  isParentOpen,
-  () => {
-    if (!isParentOpen.value) return
-
-    search.value = ''
-    setTimeout(() => {
-      inputRef.value?.focus()
-    }, 100)
-  },
-  {
-    immediate: true,
-  },
-)
-
-onMounted(() => {
-  search.value = ''
-  activeFieldIndex.value = -1
-})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index adb9077939..9cb46111cd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -11,12 +11,6 @@ const emits = defineEmits(['created'])
 
 const { isParentOpen } = toRefs(props)
 
-const inputRef = ref()
-
-const search = ref('')
-
-const activeFieldIndex = ref(-1)
-
 const activeView = inject(ActiveViewInj, ref())
 
 const meta = inject(MetaInj, ref())
@@ -55,33 +49,12 @@ const options = computed<ColumnType[]>(
           /** ignore virtual fields which are system fields ( mm relation ) and qr code fields */
         }
       })
-      .filter((c: ColumnType) => !sorts.value.find((s) => s.fk_column_id === c.id))
-      .filter((c: ColumnType) => c.title?.toLowerCase().includes(search.value.toLowerCase())) ?? [],
+      .filter((c: ColumnType) => !sorts.value.find((s) => s.fk_column_id === c.id)) ?? [],
 )
 
 const onClick = (column: ColumnType) => {
   emits('created', column)
 }
-
-watch(
-  isParentOpen,
-  () => {
-    if (!isParentOpen.value) return
-
-    search.value = ''
-    setTimeout(() => {
-      inputRef.value?.focus()
-    }, 100)
-  },
-  {
-    immediate: true,
-  },
-)
-
-onMounted(() => {
-  search.value = ''
-  activeFieldIndex.value = -1
-})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index e9868e356d..3a640593db 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -350,7 +350,11 @@ useMenuCloseOnEsc(open)
     </div>
 
     <template #overlay>
-      <div class="pt-2 bg-white w-full min-w-72 max-w-80 rounded-lg nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
+      <div
+        class="pt-2 bg-white w-full min-w-72 max-w-80 rounded-lg nc-table-toolbar-menu"
+        data-testid="nc-fields-menu"
+        @click.stop
+      >
         <div
           v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
           class="flex flex-col gap-y-2 px-2 mb-6"

From d5879129769fc47adf8545935d520d0e8a90be18 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:00:51 +0000
Subject: [PATCH 29/30] chore: text update

---
 packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue | 2 +-
 packages/nc-gui/lang/en.json                                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 3a640593db..3417ca3b48 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -386,7 +386,7 @@ useMenuCloseOnEsc(open)
           <div class="nc-fields-list">
             <div
               v-if="!fields?.filter((el) => el.title.toLowerCase().includes(filterQuery.toLowerCase())).length"
-              class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6"
+              class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6 text-center"
             >
               <img
                 src="~assets/img/placeholder/no-search-result-found.png"
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 0496b98a03..3c185cee08 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -434,7 +434,7 @@
     "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here",
     "noOptionsFound": "No options found",
     "surveyFormSubmitConfirmMsg": "Are you sure you want to submit this form?",
-    "noResultsMatchedYourSearch": "No results matched your search"
+    "noResultsMatchedYourSearch": "Your search did not yield any matching results."
   },
   "labels": {
     "selectYear": "Select Year",

From 209df0ad5907f60e28c29b97cbc30155e43f9267 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Apr 2024 19:08:15 +0530
Subject: [PATCH 30/30] fix(nc-gui): review changes

---
 .../components/smartsheet/toolbar/FieldListWithSearch.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index 602d86fc17..ee62cd4f84 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   showSelectedOption?: boolean
 }>()
 
-const emits = defineEmits(['selected'])
+const emits = defineEmits<{ selected: [ColumnType] }>()
 
 const { isParentOpen, toolbarMenu, searchInputPlaceholder, selectedOptionId, options, showSelectedOption } = toRefs(props)