enhancement(gui-v2): bring icon in fields menu

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ColumnType } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
 import Draggable from 'vuedraggable'
 import {
   ActiveViewInj,
@@ -14,6 +16,8 @@ import {
   useViewColumns,
   watch,
 } from '#imports'
+import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
+import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 
 const meta = inject(MetaInj)!
 
@@ -39,6 +43,7 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
+  metaColumnById,
 } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
@@ -76,6 +81,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
   $e('a:fields:reorder')
 }
+
+const getIcon = (c: ColumnType) =>
+  h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+    columnMeta: c,
+  })
 </script>
 
 <template>
@@ -103,9 +113,12 @@ const onMove = (event: { moved: { newIndex: number } }) => {
         <div class="nc-fields-list py-1">
           <Draggable v-model="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field, index: index }">
-              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
+              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex items-center" @click.stop>
                 <a-checkbox v-model:checked="field.show" class="shrink" @change="saveOrUpdate(field, index)">
-                  <span class="">{{ field.title }}</span>
+                  <div class="flex items-center">
+                    <component :is="getIcon(metaColumnById[field.fk_column_id])" />
+                    <span>{{ field.title }}</span>
+                  </div>
                 </a-checkbox>
                 <div class="flex-1" />
                 <MdiDrag class="cursor-move" />
@@ -140,4 +153,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 :deep(.ant-checkbox-inner) {
   @apply transform scale-60;
 }
+:deep(.ant-checkbox) {
+  @apply top-auto;
+}
 </style>

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -54,7 +54,7 @@ const page = computed({
 
 :deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
   line-height: 21px !important;
-  @apply text-sm !text-gray-500 ;
+  @apply text-sm !text-gray-500;
 }
 
 :deep(.ant-pagination-item-link) {

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -204,5 +204,6 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     saveOrUpdate,
     sortedAndFilteredFields,
     showSystemFields,
+    metaColumnById,
   }
 }