From 4d5ef7de73d5d27c11deefa6eaadc149347c0493 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:18 +0000
Subject: [PATCH 01/11] fix(nc-gui): extra divider issue on form view more
 option dropdown

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

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 05d567e9df..770088290e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -181,10 +181,10 @@ const onDelete = async () => {
         <GeneralIcon icon="duplicate" class="nc-view-copy-icon" />
         {{ $t('labels.duplicateView') }}
       </NcMenuItem>
-      <NcDivider />
     </template>
 
     <template v-if="view.type !== ViewTypes.FORM">
+      <NcDivider />
       <template v-if="isUIAllowed('csvTableImport') && !isPublicView">
         <NcSubMenu key="upload">
           <template #title>

From 4c78952a1661eb7b06913dba5b012c7c5ea50b51 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 02/11] fic(nc-gui): wrong user icon

---
 packages/nc-gui/assets/nc-icons/user.svg      | 4 ++++
 packages/nc-gui/components/workspace/View.vue | 2 +-
 packages/nc-gui/pages/account/index.vue       | 4 ++--
 packages/nc-gui/utils/iconUtils.ts            | 2 ++
 4 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/user.svg

diff --git a/packages/nc-gui/assets/nc-icons/user.svg b/packages/nc-gui/assets/nc-icons/user.svg
new file mode 100644
index 0000000000..d7034eb189
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/user.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3334 14V12.6667C13.3334 11.9594 13.0524 11.2811 12.5523 10.781C12.0522 10.281 11.3739 10 10.6667 10H5.33335C4.62611 10 3.94783 10.281 3.44774 10.781C2.94764 11.2811 2.66669 11.9594 2.66669 12.6667V14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99998 7.33333C9.47274 7.33333 10.6666 6.13943 10.6666 4.66667C10.6666 3.19391 9.47274 2 7.99998 2C6.52722 2 5.33331 3.19391 5.33331 4.66667C5.33331 6.13943 6.52722 7.33333 7.99998 7.33333Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/components/workspace/View.vue b/packages/nc-gui/components/workspace/View.vue
index d1eb44b7e2..50750cf56a 100644
--- a/packages/nc-gui/components/workspace/View.vue
+++ b/packages/nc-gui/components/workspace/View.vue
@@ -61,7 +61,7 @@ onMounted(() => {
         <a-tab-pane key="collaborators" class="w-full">
           <template #tab>
             <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
-              <PhUsersBold />
+              <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
               Members
             </div>
           </template>
diff --git a/packages/nc-gui/pages/account/index.vue b/packages/nc-gui/pages/account/index.vue
index 50d88086d5..c3bcbed677 100644
--- a/packages/nc-gui/pages/account/index.vue
+++ b/packages/nc-gui/pages/account/index.vue
@@ -65,7 +65,7 @@ const logout = async () => {
               @click="navigateTo('/account/profile')"
             >
               <div class="flex items-center space-x-2">
-                <GeneralIcon icon="account" />
+                <GeneralIcon icon="user" class="!h-3.5 !w-3.5"/>
 
                 <div class="select-none">{{ $t('labels.profile') }}</div>
               </div>
@@ -102,7 +102,7 @@ const logout = async () => {
             </NcMenuItem>
             <a-sub-menu key="users" class="!bg-white !my-0">
               <template #icon>
-                <MdiAccountSupervisorOutline />
+                <GeneralIcon icon="users" class="!h-3.5 !w-3.5"/>
               </template>
               <template #title>{{ $t('objects.users') }}</template>
 
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index b8612ced26..8b364b5b1f 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -99,6 +99,7 @@ import NcUnStar from '~icons/nc-icons/star-remove'
 import NcSearch from '~icons/nc-icons/search'
 import NcCreditCard from '~icons/nc-icons/credit-card'
 import NcLayers from '~icons/nc-icons/layers'
+import NcUser from '~icons/nc-icons/user'
 import NcUsers from '~icons/nc-icons/users'
 import NcCheck from '~icons/nc-icons/check'
 import NcIconsRowHeightMedium from '~icons/nc-icons/row-height-medium'
@@ -327,6 +328,7 @@ export const iconMap = {
   accountCircle: h('span', { class: 'material-symbols' }, 'account_circle'),
   phUser: PhUser,
   phUsers: PhUsers,
+  user: NcUser,
   users: NcUsers,
   cloudDownload: h('span', { class: 'material-symbols' }, 'cloud_download'),
   download: MsDownloadRounded,

From 934805a0c7627732fbe1c2b99eb6a1ba884d2a5c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 03/11] chore(nc-gui): lint

---
 packages/nc-gui/pages/account/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/pages/account/index.vue b/packages/nc-gui/pages/account/index.vue
index c3bcbed677..c5794cb785 100644
--- a/packages/nc-gui/pages/account/index.vue
+++ b/packages/nc-gui/pages/account/index.vue
@@ -65,7 +65,7 @@ const logout = async () => {
               @click="navigateTo('/account/profile')"
             >
               <div class="flex items-center space-x-2">
-                <GeneralIcon icon="user" class="!h-3.5 !w-3.5"/>
+                <GeneralIcon icon="user" class="!h-3.5 !w-3.5" />
 
                 <div class="select-none">{{ $t('labels.profile') }}</div>
               </div>
@@ -102,7 +102,7 @@ const logout = async () => {
             </NcMenuItem>
             <a-sub-menu key="users" class="!bg-white !my-0">
               <template #icon>
-                <GeneralIcon icon="users" class="!h-3.5 !w-3.5"/>
+                <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
               </template>
               <template #title>{{ $t('objects.users') }}</template>
 

From 4711e77f977f3b3db3c093e420efe132d35eafb8 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 04/11] fix(nc-gui): hide pagination for only 1 page

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

diff --git a/packages/nc-gui/components/nc/Pagination.vue b/packages/nc-gui/components/nc/Pagination.vue
index ec8bb6b2d3..fde01c4879 100644
--- a/packages/nc-gui/components/nc/Pagination.vue
+++ b/packages/nc-gui/components/nc/Pagination.vue
@@ -56,7 +56,7 @@ const pagesList = computed(() => {
 </script>
 
 <template>
-  <div class="nc-pagination flex flex-row items-center gap-x-2">
+  <div v-if="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
     <component :is="props.firstPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
       <template v-if="props.firstPageTooltip" #title>
         {{ props.firstPageTooltip }}

From ca9b62c3d66436e635d9571496a153adc3197b4d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 05/11] fic(nc-gui): set new record dropdown position to
 topLeft

---
 packages/nc-gui/components/smartsheet/grid/Table.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 8331f76c7a..f691c95fc1 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1893,11 +1893,11 @@ onKeyStroke('ArrowDown', onDown)
             <template #overlay>
               <div class="relative overflow-visible min-h-17 w-10">
                 <div
-                  class="absolute -top-19 flex flex-col min-h-34.5 w-70 p-1.5 bg-white rounded-lg border-1 border-gray-200 justify-start overflow-hidden"
+                  class="absolute -top-21 flex flex-col min-h-34.5 w-70 p-1.5 bg-white rounded-lg border-1 border-gray-200 justify-start overflow-hidden"
                   style="box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px -12px 16px -4px rgba(0, 0, 0, 0.1)"
                   :class="{
-                    '-left-44': !isAddNewRecordGridMode,
-                    '-left-32': isAddNewRecordGridMode,
+                    '-left-32.5': !isAddNewRecordGridMode,
+                    '-left-21.5': isAddNewRecordGridMode,
                   }"
                 >
                   <div

From a8c0e30a34ca8a94516e17fbc86cbadb4df935bd Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 06/11] fix(nc-gui): text area input ui changes

---
 packages/nc-gui/components/cell/RichText.vue | 6 ++++--
 packages/nc-gui/components/cell/TextArea.vue | 8 ++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index fecd9c0e4c..7a66bd44cd 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj } from '#imports'
+import { IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, IsFormInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -26,6 +26,8 @@ const rowHeight = inject(RowHeightInj, ref(1 as const))
 
 const readOnlyCell = inject(ReadonlyInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const turndownService = new TurndownService({})
 
 turndownService.addRule('lineBreak', {
@@ -199,7 +201,7 @@ watch(editorDom, () => {
         'mt-2.5 flex-grow': fullMode,
         'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
         'flex-grow': isExpandedFormOpen,
-        [`!overflow-hidden children:line-clamp-${rowHeight}`]: !fullMode && readOnly && rowHeight && !isExpandedFormOpen,
+        [`!overflow-hidden children:line-clamp-${rowHeight}`]: !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
       }"
     />
   </div>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 250ede61ff..8d8f2dc091 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -207,15 +207,15 @@ watch(inputWrapperRef, () => {
       :class="{
         'min-h-10': rowHeight !== 1 || isExpandedFormOpen,
         'min-h-9': rowHeight === 1 && !isExpandedFormOpen,
-        'h-full': isForm,
+        'h-full w-full': isForm,
       }"
     >
       <div
         v-if="isRichMode"
         class="w-full cursor-pointer nc-readonly-rich-text-wrapper"
         :style="{
-          maxHeight: isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
-          minHeight: isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
+          maxHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
+          minHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
         }"
         @dblclick="onExpand"
         @keydown.enter="onExpand"
@@ -271,7 +271,7 @@ watch(inputWrapperRef, () => {
         v-if="!isVisible"
         placement="bottom"
         class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3"
-        :class="isExpandedFormOpen || isForm || isRichMode ? 'top-1' : 'bottom-1'"
+        :class=" isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
       >
         <template #title>{{ $t('title.expand') }}</template>
         <NcButton type="secondary" size="xsmall" data-testid="attachment-cell-file-picker-button" @click.stop="onExpand">

From f5d409b2b7b2a6dc64d59cd5e40b1b98fcdbcb25 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 07/11] fix(nc-gui): Wrong chevron Icon in grouping UI

---
 .../nc-gui/assets/nc-icons/chevron-down.svg    |  3 +++
 packages/nc-gui/components/cell/RichText.vue   |  5 +++--
 packages/nc-gui/components/cell/TextArea.vue   |  2 +-
 .../components/smartsheet/grid/GroupBy.vue     | 18 ++++--------------
 packages/nc-gui/utils/iconUtils.ts             |  2 ++
 5 files changed, 13 insertions(+), 17 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/chevron-down.svg

diff --git a/packages/nc-gui/assets/nc-icons/chevron-down.svg b/packages/nc-gui/assets/nc-icons/chevron-down.svg
new file mode 100644
index 0000000000..0b0d8c8e04
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 7a66bd44cd..955d9296dc 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, IsFormInj } from '#imports'
+import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -201,7 +201,8 @@ watch(editorDom, () => {
         'mt-2.5 flex-grow': fullMode,
         'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
         'flex-grow': isExpandedFormOpen,
-        [`!overflow-hidden children:line-clamp-${rowHeight}`]: !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
+        [`!overflow-hidden children:line-clamp-${rowHeight}`]:
+          !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
       }"
     />
   </div>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 8d8f2dc091..606fe8c549 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -271,7 +271,7 @@ watch(inputWrapperRef, () => {
         v-if="!isVisible"
         placement="bottom"
         class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3"
-        :class=" isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
+        :class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
       >
         <template #title>{{ $t('title.expand') }}</template>
         <NcButton type="secondary" size="xsmall" data-testid="attachment-cell-file-picker-button" @click.stop="onExpand">
diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index 0e30a42b1a..32ffaab35e 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -241,20 +241,10 @@ const shouldRenderCell = (column) =>
                 <div class="flex !sticky left-[15px]">
                   <div class="flex items-center">
                     <span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow">
-                      <svg
-                        focusable="false"
-                        data-icon="right"
-                        width="1em"
-                        height="1em"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        viewBox="64 64 896 896"
-                        :style="`${activeGroups.includes(i) ? 'transform: rotate(90deg)' : ''}`"
-                      >
-                        <path
-                          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                        ></path>
-                      </svg>
+                      <GeneralIcon
+                        icon="chevronDown"
+                        :style="`${activeGroups.includes(i) ? 'transform: rotate(360deg)' : 'transform: rotate(270deg)'}`"
+                      ></GeneralIcon>
                     </span>
                   </div>
                   <div class="flex items-center">
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 8b364b5b1f..85020c37ed 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -111,6 +111,7 @@ import NcNotification from '~icons/material-symbols/notifications-outline'
 import NcCommentHere from '~icons/nc-icons/comment-here'
 import NcAddDataSource from '~icons/nc-icons/add-data-source'
 import NcDatabaseIcon from '~icons/nc-icons/database'
+import NcChevronDown from '~icons/nc-icons/chevron-down'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -462,6 +463,7 @@ export const iconMap = {
   commentHere: NcCommentHere,
   fileImage: FileImageIcon,
   paste: h('span', { class: 'material-symbols' }, 'content_paste'),
+  chevronDown: NcChevronDown,
 }
 
 export const getMdiIcon = (type: string): any => {

From 9aa44ba1278777e59843026c809d620ac163d10c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 08/11] fix(nc-gui): update icons with nocodb design library

---
 .../nc-gui/assets/nc-icons/arrow-down.svg     |  4 +++
 packages/nc-gui/assets/nc-icons/arrow-up.svg  |  4 +++
 packages/nc-gui/assets/nc-icons/copy.svg      | 11 +++++++
 packages/nc-gui/assets/nc-icons/download.svg  |  6 ++--
 packages/nc-gui/assets/nc-icons/duplicate.svg |  6 ++++
 packages/nc-gui/assets/nc-icons/edit.svg      | 11 +++++++
 packages/nc-gui/assets/nc-icons/eye.svg       |  2 +-
 packages/nc-gui/assets/nc-icons/pencil.svg    | 10 +++++++
 packages/nc-gui/assets/nc-icons/rename.svg    |  4 +++
 packages/nc-gui/assets/nc-icons/trash.svg     |  6 ++++
 packages/nc-gui/assets/nc-icons/upload.svg    |  6 ++--
 .../components/cell/attachment/Modal.vue      |  7 +++--
 .../dashboard/TreeView/ProjectNode.vue        |  4 +--
 .../dashboard/TreeView/TableNode.vue          |  2 +-
 .../nc-gui/components/dlg/TableRename.vue     |  2 +-
 packages/nc-gui/components/nc/Pagination.vue  |  2 +-
 .../components/smartsheet/details/Fields.vue  | 14 ++++-----
 .../smartsheet/details/Webhooks.vue           |  4 ++-
 .../components/smartsheet/grid/Table.vue      |  2 +-
 .../components/smartsheet/header/Menu.vue     |  2 +-
 .../smartsheet/sidebar/RenameableMenuItem.vue |  2 +-
 .../smartsheet/toolbar/ViewActionMenu.vue     | 13 ++++-----
 .../smartsheet/toolbar/ViewActions.vue        |  6 ++--
 .../components/workspace/ProjectList.vue      |  2 +-
 packages/nc-gui/utils/iconUtils.ts            | 29 ++++++++++++++-----
 25 files changed, 113 insertions(+), 48 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/arrow-down.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/arrow-up.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/copy.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/duplicate.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/edit.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/pencil.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/rename.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/trash.svg

diff --git a/packages/nc-gui/assets/nc-icons/arrow-down.svg b/packages/nc-gui/assets/nc-icons/arrow-down.svg
new file mode 100644
index 0000000000..cb6599ab1b
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/arrow-down.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 3.33337V12.6667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6666 8L7.99998 12.6667L3.33331 8" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/arrow-up.svg b/packages/nc-gui/assets/nc-icons/arrow-up.svg
new file mode 100644
index 0000000000..812dbfd386
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/arrow-up.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12.6667V3.33337" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.33331 8.00004L7.99998 3.33337L12.6666 8.00004" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/copy.svg b/packages/nc-gui/assets/nc-icons/copy.svg
new file mode 100644
index 0000000000..c88b1da9a5
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/copy.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_184_4881)">
+<path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.33334 10H2.66667C2.31305 10 1.97391 9.85956 1.72386 9.60952C1.47381 9.35947 1.33334 9.02033 1.33334 8.66671V2.66671C1.33334 2.31309 1.47381 1.97395 1.72386 1.7239C1.97391 1.47385 2.31305 1.33337 2.66667 1.33337H8.66667C9.02029 1.33337 9.35943 1.47385 9.60948 1.7239C9.85953 1.97395 10 2.31309 10 2.66671V3.33337" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_184_4881">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/download.svg b/packages/nc-gui/assets/nc-icons/download.svg
index 2403b35d0e..cb7eed4256 100644
--- a/packages/nc-gui/assets/nc-icons/download.svg
+++ b/packages/nc-gui/assets/nc-icons/download.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.66675 6.66663L8.00008 9.99996L11.3334 6.66663" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 10V2" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66675 6.66663L8.00008 9.99996L11.3334 6.66663" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10V2" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/nc-gui/assets/nc-icons/duplicate.svg b/packages/nc-gui/assets/nc-icons/duplicate.svg
new file mode 100644
index 0000000000..ce9269e3db
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/duplicate.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.0625 3.75H2.125C1.82663 3.75 1.54048 3.86853 1.3295 4.0795C1.11853 4.29048 1 4.57663 1 4.875V13.875C1 14.1734 1.11853 14.4595 1.3295 14.6705C1.54048 14.8815 1.82663 15 2.125 15H8.875C9.17337 15 9.45952 14.8815 9.67049 14.6705C9.88147 14.4595 10 14.1734 10 13.875V7.6875L6.0625 3.75Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.0625 3.75V7.6875H10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 3.5V1.875C5 1.57663 5.11853 1.29048 5.3295 1.0795C5.54048 0.868526 5.82663 0.75 6.125 0.75H10.0625L14 4.6875V10.875C14 11.1734 13.8815 11.4595 13.6705 11.6705C13.4595 11.8815 13.1734 12 12.875 12H10.0625" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.0625 0.75V4.6875H14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/edit.svg b/packages/nc-gui/assets/nc-icons/edit.svg
new file mode 100644
index 0000000000..fe5c8a9b2b
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/edit.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_184_5634)">
+<path d="M7.33331 2.66663H2.66665C2.31302 2.66663 1.97389 2.8071 1.72384 3.05715C1.47379 3.3072 1.33331 3.64634 1.33331 3.99996V13.3333C1.33331 13.6869 1.47379 14.0261 1.72384 14.2761C1.97389 14.5262 2.31302 14.6666 2.66665 14.6666H12C12.3536 14.6666 12.6927 14.5262 12.9428 14.2761C13.1928 14.0261 13.3333 13.6869 13.3333 13.3333V8.66663" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3333 1.66665C12.5985 1.40144 12.9582 1.25244 13.3333 1.25244C13.7084 1.25244 14.0681 1.40144 14.3333 1.66665C14.5985 1.93187 14.7475 2.29158 14.7475 2.66665C14.7475 3.04173 14.5985 3.40144 14.3333 3.66665L7.99998 9.99999L5.33331 10.6667L5.99998 7.99999L12.3333 1.66665Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_184_5634">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/eye.svg b/packages/nc-gui/assets/nc-icons/eye.svg
index 4477b47d64..3e19595fa4 100644
--- a/packages/nc-gui/assets/nc-icons/eye.svg
+++ b/packages/nc-gui/assets/nc-icons/eye.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.666504 8.00033C0.666504 8.00033 3.33317 2.66699 7.99984 2.66699C12.6665 2.66699 15.3332 8.00033 15.3332 8.00033C15.3332 8.00033 12.6665 13.3337 7.99984 13.3337C3.33317 13.3337 0.666504 8.00033 0.666504 8.00033Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.666656 7.99996C0.666656 7.99996 3.33332 2.66663 7.99999 2.66663C12.6667 2.66663 15.3333 7.99996 15.3333 7.99996C15.3333 7.99996 12.6667 13.3333 7.99999 13.3333C3.33332 13.3333 0.666656 7.99996 0.666656 7.99996Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/nc-gui/assets/nc-icons/pencil.svg b/packages/nc-gui/assets/nc-icons/pencil.svg
new file mode 100644
index 0000000000..5e4bc9914e
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/pencil.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_184_4900)">
+<path d="M11.3333 2.00004C11.5084 1.82494 11.7163 1.68605 11.9451 1.59129C12.1738 1.49653 12.419 1.44775 12.6667 1.44775C12.9143 1.44775 13.1595 1.49653 13.3883 1.59129C13.617 1.68605 13.8249 1.82494 14 2.00004C14.1751 2.17513 14.314 2.383 14.4088 2.61178C14.5035 2.84055 14.5523 3.08575 14.5523 3.33337C14.5523 3.58099 14.5035 3.82619 14.4088 4.05497C14.314 4.28374 14.1751 4.49161 14 4.66671L5 13.6667L1.33333 14.6667L2.33333 11L11.3333 2.00004Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_184_4900">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/rename.svg b/packages/nc-gui/assets/nc-icons/rename.svg
new file mode 100644
index 0000000000..4f3ee84e6b
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/rename.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 13.3334H14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 2.33328C11.2652 2.06806 11.6249 1.91907 12 1.91907C12.1857 1.91907 12.3696 1.95565 12.5412 2.02672C12.7128 2.09779 12.8687 2.20196 13 2.33328C13.1313 2.4646 13.2355 2.6205 13.3066 2.79208C13.3776 2.96367 13.4142 3.14756 13.4142 3.33328C13.4142 3.519 13.3776 3.7029 13.3066 3.87448C13.2355 4.04606 13.1313 4.20196 13 4.33328L4.66667 12.6666L2 13.3333L2.66667 10.6666L11 2.33328Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/trash.svg b/packages/nc-gui/assets/nc-icons/trash.svg
new file mode 100644
index 0000000000..49e05923ec
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/trash.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 4H3.33333H14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33333 4.00004V2.66671C5.33333 2.31309 5.4738 1.97395 5.72385 1.7239C5.9739 1.47385 6.31304 1.33337 6.66666 1.33337H9.33333C9.68695 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M12.6667 4.00004V13.3334C12.6667 13.687 12.5262 14.0261 12.2761 14.2762C12.0261 14.5262 11.6869 14.6667 11.3333 14.6667H4.66666C4.31304 14.6667 3.9739 14.5262 3.72385 14.2762C3.4738 14.0261 3.33333 13.687 3.33333 13.3334V4.00004H12.6667Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.33333 7.33337V11.3334" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66667 7.33337V11.3334" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/upload.svg b/packages/nc-gui/assets/nc-icons/upload.svg
index 0e2e786b63..fa26eb96e0 100644
--- a/packages/nc-gui/assets/nc-icons/upload.svg
+++ b/packages/nc-gui/assets/nc-icons/upload.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.3334 5.33333L8.00008 2L4.66675 5.33333" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 2V10" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3333 5.33333L8 2L4.66667 5.33333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index bd5a8d5117..0e0bb4bdf7 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -158,8 +158,8 @@ const handleFileDelete = (i: number) => {
             <a-tooltip v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
               <template #title> {{ $t('title.renameFile') }} </template>
 
-              <div class="nc-attachment-download group-hover:(opacity-100) mr-[35px]">
-                <component :is="iconMap.edit" @click.stop="renameFile(item, i)" />
+              <div class="nc-attachment-rename group-hover:(opacity-100) mr-[35px]">
+                <component :is="iconMap.rename" @click.stop="renameFile(item, i)" />
               </div>
             </a-tooltip>
 
@@ -249,7 +249,8 @@ const handleFileDelete = (i: number) => {
     }
   }
 
-  .nc-attachment-download {
+  .nc-attachment-download,
+  .nc-attachment-rename {
     @apply bg-white absolute bottom-2 right-2;
     @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
     @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index c21832cfd4..1f14ae556e 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -463,7 +463,7 @@ const projectDelete = () => {
                 <template v-if="!isSharedBase">
                   <NcMenuItem v-if="isUIAllowed('baseRename')" data-testid="nc-sidebar-project-rename" @click="enableEditMode">
                     <div v-e="['c:base:rename']" class="flex gap-2 items-center">
-                      <GeneralIcon icon="edit" class="group-hover:text-black" />
+                      <GeneralIcon icon="rename" class="group-hover:text-black" />
                       {{ $t('general.rename') }}
                     </div>
                   </NcMenuItem>
@@ -717,7 +717,7 @@ const projectDelete = () => {
         <template v-else-if="contextMenuTarget.type === 'table'">
           <NcMenuItem v-if="isUIAllowed('tableRename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
             <div v-e="['c:table:rename']" class="nc-base-option-item flex gap-2 items-center">
-              <GeneralIcon icon="edit" class="text-gray-700" />
+              <GeneralIcon icon="rename" class="text-gray-700" />
               {{ $t('general.rename') }}
             </div>
           </NcMenuItem>
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 3a120bdc2b..309446907d 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -268,7 +268,7 @@ const isTableOpened = computed(() => {
                   @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
                 >
                   <div v-e="['c:table:rename']" class="flex gap-2 items-center">
-                    <GeneralIcon icon="edit" class="text-gray-700" />
+                    <GeneralIcon icon="rename" class="text-gray-700" />
                     {{ $t('general.rename') }}
                   </div>
                 </NcMenuItem>
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index bcd996fbf1..1b5dd6fc7e 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -193,7 +193,7 @@ const renameTable = async (undo = false, disableTitleDiffCheck?: boolean | undef
   <NcModal v-model:visible="dialogShow" size="small">
     <template #header>
       <div class="flex flex-row items-center gap-x-2">
-        <GeneralIcon icon="table" />
+        <GeneralIcon icon="rename" />
         {{ $t('activity.renameTable') }}
       </div>
     </template>
diff --git a/packages/nc-gui/components/nc/Pagination.vue b/packages/nc-gui/components/nc/Pagination.vue
index fde01c4879..32cc5a0abf 100644
--- a/packages/nc-gui/components/nc/Pagination.vue
+++ b/packages/nc-gui/components/nc/Pagination.vue
@@ -56,7 +56,7 @@ const pagesList = computed(() => {
 </script>
 
 <template>
-  <div v-if="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
+  <div v-show="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
     <component :is="props.firstPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
       <template v-if="props.firstPageTooltip" #title>
         {{ props.firstPageTooltip }}
diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 669c27d68f..58595e85e0 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -5,7 +5,6 @@ import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import Draggable from 'vuedraggable'
 import { onKeyDown, useMagicKeys } from '@vueuse/core'
 import type { ColumnType, SelectOptionsType } from 'nocodb-sdk'
-import { Icon } from '@iconify/vue'
 import { type Field, getUniqueColumnName, ref, useSmartsheetStoreOrThrow } from '#imports'
 
 interface TableExplorerColumn extends ColumnType {
@@ -1054,7 +1053,8 @@ watch(
                               data-testid="nc-field-item-action-duplicate"
                               @click="duplicateField(field)"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>{{ $t('general.duplicate') }}</span>
+                              <GeneralIcon icon="duplicate" class="text-gray-800" />
+                              <span>{{ $t('general.duplicate') }}</span>
                             </NcMenuItem>
                             <NcMenuItem
                               v-if="!field.pv"
@@ -1062,18 +1062,16 @@ watch(
                               data-testid="nc-field-item-action-insert-above"
                               @click="addField(field, true)"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>{{
-                                $t('general.insertAbove')
-                              }}</span>
+                              <GeneralIcon icon="ncArrowUp" class="text-gray-800" />
+                              <span>{{ $t('general.insertAbove') }}</span>
                             </NcMenuItem>
                             <NcMenuItem
                               key="table-explorer-insert-below"
                               data-testid="nc-field-item-action-insert-below"
                               @click="addField(field)"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>{{
-                                $t('general.insertBelow')
-                              }}</span>
+                              <GeneralIcon icon="ncArrowDown" class="text-gray-800" />
+                              <span>{{ $t('general.insertBelow') }}</span>
                             </NcMenuItem>
 
                             <a-menu-divider class="my-1.5" />
diff --git a/packages/nc-gui/components/smartsheet/details/Webhooks.vue b/packages/nc-gui/components/smartsheet/details/Webhooks.vue
index d26829dee8..3b90d104e4 100644
--- a/packages/nc-gui/components/smartsheet/details/Webhooks.vue
+++ b/packages/nc-gui/components/smartsheet/details/Webhooks.vue
@@ -265,7 +265,9 @@ watch(
                       @click="copyWebhook(hook)"
                     >
                       <template #loading> {{ $t('general.duplicating') }} </template>
-                      <div class="flex items-center gap-x-1"><GeneralIcon icon="copy" /> {{ $t('general.duplicate') }}</div>
+                      <div class="flex items-center gap-x-1">
+                        <GeneralIcon icon="duplicate"></GeneralIcon> {{ $t('general.duplicate') }}
+                      </div>
                     </NcButton>
                     <NcButton type="text" class="w-full !rounded-md !px-2" :centered="false" @click="openDeleteModal(hook.id!)">
                       <div class="flex items-center justify-start gap-x-1 !text-red-500">
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index f691c95fc1..67f4b53d4f 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1712,7 +1712,7 @@ onKeyStroke('ArrowDown', onDown)
               @click="emits('bulkUpdateDlg')"
             >
               <div v-e="['a:row:update-bulk']" class="flex gap-2 items-center">
-                <component :is="iconMap.edit" />
+                <component :is="iconMap.ncEdit" />
                 {{ $t('title.updateSelectedRows') }}
               </div>
             </NcMenuItem>
diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index fe85fe6feb..fa2b8f09be 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -313,7 +313,7 @@ const isDuplicateAllowed = computed(() => {
       <NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
         <NcMenuItem @click="onEditPress">
           <div class="nc-column-edit nc-header-menu-item">
-            <component :is="iconMap.edit" class="text-gray-700" />
+            <component :is="iconMap.ncEdit" class="text-gray-700" />
             <!-- Edit -->
             {{ $t('general.edit') }}
           </div>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 1962ee0986..f1ef1aa46d 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -242,7 +242,7 @@ watch(rightSidebarState, () => {
           <template #overlay>
             <NcMenu :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`">
               <NcMenuItem size="small" :centered="false" @click.stop="onDblClick">
-                <GeneralIcon icon="edit" />
+                <GeneralIcon icon="rename" />
                 Rename
               </NcMenuItem>
               <NcMenuItem size="small" :centered="false" class="nc-view-copy-icon" @click.stop="onDuplicate">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 770088290e..59f8de7d24 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -3,9 +3,6 @@ import type { TableType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import { LockType } from '~/lib'
 
-import UploadIcon from '~icons/nc-icons/upload'
-import DownloadIcon from '~icons/nc-icons/download'
-
 const props = defineProps<{
   view: ViewType
   table: TableType
@@ -167,13 +164,13 @@ const onDelete = async () => {
     <NcDivider />
     <template v-if="!view?.is_default">
       <NcMenuItem v-if="lockType !== LockType.Locked" @click="onRenameMenuClick">
-        <GeneralIcon icon="edit" />
+        <GeneralIcon icon="rename" />
         {{ $t('activity.renameView') }}
       </NcMenuItem>
       <NcTooltip v-else>
         <template #title> {{ $t('msg.info.disabledAsViewLocked') }} </template>
         <NcMenuItem class="!cursor-not-allowed !text-gray-400">
-          <GeneralIcon icon="edit" />
+          <GeneralIcon icon="rename" />
           {{ $t('activity.renameView') }}
         </NcMenuItem>
       </NcTooltip>
@@ -197,7 +194,7 @@ const onDelete = async () => {
               ]"
               class="nc-base-menu-item group"
             >
-              <UploadIcon class="w-4 h-4" />
+              <GeneralIcon icon="upload" />
               {{ $t('general.upload') }}
             </div>
           </template>
@@ -217,7 +214,7 @@ const onDelete = async () => {
                 class="nc-base-menu-item"
                 :class="{ disabled: lockType === LockType.Locked }"
               >
-                <component :is="iconMap.upload" />
+                <component :is="iconMap.cloudUpload" />
                 {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
               </div>
             </NcMenuItem>
@@ -235,7 +232,7 @@ const onDelete = async () => {
             ]"
             class="nc-base-menu-item group nc-view-context-download-option"
           >
-            <DownloadIcon class="w-4 h-4" />
+            <GeneralIcon type="download" />
             {{ $t('general.download') }}
           </div>
         </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 4a6ba370f0..38aaab5515 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import type { Ref } from '@vue/reactivity'
-import UploadIcon from '~icons/nc-icons/upload'
-import DownloadIcon from '~icons/nc-icons/download'
 import {
   ActiveViewInj,
   IsLockedInj,
@@ -120,7 +118,7 @@ useMenuCloseOnEsc(open)
               <a-sub-menu key="upload">
                 <template #title>
                   <div v-e="['c:navdraw:preview-as']" class="nc-base-menu-item group">
-                    <UploadIcon class="w-4 h-4" />
+                    <GeneralIcon type="upload" />
                     {{ $t('general.upload') }}
                     <div class="flex-1" />
 
@@ -147,7 +145,7 @@ useMenuCloseOnEsc(open)
             <a-sub-menu key="download">
               <template #title>
                 <div v-e="['c:download']" class="nc-base-menu-item group">
-                  <DownloadIcon class="w-4 h-4" />
+                  <GeneralIcon type="download" />
                   {{ $t('general.download') }}
                   <div class="flex-1" />
 
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 09e3d72128..51fc654993 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -339,7 +339,7 @@ const setIcon = async (icon: string, base: BaseType) => {
               <a-menu>
                 <a-menu-item @click="enableEdit(i)">
                   <div class="nc-menu-item-wrapper">
-                    <GeneralIcon icon="edit" class="text-gray-700" />
+                    <GeneralIcon icon="rename" class="text-gray-700" />
                     {{ $t('general.rename') }} {{ $t('objects.project') }}
                   </div>
                 </a-menu-item>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 85020c37ed..bcb2387305 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -21,17 +21,14 @@ import TablerColumnInsertRight from '~icons/tabler/column-insert-right'
 import MdiEyeCircleOutline from '~icons/mdi/eye-circle-outline'
 import MsGroup from '~icons/material-symbols/groups-outline-rounded'
 import MsAddBoxOutline from '~icons/nc-icons/add-box'
-import MsDownloadRounded from '~icons/nc-icons/download'
 import LogosAirtable from '~icons/logos/airtable'
 import MsSort from '~icons/material-symbols/sort'
 import MaterialSymbolsEdit from '~icons/material-symbols/edit-outline-rounded'
-import MaterialDuplicate from '~icons/material-symbols/file-copy-outline-rounded'
 import MaterialSymbolsWarningOutlineRounded from '~icons/material-symbols/warning-outline-rounded'
 import MaterialSymbolsDragIndicator from '~icons/ri/draggable'
 import PlusSquare from '~icons/nc-icons/plus-square'
 import MobileShare from '~icons/nc-icons/share'
 import PhLayout from '~icons/ph/layout'
-import Delete from '~icons/material-symbols/delete-outline-rounded'
 import Minus from '~icons/material-symbols/remove-rounded'
 import Code from '~icons/material-symbols/code-rounded'
 import Palette from '~icons/material-symbols/palette-outline'
@@ -112,6 +109,16 @@ import NcCommentHere from '~icons/nc-icons/comment-here'
 import NcAddDataSource from '~icons/nc-icons/add-data-source'
 import NcDatabaseIcon from '~icons/nc-icons/database'
 import NcChevronDown from '~icons/nc-icons/chevron-down'
+import NcTrash from '~icons/nc-icons/trash'
+import NcPencil from '~icons/nc-icons/pencil'
+import NcRename from '~icons/nc-icons/rename'
+import NcDuplicate from '~icons/nc-icons/duplicate'
+import NcEdit from '~icons/nc-icons/edit'
+import NcCopy from '~icons/nc-icons/copy'
+import NcArrowUp from '~icons/nc-icons/arrow-up'
+import NcArrowDown from '~icons/nc-icons/arrow-down'
+import NcUpload from '~icons/nc-icons/upload'
+import NcDownload from '~icons/nc-icons/download'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -332,16 +339,17 @@ export const iconMap = {
   user: NcUser,
   users: NcUsers,
   cloudDownload: h('span', { class: 'material-symbols' }, 'cloud_download'),
-  download: MsDownloadRounded,
-  upload: h('span', { class: 'material-symbols' }, 'cloud_upload'),
+  download: NcDownload,
+  cloudUpload: h('span', { class: 'material-symbols' }, 'cloud_upload'),
+  upload: NcUpload,
   hook: Phishing,
   erd: h('span', { class: 'material-symbols' }, 'account_tree'),
   plus: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.3px' }, 'add'),
   plusSquare: PlusSquare,
   minus: Minus,
   help: h('span', { class: 'material-symbols' }, 'help'),
-  copy: h('span', { class: 'material-symbols' }, 'content_copy'),
-  duplicate: MaterialDuplicate,
+  copy: NcCopy,
+  duplicate: NcDuplicate,
   clipboard: h('span', { class: 'material-symbols' }, 'content_paste'),
   settings: h('span', { class: 'material-symbols' }, 'settings'),
   image: h('span', { class: 'material-symbols' }, 'image'),
@@ -364,7 +372,7 @@ export const iconMap = {
   csv: PhCsvThin, // h('span', { class: 'material-symbols' }, 'grid_on'),
   code: Code,
   palette: h(Palette, {}, () => 'palette'),
-  delete: Delete,
+  delete: NcTrash,
   deleteListItem: h('span', { class: 'material-symbols' }, 'delete'),
   import: h('span', { class: 'material-symbols' }, 'system_update_alt'),
   edit: MaterialSymbolsEdit,
@@ -464,6 +472,11 @@ export const iconMap = {
   fileImage: FileImageIcon,
   paste: h('span', { class: 'material-symbols' }, 'content_paste'),
   chevronDown: NcChevronDown,
+  pencil: NcPencil,
+  rename: NcRename,
+  ncEdit: NcEdit,
+  ncArrowUp: NcArrowUp,
+  ncArrowDown: NcArrowDown,
 }
 
 export const getMdiIcon = (type: string): any => {

From 1f3305309f00dee5135a6c80e57acf943c73e8d5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 09/11] fix(test): pagination pw test fail issue

---
 packages/nc-gui/components/nc/Pagination.vue     |  2 +-
 .../nc-gui/components/smartsheet/Pagination.vue  |  2 +-
 tests/playwright/pages/Dashboard/Grid/index.ts   | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/nc/Pagination.vue b/packages/nc-gui/components/nc/Pagination.vue
index 32cc5a0abf..fde01c4879 100644
--- a/packages/nc-gui/components/nc/Pagination.vue
+++ b/packages/nc-gui/components/nc/Pagination.vue
@@ -56,7 +56,7 @@ const pagesList = computed(() => {
 </script>
 
 <template>
-  <div v-show="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
+  <div v-if="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
     <component :is="props.firstPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
       <template v-if="props.firstPageTooltip" #title>
         {{ props.firstPageTooltip }}
diff --git a/packages/nc-gui/components/smartsheet/Pagination.vue b/packages/nc-gui/components/smartsheet/Pagination.vue
index 5f248727d5..773b32762d 100644
--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@@ -100,7 +100,7 @@ const renderAltOrOptlKey = () => {
         'ml-8': alignLeft,
       }"
     >
-      <div v-if="isViewDataLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">
+      <div v-if="isViewDataLoading" class="nc-pagination-skeleton flex flex-row justify-center item-center min-h-10 min-w-42">
         <a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
       </div>
       <NcPagination
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts
index 35e00af4f2..b1d9bd9887 100644
--- a/tests/playwright/pages/Dashboard/Grid/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/index.ts
@@ -302,12 +302,12 @@ export class GridPage extends BasePage {
   async verifyTotalRowCount({ count }: { count: number }) {
     // wait for 100 ms and try again : 5 times
     let i = 0;
-    await this.get().locator(`.nc-pagination`).waitFor();
+    await this.get().locator(`.nc-pagination-skeleton`).waitFor({ state: 'hidden' });
     let records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
     let recordCnt = records[0].split(' ')[0];
 
     while (parseInt(recordCnt) !== count && i < 5) {
-      await this.get().locator(`.nc-pagination`).waitFor();
+      await this.get().locator(`.nc-pagination-skeleton`).waitFor({ state: 'hidden' });
       records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
       recordCnt = records[0].split(' ')[0];
 
@@ -319,6 +319,11 @@ export class GridPage extends BasePage {
   }
 
   async verifyPaginationCount({ count }: { count: string }) {
+    if (await this.get().locator('.nc-pagination').isHidden()) {
+      expect(1).toBe(+count);
+      return;
+    }
+
     await expect(this.get().locator(`.nc-pagination .total`)).toHaveText(count);
   }
 
@@ -329,6 +334,8 @@ export class GridPage extends BasePage {
     type: 'first-page' | 'last-page' | 'next-page' | 'prev-page';
     skipWait?: boolean;
   }) {
+    if (await this.get().locator('.nc-pagination').isHidden()) return;
+
     if (!skipWait) {
       await this.get().locator(`.nc-pagination .${type}`).click();
       await this.waitLoading();
@@ -345,6 +352,11 @@ export class GridPage extends BasePage {
   }
 
   async verifyActivePage({ pageNumber }: { pageNumber: string }) {
+    if (await this.get().locator('.nc-pagination').isHidden()) {
+      expect(1).toBe(+pageNumber);
+      return;
+    }
+
     await expect(this.get().locator(`.nc-pagination .ant-select-selection-item`)).toHaveText(pageNumber);
   }
 

From 10409046d225f6abf59a62020f96b58978ab3905 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 10/11] fix(nc-gui): updated paste icons & removed duplicate
 icon files

---
 packages/nc-gui/assets/nc-icons/paste.svg | 4 ++++
 packages/nc-gui/utils/iconUtils.ts        | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/paste.svg

diff --git a/packages/nc-gui/assets/nc-icons/paste.svg b/packages/nc-gui/assets/nc-icons/paste.svg
new file mode 100644
index 0000000000..0a46a4c8f8
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/paste.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 2.66663H12C12.3536 2.66663 12.6928 2.8071 12.9428 3.05715C13.1928 3.3072 13.3333 3.64634 13.3333 3.99996V13.3333C13.3333 13.6869 13.1928 14.0261 12.9428 14.2761C12.6928 14.5262 12.3536 14.6666 12 14.6666H3.99999C3.64637 14.6666 3.30723 14.5262 3.05718 14.2761C2.80713 14.0261 2.66666 13.6869 2.66666 13.3333V3.99996C2.66666 3.64634 2.80713 3.3072 3.05718 3.05715C3.30723 2.8071 3.64637 2.66663 3.99999 2.66663H5.33332" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 1.33337H6.00001C5.63182 1.33337 5.33334 1.63185 5.33334 2.00004V3.33337C5.33334 3.70156 5.63182 4.00004 6.00001 4.00004H10C10.3682 4.00004 10.6667 3.70156 10.6667 3.33337V2.00004C10.6667 1.63185 10.3682 1.33337 10 1.33337Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index bcb2387305..519c261e75 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -115,6 +115,7 @@ import NcRename from '~icons/nc-icons/rename'
 import NcDuplicate from '~icons/nc-icons/duplicate'
 import NcEdit from '~icons/nc-icons/edit'
 import NcCopy from '~icons/nc-icons/copy'
+import NcPaste from '~icons/nc-icons/paste'
 import NcArrowUp from '~icons/nc-icons/arrow-up'
 import NcArrowDown from '~icons/nc-icons/arrow-down'
 import NcUpload from '~icons/nc-icons/upload'
@@ -470,7 +471,7 @@ export const iconMap = {
   role_no_access: NoAccess,
   commentHere: NcCommentHere,
   fileImage: FileImageIcon,
-  paste: h('span', { class: 'material-symbols' }, 'content_paste'),
+  paste: NcPaste,
   chevronDown: NcChevronDown,
   pencil: NcPencil,
   rename: NcRename,

From ab37d5c3382f3e309371abbb85e81ed75ba09fd6 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH 11/11] chore(nc-gui): fix typo error

---
 .../nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue     | 2 +-
 packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 59f8de7d24..65c79b2d6e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -232,7 +232,7 @@ const onDelete = async () => {
             ]"
             class="nc-base-menu-item group nc-view-context-download-option"
           >
-            <GeneralIcon type="download" />
+            <GeneralIcon icon="download" />
             {{ $t('general.download') }}
           </div>
         </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 38aaab5515..e95329df8c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -145,7 +145,7 @@ useMenuCloseOnEsc(open)
             <a-sub-menu key="download">
               <template #title>
                 <div v-e="['c:download']" class="nc-base-menu-item group">
-                  <GeneralIcon type="download" />
+                  <GeneralIcon icon="download" />
                   {{ $t('general.download') }}
                   <div class="flex-1" />