From 092cd9df5031e84104956826654f5fcb1dda4d6b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:55 +0000
Subject: [PATCH 01/31] feat(nc-gui): base icon color

---
 packages/nc-gui/assets/img/hue-colors.png     | Bin 0 -> 59616 bytes
 .../components/general/BaseColorPicker.vue    | 205 ++++++++++++++++++
 2 files changed, 205 insertions(+)
 create mode 100644 packages/nc-gui/assets/img/hue-colors.png
 create mode 100644 packages/nc-gui/components/general/BaseColorPicker.vue

diff --git a/packages/nc-gui/assets/img/hue-colors.png b/packages/nc-gui/assets/img/hue-colors.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ea164a8f05e16472f41214ba9f5f5332b6d9d9d
GIT binary patch
literal 59616
zcmeI5T})eL7=XXiR(2%RbvR>XD3we@kPN(-`^m=Ir3=FaoQRQ`;0jY0b<xG$G=Ysm
z3<PK5{0W*R3vjV5Z~-V6ZqX$jixSNOiJ94O%T`4pIt&oPugW~%*B?6Q;mV7JJQt*;
z=d`2WIp=$y?|I+zu5oX1fjv1bSqNb--0dw9LN}i3Lbn(X+rRZ5G#<1gB?UW0M_>9M
z#xLI2$_igEDiYahH?83fVUxQUKWWB~5Y`q=SdB+bzSd%iZq-GLb>X?(@!Zf0hlFs8
zLa(RPuZ;}+^5*rIo!;lSjNa+{{)@?8-STD5mLL1FFN8k5@>2KECHv*Ss!pD{J~KN0
z)_CRk?=wxa&-G0WpFP^u?YS_w&G&HS@!U;+ADTa2wcR~=G`QhpdG+~$gA@C2+}7Gh
zC$4r4t_sXf`%etMk})?l-CQx{pDDljYG=c~iTuy}zSZZ?{IK!XkrTfS_RfuuZ>{O+
z%l&33lr(?Q{z3n#*=bM4h7AA2#*9;)$NF2-I`c2TbE~GYq59a&o^4}KJofI6pZcr6
zvtQ}|=fj(`1-DaI&!&&1t{!>3`KhYm$u%GEA1wMe(;X0+#il!4i=I?kk^*I|zb<(_
zyl3s#0WJ8b*~XTD<|=F7o#0dDyMrQ>wDjLouekRHg(K(1^@;u<V+Wr&Y&H2%SC&uc
zP1&glzl-k36X#5}xEyQqgl*45jfsarcZwS(TO4|_Q`DV)-)l00DdKIDExPT#6mhX+
zm)YPaiA{@+Mr^$5jKkt<%UrYga7A{o2G*Huv3NAAyQ}o0*eBin#5kOG4kw3`tJB8S
zsit2hTN{(DJQIkW#7>1kpinJjE6)VTmW7I1ps-M3-Ko}_tUJ*NQXilZutLhvA^Fe<
zXoRrEMI)dQ)R};Smq{2j0vbUj#?T081T=!eWi$dBLE$nQ0ga$4RVXfz1uAF+Gy)m{
zjj&LfMl}M}2vj4e>j8~`Mo?9}XaqC@8eyTppK1g&0vZ905WD>bjetf#BcKt`2n&#e
zMnEH=5!A8?jetf_c#uFN47KIVMtcFM2_qUqsOpnLhK?tW5=V)n#L<{+2%zH=#8F~r
zc=;XIc7@nU>?C#)JBgkDZ|vMLGVrwBXyewCcc)|cK$|T&V_}5jrr*Qj+Fd~@Zj&>4
zv#2-k?3FH_Su&YN+HTcb9tc#J_vcy_FzvF{8nF77X_}__%vzuMvO>aX-ujHM$<dVO
zIVUaGrku5yf|zLy<_Z!}h?@o%fd}9LcpygrJOB@j5vT<Zzyo6hSXRsYE_eVQfCu0~
z)SzMyzyt6AJcwj$zyt6AJOB^CgUASA4`dph<O22pdmu*uJOB^C1MmPmh!n_y2XX|!
z1MmPmFfIh;ktj{1_JG<0Y7ZjKDX<6N!99rwgPYeq80`hX%^FxfFka2rBmuE}SUxNt
zmJiE^<%=5uF#evzc+eem2i-w;H3FbJ=nlGr?x1@dxMJWzchH>#Jqh~g2&|9<y=!Wu
zMHiyp^LfqHnNViMz8d)j17exxVlI)={O5XkEyM+gXu~$way`^^ap~;VMhRC5-m5Ry
zL(LK#Yb(wS7l$l)uVuL&Y9g<?{gWkc3I73nO<xvA)8XQzbtZFd+H|I%dJ8kHW+9-o
z28f$bkm1C^1MooJv<4o42eKm`cmN*Aj(Fe!cmN(Kk%c_~52Vt>9)Jf@gJTcC19B)v
zatM1M(@fw2cmN)RE9$TZ-~skPRU=S)03Lt`QlP95Jn%pJ)ioiqo-FiwO7TLGTPa8z
z;e|*Wh3h2oLU<v(5MC%!|BM$}A>aq>0ei7qAxHv}1SAP)+^9p1kem~+d{{m#-wLvP
zz#gy%?8WY<1@?eFU{3`FV2_F~6&tDeS}7@AU=P>>_JF-;a~p$nsNcivQNJgZ7Ulim
z!OF&i+Ml}*qzNJ3tC%nE?=881ZGJ2ihR^?ya5iP9hM`}@26bITqQ$cR35u=9?MTmk
SWFpV_cu}~k*xRwwSN9)c{wVGM

literal 0
HcmV?d00001

diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
new file mode 100644
index 0000000000..1634cdbaf5
--- /dev/null
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import data from 'emoji-mart-vue-fast/data/apple.json'
+import 'emoji-mart-vue-fast/css/emoji-mart.css'
+import { Slider } from '@ckpack/vue-color'
+import { Icon } from '@iconify/vue'
+import tinycolor from 'tinycolor2'
+
+import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
+
+const props = defineProps<{
+  hue?: number | undefined
+  size?: 'small' | 'medium' | 'large' | 'xlarge'
+  readonly?: boolean
+  disableClearing?: boolean
+}>()
+
+const emit = defineEmits(['colorSelected'])
+
+const { hue: initialHue, size = 'medium', readonly } = props
+
+const hueData = [199, 24, 41, 141, 224, 3, 317, 271, 332]
+
+const clearable = computed(() => {
+  return !props.disableClearing && !readonly
+})
+
+const isOpen = ref(false)
+
+const isOpenHuePicker = ref(false)
+
+const colorRef = ref(
+  initialHue !== undefined
+    ? {
+        hsv: {
+          a: 1,
+          h: initialHue,
+          s: 0,
+          v: 0,
+        },
+      }
+    : '',
+)
+
+function selectColor(hue: number) {
+  emit('colorSelected', hue)
+
+  isOpenHuePicker.value = false
+  isOpen.value = false
+}
+
+const onClick = (e: Event) => {
+  if (readonly) return
+
+  e.stopPropagation()
+
+  isOpen.value = !isOpen.value
+}
+
+// Due to calculation of dropdown position by ant dropdown, we need to delay the isOpen change
+// otherwise dropdown opening will be slow
+const debounceIsOpen = ref(false)
+watch(isOpen, () => {
+  if (!isOpen.value) {
+    debounceIsOpen.value = isOpen.value
+    return
+  }
+
+  setTimeout(() => {
+    debounceIsOpen.value = isOpen.value
+  }, 10)
+})
+
+const showClearButton = computed(() => {
+  return !!colorRef.value && clearable.value
+})
+
+watchEffect(() => {
+  console.log('hue', tinycolor(`hsv(${colorRef.value?.hsv?.h || 'none'}, 100%, 30%)`).toHexString(), colorRef.value)
+})
+</script>
+
+<template>
+  <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
+    <div
+      class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
+      :class="{
+        'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
+        'bg-gray-500 bg-opacity-15': isOpen,
+        'h-6 w-6 text-lg': size === 'small',
+        'h-8 w-8 text-xl': size === 'medium',
+        'h-10 w-10 text-2xl': size === 'large',
+        'h-14 w-16 text-5xl': size === 'xlarge',
+      }"
+      @click="onClick"
+    >
+      <template v-if="!colorRef">
+        <slot name="default" />
+      </template>
+      <template v-else>
+        <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <mask
+            id="mask0_1749_80944"
+            style="mask-type: luminance"
+            maskUnits="userSpaceOnUse"
+            x="94"
+            y="40"
+            width="885"
+            height="993"
+          >
+            <path d="M978.723 40H94V1033H978.723V40Z" fill="white" />
+          </mask>
+          <g mask="url(#mask0_1749_80944)">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
+              :fill="tinycolor(`hsv(${colorRef?.hsv?.h || 'none'}, 100%, 30%)`).toHexString()"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
+              :fill="tinycolor(`hsv(${colorRef?.hsv?.h || 'none'}, 30%, 100%)`).toHexString()"
+            />
+          </g>
+        </svg>
+      </template>
+    </div>
+    <template #overlay>
+      <div
+        class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg"
+        :class="{
+          clearable: showClearButton,
+        }"
+      >
+        <div class="w-[164px] flex flex-wrap">
+          <div
+            v-for="(hue, i) of hueData"
+            :key="i"
+            class="p-1 rounded cursor-pointer hover:bg-gray-200"
+            :class="i > 4 ? 'mt-3' : ''"
+          >
+            <div
+              class="rounded h-6 w-6"
+              :style="{
+                backgroundColor: tinycolor(`hsv(${hue}, 30%, 100%) `).toHexString(),
+              }"
+            ></div>
+          </div>
+
+          <a-dropdown
+            v-model:visible="isOpenHuePicker"
+            :trigger="['click']"
+            :disabled="readonly"
+            placement="bottom"
+            overlayClassName="!left-8.5"
+          >
+            <div class="p-1 rounded cursor-pointer hover:bg-gray-200 mt-3">
+              <div
+                class="rounded overflow-hidden h-6 w-6"
+                :style="{
+                  backgroundColor: tinycolor(`hsv(${hue}, 30%, 100%) `).toHexString(),
+                }"
+              >
+                <img src="~/assets/img/hue-colors.png" class="" alt="Hue picker" />
+              </div>
+            </div>
+            <template #overlay>
+              <div
+                class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg flex flex-col space-y-3"
+                :class="{
+                  clearable: showClearButton,
+                }"
+              >
+                <div class="text-sm font-semibold">Custom Hue</div>
+                <Slider v-model="colorRef" class="nc-hue-color-picker" :disable-fields="true" />
+
+                <div class="flex items-center justify-end">
+                  <NcButton type="secondary" size="small" @click="selectColor(colorRef?.hsv?.h)"> Apply </NcButton>
+                </div>
+              </div>
+            </template>
+          </a-dropdown>
+        </div>
+      </div>
+    </template>
+  </a-dropdown>
+</template>
+
+<style lang="scss">
+.clearable {
+  .emoji-mart-search {
+    @apply pr-22;
+  }
+}
+
+.nc-hue-color-picker {
+  .vc-slider-swatches {
+    @apply hidden;
+  }
+  .vc-hue {
+    @apply rounded-lg;
+  }
+}
+</style>

From c5cda2b2af256761b1a8fd90d5a3299708c36155 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:55 +0000
Subject: [PATCH 02/31] fix(nc-gui): base color setup

---
 .../components/general/BaseColorPicker.vue    | 90 +++++++++++--------
 1 file changed, 51 insertions(+), 39 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
index 1634cdbaf5..7892a39ffc 100644
--- a/packages/nc-gui/components/general/BaseColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import data from 'emoji-mart-vue-fast/data/apple.json'
-import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import { Slider } from '@ckpack/vue-color'
-import { Icon } from '@iconify/vue'
 import tinycolor from 'tinycolor2'
-
-import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
+import { ProjectInj } from '#imports'
 
 const props = defineProps<{
   hue?: number | undefined
@@ -16,10 +12,14 @@ const props = defineProps<{
 
 const emit = defineEmits(['colorSelected'])
 
-const { hue: initialHue, size = 'medium', readonly } = props
+const { hue, size = 'medium', readonly } = props
 
 const hueData = [199, 24, 41, 141, 224, 3, 317, 271, 332]
 
+const base = inject(ProjectInj)!
+
+const localHue = ref(hue)
+
 const clearable = computed(() => {
   return !props.disableClearing && !readonly
 })
@@ -28,21 +28,35 @@ const isOpen = ref(false)
 
 const isOpenHuePicker = ref(false)
 
-const colorRef = ref(
-  initialHue !== undefined
+const colorRefs = ref(
+  localHue.value !== undefined
     ? {
-        hsv: {
-          a: 1,
-          h: initialHue,
-          s: 0,
-          v: 0,
-        },
+        h: localHue.value,
+        s: 0,
+        v: 0,
       }
-    : '',
+    : undefined,
 )
 
-function selectColor(hue: number) {
-  emit('colorSelected', hue)
+const colorRef = computed({
+  get: () => {
+    return localHue.value !== undefined
+      ? {
+          h: localHue.value,
+          s: 0,
+          v: 0,
+        }
+      : undefined
+  },
+  set: (val) => {
+    localHue.value = val?.hsv?.h
+  },
+})
+
+function selectColor(value: number) {
+  localHue.value = value
+
+  emit('colorSelected', value)
 
   isOpenHuePicker.value = false
   isOpen.value = false
@@ -56,26 +70,14 @@ const onClick = (e: Event) => {
   isOpen.value = !isOpen.value
 }
 
-// Due to calculation of dropdown position by ant dropdown, we need to delay the isOpen change
-// otherwise dropdown opening will be slow
-const debounceIsOpen = ref(false)
-watch(isOpen, () => {
-  if (!isOpen.value) {
-    debounceIsOpen.value = isOpen.value
-    return
-  }
-
-  setTimeout(() => {
-    debounceIsOpen.value = isOpen.value
-  }, 10)
-})
-
 const showClearButton = computed(() => {
-  return !!colorRef.value && clearable.value
+  return colorRef.value?.h !== undefined && clearable.value
 })
 
-watchEffect(() => {
-  console.log('hue', tinycolor(`hsv(${colorRef.value?.hsv?.h || 'none'}, 100%, 30%)`).toHexString(), colorRef.value)
+watch(isOpenHuePicker, () => {
+  if (!isOpenHuePicker.value && localHue.value !== parseProp(base.value.meta).iconHue) {
+    localHue.value = parseProp(base.value.meta).iconHue
+  }
 })
 </script>
 
@@ -93,7 +95,7 @@ watchEffect(() => {
       }"
       @click="onClick"
     >
-      <template v-if="!colorRef">
+      <template v-if="hue === undefined">
         <slot name="default" />
       </template>
       <template v-else>
@@ -114,13 +116,13 @@ watchEffect(() => {
               fill-rule="evenodd"
               clip-rule="evenodd"
               d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
-              :fill="tinycolor(`hsv(${colorRef?.hsv?.h || 'none'}, 100%, 30%)`).toHexString()"
+              :fill="tinycolor(`hsv(${colorRef?.h || 'none'}, 100%, 30%)`).toHexString()"
             />
             <path
               fill-rule="evenodd"
               clip-rule="evenodd"
               d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
-              :fill="tinycolor(`hsv(${colorRef?.hsv?.h || 'none'}, 30%, 100%)`).toHexString()"
+              :fill="tinycolor(`hsv(${colorRef?.h || 'none'}, 30%, 100%)`).toHexString()"
             />
           </g>
         </svg>
@@ -145,6 +147,7 @@ watchEffect(() => {
               :style="{
                 backgroundColor: tinycolor(`hsv(${hue}, 30%, 100%) `).toHexString(),
               }"
+              @click="selectColor(hue)"
             ></div>
           </div>
 
@@ -173,10 +176,19 @@ watchEffect(() => {
                 }"
               >
                 <div class="text-sm font-semibold">Custom Hue</div>
-                <Slider v-model="colorRef" class="nc-hue-color-picker" :disable-fields="true" />
+                <Slider
+                  :model-value="colorRef"
+                  class="nc-hue-color-picker"
+                  :disable-fields="true"
+                  @update:model-value="
+                    (value) => {
+                      console.log('update', value)
+                    }
+                  "
+                />
 
                 <div class="flex items-center justify-end">
-                  <NcButton type="secondary" size="small" @click="selectColor(colorRef?.hsv?.h)"> Apply </NcButton>
+                  <NcButton type="secondary" size="small" @click="selectColor(localHue)"> Apply </NcButton>
                 </div>
               </div>
             </template>

From 5a7ed8904f39a0f9a3fb944870867f6e527b687c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:55 +0000
Subject: [PATCH 03/31] feat(nc-gui): custom base icon color ee

---
 .../components/general/BaseColorPicker.vue    | 162 ++++++++++--------
 packages/nc-gui/lang/en.json                  |   6 +-
 2 files changed, 99 insertions(+), 69 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
index 7892a39ffc..368f17954f 100644
--- a/packages/nc-gui/components/general/BaseColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { Slider } from '@ckpack/vue-color'
 import tinycolor from 'tinycolor2'
-import { ProjectInj } from '#imports'
 
 const props = defineProps<{
   hue?: number | undefined
@@ -16,45 +15,34 @@ const { hue, size = 'medium', readonly } = props
 
 const hueData = [199, 24, 41, 141, 224, 3, 317, 271, 332]
 
-const base = inject(ProjectInj)!
-
-const localHue = ref(hue)
-
-const clearable = computed(() => {
-  return !props.disableClearing && !readonly
-})
+const defaultHueValue = {
+  h: 0,
+  s: 0,
+  v: 0,
+}
 
 const isOpen = ref(false)
 
 const isOpenHuePicker = ref(false)
 
-const colorRefs = ref(
-  localHue.value !== undefined
+const colorRef = ref(
+  hue !== undefined && hue !== null
     ? {
-        h: localHue.value,
-        s: 0,
-        v: 0,
+        ...defaultHueValue,
+        h: hue,
       }
     : undefined,
 )
 
-const colorRef = computed({
-  get: () => {
-    return localHue.value !== undefined
-      ? {
-          h: localHue.value,
-          s: 0,
-          v: 0,
-        }
-      : undefined
-  },
-  set: (val) => {
-    localHue.value = val?.hsv?.h
-  },
-})
-
-function selectColor(value: number) {
-  localHue.value = value
+function selectColor(value: number | null) {
+  if (value === null) {
+    colorRef.value = undefined
+  } else {
+    colorRef.value = {
+      ...defaultHueValue,
+      h: value,
+    }
+  }
 
   emit('colorSelected', value)
 
@@ -70,15 +58,24 @@ const onClick = (e: Event) => {
   isOpen.value = !isOpen.value
 }
 
-const showClearButton = computed(() => {
-  return colorRef.value?.h !== undefined && clearable.value
-})
-
-watch(isOpenHuePicker, () => {
-  if (!isOpenHuePicker.value && localHue.value !== parseProp(base.value.meta).iconHue) {
-    localHue.value = parseProp(base.value.meta).iconHue
-  }
-})
+watch(
+  isOpenHuePicker,
+  () => {
+    if (!isOpenHuePicker.value && colorRef.value?.h !== hue) {
+      if (isNaN(parseFloat(`${hue}`))) {
+        colorRef.value = undefined
+      } else {
+        colorRef.value = {
+          ...defaultHueValue,
+          h: hue as number,
+        }
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <template>
@@ -95,7 +92,7 @@ watch(isOpenHuePicker, () => {
       }"
       @click="onClick"
     >
-      <template v-if="hue === undefined">
+      <template v-if="colorRef?.h === undefined">
         <slot name="default" />
       </template>
       <template v-else>
@@ -129,25 +126,25 @@ watch(isOpenHuePicker, () => {
       </template>
     </div>
     <template #overlay>
-      <div
-        class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg"
-        :class="{
-          clearable: showClearButton,
-        }"
-      >
+      <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg">
         <div class="w-[164px] flex flex-wrap">
           <div
-            v-for="(hue, i) of hueData"
+            v-for="(h, i) of hueData"
             :key="i"
-            class="p-1 rounded cursor-pointer hover:bg-gray-200"
-            :class="i > 4 ? 'mt-3' : ''"
+            class="nc-pre-defined-hue-item p-1 rounded cursor-pointer hover:bg-gray-200"
+            :class="{
+              'mt-3': i > 4,
+            }"
           >
             <div
               class="rounded h-6 w-6"
+              :class="{
+                selected: h === hue,
+              }"
               :style="{
-                backgroundColor: tinycolor(`hsv(${hue}, 30%, 100%) `).toHexString(),
+                backgroundColor: tinycolor(`hsv(${h}, 30%, 100%) `).toHexString(),
               }"
-              @click="selectColor(hue)"
+              @click="selectColor(h)"
             ></div>
           </div>
 
@@ -156,11 +153,19 @@ watch(isOpenHuePicker, () => {
             :trigger="['click']"
             :disabled="readonly"
             placement="bottom"
-            overlayClassName="!left-8.5"
+            overlayClassName="!left-9"
           >
-            <div class="p-1 rounded cursor-pointer hover:bg-gray-200 mt-3">
+            <div
+              class="nc-custom-hue-picker-item p-1 rounded cursor-pointer hover:bg-gray-200 mt-3"
+              :class="{
+                'bg-gray-200': isOpenHuePicker,
+              }"
+            >
               <div
                 class="rounded overflow-hidden h-6 w-6"
+                :class="{
+                  selected: hue !== undefined && hue !== null && !hueData.includes(hue),
+                }"
                 :style="{
                   backgroundColor: tinycolor(`hsv(${hue}, 30%, 100%) `).toHexString(),
                 }"
@@ -169,49 +174,72 @@ watch(isOpenHuePicker, () => {
               </div>
             </div>
             <template #overlay>
-              <div
-                class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg flex flex-col space-y-3"
-                :class="{
-                  clearable: showClearButton,
-                }"
-              >
-                <div class="text-sm font-semibold">Custom Hue</div>
+              <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg flex flex-col space-y-4">
+                <div class="text-sm font-semibold">{{ $t('labels.customHue') }}</div>
+
                 <Slider
                   :model-value="colorRef"
                   class="nc-hue-color-picker"
+                  :style="{
+                    ['--nc-hue-slider-pointer-color']: tinycolor(`hsv(${colorRef?.h}, 100%, 100%)`).toHexString(),
+                  }"
                   :disable-fields="true"
                   @update:model-value="
                     (value) => {
-                      console.log('update', value)
+                      if (value?.hsv?.h === undefined) return
+                      colorRef = {
+                        ...defaultHueValue,
+                        h: +value.hsv.h,
+                      }
                     }
                   "
                 />
 
                 <div class="flex items-center justify-end">
-                  <NcButton type="secondary" size="small" @click="selectColor(localHue)"> Apply </NcButton>
+                  <NcButton type="secondary" size="small" @click="selectColor(colorRef?.h || 0)">
+                    {{ $t('general.apply') }}
+                  </NcButton>
                 </div>
               </div>
             </template>
           </a-dropdown>
         </div>
+
+        <div class="mt-3 flex items-center justify-end">
+          <NcButton type="secondary" size="small" @click.stop="selectColor(null)"> {{ $t('general.remove') }} </NcButton>
+        </div>
       </div>
     </template>
   </a-dropdown>
 </template>
 
-<style lang="scss">
-.clearable {
-  .emoji-mart-search {
-    @apply pr-22;
+<style lang="scss" scoped>
+.nc-pre-defined-hue-item,
+.nc-custom-hue-picker-item {
+  .selected {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3069fe;
   }
 }
 
-.nc-hue-color-picker {
+:deep(.nc-hue-color-picker) {
+  &.vc-slider {
+    width: 297px;
+  }
   .vc-slider-swatches {
     @apply hidden;
   }
   .vc-hue {
     @apply rounded-lg;
   }
+  .vc-slider-hue-warp {
+    height: 6px;
+    .vc-hue-pointer {
+      top: -3px !important;
+    }
+    .vc-hue-picker {
+      background-color: white;
+      box-shadow: 0 0 0 3px var(--nc-hue-slider-pointer-color) !important;
+    }
+  }
 }
 </style>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 36d7238165..93783fee1b 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -197,7 +197,8 @@
     "banner": "Banner",
     "logo": "Logo",
     "dropdown": "Dropdown",
-    "list": "List"
+    "list": "List",
+    "apply": "Apply"
   },
   "objects": {
     "day": "Day",
@@ -698,7 +699,8 @@
     "showFieldOnConditionsMet": "Shows field only when conditions are met",
     "limitOptions": "Limit ptions",
     "limitOptionsSubtext": "Limit options visible to users by selecting available options",
-    "clearSelection": "Clear selection"
+    "clearSelection": "Clear selection",
+    "customHue": "Custom Hue"
   },
   "activity": {
     "noRange": "Calendar view requires a date range",

From 25dfa8973490639bcf4be523eeb39b281da54954 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:55 +0000
Subject: [PATCH 04/31] feat(nc-gui): add base icon color support

---
 .../dashboard/TreeView/ProjectNode.vue        | 28 +++++----
 .../components/general/BaseColorPicker.vue    | 44 +++++++++-----
 packages/nc-gui/lib/constants.ts              | 60 +++++++++++++++++++
 3 files changed, 105 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 0230f38925..c4662746c2 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -172,16 +172,16 @@ defineExpose({
   enableEditMode,
 })
 
-const setIcon = async (icon: string, base: BaseType) => {
+const setColor = async (hue: number, base: BaseType) => {
   try {
     const meta = {
-      ...((base.meta as object) || {}),
-      icon,
+      ...parseProp(base.meta),
+      iconHue: hue,
     }
 
     basesStore.updateProject(base.id!, { meta: JSON.stringify(meta) })
 
-    $e('a:base:icon:navdraw', { icon })
+    $e('a:base:icon:color:navdraw', { iconHue: hue })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -385,6 +385,10 @@ const projectDelete = () => {
   isProjectDeleteDialogVisible.value = true
   $e('c:project:delete')
 }
+
+watchEffect(() => {
+  console.log('base', base.value)
+})
 </script>
 
 <template>
@@ -423,16 +427,18 @@ const projectDelete = () => {
             <div v-e="['c:base:emojiSelect']" class="flex items-center select-none w-6 h-full">
               <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
 
-              <LazyGeneralEmojiPicker
+              <LazyGeneralBaseColorPicker
                 v-else
-                :key="base.meta?.icon"
-                :emoji="base.meta?.icon"
-                :readonly="true"
+                :key="parseProp(base.meta).iconHue"
+                :hue="parseProp(base.meta).iconHue"
                 size="small"
-                @emoji-selected="setIcon($event, base)"
+                :readonly="base.type && base.type !== 'database'"
+                @color-selected="setColor($event, base)"
               >
-                <GeneralProjectIcon :type="base.type" />
-              </LazyGeneralEmojiPicker>
+                <template #default>
+                  <GeneralProjectIcon :type="base.type" />
+                </template>
+              </LazyGeneralBaseColorPicker>
             </div>
           </div>
 
diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
index 368f17954f..f6b2e3bfff 100644
--- a/packages/nc-gui/components/general/BaseColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -2,8 +2,10 @@
 import { Slider } from '@ckpack/vue-color'
 import tinycolor from 'tinycolor2'
 
+import { BASE_ICON_COLOR_HUE_DATA as preDefinedHueData } from '#imports'
+
 const props = defineProps<{
-  hue?: number | undefined
+  hue?: number | null
   size?: 'small' | 'medium' | 'large' | 'xlarge'
   readonly?: boolean
   disableClearing?: boolean
@@ -13,8 +15,6 @@ const emit = defineEmits(['colorSelected'])
 
 const { hue, size = 'medium', readonly } = props
 
-const hueData = [199, 24, 41, 141, 224, 3, 317, 271, 332]
-
 const defaultHueValue = {
   h: 0,
   s: 0,
@@ -92,7 +92,7 @@ watch(
       }"
       @click="onClick"
     >
-      <template v-if="colorRef?.h === undefined">
+      <template v-if="hue === undefined || hue === null">
         <slot name="default" />
       </template>
       <template v-else>
@@ -113,13 +113,29 @@ watch(
               fill-rule="evenodd"
               clip-rule="evenodd"
               d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
-              :fill="tinycolor(`hsv(${colorRef?.h || 'none'}, 100%, 30%)`).toHexString()"
+              :fill="
+                tinycolor(
+                  preDefinedHueData[`_${colorRef?.h}`]
+                    ? `hsv(${preDefinedHueData[`_${colorRef?.h}`].shade.h},${preDefinedHueData[`_${colorRef?.h}`].shade.s}%, ${
+                        preDefinedHueData[`_${colorRef?.h}`].shade.v
+                      }%)`
+                    : `hsv(${colorRef?.h || 'none'}, 100%, 30%)`,
+                ).toHexString()
+              "
             />
             <path
               fill-rule="evenodd"
               clip-rule="evenodd"
               d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
-              :fill="tinycolor(`hsv(${colorRef?.h || 'none'}, 30%, 100%)`).toHexString()"
+              :fill="
+                tinycolor(
+                  preDefinedHueData[`_${colorRef?.h}`]
+                    ? `hsv(${preDefinedHueData[`_${colorRef?.h}`].tint.h},${preDefinedHueData[`_${colorRef?.h}`].tint.s}%, ${
+                        preDefinedHueData[`_${colorRef?.h}`].tint.v
+                      }%)`
+                    : `hsv(${colorRef?.h || 'none'}, 30%, 100%)`,
+                ).toHexString()
+              "
             />
           </g>
         </svg>
@@ -129,7 +145,7 @@ watch(
       <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg">
         <div class="w-[164px] flex flex-wrap">
           <div
-            v-for="(h, i) of hueData"
+            v-for="(h, i) of Object.keys(preDefinedHueData)"
             :key="i"
             class="nc-pre-defined-hue-item p-1 rounded cursor-pointer hover:bg-gray-200"
             :class="{
@@ -139,12 +155,12 @@ watch(
             <div
               class="rounded h-6 w-6"
               :class="{
-                selected: h === hue,
+                selected: preDefinedHueData[h].tint.h === hue || (h === '_199' && (hue === undefined || hue === null)),
               }"
               :style="{
-                backgroundColor: tinycolor(`hsv(${h}, 30%, 100%) `).toHexString(),
+                backgroundColor: preDefinedHueData[h].pickerColor,
               }"
-              @click="selectColor(h)"
+              @click="selectColor(preDefinedHueData[h].tint.h)"
             ></div>
           </div>
 
@@ -153,7 +169,7 @@ watch(
             :trigger="['click']"
             :disabled="readonly"
             placement="bottom"
-            overlayClassName="!left-9"
+            overlay-class-name="!left-9"
           >
             <div
               class="nc-custom-hue-picker-item p-1 rounded cursor-pointer hover:bg-gray-200 mt-3"
@@ -164,7 +180,7 @@ watch(
               <div
                 class="rounded overflow-hidden h-6 w-6"
                 :class="{
-                  selected: hue !== undefined && hue !== null && !hueData.includes(hue),
+                  selected: hue !== undefined && hue !== null && !preDefinedHueData[`_${hue}`],
                 }"
                 :style="{
                   backgroundColor: tinycolor(`hsv(${hue}, 30%, 100%) `).toHexString(),
@@ -204,10 +220,6 @@ watch(
             </template>
           </a-dropdown>
         </div>
-
-        <div class="mt-3 flex items-center justify-end">
-          <NcButton type="secondary" size="small" @click.stop="selectColor(null)"> {{ $t('general.remove') }} </NcButton>
-        </div>
       </div>
     </template>
   </a-dropdown>
diff --git a/packages/nc-gui/lib/constants.ts b/packages/nc-gui/lib/constants.ts
index f8257bebfa..653db51438 100644
--- a/packages/nc-gui/lib/constants.ts
+++ b/packages/nc-gui/lib/constants.ts
@@ -18,3 +18,63 @@ export const GROUP_BY_VARS = {
     __nc_false__: 'Unchecked',
   } as Record<string, string>,
 }
+
+export const BASE_ICON_COLOR_HUE_DATA: Record<
+  string,
+  { tint: { h: number; s: number; v: number }; shade: { h: number; s: number; v: number }; pickerColor: string }
+> = {
+  // blue
+  _199: {
+    tint: { h: 199, s: 79, v: 100 },
+    shade: { h: 255, s: 80, v: 40 },
+    pickerColor: '#36BFFF',
+  },
+  // orange
+  _24: {
+    tint: { h: 24, s: 64, v: 98 },
+    shade: { h: 24, s: 81, v: 59 },
+    pickerColor: '#FA8231',
+  },
+  // yellow
+  _41: {
+    tint: { h: 41, s: 62, v: 99 },
+    shade: { h: 41, s: 77, v: 40 },
+    pickerColor: '#FCBE3A',
+  },
+  // green
+  _141: {
+    tint: { h: 141, s: 63, v: 87 },
+    shade: { h: 141, s: 81, v: 34 },
+    pickerColor: '#27D665',
+  },
+  // gray
+  _217: {
+    tint: { h: 217, s: 12, v: 69 },
+    shade: { h: 217, s: 32, v: 32 },
+    pickerColor: '#6A7184',
+  },
+  // red
+  _4: {
+    tint: { h: 4, s: 60, v: 100 },
+    shade: { h: 4, s: 74, v: 49 },
+    pickerColor: '#FF4A3F',
+  },
+  // pink
+  _317: {
+    tint: { h: 317, s: 62, v: 99 },
+    shade: { h: 317, s: 77, v: 40 },
+    pickerColor: '#FC3AC6',
+  },
+  // purple
+  _271: {
+    tint: { h: 271, s: 62, v: 84 },
+    shade: { h: 271, s: 82, v: 32 },
+    pickerColor: '#7D26CD',
+  },
+  // maroon
+  _332: {
+    tint: { h: 332, s: 58, v: 83 },
+    shade: { h: 332, s: 93, v: 41 },
+    pickerColor: '#B33771',
+  },
+}

From 79bc28c76521fd8fa08de21c468664c0f8aec269 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:56 +0000
Subject: [PATCH 05/31] fix(nc-gui): replace base icon from all places except
 sidebar

---
 .../nc-gui/components/dlg/ProjectDelete.vue   | 13 ++++++++++-
 .../dlg/share-and-collaborate/View.vue        | 13 ++++++++++-
 .../components/general/BaseColorPicker.vue    |  3 ++-
 packages/nc-gui/components/project/View.vue   | 12 +++++++++-
 .../components/workspace/ProjectList.vue      | 23 +++++++++++--------
 5 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ProjectDelete.vue b/packages/nc-gui/components/dlg/ProjectDelete.vue
index 2060e11685..453b936316 100644
--- a/packages/nc-gui/components/dlg/ProjectDelete.vue
+++ b/packages/nc-gui/components/dlg/ProjectDelete.vue
@@ -52,7 +52,18 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.project')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="base" class="flex flex-row items-center py-2 px-2.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <GeneralProjectIcon :type="base.type" class="nc-view-icon px-1.5 w-10" />
+        <LazyGeneralBaseColorPicker
+          :key="parseProp(base.meta).iconHue"
+          :hue="parseProp(base.meta).iconHue"
+          size="small"
+          class="!w-auto !h-auto"
+          iconClass="nc-view-icon w-6 h-6"
+          readonly
+        >
+          <template #default>
+            <GeneralProjectIcon :type="base.type" class="nc-view-icon w-6 h-6" />
+          </template>
+        </LazyGeneralBaseColorPicker>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 6a643517fc..c8fb3b437a 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -154,7 +154,18 @@ watch(showShareModal, (val) => {
       </div>
       <div class="share-base">
         <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
+          <LazyGeneralBaseColorPicker
+            :key="parseProp(base.meta).iconHue"
+            :hue="parseProp(base.meta).iconHue"
+            size="small"
+            class="!w-auto !h-auto"
+            iconClass="nc-view-icon group-hover"
+            readonly
+          >
+            <template #default>
+              <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
+            </template>
+          </LazyGeneralBaseColorPicker>
 
           <div>{{ $t('activity.shareBase.label') }}</div>
           <div
diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
index f6b2e3bfff..629ae36771 100644
--- a/packages/nc-gui/components/general/BaseColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   size?: 'small' | 'medium' | 'large' | 'xlarge'
   readonly?: boolean
   disableClearing?: boolean
+  iconClass?: string
 }>()
 
 const emit = defineEmits(['colorSelected'])
@@ -96,7 +97,7 @@ watch(
         <slot name="default" />
       </template>
       <template v-else>
-        <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg" :class="iconClass">
           <mask
             id="mask0_1749_80944"
             style="mask-type: luminance"
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 5ecfe7182a..10af414156 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -82,7 +82,17 @@ watch(
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
-          <GeneralProjectIcon :type="openedProject?.type" />
+          <LazyGeneralBaseColorPicker
+            :key="parseProp(openedProject?.meta).iconHue"
+            :hue="parseProp(openedProject?.meta).iconHue"
+            size="small"
+            class="!w-auto !h-auto"
+            readonly
+          >
+            <template #default>
+              <GeneralProjectIcon :type="openedProject?.type" />
+            </template>
+          </LazyGeneralBaseColorPicker>
           <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" show-on-truncate-only>
             <template #title> {{ openedProject?.title }}</template>
             <span class="truncate">
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 51fc654993..9563d2bbe0 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -17,6 +17,7 @@ import {
   useNuxtApp,
   useRoles,
   useWorkspace,
+  parseProp,
 } from '#imports'
 
 const workspaceStore = useWorkspace()
@@ -181,16 +182,16 @@ function onProjectTitleClick(index: number) {
   }
 }
 
-const setIcon = async (icon: string, base: BaseType) => {
+const setColor = async (hue: number, base: BaseType) => {
   try {
     const meta = {
-      ...((base.meta as object) || {}),
-      icon,
+      ...parseProp(base.meta),
+      iconHue: hue,
     }
 
     basesStore.updateProject(base.id!, { meta: JSON.stringify(meta) })
 
-    $e('a:base:icon:navdraw', { icon })
+    $e('a:base:icon:color:navdraw', { iconHue: hue })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -250,15 +251,17 @@ const setIcon = async (icon: string, base: BaseType) => {
         <template v-if="column.dataIndex === 'title'">
           <div class="flex items-center nc-base-title gap-2.5 max-w-full -ml-1.5">
             <div class="flex items-center gap-2 text-center">
-              <LazyGeneralEmojiPicker
-                :key="record.id"
-                :emoji="record.meta?.icon"
+              <LazyGeneralBaseColorPicker
+                :key="parseProp(record.meta).iconHue"
+                :hue="parseProp(record.meta).iconHue"
                 size="small"
                 readonly
-                @emoji-selected="setIcon($event, record)"
+                @color-selected="setColor($event, record)"
               >
-                <GeneralProjectIcon :type="record.type" />
-              </LazyGeneralEmojiPicker>
+                <template #default>
+                  <GeneralProjectIcon :type="record.type" />
+                </template>
+              </LazyGeneralBaseColorPicker>
               <!-- todo: replace with switch -->
             </div>
 

From d68c20cf2ee97c60e2e77e17cbe09846e5c6ac0a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:56 +0000
Subject: [PATCH 06/31] fix(nc-gui): error on clicking custom hue option

---
 .../dashboard/TreeView/ProjectNode.vue        | 10 +--
 .../components/general/BaseColorPicker.vue    | 67 ++++++++-----------
 packages/nc-gui/store/bases.ts                |  2 +-
 3 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index c4662746c2..5b5af004b4 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -235,7 +235,7 @@ async function addNewProjectChildEntity() {
   isAddNewProjectChildEntityLoading.value = true
 
   const isProjectPopulated = basesStore.isProjectPopulated(base.value.id!)
-  if (!isProjectPopulated && base.value.type === NcProjectType.DB) {
+  if (!isProjectPopulated && base.value?.type === NcProjectType.DB) {
     // We do not wait for tables api, so that add new table is seamless.
     // Only con would be while saving table duplicate table name FE validation might not work
     // If the table list api takes time to load before the table name validation
@@ -245,7 +245,7 @@ async function addNewProjectChildEntity() {
   try {
     openTableCreateDialog()
 
-    if (!base.value.isExpanded && base.value.type !== NcProjectType.DB) {
+    if (!base.value.isExpanded && base.value?.type !== NcProjectType.DB) {
       base.value.isExpanded = true
     }
   } finally {
@@ -432,11 +432,11 @@ watchEffect(() => {
                 :key="parseProp(base.meta).iconHue"
                 :hue="parseProp(base.meta).iconHue"
                 size="small"
-                :readonly="base.type && base.type !== 'database'"
+                :readonly="base?.type && base?.type !== 'database'"
                 @color-selected="setColor($event, base)"
               >
                 <template #default>
-                  <GeneralProjectIcon :type="base.type" />
+                  <GeneralProjectIcon :type="base?.type" />
                 </template>
               </LazyGeneralBaseColorPicker>
             </div>
@@ -739,7 +739,7 @@ watchEffect(() => {
     </div>
     <template v-if="!isSharedBase" #overlay>
       <NcMenu class="!py-0 rounded text-sm">
-        <template v-if="contextMenuTarget.type === 'base' && base.type === 'database'"></template>
+        <template v-if="contextMenuTarget.type === 'base' && base?.type === 'database'"></template>
 
         <template v-else-if="contextMenuTarget.type === 'source'"></template>
 
diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
index 629ae36771..2cb36efcea 100644
--- a/packages/nc-gui/components/general/BaseColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -16,34 +16,25 @@ const emit = defineEmits(['colorSelected'])
 
 const { hue, size = 'medium', readonly } = props
 
-const defaultHueValue = {
+const defaultHueColor = {
   h: 0,
   s: 0,
   v: 0,
 }
 
+const defaultHueValue = 199
+
 const isOpen = ref(false)
 
 const isOpenHuePicker = ref(false)
 
-const colorRef = ref(
-  hue !== undefined && hue !== null
-    ? {
-        ...defaultHueValue,
-        h: hue,
-      }
-    : undefined,
-)
+const colorRef = ref({
+  ...defaultHueColor,
+  h: !(hue !== 0 && !hue) ? hue : defaultHueValue,
+})
 
-function selectColor(value: number | null) {
-  if (value === null) {
-    colorRef.value = undefined
-  } else {
-    colorRef.value = {
-      ...defaultHueValue,
-      h: value,
-    }
-  }
+function selectColor(value: number) {
+  colorRef.value.h = value
 
   emit('colorSelected', value)
 
@@ -63,13 +54,10 @@ watch(
   isOpenHuePicker,
   () => {
     if (!isOpenHuePicker.value && colorRef.value?.h !== hue) {
-      if (isNaN(parseFloat(`${hue}`))) {
-        colorRef.value = undefined
+      if (hue !== 0 && !hue) {
+        colorRef.value.h = defaultHueValue
       } else {
-        colorRef.value = {
-          ...defaultHueValue,
-          h: hue as number,
-        }
+        colorRef.value.h = hue
       }
     }
   },
@@ -91,9 +79,9 @@ watch(
         'h-10 w-10 text-2xl': size === 'large',
         'h-14 w-16 text-5xl': size === 'xlarge',
       }"
-      @click="onClick"
+      @click.stop="onClick"
     >
-      <template v-if="hue === undefined || hue === null">
+      <template v-if="hue !== 0 && !hue">
         <slot name="default" />
       </template>
       <template v-else>
@@ -116,11 +104,11 @@ watch(
               d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
               :fill="
                 tinycolor(
-                  preDefinedHueData[`_${colorRef?.h}`]
+                  preDefinedHueData && preDefinedHueData[`_${colorRef?.h}`]
                     ? `hsv(${preDefinedHueData[`_${colorRef?.h}`].shade.h},${preDefinedHueData[`_${colorRef?.h}`].shade.s}%, ${
                         preDefinedHueData[`_${colorRef?.h}`].shade.v
                       }%)`
-                    : `hsv(${colorRef?.h || 'none'}, 100%, 30%)`,
+                    : `hsv(${colorRef?.h ?? defaultHueValue}, 100%, 30%)`,
                 ).toHexString()
               "
             />
@@ -130,11 +118,11 @@ watch(
               d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
               :fill="
                 tinycolor(
-                  preDefinedHueData[`_${colorRef?.h}`]
+                  preDefinedHueData && preDefinedHueData[`_${colorRef?.h}`]
                     ? `hsv(${preDefinedHueData[`_${colorRef?.h}`].tint.h},${preDefinedHueData[`_${colorRef?.h}`].tint.s}%, ${
                         preDefinedHueData[`_${colorRef?.h}`].tint.v
                       }%)`
-                    : `hsv(${colorRef?.h || 'none'}, 30%, 100%)`,
+                    : `hsv(${colorRef?.h ?? defaultHueValue}, 30%, 100%)`,
                 ).toHexString()
               "
             />
@@ -156,7 +144,7 @@ watch(
             <div
               class="rounded h-6 w-6"
               :class="{
-                selected: preDefinedHueData[h].tint.h === hue || (h === '_199' && (hue === undefined || hue === null)),
+                selected: preDefinedHueData[h].tint.h === hue || (h === '_199' && hue !== 0 && !hue),
               }"
               :style="{
                 backgroundColor: preDefinedHueData[h].pickerColor,
@@ -192,28 +180,27 @@ watch(
             </div>
             <template #overlay>
               <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg flex flex-col space-y-4">
-                <div class="text-sm font-semibold">{{ $t('labels.customHue') }}</div>
+                <div>{{ $t('labels.customHue') }}</div>
 
                 <Slider
                   :model-value="colorRef"
                   class="nc-hue-color-picker"
                   :style="{
-                    ['--nc-hue-slider-pointer-color']: tinycolor(`hsv(${colorRef?.h}, 100%, 100%)`).toHexString(),
+                    ['--nc-hue-slider-pointer-color']: tinycolor(
+                      `hsv(${colorRef?.h ?? defaultHueValue}, 100%, 100%)`,
+                    ).toHexString(),
                   }"
-                  :disable-fields="true"
                   @update:model-value="
                     (value) => {
-                      if (value?.hsv?.h === undefined) return
-                      colorRef = {
-                        ...defaultHueValue,
-                        h: +value.hsv.h,
-                      }
+                      if (!value?.hsv?.h) return
+
+                      colorRef.h = value.hsv.h
                     }
                   "
                 />
 
                 <div class="flex items-center justify-end">
-                  <NcButton type="secondary" size="small" @click="selectColor(colorRef?.h || 0)">
+                  <NcButton type="secondary" size="small" @click="selectColor(colorRef?.h ?? defaultHueValue)">
                     {{ $t('general.apply') }}
                   </NcButton>
                 </div>
diff --git a/packages/nc-gui/store/bases.ts b/packages/nc-gui/store/bases.ts
index d83b05c261..69c720115b 100644
--- a/packages/nc-gui/store/bases.ts
+++ b/packages/nc-gui/store/bases.ts
@@ -229,7 +229,7 @@ export const useBases = defineStore('basesStore', () => {
       ...baseUpdatePayload,
     }
 
-    bases.value.set(baseId, base)
+    bases.value.set(baseId, { ...base, meta: parseProp(base.meta) })
 
     await api.base.update(baseId, baseUpdatePayload)
 

From e196756381cbd71e8c0cf63fcb0dcc02eff2287b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:56 +0000
Subject: [PATCH 07/31] fix(nc-gui): remove optional chaining from base color
 picker

---
 .../components/general/BaseColorPicker.vue    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
index 2cb36efcea..0f9381d702 100644
--- a/packages/nc-gui/components/general/BaseColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -53,7 +53,7 @@ const onClick = (e: Event) => {
 watch(
   isOpenHuePicker,
   () => {
-    if (!isOpenHuePicker.value && colorRef.value?.h !== hue) {
+    if (!isOpenHuePicker.value && colorRef.value.h !== hue) {
       if (hue !== 0 && !hue) {
         colorRef.value.h = defaultHueValue
       } else {
@@ -81,7 +81,7 @@ watch(
       }"
       @click.stop="onClick"
     >
-      <template v-if="hue !== 0 && !hue">
+      <template v-if="hue !== 0 && !hue && colorRef.h === defaultHueValue">
         <slot name="default" />
       </template>
       <template v-else>
@@ -104,11 +104,11 @@ watch(
               d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
               :fill="
                 tinycolor(
-                  preDefinedHueData && preDefinedHueData[`_${colorRef?.h}`]
-                    ? `hsv(${preDefinedHueData[`_${colorRef?.h}`].shade.h},${preDefinedHueData[`_${colorRef?.h}`].shade.s}%, ${
-                        preDefinedHueData[`_${colorRef?.h}`].shade.v
+                  preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
+                    ? `hsv(${preDefinedHueData[`_${colorRef.h}`].shade.h},${preDefinedHueData[`_${colorRef.h}`].shade.s}%, ${
+                        preDefinedHueData[`_${colorRef.h}`].shade.v
                       }%)`
-                    : `hsv(${colorRef?.h ?? defaultHueValue}, 100%, 30%)`,
+                    : `hsv(${colorRef.h ?? defaultHueValue}, 100%, 30%)`,
                 ).toHexString()
               "
             />
@@ -118,11 +118,11 @@ watch(
               d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
               :fill="
                 tinycolor(
-                  preDefinedHueData && preDefinedHueData[`_${colorRef?.h}`]
-                    ? `hsv(${preDefinedHueData[`_${colorRef?.h}`].tint.h},${preDefinedHueData[`_${colorRef?.h}`].tint.s}%, ${
-                        preDefinedHueData[`_${colorRef?.h}`].tint.v
+                  preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
+                    ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
+                        preDefinedHueData[`_${colorRef.h}`].tint.v
                       }%)`
-                    : `hsv(${colorRef?.h ?? defaultHueValue}, 30%, 100%)`,
+                    : `hsv(${colorRef.h ?? defaultHueValue}, 30%, 100%)`,
                 ).toHexString()
               "
             />
@@ -187,7 +187,7 @@ watch(
                   class="nc-hue-color-picker"
                   :style="{
                     ['--nc-hue-slider-pointer-color']: tinycolor(
-                      `hsv(${colorRef?.h ?? defaultHueValue}, 100%, 100%)`,
+                      `hsv(${colorRef.h ?? defaultHueValue}, 100%, 100%)`,
                     ).toHexString(),
                   }"
                   @update:model-value="
@@ -200,7 +200,7 @@ watch(
                 />
 
                 <div class="flex items-center justify-end">
-                  <NcButton type="secondary" size="small" @click="selectColor(colorRef?.h ?? defaultHueValue)">
+                  <NcButton type="secondary" size="small" @click="selectColor(colorRef.h ?? defaultHueValue)">
                     {{ $t('general.apply') }}
                   </NcButton>
                 </div>

From e3308123f7a49df87ae9f617595f38390aa58737 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:56 +0000
Subject: [PATCH 08/31] fix(nc-gui): rename baseColorPicker component name to
 baseIconColorPicker

---
 .../nc-gui/components/dashboard/TreeView/ProjectNode.vue  | 8 ++------
 packages/nc-gui/components/dlg/ProjectDelete.vue          | 6 +++---
 .../nc-gui/components/dlg/share-and-collaborate/View.vue  | 6 +++---
 .../{BaseColorPicker.vue => BaseIconColorPicker.vue}      | 0
 packages/nc-gui/components/project/View.vue               | 4 ++--
 packages/nc-gui/components/workspace/ProjectList.vue      | 6 +++---
 6 files changed, 13 insertions(+), 17 deletions(-)
 rename packages/nc-gui/components/general/{BaseColorPicker.vue => BaseIconColorPicker.vue} (100%)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 5b5af004b4..0a542e680c 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -385,10 +385,6 @@ const projectDelete = () => {
   isProjectDeleteDialogVisible.value = true
   $e('c:project:delete')
 }
-
-watchEffect(() => {
-  console.log('base', base.value)
-})
 </script>
 
 <template>
@@ -427,7 +423,7 @@ watchEffect(() => {
             <div v-e="['c:base:emojiSelect']" class="flex items-center select-none w-6 h-full">
               <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
 
-              <LazyGeneralBaseColorPicker
+              <LazyGeneralBaseIconColorPicker
                 v-else
                 :key="parseProp(base.meta).iconHue"
                 :hue="parseProp(base.meta).iconHue"
@@ -438,7 +434,7 @@ watchEffect(() => {
                 <template #default>
                   <GeneralProjectIcon :type="base?.type" />
                 </template>
-              </LazyGeneralBaseColorPicker>
+              </LazyGeneralBaseIconColorPicker>
             </div>
           </div>
 
diff --git a/packages/nc-gui/components/dlg/ProjectDelete.vue b/packages/nc-gui/components/dlg/ProjectDelete.vue
index 453b936316..305277439e 100644
--- a/packages/nc-gui/components/dlg/ProjectDelete.vue
+++ b/packages/nc-gui/components/dlg/ProjectDelete.vue
@@ -52,18 +52,18 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.project')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="base" class="flex flex-row items-center py-2 px-2.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <LazyGeneralBaseColorPicker
+        <LazyGeneralBaseIconColorPicker
           :key="parseProp(base.meta).iconHue"
           :hue="parseProp(base.meta).iconHue"
           size="small"
           class="!w-auto !h-auto"
-          iconClass="nc-view-icon w-6 h-6"
+          icon-class="nc-view-icon w-6 h-6"
           readonly
         >
           <template #default>
             <GeneralProjectIcon :type="base.type" class="nc-view-icon w-6 h-6" />
           </template>
-        </LazyGeneralBaseColorPicker>
+        </LazyGeneralBaseIconColorPicker>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index c8fb3b437a..06933990b7 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -154,18 +154,18 @@ watch(showShareModal, (val) => {
       </div>
       <div class="share-base">
         <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <LazyGeneralBaseColorPicker
+          <LazyGeneralBaseIconColorPicker
             :key="parseProp(base.meta).iconHue"
             :hue="parseProp(base.meta).iconHue"
             size="small"
             class="!w-auto !h-auto"
-            iconClass="nc-view-icon group-hover"
+            icon-class="nc-view-icon group-hover"
             readonly
           >
             <template #default>
               <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
             </template>
-          </LazyGeneralBaseColorPicker>
+          </LazyGeneralBaseIconColorPicker>
 
           <div>{{ $t('activity.shareBase.label') }}</div>
           <div
diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
similarity index 100%
rename from packages/nc-gui/components/general/BaseColorPicker.vue
rename to packages/nc-gui/components/general/BaseIconColorPicker.vue
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 10af414156..0dabfe1a66 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -82,7 +82,7 @@ watch(
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
-          <LazyGeneralBaseColorPicker
+          <LazyGeneralBaseIconColorPicker
             :key="parseProp(openedProject?.meta).iconHue"
             :hue="parseProp(openedProject?.meta).iconHue"
             size="small"
@@ -92,7 +92,7 @@ watch(
             <template #default>
               <GeneralProjectIcon :type="openedProject?.type" />
             </template>
-          </LazyGeneralBaseColorPicker>
+          </LazyGeneralBaseIconColorPicker>
           <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" show-on-truncate-only>
             <template #title> {{ openedProject?.title }}</template>
             <span class="truncate">
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 9563d2bbe0..543d7910b4 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -10,6 +10,7 @@ import {
   isEeUI,
   message,
   navigateTo,
+  parseProp,
   ref,
   storeToRefs,
   useBases,
@@ -17,7 +18,6 @@ import {
   useNuxtApp,
   useRoles,
   useWorkspace,
-  parseProp,
 } from '#imports'
 
 const workspaceStore = useWorkspace()
@@ -251,7 +251,7 @@ const setColor = async (hue: number, base: BaseType) => {
         <template v-if="column.dataIndex === 'title'">
           <div class="flex items-center nc-base-title gap-2.5 max-w-full -ml-1.5">
             <div class="flex items-center gap-2 text-center">
-              <LazyGeneralBaseColorPicker
+              <LazyGeneralBaseIconColorPicker
                 :key="parseProp(record.meta).iconHue"
                 :hue="parseProp(record.meta).iconHue"
                 size="small"
@@ -261,7 +261,7 @@ const setColor = async (hue: number, base: BaseType) => {
                 <template #default>
                   <GeneralProjectIcon :type="record.type" />
                 </template>
-              </LazyGeneralBaseColorPicker>
+              </LazyGeneralBaseIconColorPicker>
               <!-- todo: replace with switch -->
             </div>
 

From c0630b4000e9a116781253053974436a50a8f7e3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:57 +0000
Subject: [PATCH 09/31] fix(nc-gui): update base icon in cmd k

---
 packages/nc-gui/components/cmd-k/index.vue    | 38 ++++++++++++-------
 .../dashboard/TreeView/ProjectNode.vue        |  8 ++--
 .../src/services/command-palette.service.ts   |  3 ++
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index a78001545f..fe5bfcb37d 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -17,6 +17,7 @@ interface CmdAction {
   keywords?: string[]
   section?: string
   is_default?: number | null
+  iconHue?: number
 }
 
 const props = defineProps<{
@@ -385,20 +386,29 @@ defineExpose({
                   @click="fireAction(act)"
                 >
                   <div class="cmdk-action-content w-full">
-                    <component
-                      :is="(iconMap as any)[act.icon]"
-                      v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
-                      class="cmdk-action-icon"
-                      :class="{
-                        '!text-blue-500': act.icon === 'grid',
-                        '!text-purple-500': act.icon === 'form',
-                        '!text-[#FF9052]': act.icon === 'kanban',
-                        '!text-pink-500': act.icon === 'gallery',
-                      }"
-                    />
-                    <div v-else-if="act.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center">
-                      <LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="act.icon" readonly />
-                    </div>
+                    <template v-if="title === 'Bases' || act.icon === 'project'">
+                      <LazyGeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
+                        <template #default>
+                          <GeneralProjectIcon type="database" />
+                        </template>
+                      </LazyGeneralBaseIconColorPicker>
+                    </template>
+                    <template v-else>
+                      <component
+                        :is="(iconMap as any)[act.icon]"
+                        v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
+                        class="cmdk-action-icon"
+                        :class="{
+                          '!text-blue-500': act.icon === 'grid',
+                          '!text-purple-500': act.icon === 'form',
+                          '!text-[#FF9052]': act.icon === 'kanban',
+                          '!text-pink-500': act.icon === 'gallery',
+                        }"
+                      />
+                      <div v-else-if="act.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center">
+                        <LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="act.icon" readonly />
+                      </div>
+                    </template>
                     <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
                       <template #title>
                         {{ act.title }}
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 0a542e680c..08ff2c6182 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -420,12 +420,12 @@ const projectDelete = () => {
           </NcButton>
 
           <div class="flex items-center mr-1" @click="onProjectClick(base)">
-            <div v-e="['c:base:emojiSelect']" class="flex items-center select-none w-6 h-full">
+            <div v-e="['c:base:iconColorChange']" class="flex items-center select-none w-6 h-full">
               <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
 
-              <LazyGeneralBaseIconColorPicker
+              <GeneralBaseIconColorPicker
                 v-else
-                :key="parseProp(base.meta).iconHue"
+                :key="`${base.id}_${parseProp(base.meta).iconHue}`"
                 :hue="parseProp(base.meta).iconHue"
                 size="small"
                 :readonly="base?.type && base?.type !== 'database'"
@@ -434,7 +434,7 @@ const projectDelete = () => {
                 <template #default>
                   <GeneralProjectIcon :type="base?.type" />
                 </template>
-              </LazyGeneralBaseIconColorPicker>
+              </GeneralBaseIconColorPicker>
             </div>
           </div>
 
diff --git a/packages/nocodb/src/services/command-palette.service.ts b/packages/nocodb/src/services/command-palette.service.ts
index 7bf3ac2585..f57bb59c77 100644
--- a/packages/nocodb/src/services/command-palette.service.ts
+++ b/packages/nocodb/src/services/command-palette.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { type UserType, ViewTypes } from 'nocodb-sdk';
 import { Base } from '~/models';
 import { TablesService } from '~/services/tables.service';
+import { deserializeJSON } from '~/utils/serialize';
 
 const viewTypeAlias: Record<number, string> = {
   [ViewTypes.GRID]: 'grid',
@@ -28,6 +29,7 @@ export class CommandPaletteService {
             id: `p-${base.id}`,
             title: base.title,
             icon: 'project',
+            iconHue: deserializeJSON(base.meta)?.iconHue,
             section: 'Bases',
             scopePayload: {
               scope: `p-${base.id}`,
@@ -70,6 +72,7 @@ export class CommandPaletteService {
             id: `p-${b.id}`,
             title: b.title,
             icon: 'project',
+            iconHue: deserializeJSON(b.meta)?.iconHue,
             section: 'Bases',
           });
         }

From 4522a99d0e1a9cd5ac461feb2bb0411aafeb2cf2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:57 +0000
Subject: [PATCH 10/31] fix(nc-gui): lazy import slider color picker

---
 .../general/BaseIconColorPicker.vue           | 17 ++----
 .../general/ColorHueSliderWrapper.vue         | 59 +++++++++++++++++++
 2 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 packages/nc-gui/components/general/ColorHueSliderWrapper.vue

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 0f9381d702..72a91bcabd 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { Slider } from '@ckpack/vue-color'
 import tinycolor from 'tinycolor2'
 
 import { BASE_ICON_COLOR_HUE_DATA as preDefinedHueData } from '#imports'
@@ -122,7 +121,7 @@ watch(
                     ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
                         preDefinedHueData[`_${colorRef.h}`].tint.v
                       }%)`
-                    : `hsv(${colorRef.h ?? defaultHueValue}, 30%, 100%)`,
+                    : `hsv(${colorRef.h ?? defaultHueValue}, 50%, 100%)`,
                 ).toHexString()
               "
             />
@@ -181,20 +180,14 @@ watch(
             <template #overlay>
               <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg flex flex-col space-y-4">
                 <div>{{ $t('labels.customHue') }}</div>
-
-                <Slider
+                
+                <LazyGeneralColorHueSliderWrapper
                   :model-value="colorRef"
-                  class="nc-hue-color-picker"
-                  :style="{
-                    ['--nc-hue-slider-pointer-color']: tinycolor(
-                      `hsv(${colorRef.h ?? defaultHueValue}, 100%, 100%)`,
-                    ).toHexString(),
-                  }"
                   @update:model-value="
                     (value) => {
-                      if (!value?.hsv?.h) return
+                      if (value?.h !== 0 && !value?.h) return
 
-                      colorRef.h = value.hsv.h
+                      colorRef.h = value.h
                     }
                   "
                 />
diff --git a/packages/nc-gui/components/general/ColorHueSliderWrapper.vue b/packages/nc-gui/components/general/ColorHueSliderWrapper.vue
new file mode 100644
index 0000000000..500dfc87a8
--- /dev/null
+++ b/packages/nc-gui/components/general/ColorHueSliderWrapper.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { Slider } from '@ckpack/vue-color'
+import tinycolor from 'tinycolor2'
+
+interface Props {
+  modelValue?: any
+  mode?: 'hsl' | 'hsv'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({ h: 199, s: 0, v: 0 }),
+  mode: () => 'hsv',
+})
+
+const emit = defineEmits(['update:modelValue', 'input'])
+
+const picked = computed({
+  get: () => props.modelValue || { h: 199, s: 0, v: 0 },
+  set: (val) => {
+    emit('update:modelValue', val[props.mode] || null)
+    emit('input', val[props.mode] || null)
+  },
+})
+</script>
+
+<template>
+  <Slider
+    v-model="picked"
+    class="nc-hue-slider-wrapper min-w-[200px]"
+    :style="{
+      ['--nc-hue-slider-pointer-color']: tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
+    }"
+  />
+</template>
+
+<style lang="scss" scoped>
+.nc-hue-slider-wrapper {
+  &.vc-slider {
+    @apply !w-full;
+  }
+  :deep(.vc-slider-swatches) {
+    @apply hidden;
+  }
+
+  :deep(.vc-slider-hue-warp) {
+    @apply h-1.5;
+    .vc-hue {
+      @apply rounded-lg;
+    }
+    .vc-hue-pointer {
+      top: -3px !important;
+    }
+    .vc-hue-picker {
+      background-color: white;
+      box-shadow: 0 0 0 3px var(--nc-hue-slider-pointer-color) !important;
+    }
+  }
+}
+</style>

From 30d4edc3dfbbaa6988d180debb81caf3b2303c55 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:57 +0000
Subject: [PATCH 11/31] fix(nc-gui): update base icon color picker  model with
 new design

---
 .../general/BaseIconColorPicker.vue           | 138 +++++++-----------
 ...iderWrapper.vue => ColorSliderWrapper.vue} |  18 ++-
 packages/nc-gui/lang/en.json                  |   2 +-
 packages/nc-gui/store/bases.ts                |   1 +
 4 files changed, 65 insertions(+), 94 deletions(-)
 rename packages/nc-gui/components/general/{ColorHueSliderWrapper.vue => ColorSliderWrapper.vue} (62%)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 72a91bcabd..316358b558 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -16,28 +16,29 @@ const emit = defineEmits(['colorSelected'])
 const { hue, size = 'medium', readonly } = props
 
 const defaultHueColor = {
-  h: 0,
-  s: 0,
-  v: 0,
+  h: 199,
+  s: 79,
+  v: 100,
 }
 
 const defaultHueValue = 199
 
 const isOpen = ref(false)
 
-const isOpenHuePicker = ref(false)
-
 const colorRef = ref({
   ...defaultHueColor,
   h: !(hue !== 0 && !hue) ? hue : defaultHueValue,
 })
 
+const updateColorHue = (value?: string | number | null) => {
+  colorRef.value.h = !isNaN(parseInt(`${value}`)) ? +Math.min(parseInt(`${value}`), 360) : 0
+}
+
 function selectColor(value: number) {
   colorRef.value.h = value
 
   emit('colorSelected', value)
 
-  isOpenHuePicker.value = false
   isOpen.value = false
 }
 
@@ -50,14 +51,10 @@ const onClick = (e: Event) => {
 }
 
 watch(
-  isOpenHuePicker,
-  () => {
-    if (!isOpenHuePicker.value && colorRef.value.h !== hue) {
-      if (hue !== 0 && !hue) {
-        colorRef.value.h = defaultHueValue
-      } else {
-        colorRef.value.h = hue
-      }
+  isOpen,
+  (value) => {
+    if (!value && colorRef.value.h !== hue) {
+      emit('colorSelected', colorRef.value.h)
     }
   },
   {
@@ -130,15 +127,12 @@ watch(
       </template>
     </div>
     <template #overlay>
-      <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg">
-        <div class="w-[164px] flex flex-wrap">
+      <div class="relative bg-white rounded-lg border-1 border-gray-200 shadow-lg">
+        <div class="flex items-center p-2 space-x-2">
           <div
             v-for="(h, i) of Object.keys(preDefinedHueData)"
             :key="i"
             class="nc-pre-defined-hue-item p-1 rounded cursor-pointer hover:bg-gray-200"
-            :class="{
-              'mt-3': i > 4,
-            }"
           >
             <div
               class="rounded h-6 w-6"
@@ -151,55 +145,35 @@ watch(
               @click="selectColor(preDefinedHueData[h].tint.h)"
             ></div>
           </div>
+        </div>
 
-          <a-dropdown
-            v-model:visible="isOpenHuePicker"
-            :trigger="['click']"
-            :disabled="readonly"
-            placement="bottom"
-            overlay-class-name="!left-9"
-          >
-            <div
-              class="nc-custom-hue-picker-item p-1 rounded cursor-pointer hover:bg-gray-200 mt-3"
-              :class="{
-                'bg-gray-200': isOpenHuePicker,
-              }"
-            >
-              <div
-                class="rounded overflow-hidden h-6 w-6"
-                :class="{
-                  selected: hue !== undefined && hue !== null && !preDefinedHueData[`_${hue}`],
-                }"
-                :style="{
-                  backgroundColor: tinycolor(`hsv(${hue}, 30%, 100%) `).toHexString(),
-                }"
-              >
-                <img src="~/assets/img/hue-colors.png" class="" alt="Hue picker" />
-              </div>
-            </div>
-            <template #overlay>
-              <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg flex flex-col space-y-4">
-                <div>{{ $t('labels.customHue') }}</div>
-                
-                <LazyGeneralColorHueSliderWrapper
-                  :model-value="colorRef"
-                  @update:model-value="
-                    (value) => {
-                      if (value?.h !== 0 && !value?.h) return
-
-                      colorRef.h = value.h
-                    }
-                  "
-                />
-
-                <div class="flex items-center justify-end">
-                  <NcButton type="secondary" size="small" @click="selectColor(colorRef.h ?? defaultHueValue)">
-                    {{ $t('general.apply') }}
-                  </NcButton>
-                </div>
-              </div>
-            </template>
-          </a-dropdown>
+        <div class="p-2 border-t-1 border-gray-200 flex flex-col space-y-4">
+          <div class="uppercase text-xs font-medium">{{ $t('labels.customColour') }}</div>
+
+          <div class="flex flex-row items-center gap-x-3">
+            <input
+              :value="parseInt(`${colorRef.h ?? 0}`)"
+              class="nc-color-hue-input"
+              type="number"
+              @input="
+                (value) => {
+                  updateColorHue(value.target?.value)
+                }
+              "
+              :min="0"
+              :max="360"
+            />
+
+            <LazyGeneralColorSliderWrapper
+              :model-value="colorRef"
+              class="!min-w-none ml-3"
+              @update:model-value="
+                (value) => {
+                  updateColorHue(value?.h)
+                }
+              "
+            />
+          </div>
         </div>
       </div>
     </template>
@@ -214,25 +188,19 @@ watch(
   }
 }
 
-:deep(.nc-hue-color-picker) {
-  &.vc-slider {
-    width: 297px;
-  }
-  .vc-slider-swatches {
-    @apply hidden;
-  }
-  .vc-hue {
-    @apply rounded-lg;
+.nc-color-hue-input {
+  @apply outline-none text-sm rounded-lg border-gray-200 py-1 px-3 w-14 text-center;
+  -moz-appearance: textfield;
+
+  &:focus {
+    @apply ring-transparent border-brand-500;
   }
-  .vc-slider-hue-warp {
-    height: 6px;
-    .vc-hue-pointer {
-      top: -3px !important;
-    }
-    .vc-hue-picker {
-      background-color: white;
-      box-shadow: 0 0 0 3px var(--nc-hue-slider-pointer-color) !important;
-    }
+
+  /* Chrome, Safari, Edge, Opera */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
   }
 }
 </style>
diff --git a/packages/nc-gui/components/general/ColorHueSliderWrapper.vue b/packages/nc-gui/components/general/ColorSliderWrapper.vue
similarity index 62%
rename from packages/nc-gui/components/general/ColorHueSliderWrapper.vue
rename to packages/nc-gui/components/general/ColorSliderWrapper.vue
index 500dfc87a8..3ac7f7a7c1 100644
--- a/packages/nc-gui/components/general/ColorHueSliderWrapper.vue
+++ b/packages/nc-gui/components/general/ColorSliderWrapper.vue
@@ -8,17 +8,19 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => ({ h: 199, s: 0, v: 0 }),
+  modelValue: () => '#3069FE',
   mode: () => 'hsv',
 })
 
 const emit = defineEmits(['update:modelValue', 'input'])
 
 const picked = computed({
-  get: () => props.modelValue || { h: 199, s: 0, v: 0 },
+  get: () => tinycolor(props.modelValue || '#3069FE').toHsv() as any,
   set: (val) => {
-    emit('update:modelValue', val[props.mode] || null)
-    emit('input', val[props.mode] || null)
+    if (val) {
+      emit('update:modelValue', val[props.mode] || null)
+      emit('input', val[props.mode] || null)
+    }
   },
 })
 </script>
@@ -26,15 +28,15 @@ const picked = computed({
 <template>
   <Slider
     v-model="picked"
-    class="nc-hue-slider-wrapper min-w-[200px]"
+    class="nc-color-slider-wrapper min-w-[200px]"
     :style="{
-      ['--nc-hue-slider-pointer-color']: tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
+      ['--nc-color-slider-pointer']: tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
     }"
   />
 </template>
 
 <style lang="scss" scoped>
-.nc-hue-slider-wrapper {
+.nc-color-slider-wrapper {
   &.vc-slider {
     @apply !w-full;
   }
@@ -52,7 +54,7 @@ const picked = computed({
     }
     .vc-hue-picker {
       background-color: white;
-      box-shadow: 0 0 0 3px var(--nc-hue-slider-pointer-color) !important;
+      box-shadow: 0 0 0 3px var(--nc-color-slider-pointer) !important;
     }
   }
 }
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 93783fee1b..3182ef6537 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -700,7 +700,7 @@
     "limitOptions": "Limit ptions",
     "limitOptionsSubtext": "Limit options visible to users by selecting available options",
     "clearSelection": "Clear selection",
-    "customHue": "Custom Hue"
+    "customColour": "Custom colour"
   },
   "activity": {
     "noRange": "Calendar view requires a date range",
diff --git a/packages/nc-gui/store/bases.ts b/packages/nc-gui/store/bases.ts
index 69c720115b..f16ea12753 100644
--- a/packages/nc-gui/store/bases.ts
+++ b/packages/nc-gui/store/bases.ts
@@ -201,6 +201,7 @@ export const useBases = defineStore('basesStore', () => {
       isExpanded: route.value.params.baseId === baseId || existingProject.isExpanded,
       // isLoading is managed by Sidebar
       isLoading: existingProject.isLoading,
+      meta: { ...parseProp(existingProject.meta), ...parseProp(_project.meta) },
     }
 
     bases.value.set(baseId, base)

From 7b4cb84c6324363ef4590f3973e59af6c928a8e6 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:57 +0000
Subject: [PATCH 12/31] chore(nc-gui): lint

---
 .../nc-gui/components/general/BaseIconColorPicker.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 316358b558..82b22391c2 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -127,7 +127,7 @@ watch(
       </template>
     </div>
     <template #overlay>
-      <div class="relative bg-white rounded-lg border-1 border-gray-200 shadow-lg">
+      <div class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200">
         <div class="flex items-center p-2 space-x-2">
           <div
             v-for="(h, i) of Object.keys(preDefinedHueData)"
@@ -147,7 +147,7 @@ watch(
           </div>
         </div>
 
-        <div class="p-2 border-t-1 border-gray-200 flex flex-col space-y-4">
+        <div class="p-2 border-t-1 border-gray-200 flex flex-col space-y-2.5">
           <div class="uppercase text-xs font-medium">{{ $t('labels.customColour') }}</div>
 
           <div class="flex flex-row items-center gap-x-3">
@@ -155,13 +155,13 @@ watch(
               :value="parseInt(`${colorRef.h ?? 0}`)"
               class="nc-color-hue-input"
               type="number"
+              :min="0"
+              :max="360"
               @input="
                 (value) => {
                   updateColorHue(value.target?.value)
                 }
               "
-              :min="0"
-              :max="360"
             />
 
             <LazyGeneralColorSliderWrapper
@@ -181,6 +181,9 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+.nc-base-icon-color-picker-dropdown {
+  box-shadow: 0px 8px 8px -4px #0000000a, 0px 20px 24px -4px #0000001a;
+}
 .nc-pre-defined-hue-item,
 .nc-custom-hue-picker-item {
   .selected {

From 0bff1c2ce25e84b59d2bb46210ecd00f9eec979e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:57 +0000
Subject: [PATCH 13/31] fix(nc-gui): console errors

---
 .../dashboard/TreeView/ProjectNode.vue        | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 08ff2c6182..8d6e0e9c73 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -423,18 +423,19 @@ const projectDelete = () => {
             <div v-e="['c:base:iconColorChange']" class="flex items-center select-none w-6 h-full">
               <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
 
-              <GeneralBaseIconColorPicker
-                v-else
-                :key="`${base.id}_${parseProp(base.meta).iconHue}`"
-                :hue="parseProp(base.meta).iconHue"
-                size="small"
-                :readonly="base?.type && base?.type !== 'database'"
-                @color-selected="setColor($event, base)"
-              >
-                <template #default>
-                  <GeneralProjectIcon :type="base?.type" />
-                </template>
-              </GeneralBaseIconColorPicker>
+              <div v-else>
+                <GeneralBaseIconColorPicker
+                  :key="`${base.id}_${parseProp(base.meta).iconHue}`"
+                  :hue="parseProp(base.meta).iconHue"
+                  size="small"
+                  :readonly="base?.type && base?.type !== 'database'"
+                  @color-selected="setColor($event, base)"
+                >
+                  <template #default>
+                    <GeneralProjectIcon :type="base?.type" />
+                  </template>
+                </GeneralBaseIconColorPicker>
+              </div>
             </div>
           </div>
 

From c322b29642ca2184e74e2dd5166b2bef4069f423 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:58 +0000
Subject: [PATCH 14/31] test: fix pw test

---
 .../general/BaseIconColorPicker.vue           | 220 +++++++++---------
 1 file changed, 111 insertions(+), 109 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 82b22391c2..0af88e27ac 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -64,120 +64,122 @@ watch(
 </script>
 
 <template>
-  <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
-    <div
-      class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
-      :class="{
-        'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
-        'bg-gray-500 bg-opacity-15': isOpen,
-        'h-6 w-6 text-lg': size === 'small',
-        'h-8 w-8 text-xl': size === 'medium',
-        'h-10 w-10 text-2xl': size === 'large',
-        'h-14 w-16 text-5xl': size === 'xlarge',
-      }"
-      @click.stop="onClick"
-    >
-      <template v-if="hue !== 0 && !hue && colorRef.h === defaultHueValue">
-        <slot name="default" />
-      </template>
-      <template v-else>
-        <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg" :class="iconClass">
-          <mask
-            id="mask0_1749_80944"
-            style="mask-type: luminance"
-            maskUnits="userSpaceOnUse"
-            x="94"
-            y="40"
-            width="885"
-            height="993"
-          >
-            <path d="M978.723 40H94V1033H978.723V40Z" fill="white" />
-          </mask>
-          <g mask="url(#mask0_1749_80944)">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
-              :fill="
-                tinycolor(
-                  preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
-                    ? `hsv(${preDefinedHueData[`_${colorRef.h}`].shade.h},${preDefinedHueData[`_${colorRef.h}`].shade.s}%, ${
-                        preDefinedHueData[`_${colorRef.h}`].shade.v
-                      }%)`
-                    : `hsv(${colorRef.h ?? defaultHueValue}, 100%, 30%)`,
-                ).toHexString()
-              "
-            />
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
-              :fill="
-                tinycolor(
-                  preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
-                    ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
-                        preDefinedHueData[`_${colorRef.h}`].tint.v
-                      }%)`
-                    : `hsv(${colorRef.h ?? defaultHueValue}, 50%, 100%)`,
-                ).toHexString()
-              "
-            />
-          </g>
-        </svg>
-      </template>
-    </div>
-    <template #overlay>
-      <div class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200">
-        <div class="flex items-center p-2 space-x-2">
-          <div
-            v-for="(h, i) of Object.keys(preDefinedHueData)"
-            :key="i"
-            class="nc-pre-defined-hue-item p-1 rounded cursor-pointer hover:bg-gray-200"
-          >
+  <div>
+    <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
+      <div
+        class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
+        :class="{
+          'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
+          'bg-gray-500 bg-opacity-15': isOpen,
+          'h-6 w-6 text-lg': size === 'small',
+          'h-8 w-8 text-xl': size === 'medium',
+          'h-10 w-10 text-2xl': size === 'large',
+          'h-14 w-16 text-5xl': size === 'xlarge',
+        }"
+        @click.stop="onClick"
+      >
+        <template v-if="hue !== 0 && !hue && colorRef.h === defaultHueValue">
+          <slot name="default" />
+        </template>
+        <template v-else>
+          <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg" :class="iconClass">
+            <mask
+              id="mask0_1749_80944"
+              style="mask-type: luminance"
+              maskUnits="userSpaceOnUse"
+              x="94"
+              y="40"
+              width="885"
+              height="993"
+            >
+              <path d="M978.723 40H94V1033H978.723V40Z" fill="white" />
+            </mask>
+            <g mask="url(#mask0_1749_80944)">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
+                :fill="
+                  tinycolor(
+                    preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
+                      ? `hsv(${preDefinedHueData[`_${colorRef.h}`].shade.h},${preDefinedHueData[`_${colorRef.h}`].shade.s}%, ${
+                          preDefinedHueData[`_${colorRef.h}`].shade.v
+                        }%)`
+                      : `hsv(${colorRef.h ?? defaultHueValue}, 100%, 30%)`,
+                  ).toHexString()
+                "
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
+                :fill="
+                  tinycolor(
+                    preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
+                      ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
+                          preDefinedHueData[`_${colorRef.h}`].tint.v
+                        }%)`
+                      : `hsv(${colorRef.h ?? defaultHueValue}, 50%, 100%)`,
+                  ).toHexString()
+                "
+              />
+            </g>
+          </svg>
+        </template>
+      </div>
+      <template #overlay>
+        <div class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200">
+          <div class="flex items-center p-2 space-x-2">
             <div
-              class="rounded h-6 w-6"
-              :class="{
-                selected: preDefinedHueData[h].tint.h === hue || (h === '_199' && hue !== 0 && !hue),
-              }"
-              :style="{
-                backgroundColor: preDefinedHueData[h].pickerColor,
-              }"
-              @click="selectColor(preDefinedHueData[h].tint.h)"
-            ></div>
+              v-for="(h, i) of Object.keys(preDefinedHueData)"
+              :key="i"
+              class="nc-pre-defined-hue-item p-1 rounded cursor-pointer hover:bg-gray-200"
+            >
+              <div
+                class="rounded h-6 w-6"
+                :class="{
+                  selected: preDefinedHueData[h].tint.h === hue || (h === '_199' && hue !== 0 && !hue),
+                }"
+                :style="{
+                  backgroundColor: preDefinedHueData[h].pickerColor,
+                }"
+                @click="selectColor(preDefinedHueData[h].tint.h)"
+              ></div>
+            </div>
           </div>
-        </div>
 
-        <div class="p-2 border-t-1 border-gray-200 flex flex-col space-y-2.5">
-          <div class="uppercase text-xs font-medium">{{ $t('labels.customColour') }}</div>
-
-          <div class="flex flex-row items-center gap-x-3">
-            <input
-              :value="parseInt(`${colorRef.h ?? 0}`)"
-              class="nc-color-hue-input"
-              type="number"
-              :min="0"
-              :max="360"
-              @input="
-                (value) => {
-                  updateColorHue(value.target?.value)
-                }
-              "
-            />
-
-            <LazyGeneralColorSliderWrapper
-              :model-value="colorRef"
-              class="!min-w-none ml-3"
-              @update:model-value="
-                (value) => {
-                  updateColorHue(value?.h)
-                }
-              "
-            />
+          <div class="p-2 border-t-1 border-gray-200 flex flex-col space-y-2.5">
+            <div class="uppercase text-xs font-medium">{{ $t('labels.customColour') }}</div>
+
+            <div class="flex flex-row items-center gap-x-3">
+              <input
+                :value="parseInt(`${colorRef.h ?? 0}`)"
+                class="nc-color-hue-input"
+                type="number"
+                :min="0"
+                :max="360"
+                @input="
+                  (value) => {
+                    updateColorHue(value.target?.value)
+                  }
+                "
+              />
+
+              <LazyGeneralColorSliderWrapper
+                :model-value="colorRef"
+                class="!min-w-none ml-3"
+                @update:model-value="
+                  (value) => {
+                    updateColorHue(value?.h)
+                  }
+                "
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </template>
-  </a-dropdown>
+      </template>
+    </a-dropdown>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From c7a5b139d2c05b6f4057aa9bf93eabf603838838 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:58 +0000
Subject: [PATCH 15/31] fix(nc-gui): remove lazy loading baseIconColorPicker
 component

---
 packages/nc-gui/components/cmd-k/index.vue                    | 4 ++--
 packages/nc-gui/components/dlg/ProjectDelete.vue              | 4 ++--
 packages/nc-gui/components/dlg/share-and-collaborate/View.vue | 4 ++--
 packages/nc-gui/components/project/View.vue                   | 4 ++--
 packages/nc-gui/components/workspace/ProjectList.vue          | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index fe5bfcb37d..a5e2db2de0 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -387,11 +387,11 @@ defineExpose({
                 >
                   <div class="cmdk-action-content w-full">
                     <template v-if="title === 'Bases' || act.icon === 'project'">
-                      <LazyGeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
+                      <GeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
                         <template #default>
                           <GeneralProjectIcon type="database" />
                         </template>
-                      </LazyGeneralBaseIconColorPicker>
+                      </GeneralBaseIconColorPicker>
                     </template>
                     <template v-else>
                       <component
diff --git a/packages/nc-gui/components/dlg/ProjectDelete.vue b/packages/nc-gui/components/dlg/ProjectDelete.vue
index 305277439e..3ca95f4f85 100644
--- a/packages/nc-gui/components/dlg/ProjectDelete.vue
+++ b/packages/nc-gui/components/dlg/ProjectDelete.vue
@@ -52,7 +52,7 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.project')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="base" class="flex flex-row items-center py-2 px-2.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <LazyGeneralBaseIconColorPicker
+        <GeneralBaseIconColorPicker
           :key="parseProp(base.meta).iconHue"
           :hue="parseProp(base.meta).iconHue"
           size="small"
@@ -63,7 +63,7 @@ const onDelete = async () => {
           <template #default>
             <GeneralProjectIcon :type="base.type" class="nc-view-icon w-6 h-6" />
           </template>
-        </LazyGeneralBaseIconColorPicker>
+        </GeneralBaseIconColorPicker>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 06933990b7..0a3bc6839d 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -154,7 +154,7 @@ watch(showShareModal, (val) => {
       </div>
       <div class="share-base">
         <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <LazyGeneralBaseIconColorPicker
+          <GeneralBaseIconColorPicker
             :key="parseProp(base.meta).iconHue"
             :hue="parseProp(base.meta).iconHue"
             size="small"
@@ -165,7 +165,7 @@ watch(showShareModal, (val) => {
             <template #default>
               <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
             </template>
-          </LazyGeneralBaseIconColorPicker>
+          </GeneralBaseIconColorPicker>
 
           <div>{{ $t('activity.shareBase.label') }}</div>
           <div
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 0dabfe1a66..e51a3c7c8a 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -82,7 +82,7 @@ watch(
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
-          <LazyGeneralBaseIconColorPicker
+          <GeneralBaseIconColorPicker
             :key="parseProp(openedProject?.meta).iconHue"
             :hue="parseProp(openedProject?.meta).iconHue"
             size="small"
@@ -92,7 +92,7 @@ watch(
             <template #default>
               <GeneralProjectIcon :type="openedProject?.type" />
             </template>
-          </LazyGeneralBaseIconColorPicker>
+          </GeneralBaseIconColorPicker>
           <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" show-on-truncate-only>
             <template #title> {{ openedProject?.title }}</template>
             <span class="truncate">
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 543d7910b4..8c510becaa 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -251,7 +251,7 @@ const setColor = async (hue: number, base: BaseType) => {
         <template v-if="column.dataIndex === 'title'">
           <div class="flex items-center nc-base-title gap-2.5 max-w-full -ml-1.5">
             <div class="flex items-center gap-2 text-center">
-              <LazyGeneralBaseIconColorPicker
+              <GeneralBaseIconColorPicker
                 :key="parseProp(record.meta).iconHue"
                 :hue="parseProp(record.meta).iconHue"
                 size="small"
@@ -261,7 +261,7 @@ const setColor = async (hue: number, base: BaseType) => {
                 <template #default>
                   <GeneralProjectIcon :type="record.type" />
                 </template>
-              </LazyGeneralBaseIconColorPicker>
+              </GeneralBaseIconColorPicker>
               <!-- todo: replace with switch -->
             </div>
 

From e59b154d356e3c8b23706e714af3357cb4673e35 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:58 +0000
Subject: [PATCH 16/31] fix(nc-gui): move the base icon color input to right
 side and add border if custom color is active color

---
 .../general/BaseIconColorPicker.vue           | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 0af88e27ac..c67931d18c 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -133,28 +133,42 @@ watch(
             <div
               v-for="(h, i) of Object.keys(preDefinedHueData)"
               :key="i"
-              class="nc-pre-defined-hue-item p-1 rounded cursor-pointer hover:bg-gray-200"
+              class="nc-pre-defined-hue-item-wrapper p-1 rounded cursor-pointer hover:bg-gray-200"
             >
               <div
-                class="rounded h-6 w-6"
+                class="nc-pre-defined-hue-item rounded h-6 w-6"
+                :tabindex="0"
                 :class="{
-                  selected: preDefinedHueData[h].tint.h === hue || (h === '_199' && hue !== 0 && !hue),
+                  selected: `_${colorRef.h}` === h,
                 }"
                 :style="{
                   backgroundColor: preDefinedHueData[h].pickerColor,
                 }"
-                @click="selectColor(preDefinedHueData[h].tint.h)"
+                @click.stop="updateColorHue(preDefinedHueData[h].tint.h)"
+                @keydown.enter.stop="updateColorHue(preDefinedHueData[h].tint.h)"
               ></div>
             </div>
           </div>
 
-          <div class="p-2 border-t-1 border-gray-200 flex flex-col space-y-2.5">
+          <div class="p-3 border-t-1 border-gray-200 flex flex-col space-y-2.5">
             <div class="uppercase text-xs font-medium">{{ $t('labels.customColour') }}</div>
 
             <div class="flex flex-row items-center gap-x-3">
+              <LazyGeneralColorSliderWrapper
+                :model-value="colorRef"
+                class="!min-w-none"
+                @update:model-value="
+                  (value) => {
+                    updateColorHue(value?.h)
+                  }
+                "
+              />
               <input
                 :value="parseInt(`${colorRef.h ?? 0}`)"
                 class="nc-color-hue-input"
+                :class="{
+                  selected: !preDefinedHueData[`_${colorRef.h}`],
+                }"
                 type="number"
                 :min="0"
                 :max="360"
@@ -164,16 +178,6 @@ watch(
                   }
                 "
               />
-
-              <LazyGeneralColorSliderWrapper
-                :model-value="colorRef"
-                class="!min-w-none ml-3"
-                @update:model-value="
-                  (value) => {
-                    updateColorHue(value?.h)
-                  }
-                "
-              />
             </div>
           </div>
         </div>
@@ -186,9 +190,10 @@ watch(
 .nc-base-icon-color-picker-dropdown {
   box-shadow: 0px 8px 8px -4px #0000000a, 0px 20px 24px -4px #0000001a;
 }
-.nc-pre-defined-hue-item,
-.nc-custom-hue-picker-item {
-  .selected {
+.nc-pre-defined-hue-item-wrapper {
+  .nc-pre-defined-hue-item:focus,
+  .nc-pre-defined-hue-item.selected {
+    @apply outline-none;
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3069fe;
   }
 }
@@ -197,7 +202,8 @@ watch(
   @apply outline-none text-sm rounded-lg border-gray-200 py-1 px-3 w-14 text-center;
   -moz-appearance: textfield;
 
-  &:focus {
+  &:focus,
+  &.selected {
     @apply ring-transparent border-brand-500;
   }
 

From a6f331e6cb335fd8d93e312506aee76ff700aacd Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:58 +0000
Subject: [PATCH 17/31] fix(nc-gui): duplicate base should also duplicate base
 icon color

---
 packages/nc-gui/components/dlg/ProjectDuplicate.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index ffb159ad15..5bc6d78644 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
@@ -62,6 +62,7 @@ const _duplicate = async () => {
             primaryColor: color,
             accentColor: complement.toHex8String(),
           },
+          iconHue: parseProp(props.base.meta).iconHue,
         }),
       },
     })

From 712f63d7371f35946cb574dc3f222e396140479b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:58 +0000
Subject: [PATCH 18/31] fix(nc-gui): add role permission for base icon color
 change

---
 packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue | 2 +-
 packages/nc-gui/components/general/BaseIconColorPicker.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 8d6e0e9c73..1db621b89e 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -428,7 +428,7 @@ const projectDelete = () => {
                   :key="`${base.id}_${parseProp(base.meta).iconHue}`"
                   :hue="parseProp(base.meta).iconHue"
                   size="small"
-                  :readonly="base?.type && base?.type !== 'database'"
+                  :readonly="(base?.type && base?.type !== 'database') || !isUIAllowed('baseRename')"
                   @color-selected="setColor($event, base)"
                 >
                   <template #default>
diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index c67931d18c..f0e33ee274 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -76,7 +76,7 @@ watch(
           'h-10 w-10 text-2xl': size === 'large',
           'h-14 w-16 text-5xl': size === 'xlarge',
         }"
-        @click.stop="onClick"
+        @click="onClick"
       >
         <template v-if="hue !== 0 && !hue && colorRef.h === defaultHueValue">
           <slot name="default" />

From d434efc9e0ca288cd46885066967233288adf832 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:59 +0000
Subject: [PATCH 19/31] chore(nc-gui): lint

---
 .../nc-gui/components/general/BaseIconColorPicker.vue     | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index f0e33ee274..7195e3d929 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -34,14 +34,6 @@ const updateColorHue = (value?: string | number | null) => {
   colorRef.value.h = !isNaN(parseInt(`${value}`)) ? +Math.min(parseInt(`${value}`), 360) : 0
 }
 
-function selectColor(value: number) {
-  colorRef.value.h = value
-
-  emit('colorSelected', value)
-
-  isOpen.value = false
-}
-
 const onClick = (e: Event) => {
   if (readonly) return
 

From 21b47e4b283f4d89318320d781007f872e5b8f55 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:59 +0000
Subject: [PATCH 20/31] fix(nc-gui): revert unrelated changes

---
 packages/nc-gui/assets/img/hue-colors.png       | Bin 59616 -> 0 bytes
 .../dashboard/TreeView/ProjectNode.vue          |   6 +++---
 2 files changed, 3 insertions(+), 3 deletions(-)
 delete mode 100644 packages/nc-gui/assets/img/hue-colors.png

diff --git a/packages/nc-gui/assets/img/hue-colors.png b/packages/nc-gui/assets/img/hue-colors.png
deleted file mode 100644
index 6ea164a8f05e16472f41214ba9f5f5332b6d9d9d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 59616
zcmeI5T})eL7=XXiR(2%RbvR>XD3we@kPN(-`^m=Ir3=FaoQRQ`;0jY0b<xG$G=Ysm
z3<PK5{0W*R3vjV5Z~-V6ZqX$jixSNOiJ94O%T`4pIt&oPugW~%*B?6Q;mV7JJQt*;
z=d`2WIp=$y?|I+zu5oX1fjv1bSqNb--0dw9LN}i3Lbn(X+rRZ5G#<1gB?UW0M_>9M
z#xLI2$_igEDiYahH?83fVUxQUKWWB~5Y`q=SdB+bzSd%iZq-GLb>X?(@!Zf0hlFs8
zLa(RPuZ;}+^5*rIo!;lSjNa+{{)@?8-STD5mLL1FFN8k5@>2KECHv*Ss!pD{J~KN0
z)_CRk?=wxa&-G0WpFP^u?YS_w&G&HS@!U;+ADTa2wcR~=G`QhpdG+~$gA@C2+}7Gh
zC$4r4t_sXf`%etMk})?l-CQx{pDDljYG=c~iTuy}zSZZ?{IK!XkrTfS_RfuuZ>{O+
z%l&33lr(?Q{z3n#*=bM4h7AA2#*9;)$NF2-I`c2TbE~GYq59a&o^4}KJofI6pZcr6
zvtQ}|=fj(`1-DaI&!&&1t{!>3`KhYm$u%GEA1wMe(;X0+#il!4i=I?kk^*I|zb<(_
zyl3s#0WJ8b*~XTD<|=F7o#0dDyMrQ>wDjLouekRHg(K(1^@;u<V+Wr&Y&H2%SC&uc
zP1&glzl-k36X#5}xEyQqgl*45jfsarcZwS(TO4|_Q`DV)-)l00DdKIDExPT#6mhX+
zm)YPaiA{@+Mr^$5jKkt<%UrYga7A{o2G*Huv3NAAyQ}o0*eBin#5kOG4kw3`tJB8S
zsit2hTN{(DJQIkW#7>1kpinJjE6)VTmW7I1ps-M3-Ko}_tUJ*NQXilZutLhvA^Fe<
zXoRrEMI)dQ)R};Smq{2j0vbUj#?T081T=!eWi$dBLE$nQ0ga$4RVXfz1uAF+Gy)m{
zjj&LfMl}M}2vj4e>j8~`Mo?9}XaqC@8eyTppK1g&0vZ905WD>bjetf#BcKt`2n&#e
zMnEH=5!A8?jetf_c#uFN47KIVMtcFM2_qUqsOpnLhK?tW5=V)n#L<{+2%zH=#8F~r
zc=;XIc7@nU>?C#)JBgkDZ|vMLGVrwBXyewCcc)|cK$|T&V_}5jrr*Qj+Fd~@Zj&>4
zv#2-k?3FH_Su&YN+HTcb9tc#J_vcy_FzvF{8nF77X_}__%vzuMvO>aX-ujHM$<dVO
zIVUaGrku5yf|zLy<_Z!}h?@o%fd}9LcpygrJOB@j5vT<Zzyo6hSXRsYE_eVQfCu0~
z)SzMyzyt6AJcwj$zyt6AJOB^CgUASA4`dph<O22pdmu*uJOB^C1MmPmh!n_y2XX|!
z1MmPmFfIh;ktj{1_JG<0Y7ZjKDX<6N!99rwgPYeq80`hX%^FxfFka2rBmuE}SUxNt
zmJiE^<%=5uF#evzc+eem2i-w;H3FbJ=nlGr?x1@dxMJWzchH>#Jqh~g2&|9<y=!Wu
zMHiyp^LfqHnNViMz8d)j17exxVlI)={O5XkEyM+gXu~$way`^^ap~;VMhRC5-m5Ry
zL(LK#Yb(wS7l$l)uVuL&Y9g<?{gWkc3I73nO<xvA)8XQzbtZFd+H|I%dJ8kHW+9-o
z28f$bkm1C^1MooJv<4o42eKm`cmN*Aj(Fe!cmN(Kk%c_~52Vt>9)Jf@gJTcC19B)v
zatM1M(@fw2cmN)RE9$TZ-~skPRU=S)03Lt`QlP95Jn%pJ)ioiqo-FiwO7TLGTPa8z
z;e|*Wh3h2oLU<v(5MC%!|BM$}A>aq>0ei7qAxHv}1SAP)+^9p1kem~+d{{m#-wLvP
zz#gy%?8WY<1@?eFU{3`FV2_F~6&tDeS}7@AU=P>>_JF-;a~p$nsNcivQNJgZ7Ulim
z!OF&i+Ml}*qzNJ3tC%nE?=881ZGJ2ihR^?ya5iP9hM`}@26bITqQ$cR35u=9?MTmk
SWFpV_cu}~k*xRwwSN9)c{wVGM

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 1db621b89e..1fc91b1d1c 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -235,7 +235,7 @@ async function addNewProjectChildEntity() {
   isAddNewProjectChildEntityLoading.value = true
 
   const isProjectPopulated = basesStore.isProjectPopulated(base.value.id!)
-  if (!isProjectPopulated && base.value?.type === NcProjectType.DB) {
+  if (!isProjectPopulated && base.value.type === NcProjectType.DB) {
     // We do not wait for tables api, so that add new table is seamless.
     // Only con would be while saving table duplicate table name FE validation might not work
     // If the table list api takes time to load before the table name validation
@@ -245,7 +245,7 @@ async function addNewProjectChildEntity() {
   try {
     openTableCreateDialog()
 
-    if (!base.value.isExpanded && base.value?.type !== NcProjectType.DB) {
+    if (!base.value.isExpanded && base.value.type !== NcProjectType.DB) {
       base.value.isExpanded = true
     }
   } finally {
@@ -736,7 +736,7 @@ const projectDelete = () => {
     </div>
     <template v-if="!isSharedBase" #overlay>
       <NcMenu class="!py-0 rounded text-sm">
-        <template v-if="contextMenuTarget.type === 'base' && base?.type === 'database'"></template>
+        <template v-if="contextMenuTarget.type === 'base' && base.type === 'database'"></template>
 
         <template v-else-if="contextMenuTarget.type === 'source'"></template>
 

From b36de0bd088ea3d97e33a3753eca7a5c9627627c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:59 +0000
Subject: [PATCH 21/31] feat(nc-gui): add tooltip for base icon

---
 .../general/BaseIconColorPicker.vue           | 99 ++++++++++---------
 packages/nc-gui/lang/en.json                  |  3 +-
 2 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 7195e3d929..9ec6df0f70 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -70,54 +70,57 @@ watch(
         }"
         @click="onClick"
       >
-        <template v-if="hue !== 0 && !hue && colorRef.h === defaultHueValue">
-          <slot name="default" />
-        </template>
-        <template v-else>
-          <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg" :class="iconClass">
-            <mask
-              id="mask0_1749_80944"
-              style="mask-type: luminance"
-              maskUnits="userSpaceOnUse"
-              x="94"
-              y="40"
-              width="885"
-              height="993"
-            >
-              <path d="M978.723 40H94V1033H978.723V40Z" fill="white" />
-            </mask>
-            <g mask="url(#mask0_1749_80944)">
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
-                :fill="
-                  tinycolor(
-                    preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
-                      ? `hsv(${preDefinedHueData[`_${colorRef.h}`].shade.h},${preDefinedHueData[`_${colorRef.h}`].shade.s}%, ${
-                          preDefinedHueData[`_${colorRef.h}`].shade.v
-                        }%)`
-                      : `hsv(${colorRef.h ?? defaultHueValue}, 100%, 30%)`,
-                  ).toHexString()
-                "
-              />
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
-                :fill="
-                  tinycolor(
-                    preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
-                      ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
-                          preDefinedHueData[`_${colorRef.h}`].tint.v
-                        }%)`
-                      : `hsv(${colorRef.h ?? defaultHueValue}, 50%, 100%)`,
-                  ).toHexString()
-                "
-              />
-            </g>
-          </svg>
-        </template>
+        <NcTooltip placement="topLeft" :disabled="readonly">
+          <template #title> {{ $t('tooltip.changeIconColour') }} </template>
+          <template v-if="hue !== 0 && !hue && colorRef.h === defaultHueValue">
+            <slot name="default" />
+          </template>
+          <template v-else>
+            <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg" :class="iconClass">
+              <mask
+                id="mask0_1749_80944"
+                style="mask-type: luminance"
+                maskUnits="userSpaceOnUse"
+                x="94"
+                y="40"
+                width="885"
+                height="993"
+              >
+                <path d="M978.723 40H94V1033H978.723V40Z" fill="white" />
+              </mask>
+              <g mask="url(#mask0_1749_80944)">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
+                  :fill="
+                    tinycolor(
+                      preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
+                        ? `hsv(${preDefinedHueData[`_${colorRef.h}`].shade.h},${preDefinedHueData[`_${colorRef.h}`].shade.s}%, ${
+                            preDefinedHueData[`_${colorRef.h}`].shade.v
+                          }%)`
+                        : `hsv(${colorRef.h ?? defaultHueValue}, 100%, 30%)`,
+                    ).toHexString()
+                  "
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
+                  :fill="
+                    tinycolor(
+                      preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
+                        ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
+                            preDefinedHueData[`_${colorRef.h}`].tint.v
+                          }%)`
+                        : `hsv(${colorRef.h ?? defaultHueValue}, 50%, 100%)`,
+                    ).toHexString()
+                  "
+                />
+              </g>
+            </svg>
+          </template>
+        </NcTooltip>
       </div>
       <template #overlay>
         <div class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200">
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 3182ef6537..aeb31f2d34 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -967,7 +967,8 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "preFillFormInfo": "Generate share form URL with pre-filled field data. To get a pre-filled link, make sure you’ve filled the necessary fields in the form view builder.",
+    "changeIconColour": "Change Icon Colour",
+    "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page"
   },
   "placeholder": {

From e4c917d3a4f4cb87d9c3ea43a9fb5270ceb93e73 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:59 +0000
Subject: [PATCH 22/31] fix(nc-gui): use colour picker for base icon instead of
 hue picker

---
 packages/nc-gui/components/cmd-k/index.vue    |   7 +-
 .../dashboard/TreeView/ProjectNode.vue        |  20 +-
 .../nc-gui/components/dlg/ProjectDelete.vue   |  13 +-
 .../components/dlg/ProjectDuplicate.vue       |   2 +-
 .../dlg/share-and-collaborate/View.vue        |  13 +-
 .../general/BaseIconColorPicker.vue           | 191 ++++--------------
 .../nc-gui/components/general/ColorPicker.vue | 104 +++++-----
 .../nc-gui/components/general/ProjectIcon.vue |  48 ++++-
 packages/nc-gui/components/project/View.vue   |  12 +-
 .../nc-gui/components/smartsheet/Form.vue     |  14 +-
 .../smartsheet/toolbar/ViewInfo.vue           |   2 +-
 .../components/workspace/ProjectList.vue      |  19 +-
 .../src/services/command-palette.service.ts   |   4 +-
 13 files changed, 175 insertions(+), 274 deletions(-)

diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index a5e2db2de0..948dbeee67 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -17,7 +17,7 @@ interface CmdAction {
   keywords?: string[]
   section?: string
   is_default?: number | null
-  iconHue?: number
+  iconColor?: string
 }
 
 const props = defineProps<{
@@ -387,10 +387,7 @@ defineExpose({
                 >
                   <div class="cmdk-action-content w-full">
                     <template v-if="title === 'Bases' || act.icon === 'project'">
-                      <GeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
-                        <template #default>
-                          <GeneralProjectIcon type="database" />
-                        </template>
+                      <GeneralBaseIconColorPicker :key="act.iconColor" :color="act.iconColor" type="database" readonly>
                       </GeneralBaseIconColorPicker>
                     </template>
                     <template v-else>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 1fc91b1d1c..b93837f00f 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -75,6 +75,8 @@ useTabs()
 
 const { meta: metaKey, ctrlKey } = useMagicKeys()
 
+const { refreshCommandPalette } = useCommandPalette()
+
 const editMode = ref(false)
 
 const tempTitle = ref('')
@@ -172,18 +174,20 @@ defineExpose({
   enableEditMode,
 })
 
-const setColor = async (hue: number, base: BaseType) => {
+const setColor = async (color: string, base: BaseType) => {
   try {
     const meta = {
       ...parseProp(base.meta),
-      iconHue: hue,
+      iconColor: color,
     }
 
     basesStore.updateProject(base.id!, { meta: JSON.stringify(meta) })
 
-    $e('a:base:icon:color:navdraw', { iconHue: hue })
+    $e('a:base:icon:color:navdraw', { iconColor: color })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    refreshCommandPalette()
   }
 }
 
@@ -425,15 +429,13 @@ const projectDelete = () => {
 
               <div v-else>
                 <GeneralBaseIconColorPicker
-                  :key="`${base.id}_${parseProp(base.meta).iconHue}`"
-                  :hue="parseProp(base.meta).iconHue"
+                  :key="`${base.id}_${parseProp(base.meta).iconColor}`"
+                  :type="base?.type"
+                  :model-value="parseProp(base.meta).iconColor"
                   size="small"
                   :readonly="(base?.type && base?.type !== 'database') || !isUIAllowed('baseRename')"
-                  @color-selected="setColor($event, base)"
+                  @update:model-value="setColor($event, base)"
                 >
-                  <template #default>
-                    <GeneralProjectIcon :type="base?.type" />
-                  </template>
                 </GeneralBaseIconColorPicker>
               </div>
             </div>
diff --git a/packages/nc-gui/components/dlg/ProjectDelete.vue b/packages/nc-gui/components/dlg/ProjectDelete.vue
index 3ca95f4f85..cf0e898bd2 100644
--- a/packages/nc-gui/components/dlg/ProjectDelete.vue
+++ b/packages/nc-gui/components/dlg/ProjectDelete.vue
@@ -52,18 +52,7 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.project')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="base" class="flex flex-row items-center py-2 px-2.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <GeneralBaseIconColorPicker
-          :key="parseProp(base.meta).iconHue"
-          :hue="parseProp(base.meta).iconHue"
-          size="small"
-          class="!w-auto !h-auto"
-          icon-class="nc-view-icon w-6 h-6"
-          readonly
-        >
-          <template #default>
-            <GeneralProjectIcon :type="base.type" class="nc-view-icon w-6 h-6" />
-          </template>
-        </GeneralBaseIconColorPicker>
+        <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-view-icon w-6 h-6 mx-1" />
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index 5bc6d78644..176d4c2177 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
@@ -62,7 +62,7 @@ const _duplicate = async () => {
             primaryColor: color,
             accentColor: complement.toHex8String(),
           },
-          iconHue: parseProp(props.base.meta).iconHue,
+          iconColor: parseProp(props.base.meta).iconColor,
         }),
       },
     })
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 0a3bc6839d..dd2742470a 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -154,18 +154,7 @@ watch(showShareModal, (val) => {
       </div>
       <div class="share-base">
         <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <GeneralBaseIconColorPicker
-            :key="parseProp(base.meta).iconHue"
-            :hue="parseProp(base.meta).iconHue"
-            size="small"
-            class="!w-auto !h-auto"
-            icon-class="nc-view-icon group-hover"
-            readonly
-          >
-            <template #default>
-              <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
-            </template>
-          </GeneralBaseIconColorPicker>
+          <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-view-icon group-hover" />
 
           <div>{{ $t('activity.shareBase.label') }}</div>
           <div
diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 9ec6df0f70..17e9fb0ed7 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -1,37 +1,37 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
 
-import { BASE_ICON_COLOR_HUE_DATA as preDefinedHueData } from '#imports'
-
-const props = defineProps<{
-  hue?: number | null
-  size?: 'small' | 'medium' | 'large' | 'xlarge'
-  readonly?: boolean
-  disableClearing?: boolean
-  iconClass?: string
-}>()
-
-const emit = defineEmits(['colorSelected'])
+import { NcProjectType } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    type?: NcProjectType | string
+    modelValue?: string
+    size?: 'small' | 'medium' | 'large' | 'xlarge'
+    readonly?: boolean
+    iconClass?: string
+  }>(),
+  {
+    type: NcProjectType.DB,
+    size: 'small',
+  },
+)
 
-const { hue, size = 'medium', readonly } = props
+const emit = defineEmits(['update:modelValue'])
 
-const defaultHueColor = {
-  h: 199,
-  s: 79,
-  v: 100,
-}
+const defaultIconColors = ['#36BFFF', '#FA8231', '#FCBE3A', '#27D665', '#6A7184', '#FF4A3F', '#FC3AC6', '#7D26CD']
 
-const defaultHueValue = 199
+const { modelValue, size, readonly } = props
 
 const isOpen = ref(false)
 
-const colorRef = ref({
-  ...defaultHueColor,
-  h: !(hue !== 0 && !hue) ? hue : defaultHueValue,
-})
+const colorRef = ref(tinycolor(modelValue).isValid() ? modelValue : defaultIconColors[0])
 
-const updateColorHue = (value?: string | number | null) => {
-  colorRef.value.h = !isNaN(parseInt(`${value}`)) ? +Math.min(parseInt(`${value}`), 360) : 0
+const updateIconColor = (color: string) => {
+  const tcolor = tinycolor(color)
+  if (tcolor.isValid()) {
+    colorRef.value = color
+  }
 }
 
 const onClick = (e: Event) => {
@@ -45,8 +45,8 @@ const onClick = (e: Event) => {
 watch(
   isOpen,
   (value) => {
-    if (!value && colorRef.value.h !== hue) {
-      emit('colorSelected', colorRef.value.h)
+    if (!value && colorRef.value !== modelValue) {
+      emit('update:modelValue', colorRef.value)
     }
   },
   {
@@ -72,108 +72,25 @@ watch(
       >
         <NcTooltip placement="topLeft" :disabled="readonly">
           <template #title> {{ $t('tooltip.changeIconColour') }} </template>
-          <template v-if="hue !== 0 && !hue && colorRef.h === defaultHueValue">
-            <slot name="default" />
-          </template>
-          <template v-else>
-            <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg" :class="iconClass">
-              <mask
-                id="mask0_1749_80944"
-                style="mask-type: luminance"
-                maskUnits="userSpaceOnUse"
-                x="94"
-                y="40"
-                width="885"
-                height="993"
-              >
-                <path d="M978.723 40H94V1033H978.723V40Z" fill="white" />
-              </mask>
-              <g mask="url(#mask0_1749_80944)">
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
-                  :fill="
-                    tinycolor(
-                      preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
-                        ? `hsv(${preDefinedHueData[`_${colorRef.h}`].shade.h},${preDefinedHueData[`_${colorRef.h}`].shade.s}%, ${
-                            preDefinedHueData[`_${colorRef.h}`].shade.v
-                          }%)`
-                        : `hsv(${colorRef.h ?? defaultHueValue}, 100%, 30%)`,
-                    ).toHexString()
-                  "
-                />
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
-                  :fill="
-                    tinycolor(
-                      preDefinedHueData && preDefinedHueData[`_${colorRef.h}`]
-                        ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
-                            preDefinedHueData[`_${colorRef.h}`].tint.v
-                          }%)`
-                        : `hsv(${colorRef.h ?? defaultHueValue}, 50%, 100%)`,
-                    ).toHexString()
-                  "
-                />
-              </g>
-            </svg>
-          </template>
+
+          <div>
+            <GeneralProjectIcon :color="colorRef" :type="type" />
+          </div>
         </NcTooltip>
       </div>
-      <template #overlay>
-        <div class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200">
-          <div class="flex items-center p-2 space-x-2">
-            <div
-              v-for="(h, i) of Object.keys(preDefinedHueData)"
-              :key="i"
-              class="nc-pre-defined-hue-item-wrapper p-1 rounded cursor-pointer hover:bg-gray-200"
-            >
-              <div
-                class="nc-pre-defined-hue-item rounded h-6 w-6"
-                :tabindex="0"
-                :class="{
-                  selected: `_${colorRef.h}` === h,
-                }"
-                :style="{
-                  backgroundColor: preDefinedHueData[h].pickerColor,
-                }"
-                @click.stop="updateColorHue(preDefinedHueData[h].tint.h)"
-                @keydown.enter.stop="updateColorHue(preDefinedHueData[h].tint.h)"
-              ></div>
-            </div>
-          </div>
 
-          <div class="p-3 border-t-1 border-gray-200 flex flex-col space-y-2.5">
-            <div class="uppercase text-xs font-medium">{{ $t('labels.customColour') }}</div>
-
-            <div class="flex flex-row items-center gap-x-3">
-              <LazyGeneralColorSliderWrapper
-                :model-value="colorRef"
-                class="!min-w-none"
-                @update:model-value="
-                  (value) => {
-                    updateColorHue(value?.h)
-                  }
-                "
-              />
-              <input
-                :value="parseInt(`${colorRef.h ?? 0}`)"
-                class="nc-color-hue-input"
-                :class="{
-                  selected: !preDefinedHueData[`_${colorRef.h}`],
-                }"
-                type="number"
-                :min="0"
-                :max="360"
-                @input="
-                  (value) => {
-                    updateColorHue(value.target?.value)
-                  }
-                "
-              />
-            </div>
+      <template #overlay>
+        <div
+          class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200 overflow-hidden max-w-[342px]"
+        >
+          <div class="flex justify-start">
+            <GeneralColorPicker
+              :model-value="colorRef"
+              :colors="defaultIconColors"
+              :is-new-design="true"
+              class="nc-base-icon-color-picker"
+              @input="updateIconColor"
+            />
           </div>
         </div>
       </template>
@@ -185,28 +102,4 @@ watch(
 .nc-base-icon-color-picker-dropdown {
   box-shadow: 0px 8px 8px -4px #0000000a, 0px 20px 24px -4px #0000001a;
 }
-.nc-pre-defined-hue-item-wrapper {
-  .nc-pre-defined-hue-item:focus,
-  .nc-pre-defined-hue-item.selected {
-    @apply outline-none;
-    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3069fe;
-  }
-}
-
-.nc-color-hue-input {
-  @apply outline-none text-sm rounded-lg border-gray-200 py-1 px-3 w-14 text-center;
-  -moz-appearance: textfield;
-
-  &:focus,
-  &.selected {
-    @apply ring-transparent border-brand-500;
-  }
-
-  /* Chrome, Safari, Edge, Opera */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
 </style>
diff --git a/packages/nc-gui/components/general/ColorPicker.vue b/packages/nc-gui/components/general/ColorPicker.vue
index c3e748a653..727d2f8ee8 100644
--- a/packages/nc-gui/components/general/ColorPicker.vue
+++ b/packages/nc-gui/components/general/ColorPicker.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import tinycolor from 'tinycolor2'
 import { computed, enumColor, ref, watch } from '#imports'
 
 interface Props {
@@ -7,7 +8,7 @@ interface Props {
   rowSize?: number
   advanced?: boolean
   pickButton?: boolean
-  borders?: string[]
+  colorBoxBorder?: boolean
   isNewDesign?: boolean
 }
 
@@ -17,6 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
   rowSize: 10,
   advanced: true,
   pickButton: false,
+  colorBoxBorder: false,
   isNewDesign: false,
 })
 
@@ -41,7 +43,8 @@ const selectColor = (color: string, closeModal = false) => {
 
 const isPickerOn = ref(false)
 
-const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
+const compare = (colorA: string, colorB: string) =>
+  colorA.toLowerCase() === colorB.toLowerCase() || colorA.toLowerCase() === tinycolor(colorB).toHex8String().toLowerCase()
 
 watch(picked, (n, _o) => {
   vModel.value = n
@@ -50,31 +53,57 @@ watch(picked, (n, _o) => {
 
 <template>
   <div class="color-picker">
-    <div v-for="colId in Math.ceil(props.colors.length / props.rowSize)" :key="colId" class="color-picker-row">
-      <button
+    <div
+      v-for="colId in Math.ceil(props.colors.length / props.rowSize)"
+      :key="colId"
+      class="color-picker-row"
+      :class="{
+        'mt-2': colId > 1,
+      }"
+    >
+      <div
         v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
         :key="`color-${colId}-${i}`"
-        class="color-selector"
-        :class="{ 'selected': compare(picked, color), 'new-design': isNewDesign }"
-        :style="{
-          'background-color': `${color}`,
-          'border': borders?.length && borders[i] ? `1px solid ${borders[i]}` : undefined,
+        class="p-1 rounded-md flex h-8"
+        :class="{
+          'hover:bg-gray-200': isNewDesign,
         }"
-        @click="selectColor(color, true)"
       >
-        {{ compare(picked, color) && !isNewDesign ? '&#10003;' : '' }}
-      </button>
-      <button class="h-6 w-6 mt-2.7 ml-1 border-1 border-[grey] rounded-md" @click="isPickerOn = !isPickerOn">
-        <GeneralTooltip>
-          <template #title>{{ $t('activity.moreColors') }}</template>
-          <div class="flex items-center justify-center">
-            <GeneralIcon :icon="isPickerOn ? 'minus' : 'plus'" class="w-4 h-4" />
-          </div>
-        </GeneralTooltip>
-      </button>
+        <button
+          class="color-selector"
+          :class="{ 'selected': compare(picked, color), 'new-design': isNewDesign }"
+          :style="{
+            'background-color': `${color}`,
+            'border': colorBoxBorder ? `1px solid ${tinycolor(color).darken(30).toString()}` : undefined,
+          }"
+          @click="selectColor(color, true)"
+        >
+          {{ compare(picked, color) && !isNewDesign ? '&#10003;' : '' }}
+        </button>
+      </div>
+      <div
+        class="p-1 rounded-md h-8"
+        :class="{
+          'hover:bg-gray-200': isNewDesign,
+        }"
+      >
+        <button class="nc-more-colors-trigger h-6 w-6 border-1 border-gray-400 rounded" @click="isPickerOn = !isPickerOn">
+          <GeneralTooltip>
+            <template #title>{{ $t('activity.moreColors') }}</template>
+            <div class="flex items-center justify-center">
+              <GeneralIcon :icon="isPickerOn ? 'minus' : 'plus'" class="w-4 h-4" />
+            </div>
+          </GeneralTooltip>
+        </button>
+      </div>
     </div>
 
-    <a-card v-if="props.advanced" class="w-full mt-2" :body-style="{ padding: '0px' }" :bordered="false">
+    <a-card
+      v-if="props.advanced"
+      class="w-full mt-2"
+      :body-style="{ paddingLeft: '4px !important', paddingRight: '4px !important' }"
+      :bordered="false"
+    >
       <div v-if="isPickerOn" class="flex justify-center">
         <LazyGeneralChromeWrapper v-model="picked" class="!w-full !shadow-none" />
       </div>
@@ -82,25 +111,15 @@ watch(picked, (n, _o) => {
   </div>
 </template>
 
-<style scoped>
+<style lansg="scss" scoped>
 .color-picker {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  background: white;
-  padding: 10px;
+  @apply flex flex-col items-center justify-center bg-white p-2.5;
 }
 .color-picker-row {
-  display: flex;
-  flex-direction: row;
+  @apply flex flex-row space-x-1;
 }
 .color-selector {
-  position: relative;
-  height: 25px;
-  width: 25px;
-  margin: 10px 5px;
-  border-radius: 5px;
+  @apply h-6 w-6 rounded;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
 }
@@ -108,19 +127,14 @@ watch(picked, (n, _o) => {
   filter: brightness(90%);
   -webkit-filter: brightness(90%);
 }
-
-.color-selector.selected:not(.new-design) {
-  filter: brightness(90%);
-  -webkit-filter: brightness(90%);
-}
-.color-selector:focus.new-design {
+.color-selector:focus,
+.color-selector.selected,
+.nc-more-colors-trigger:focus {
   outline: none;
   box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
 }
-.color-selector.selected.new-design {
-  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
-}
+
 :deep(.vc-chrome-toggle-icon) {
-  @apply ml-3!important;
+  @apply !ml-3;
 }
 </style>
diff --git a/packages/nc-gui/components/general/ProjectIcon.vue b/packages/nc-gui/components/general/ProjectIcon.vue
index d732cafc7f..857bbd4fbe 100644
--- a/packages/nc-gui/components/general/ProjectIcon.vue
+++ b/packages/nc-gui/components/general/ProjectIcon.vue
@@ -1,18 +1,58 @@
 <script lang="ts" setup>
-const { hoverable } = defineProps<{
+import tinycolor from 'tinycolor2'
+const { hoverable, color } = defineProps<{
   type?: string
   hoverable?: boolean
+  color?: string
 }>()
+
+const iconColor = computed(() => {
+  return color
+    ? {
+        tint: tinycolor(color || '#36BFFF')
+          .lighten(10)
+          .toHexString(),
+        shade: tinycolor(color || '#36BFFF')
+          .darken(40)
+          .toHexString(),
+      }
+    : {
+        tint: '#36BFFF',
+        shade: '#142966',
+      }
+})
 </script>
 
 <template>
-  <GeneralIcon
-    icon="project"
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 1073 1073"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
     class="text-[#2824FB] base"
     :class="{
       'nc-base-icon-hoverable': hoverable,
     }"
-  />
+  >
+    <mask id="mask0_1749_80944" style="mask-type: luminance" maskUnits="userSpaceOnUse" x="94" y="40" width="885" height="993">
+      <path d="M978.723 40H94V1033H978.723V40Z" fill="white" />
+    </mask>
+    <g mask="url(#mask0_1749_80944)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M638.951 291.265L936.342 462.949C966.129 480.145 980.256 502.958 978.723 525.482V774.266C980.256 796.789 966.129 819.602 936.342 836.798L638.951 1008.48C582.292 1041.19 490.431 1041.19 433.773 1008.48L136.381 836.798C106.595 819.602 92.4675 796.789 93.9999 774.266L93.9999 525.482C92.4675 502.957 106.595 480.145 136.381 462.949L433.773 291.265C490.431 258.556 582.292 258.556 638.951 291.265Z"
+        :fill="iconColor.shade"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M638.951 65.0055L936.342 236.69C966.129 253.886 980.256 276.699 978.723 299.222V548.006C980.256 570.529 966.129 593.343 936.342 610.538L638.951 782.223C582.292 814.931 490.431 814.931 433.773 782.223L136.381 610.538C106.595 593.343 92.4675 570.529 93.9999 548.006L93.9999 299.222C92.4675 276.699 106.595 253.886 136.381 236.69L433.773 65.0055C490.431 32.2968 582.292 32.2968 638.951 65.0055Z"
+        :fill="iconColor.tint"
+      />
+    </g>
+  </svg>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index e51a3c7c8a..9410035e29 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -82,17 +82,7 @@ watch(
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
-          <GeneralBaseIconColorPicker
-            :key="parseProp(openedProject?.meta).iconHue"
-            :hue="parseProp(openedProject?.meta).iconHue"
-            size="small"
-            class="!w-auto !h-auto"
-            readonly
-          >
-            <template #default>
-              <GeneralProjectIcon :type="openedProject?.type" />
-            </template>
-          </GeneralBaseIconColorPicker>
+          <GeneralProjectIcon :type="openedProject?.type" :color="parseProp(openedProject?.meta).iconColor" />
           <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" show-on-truncate-only>
             <template #title> {{ openedProject?.title }}</template>
             <span class="truncate">
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b92c41185f..781d336817 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1541,19 +1541,9 @@ useEventListener(
                           '#E5D4F5',
                           '#FFCFE6',
                         ]"
-                        :borders="[
-                          '#6A7184',
-                          '#FF4A3F',
-                          '#FA8231',
-                          '#FCBE3A',
-                          '#27D665',
-                          '#36BFFF',
-                          '#FC3AC6',
-                          '#7D26CD',
-                          '#B33771',
-                        ]"
+                        :color-box-border="true"
                         :is-new-design="true"
-                        class="nc-form-theme-color-picker !p-0 !-ml-1"
+                        class="nc-form-theme-color-picker !pb-0"
                         @input="handleChangeBackground"
                       />
                     </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index cf881c5b72..0c06e7dd56 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -50,7 +50,7 @@ const openedBaseUrl = computed(() => {
           </template>
           <div class="flex flex-row items-center gap-x-1.5">
             <GeneralProjectIcon
-              :meta="{ type: base?.type }"
+              :type="base?.type"
               class="!grayscale min-w-4"
               :style="{
                 filter: 'grayscale(100%) brightness(115%)',
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 8c510becaa..5909400f33 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -182,16 +182,16 @@ function onProjectTitleClick(index: number) {
   }
 }
 
-const setColor = async (hue: number, base: BaseType) => {
+const setColor = async (color: string, base: BaseType) => {
   try {
     const meta = {
       ...parseProp(base.meta),
-      iconHue: hue,
+      iconColor: color,
     }
 
     basesStore.updateProject(base.id!, { meta: JSON.stringify(meta) })
 
-    $e('a:base:icon:color:navdraw', { iconHue: hue })
+    $e('a:base:icon:color:navdraw', { iconColor: color })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -252,15 +252,12 @@ const setColor = async (hue: number, base: BaseType) => {
           <div class="flex items-center nc-base-title gap-2.5 max-w-full -ml-1.5">
             <div class="flex items-center gap-2 text-center">
               <GeneralBaseIconColorPicker
-                :key="parseProp(record.meta).iconHue"
-                :hue="parseProp(record.meta).iconHue"
-                size="small"
-                readonly
-                @color-selected="setColor($event, record)"
+                :key="`${record.id}_${parseProp(record.meta).iconColor}`"
+                :type="record?.type"
+                :model-value="parseProp(record.meta).iconColor"
+                :readonly="(record?.type && record?.type !== 'database') || !isUIAllowed('baseRename')"
+                @update:model-value="setColor($event, record)"
               >
-                <template #default>
-                  <GeneralProjectIcon :type="record.type" />
-                </template>
               </GeneralBaseIconColorPicker>
               <!-- todo: replace with switch -->
             </div>
diff --git a/packages/nocodb/src/services/command-palette.service.ts b/packages/nocodb/src/services/command-palette.service.ts
index f57bb59c77..6076461a02 100644
--- a/packages/nocodb/src/services/command-palette.service.ts
+++ b/packages/nocodb/src/services/command-palette.service.ts
@@ -29,7 +29,7 @@ export class CommandPaletteService {
             id: `p-${base.id}`,
             title: base.title,
             icon: 'project',
-            iconHue: deserializeJSON(base.meta)?.iconHue,
+            iconColor: deserializeJSON(base.meta)?.iconColor,
             section: 'Bases',
             scopePayload: {
               scope: `p-${base.id}`,
@@ -72,7 +72,7 @@ export class CommandPaletteService {
             id: `p-${b.id}`,
             title: b.title,
             icon: 'project',
-            iconHue: deserializeJSON(b.meta)?.iconHue,
+            iconColor: deserializeJSON(b.meta)?.iconColor,
             section: 'Bases',
           });
         }

From 70bde415684493246292b43a4576cea86aa1399c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:59 +0000
Subject: [PATCH 23/31] chore(nc-gui): revert unrelated changes

---
 .../dashboard/TreeView/ProjectNode.vue        |  2 +-
 packages/nc-gui/lang/en.json                  |  3 +-
 packages/nc-gui/lib/constants.ts              | 60 -------------------
 3 files changed, 2 insertions(+), 63 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index b93837f00f..334469dab3 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -424,7 +424,7 @@ const projectDelete = () => {
           </NcButton>
 
           <div class="flex items-center mr-1" @click="onProjectClick(base)">
-            <div v-e="['c:base:iconColorChange']" class="flex items-center select-none w-6 h-full">
+            <div class="flex items-center select-none w-6 h-full">
               <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
 
               <div v-else>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index aeb31f2d34..d174147bc0 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -699,8 +699,7 @@
     "showFieldOnConditionsMet": "Shows field only when conditions are met",
     "limitOptions": "Limit ptions",
     "limitOptionsSubtext": "Limit options visible to users by selecting available options",
-    "clearSelection": "Clear selection",
-    "customColour": "Custom colour"
+    "clearSelection": "Clear selection"
   },
   "activity": {
     "noRange": "Calendar view requires a date range",
diff --git a/packages/nc-gui/lib/constants.ts b/packages/nc-gui/lib/constants.ts
index 653db51438..f8257bebfa 100644
--- a/packages/nc-gui/lib/constants.ts
+++ b/packages/nc-gui/lib/constants.ts
@@ -18,63 +18,3 @@ export const GROUP_BY_VARS = {
     __nc_false__: 'Unchecked',
   } as Record<string, string>,
 }
-
-export const BASE_ICON_COLOR_HUE_DATA: Record<
-  string,
-  { tint: { h: number; s: number; v: number }; shade: { h: number; s: number; v: number }; pickerColor: string }
-> = {
-  // blue
-  _199: {
-    tint: { h: 199, s: 79, v: 100 },
-    shade: { h: 255, s: 80, v: 40 },
-    pickerColor: '#36BFFF',
-  },
-  // orange
-  _24: {
-    tint: { h: 24, s: 64, v: 98 },
-    shade: { h: 24, s: 81, v: 59 },
-    pickerColor: '#FA8231',
-  },
-  // yellow
-  _41: {
-    tint: { h: 41, s: 62, v: 99 },
-    shade: { h: 41, s: 77, v: 40 },
-    pickerColor: '#FCBE3A',
-  },
-  // green
-  _141: {
-    tint: { h: 141, s: 63, v: 87 },
-    shade: { h: 141, s: 81, v: 34 },
-    pickerColor: '#27D665',
-  },
-  // gray
-  _217: {
-    tint: { h: 217, s: 12, v: 69 },
-    shade: { h: 217, s: 32, v: 32 },
-    pickerColor: '#6A7184',
-  },
-  // red
-  _4: {
-    tint: { h: 4, s: 60, v: 100 },
-    shade: { h: 4, s: 74, v: 49 },
-    pickerColor: '#FF4A3F',
-  },
-  // pink
-  _317: {
-    tint: { h: 317, s: 62, v: 99 },
-    shade: { h: 317, s: 77, v: 40 },
-    pickerColor: '#FC3AC6',
-  },
-  // purple
-  _271: {
-    tint: { h: 271, s: 62, v: 84 },
-    shade: { h: 271, s: 82, v: 32 },
-    pickerColor: '#7D26CD',
-  },
-  // maroon
-  _332: {
-    tint: { h: 332, s: 58, v: 83 },
-    shade: { h: 332, s: 93, v: 41 },
-    pickerColor: '#B33771',
-  },
-}

From eadb4fe2e1d96b36aba7eec5c3d69b064452e882 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:44:59 +0000
Subject: [PATCH 24/31] fix(nc-gui): form bg color picker left padding issue

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

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 781d336817..1b64240091 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1543,7 +1543,7 @@ useEventListener(
                         ]"
                         :color-box-border="true"
                         :is-new-design="true"
-                        class="nc-form-theme-color-picker !pb-0"
+                        class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
                         @input="handleChangeBackground"
                       />
                     </div>

From ba0e765e8c5e47593abc74531044a2bb48a6cc62 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:45:00 +0000
Subject: [PATCH 25/31] chore: case change

---
 packages/nc-gui/lang/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index d174147bc0..90092a7530 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -966,7 +966,7 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "changeIconColour": "Change Icon Colour",
+    "changeIconColour": "Change icon colour",
     "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page"
   },

From 520038c69463ef44206d6ad8eaf3a1bf6d571514 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:45:00 +0000
Subject: [PATCH 26/31] feat(nc-gui): assign random base icon color for new
 base

---
 .../general/BaseIconColorPicker.vue           |  6 ++----
 .../components/workspace/CreateProjectDlg.vue | 20 +++++++++++++++++--
 packages/nc-gui/store/bases.ts                |  4 ++++
 packages/nc-gui/utils/colorsUtils.ts          |  2 ++
 packages/nocodb/src/models/Base.ts            |  5 +++++
 packages/nocodb/src/schema/swagger-v2.json    |  4 ++++
 packages/nocodb/src/schema/swagger.json       |  4 ++++
 7 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 17e9fb0ed7..c8368e2303 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -19,13 +19,11 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const defaultIconColors = ['#36BFFF', '#FA8231', '#FCBE3A', '#27D665', '#6A7184', '#FF4A3F', '#FC3AC6', '#7D26CD']
-
 const { modelValue, size, readonly } = props
 
 const isOpen = ref(false)
 
-const colorRef = ref(tinycolor(modelValue).isValid() ? modelValue : defaultIconColors[0])
+const colorRef = ref(tinycolor(modelValue).isValid() ? modelValue : baseIconColors[0])
 
 const updateIconColor = (color: string) => {
   const tcolor = tinycolor(color)
@@ -86,7 +84,7 @@ watch(
           <div class="flex justify-start">
             <GeneralColorPicker
               :model-value="colorRef"
-              :colors="defaultIconColors"
+              :colors="baseIconColors"
               :is-new-design="true"
               class="nc-base-icon-color-picker"
               @input="updateIconColor"
diff --git a/packages/nc-gui/components/workspace/CreateProjectDlg.vue b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
index 7c4212203c..9809f582f7 100644
--- a/packages/nc-gui/components/workspace/CreateProjectDlg.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
@@ -3,7 +3,16 @@ import type { RuleObject } from 'ant-design-vue/es/form'
 import type { Form, Input } from 'ant-design-vue'
 import type { VNodeRef } from '@vue/runtime-core'
 import { computed } from '@vue/reactivity'
-import { NcProjectType, baseTitleValidator, extractSdkResponseErrorMsg, ref, useGlobal, useI18n, useVModel } from '#imports'
+import {
+  NcProjectType,
+  baseIconColors,
+  baseTitleValidator,
+  extractSdkResponseErrorMsg,
+  ref,
+  useGlobal,
+  useI18n,
+  useVModel,
+} from '#imports'
 
 const props = defineProps<{
   modelValue: boolean
@@ -38,6 +47,9 @@ const form = ref<typeof Form>()
 
 const formState = ref({
   title: '',
+  meta: {
+    iconColor: baseIconColors[Math.floor(Math.random() * 1000) % baseIconColors.length],
+  },
 })
 
 const creating = ref(false)
@@ -48,6 +60,7 @@ const createProject = async () => {
     const base = await _createProject({
       type: baseType.value,
       title: formState.value.title,
+      meta: formState.value.meta,
     })
 
     navigateToProject({
@@ -77,6 +90,9 @@ watch(dialogShow, async (n, o) => {
 
     formState.value = {
       title: 'Base',
+      meta: {
+        iconColor: baseIconColors[Math.floor(Math.random() * 1000) % baseIconColors.length],
+      },
     }
 
     await nextTick()
@@ -100,7 +116,7 @@ const typeLabel = computed(() => {
     <template #header>
       <!-- Create A New Table -->
       <div class="flex flex-row items-center">
-        <GeneralProjectIcon :type="baseType" class="mr-2.5 !text-lg !h-4" />
+        <GeneralProjectIcon :color="formState.meta.iconColor" :type="baseType" class="mr-2.5 !text-lg !h-4" />
         {{
           $t('general.createEntity', {
             entity: typeLabel,
diff --git a/packages/nc-gui/store/bases.ts b/packages/nc-gui/store/bases.ts
index f16ea12753..cf453fbeca 100644
--- a/packages/nc-gui/store/bases.ts
+++ b/packages/nc-gui/store/bases.ts
@@ -242,11 +242,15 @@ export const useBases = defineStore('basesStore', () => {
     workspaceId?: string
     type: string
     linkedDbProjectIds?: string[]
+    meta?: Record<string, unknown>
   }) => {
     const result = await api.base.create(
       {
         title: basePayload.title,
         linked_db_project_ids: basePayload.linkedDbProjectIds,
+        meta: JSON.stringify({
+          ...(basePayload.meta || {}),
+        }),
       },
       {
         baseURL: getBaseUrl('nc'),
diff --git a/packages/nc-gui/utils/colorsUtils.ts b/packages/nc-gui/utils/colorsUtils.ts
index dbb67f5612..e1e47beb52 100644
--- a/packages/nc-gui/utils/colorsUtils.ts
+++ b/packages/nc-gui/utils/colorsUtils.ts
@@ -111,6 +111,8 @@ export const baseThemeColors = [
   '#333333',
 ]
 
+export const baseIconColors = ['#36BFFF', '#FA8231', '#FCBE3A', '#27D665', '#6A7184', '#FF4A3F', '#FC3AC6', '#7D26CD']
+
 const designSystem = {
   light: [
     // '#EBF0FF',
diff --git a/packages/nocodb/src/models/Base.ts b/packages/nocodb/src/models/Base.ts
index 7d59562d48..73f1b67fb5 100644
--- a/packages/nocodb/src/models/Base.ts
+++ b/packages/nocodb/src/models/Base.ts
@@ -62,6 +62,11 @@ export default class Base implements BaseType {
       insertObj.order = await ncMeta.metaGetNextOrder(MetaTable.PROJECT, {});
     }
 
+    // stringify meta
+    if (insertObj.meta) {
+      insertObj.meta = stringifyMetaProp(insertObj);
+    }
+
     const { id: baseId } = await ncMeta.metaInsert2(
       null,
       null,
diff --git a/packages/nocodb/src/schema/swagger-v2.json b/packages/nocodb/src/schema/swagger-v2.json
index 6dba37ce76..48884eeac3 100644
--- a/packages/nocodb/src/schema/swagger-v2.json
+++ b/packages/nocodb/src/schema/swagger-v2.json
@@ -16352,6 +16352,10 @@
             "items": {
               "type": "string"
             }
+          },
+          "meta": {
+            "$ref": "#/components/schemas/Meta",
+            "description": "Base Meta"
           }
         },
         "required": [
diff --git a/packages/nocodb/src/schema/swagger.json b/packages/nocodb/src/schema/swagger.json
index a0ed0e8050..0dfe0409da 100644
--- a/packages/nocodb/src/schema/swagger.json
+++ b/packages/nocodb/src/schema/swagger.json
@@ -22522,6 +22522,10 @@
             "items": {
               "type": "string"
             }
+          },
+          "meta": {
+            "$ref": "#/components/schemas/Meta",
+            "description": "Base Meta"
           }
         },
         "required": [

From f70eab6b35f77597947cce6689cb70c4d71585a6 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:45:00 +0000
Subject: [PATCH 27/31] fix(nc-gui): PR review changes

---
 packages/nc-gui/components/general/BaseIconColorPicker.vue | 7 ++++---
 packages/nc-gui/components/general/ColorPicker.vue         | 4 ++--
 packages/nc-gui/components/general/ColorSliderWrapper.vue  | 6 +++---
 packages/nc-gui/components/smartsheet/Form.vue             | 4 ++--
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index c8368e2303..ec4e381657 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -19,11 +19,12 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const { modelValue, size, readonly } = props
+const { modelValue } = toRefs(props)
+const { size, readonly } = props
 
 const isOpen = ref(false)
 
-const colorRef = ref(tinycolor(modelValue).isValid() ? modelValue : baseIconColors[0])
+const colorRef = ref(tinycolor(modelValue.value).isValid() ? modelValue.value : baseIconColors[0])
 
 const updateIconColor = (color: string) => {
   const tcolor = tinycolor(color)
@@ -43,7 +44,7 @@ const onClick = (e: Event) => {
 watch(
   isOpen,
   (value) => {
-    if (!value && colorRef.value !== modelValue) {
+    if (!value && colorRef.value !== modelValue.value) {
       emit('update:modelValue', colorRef.value)
     }
   },
diff --git a/packages/nc-gui/components/general/ColorPicker.vue b/packages/nc-gui/components/general/ColorPicker.vue
index 727d2f8ee8..98c7aedfd5 100644
--- a/packages/nc-gui/components/general/ColorPicker.vue
+++ b/packages/nc-gui/components/general/ColorPicker.vue
@@ -73,8 +73,8 @@ watch(picked, (n, _o) => {
           class="color-selector"
           :class="{ 'selected': compare(picked, color), 'new-design': isNewDesign }"
           :style="{
-            'background-color': `${color}`,
-            'border': colorBoxBorder ? `1px solid ${tinycolor(color).darken(30).toString()}` : undefined,
+            backgroundColor: `${color}`,
+            border: colorBoxBorder ? `1px solid ${tinycolor(color).darken(30).toString()}` : undefined,
           }"
           @click="selectColor(color, true)"
         >
diff --git a/packages/nc-gui/components/general/ColorSliderWrapper.vue b/packages/nc-gui/components/general/ColorSliderWrapper.vue
index 3ac7f7a7c1..4bfc2b4147 100644
--- a/packages/nc-gui/components/general/ColorSliderWrapper.vue
+++ b/packages/nc-gui/components/general/ColorSliderWrapper.vue
@@ -8,8 +8,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => '#3069FE',
-  mode: () => 'hsv',
+  modelValue: '#3069FE',
+  mode: 'hsv',
 })
 
 const emit = defineEmits(['update:modelValue', 'input'])
@@ -30,7 +30,7 @@ const picked = computed({
     v-model="picked"
     class="nc-color-slider-wrapper min-w-[200px]"
     :style="{
-      ['--nc-color-slider-pointer']: tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
+      '--nc-color-slider-pointer': tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
     }"
   />
 </template>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 1b64240091..59ad63bfa0 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1541,8 +1541,8 @@ useEventListener(
                           '#E5D4F5',
                           '#FFCFE6',
                         ]"
-                        :color-box-border="true"
-                        :is-new-design="true"
+                        color-box-border
+                        is-new-design
                         class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
                         @input="handleChangeBackground"
                       />

From 5eabbb77c166037641764ac708d78fa630b97791 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:45:00 +0000
Subject: [PATCH 28/31] fix(nc-gui): add support to show base emoji if exist

---
 packages/nc-gui/components/cmd-k/index.vue             | 10 ++++++++--
 .../components/dashboard/TreeView/ProjectNode.vue      |  1 +
 .../nc-gui/components/general/BaseIconColorPicker.vue  |  7 ++++++-
 packages/nc-gui/components/workspace/ProjectList.vue   |  1 +
 .../nocodb/src/services/command-palette.service.ts     |  4 ++--
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index 948dbeee67..66b2a37dfb 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -386,8 +386,14 @@ defineExpose({
                   @click="fireAction(act)"
                 >
                   <div class="cmdk-action-content w-full">
-                    <template v-if="title === 'Bases' || act.icon === 'project'">
-                      <GeneralBaseIconColorPicker :key="act.iconColor" :color="act.iconColor" type="database" readonly>
+                    <template v-if="title === 'Bases'">
+                      <GeneralBaseIconColorPicker
+                        :key="act.iconColor"
+                        :model-value="act.iconColor"
+                        :emoji="typeof act.icon === 'string' ? act.icon : ''"
+                        type="database"
+                        readonly
+                      >
                       </GeneralBaseIconColorPicker>
                     </template>
                     <template v-else>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 334469dab3..1351b1aa1f 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -432,6 +432,7 @@ const projectDelete = () => {
                   :key="`${base.id}_${parseProp(base.meta).iconColor}`"
                   :type="base?.type"
                   :model-value="parseProp(base.meta).iconColor"
+                  :emoji="parseProp(base.meta).icon"
                   size="small"
                   :readonly="(base?.type && base?.type !== 'database') || !isUIAllowed('baseRename')"
                   @update:model-value="setColor($event, base)"
diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index ec4e381657..4215501d79 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -7,6 +7,7 @@ const props = withDefaults(
   defineProps<{
     type?: NcProjectType | string
     modelValue?: string
+    emoji?: string
     size?: 'small' | 'medium' | 'large' | 'xlarge'
     readonly?: boolean
     iconClass?: string
@@ -73,7 +74,11 @@ watch(
           <template #title> {{ $t('tooltip.changeIconColour') }} </template>
 
           <div>
-            <GeneralProjectIcon :color="colorRef" :type="type" />
+            <LazyGeneralEmojiPicker :key="emoji" :emoji="emoji" readonly size="small">
+              <template #default>
+                <GeneralProjectIcon :color="colorRef" :type="type" />
+              </template>
+            </LazyGeneralEmojiPicker>
           </div>
         </NcTooltip>
       </div>
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 5909400f33..325f59c2b6 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -255,6 +255,7 @@ const setColor = async (color: string, base: BaseType) => {
                 :key="`${record.id}_${parseProp(record.meta).iconColor}`"
                 :type="record?.type"
                 :model-value="parseProp(record.meta).iconColor"
+                :emoji="parseProp(record.meta).icon"
                 :readonly="(record?.type && record?.type !== 'database') || !isUIAllowed('baseRename')"
                 @update:model-value="setColor($event, record)"
               >
diff --git a/packages/nocodb/src/services/command-palette.service.ts b/packages/nocodb/src/services/command-palette.service.ts
index 6076461a02..ccb00f39a3 100644
--- a/packages/nocodb/src/services/command-palette.service.ts
+++ b/packages/nocodb/src/services/command-palette.service.ts
@@ -28,7 +28,7 @@ export class CommandPaletteService {
           cmdData.push({
             id: `p-${base.id}`,
             title: base.title,
-            icon: 'project',
+            icon: deserializeJSON(base.meta)?.icon,
             iconColor: deserializeJSON(base.meta)?.iconColor,
             section: 'Bases',
             scopePayload: {
@@ -71,7 +71,7 @@ export class CommandPaletteService {
           cmdData.push({
             id: `p-${b.id}`,
             title: b.title,
-            icon: 'project',
+            icon: deserializeJSON(b.meta)?.icon,
             iconColor: deserializeJSON(b.meta)?.iconColor,
             section: 'Bases',
           });

From 5c089aa8736f186aefe42c4bedca5b52b5b7ea8e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:45:00 +0000
Subject: [PATCH 29/31] fix(nc-gui): update prefillform info tooltip text

---
 packages/nc-gui/lang/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 90092a7530..c4c4e88232 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -967,7 +967,7 @@
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
     "changeIconColour": "Change icon colour",
-    "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
+    "preFillFormInfo": "Generate share form URL with pre-filled field data. To get a pre-filled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page"
   },
   "placeholder": {

From 5baa8da556efd4e33fa05da996a3a6357cbdb82e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:45:01 +0000
Subject: [PATCH 30/31] fix(nc-gui): revert show base emoji if exist changes

---
 packages/nc-gui/components/cmd-k/index.vue             | 10 ++--------
 .../components/dashboard/TreeView/ProjectNode.vue      |  1 -
 .../nc-gui/components/general/BaseIconColorPicker.vue  |  9 ++-------
 packages/nc-gui/components/workspace/ProjectList.vue   |  1 -
 .../nocodb/src/services/command-palette.service.ts     |  4 ++--
 5 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index 66b2a37dfb..f7320a430f 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -386,14 +386,8 @@ defineExpose({
                   @click="fireAction(act)"
                 >
                   <div class="cmdk-action-content w-full">
-                    <template v-if="title === 'Bases'">
-                      <GeneralBaseIconColorPicker
-                        :key="act.iconColor"
-                        :model-value="act.iconColor"
-                        :emoji="typeof act.icon === 'string' ? act.icon : ''"
-                        type="database"
-                        readonly
-                      >
+                    <template v-if="title === 'Bases' || act.icon === 'project'">
+                      <GeneralBaseIconColorPicker :key="act.iconColor" :model-value="act.iconColor" type="database" readonly>
                       </GeneralBaseIconColorPicker>
                     </template>
                     <template v-else>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 1351b1aa1f..334469dab3 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -432,7 +432,6 @@ const projectDelete = () => {
                   :key="`${base.id}_${parseProp(base.meta).iconColor}`"
                   :type="base?.type"
                   :model-value="parseProp(base.meta).iconColor"
-                  :emoji="parseProp(base.meta).icon"
                   size="small"
                   :readonly="(base?.type && base?.type !== 'database') || !isUIAllowed('baseRename')"
                   @update:model-value="setColor($event, base)"
diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 4215501d79..0951d68510 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -7,7 +7,6 @@ const props = withDefaults(
   defineProps<{
     type?: NcProjectType | string
     modelValue?: string
-    emoji?: string
     size?: 'small' | 'medium' | 'large' | 'xlarge'
     readonly?: boolean
     iconClass?: string
@@ -59,7 +58,7 @@ watch(
   <div>
     <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
       <div
-        class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
+        class="flex flex-row justify-center items-center select-none rounded-md nc-base-icon-picker-trigger"
         :class="{
           'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
           'bg-gray-500 bg-opacity-15': isOpen,
@@ -74,11 +73,7 @@ watch(
           <template #title> {{ $t('tooltip.changeIconColour') }} </template>
 
           <div>
-            <LazyGeneralEmojiPicker :key="emoji" :emoji="emoji" readonly size="small">
-              <template #default>
-                <GeneralProjectIcon :color="colorRef" :type="type" />
-              </template>
-            </LazyGeneralEmojiPicker>
+            <GeneralProjectIcon :color="colorRef" :type="type" />
           </div>
         </NcTooltip>
       </div>
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 325f59c2b6..5909400f33 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -255,7 +255,6 @@ const setColor = async (color: string, base: BaseType) => {
                 :key="`${record.id}_${parseProp(record.meta).iconColor}`"
                 :type="record?.type"
                 :model-value="parseProp(record.meta).iconColor"
-                :emoji="parseProp(record.meta).icon"
                 :readonly="(record?.type && record?.type !== 'database') || !isUIAllowed('baseRename')"
                 @update:model-value="setColor($event, record)"
               >
diff --git a/packages/nocodb/src/services/command-palette.service.ts b/packages/nocodb/src/services/command-palette.service.ts
index ccb00f39a3..6076461a02 100644
--- a/packages/nocodb/src/services/command-palette.service.ts
+++ b/packages/nocodb/src/services/command-palette.service.ts
@@ -28,7 +28,7 @@ export class CommandPaletteService {
           cmdData.push({
             id: `p-${base.id}`,
             title: base.title,
-            icon: deserializeJSON(base.meta)?.icon,
+            icon: 'project',
             iconColor: deserializeJSON(base.meta)?.iconColor,
             section: 'Bases',
             scopePayload: {
@@ -71,7 +71,7 @@ export class CommandPaletteService {
           cmdData.push({
             id: `p-${b.id}`,
             title: b.title,
-            icon: deserializeJSON(b.meta)?.icon,
+            icon: 'project',
             iconColor: deserializeJSON(b.meta)?.iconColor,
             section: 'Bases',
           });

From 95507c1896493dae58bb0d6a7eb1e481c9728113 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:45:01 +0000
Subject: [PATCH 31/31] fix(nc-gui): base icon predefined color lightness issue

---
 .../general/BaseIconColorPicker.vue           |  2 +-
 .../nc-gui/components/general/ProjectIcon.vue | 32 +++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 0951d68510..d88ca36ebb 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
 
-import { NcProjectType } from '#imports'
+import { NcProjectType, baseIconColors } from '#imports'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/nc-gui/components/general/ProjectIcon.vue b/packages/nc-gui/components/general/ProjectIcon.vue
index 857bbd4fbe..e926f38c5c 100644
--- a/packages/nc-gui/components/general/ProjectIcon.vue
+++ b/packages/nc-gui/components/general/ProjectIcon.vue
@@ -1,24 +1,28 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-const { hoverable, color } = defineProps<{
-  type?: string
-  hoverable?: boolean
-  color?: string
-}>()
+import { baseIconColors } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    type?: string
+    hoverable?: boolean
+    color?: string
+  }>(),
+  {
+    color: baseIconColors[0],
+  },
+)
+const { color } = toRefs(props)
 
 const iconColor = computed(() => {
-  return color
+  return color.value && tinycolor(color.value).isValid()
     ? {
-        tint: tinycolor(color || '#36BFFF')
-          .lighten(10)
-          .toHexString(),
-        shade: tinycolor(color || '#36BFFF')
-          .darken(40)
-          .toHexString(),
+        tint: baseIconColors.includes(color.value) ? color.value : tinycolor(color.value).lighten(10).toHexString(),
+        shade: tinycolor(color.value).darken(40).toHexString(),
       }
     : {
-        tint: '#36BFFF',
-        shade: '#142966',
+        tint: baseIconColors[0],
+        shade: tinycolor(baseIconColors[0]).darken(40).toHexString(),
       }
 })
 </script>