fix(nc-gui): add support to show base emoji if exist

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'">
+                    <template v-if="title === 'Bases'">
-                      <GeneralBaseIconColorPicker :key="act.iconColor" :color="act.iconColor" type="database" readonly>
+                      <GeneralBaseIconColorPicker
+                        :key="act.iconColor"
+                        :model-value="act.iconColor"
+                        :emoji="typeof act.icon === 'string' ? act.icon : ''"
+                        type="database"
+                        readonly
+                      >
                       </GeneralBaseIconColorPicker>
                     </template>
                     <template v-else>

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)"

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>

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)"
               >

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