feat: can render extension icon

apps/cli/src/commands/dev.tsx

@@ -3,6 +3,7 @@ import yargs, { ArgumentsCamelCase } from 'yargs'
 import fetch from 'node-fetch'
 import * as tsup from 'tsup'
 import { join } from 'path'
+import fs from 'fs'
 
 type Args = {}
 
@@ -11,6 +12,7 @@ type CommandItem = {
   title: string
   subtitle: string
   description: string
+  icon?: string
   code?: string
 }
 
@@ -21,6 +23,7 @@ type Manifest = {
   description: string
   main: string
   code: string
+  icon: string
   commands: CommandItem[]
 }
 
@@ -65,6 +68,21 @@ class Command {
     })
   }
 
+  private getLogo = async (iconName = '') => {
+    if (!iconName) return ''
+    try {
+      const cwd = process.cwd()
+      const iconPath = join(cwd, 'assets', iconName)
+      if (iconName.endsWith('.svg')) {
+        return jetpack.read(iconPath, 'utf8')
+      }
+
+      return fs.readFileSync(iconPath).toString('base64')
+    } catch (error) {
+      return ''
+    }
+  }
+
   private handleBuildSuccess = async () => {
     const manifest = getManifest()
 
@@ -74,8 +92,13 @@ class Command {
       const codePath = join(process.cwd(), 'dist', `${command.name}.js`)
       const code = jetpack.read(codePath, 'utf8')
       command.code = code
+      command.icon = await this.getLogo(command.icon)
     }
 
+    const logoString = await this.getLogo(manifest.icon)
+
+    // console.log('========logoString:', logoString)
+
     try {
       const res = await fetch(url, {
         method: 'POST',
@@ -86,6 +109,7 @@ class Command {
           id: manifest.id,
           name: manifest.name,
           version: manifest.version || '',
+          icon: logoString,
           commands: JSON.stringify(manifest.commands),
         }),
       }).then((res) => res.json())

apps/desktop/src-tauri/src/main.rs

@@ -38,6 +38,7 @@ struct ExtensionInfo {
     id: String,
     name: String,
     version: String,
+    icon: String,
     commands: String,
 }
 
@@ -46,6 +47,7 @@ struct UpsertExtensionInput {
     id: String,
     name: String,
     version: String,
+    icon: String,
     commands: String,
 }
 
@@ -103,6 +105,7 @@ async fn upsert_extension(
         id: input.id.to_string(),
         name: input.name.to_string(),
         version: input.version.to_string(),
+        icon: input.icon.to_string(),
         commands: input.commands.to_string(),
     };
 

apps/desktop/src/components/CmdkRoot.tsx

@@ -1,9 +1,10 @@
 import { useRef, useState } from 'react'
 import SVG from 'react-inlinesvg'
 import Markdown from 'react-markdown'
-import { Box, styled } from '@fower/react'
+import { Box, css, styled } from '@fower/react'
 import { open } from '@tauri-apps/api/shell'
 import { Command } from 'cmdk'
+import Image from 'next/image'
 import { EventType, ListItem } from 'penx'
 import clipboard from 'tauri-plugin-clipboard-api'
 // import { Command } from '@penx/cmdk'
@@ -27,6 +28,37 @@ type CommandItem = {
   code: string
 }
 
+interface ItemIconProps {
+  icon: string
+}
+function ItemIcon({ icon }: ItemIconProps) {
+  if (!icon) {
+    return <Box square5 bgNeutral300 rounded-6></Box>
+  }
+
+  if (icon.startsWith('/')) {
+    return (
+      <Image
+        src={icon}
+        alt=""
+        width={20}
+        height={20}
+        style={{ borderRadius: 6 }}
+      />
+    )
+  }
+
+  const isSVG = icon.startsWith('<svg')
+  if (isSVG) {
+    return (
+      <SVG className={css({ square: 20, rounded: 6 })} src={icon as string} />
+    )
+  }
+  return (
+    <Box as="img" square5 rounded-6 src={`data:image/png;base64, ${icon}`} />
+  )
+}
+
 export const CmdkRoot = () => {
   const [q, setQ] = useState('')
   const { items, setItems } = useItems()
@@ -205,8 +237,7 @@ export const CmdkRoot = () => {
                   }}
                 >
                   <Box toCenterY gap2>
-                    <SVG src="" />
-                    <Box square5 bgNeutral300 rounded-6></Box>
+                    <ItemIcon icon={item.icon as string}></ItemIcon>
                     <Box text-15>{title}</Box>
                     <Box textSM gray500>
                       {subtitle}

apps/desktop/src/hooks/useInstallBuiltinExtension.ts

@@ -19,6 +19,7 @@ export function useInstallBuiltinExtension() {
           {
             name: 'clipboard-history',
             title: 'Clipboard history',
+            icon: '/logo/128x128.png',
             subtitle: '',
             description: '',
             code: '',
@@ -27,6 +28,7 @@ export function useInstallBuiltinExtension() {
           {
             name: 'store',
             title: 'Store',
+            icon: '/logo/128x128.png',
             subtitle: '',
             description: '',
             code: '',

apps/desktop/src/hooks/useItems.ts

@@ -37,7 +37,7 @@ export function useQueryCommands() {
         ...cur.commands.map<ListItem>((item) => ({
           type: 'command',
           title: item.title,
-          icon: item.icon,
+          icon: item.icon ? item.icon : cur.icon,
           data: {
             commandName: item.name,
             extensionSlug: cur.slug,

apps/desktop/src/pages/_app.tsx

@@ -73,6 +73,7 @@ async function init() {
     commands: string
     id: string
     name: string
+    icon: string
     version: string
   }
 
@@ -82,9 +83,11 @@ async function init() {
     listen(AppEvent.UPSERT_EXTENSION, async (data) => {
       const payload = data.payload as Payload
       const commands = JSON.parse(payload.commands || '[]')
+
       await db.upsertExtension(payload.id, {
         commands: commands,
         name: payload.name,
+        icon: payload.icon,
         version: payload.version,
       })
     })

extension-samples/base64/manifest.json

@@ -2,6 +2,7 @@
   "name": "Base64",
   "id": "base64",
   "description": "",
+  "icon": "logo.png",
   "commands": [
     {
       "name": "base64",

extension-samples/base64/src/base64.ts

@@ -5,7 +5,8 @@ import { toString } from './libs/toString'
 renderList([
   {
     title: 'Encode',
-    subtitle: toBase64('Hello World!'),
+    icon: 'base64.svg',
+    subtitle: toBase64('Hello World!!!!'),
     actions: [
       {
         type: 'CopyToClipboard',
@@ -15,6 +16,7 @@ renderList([
   },
   {
     title: 'Decode',
+    icon: 'base64.svg',
     subtitle: toString('Hello World!'),
     actions: [
       {

extension-samples/hacker-news/manifest.json

@@ -3,6 +3,7 @@
   "id": "hack-news",
   "version": "1.0.0",
   "description": "",
+  "icon": "logo.svg",
   "commands": [
     {
       "name": "index",

extension-samples/hello-word/manifest.json

@@ -2,6 +2,7 @@
   "name": "Hello world",
   "id": "hello-world",
   "description": "This is a hello wold demo.",
+  "icon": "logo.svg",
   "commands": [
     {
       "name": "index",

extension-samples/hello-word/src/index.ts

@@ -1,3 +1,3 @@
 import { renderMarkdown } from 'penx'
 
-renderMarkdown('# hello world!')
+renderMarkdown('# hello world!!!')

packages/app/src/Workbench/PageExtensions/PageExtensions.tsx

@@ -26,8 +26,8 @@ function ExtensionItem({ extension }: ExtensionItemProps) {
         colorScheme="white"
         disabled={isLoading}
         gap1
-        onClick={() => {
-          mutateAsync()
+        onClick={async () => {
+          await mutateAsync()
           refetch()
         }}
       >

packages/local-db/src/penx-db.ts

@@ -12,7 +12,7 @@ export class PenxDB extends Dexie {
   constructor() {
     // super('PenxDB')
     super('penx-local')
-    this.version(13).stores({
+    this.version(14).stores({
       // Primary key and indexed props
       space: 'id, name, userId',
       node: 'id, spaceId, databaseId, type, date, [type+spaceId+databaseId], [type+spaceId], [type+databaseId]',

packages/model-types/src/interfaces/IExtension.ts

@@ -21,6 +21,8 @@ export interface IExtension {
 
   commands: Command[]
 
+  icon?: string
+
   description?: string
 
   author?: string