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] 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',
           });
         }