feat: add icons for addons

CyanSalt · CyanSalt · commit 4c11727b89f4 · 2024-09-20T18:23:54.000+08:00
diff --git a/addons/addon-manager/package.json b/addons/addon-manager/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-blocks"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "附加功能管理",
diff --git a/addons/addon-manager/src/renderer/AddonManagerPane.vue b/addons/addon-manager/src/renderer/AddonManagerPane.vue
@@ -83,24 +83,29 @@ onMounted(() => {
           :key="addon.name"
           :class="['addon-card', { 'is-disabled': !enabled }]"
         >
-          <div class="addon-card-title">
-            <span class="addon-primary-info">
-              <span class="addon-name">{{ manifest.productName ?? manifest.name ?? addon.name }}</span>
-              <span
-                v-if="(manifest.productName ?? manifest.name) !== addon.name"
-                :class="['addon-id', { link: addon.type !== 'builtin' }]"
-                @click="showInFolder(addon)"
-              >{{ addon.name }}</span>
-              <span v-if="addon.type !== 'builtin'" class="addon-version">{{ manifest.version ?? '' }}</span>
-            </span>
-            <SwitchControl
-              :model-value="enabled"
-              @update:model-value="toggle(addon, $event)"
-            />
+          <div class="addon-icon">
+            <VisualIcon v-if="manifest['commas:icon']" :name="manifest['commas:icon'].name" />
+          </div>
+          <div class="addon-info">
+            <div class="addon-title">
+              <span class="addon-primary-info">
+                <span class="addon-name">{{ manifest.productName ?? manifest.name ?? addon.name }}</span>
+                <span
+                  v-if="(manifest.productName ?? manifest.name) !== addon.name"
+                  :class="['addon-id', { link: addon.type !== 'builtin' }]"
+                  @click="showInFolder(addon)"
+                >{{ addon.name }}</span>
+                <span v-if="addon.type !== 'builtin'" class="addon-version">{{ manifest.version ?? '' }}</span>
+              </span>
+              <SwitchControl
+                :model-value="enabled"
+                @update:model-value="toggle(addon, $event)"
+              />
+            </div>
+            <div class="addon-description">{{ manifest.description ?? '' }}</div>
+            <span v-if="addon.type === 'builtin'" v-i18n class="addon-tag">Built-in#!addon-manager.3</span>
+            <span v-else class="addon-author">{{ manifest.author ?? '' }}</span>
           </div>
-          <div class="addon-description">{{ manifest.description ?? '' }}</div>
-          <span v-if="addon.type === 'builtin'" v-i18n class="addon-tag">Built-in#!addon-manager.3</span>
-          <span v-else class="addon-author">{{ manifest.author ?? '' }}</span>
         </div>
       </div>
     </form>
@@ -117,14 +122,30 @@ onMounted(() => {
   margin-top: 8px;
 }
 .addon-card {
+  display: flex;
+  gap: 16px;
   padding: 8px 0;
-  border-top: 1px solid var(--design-separator);
-  line-height: 24px;
   &.is-disabled {
     color: rgb(var(--theme-foreground) / 50%);
   }
 }
-.addon-card-title {
+.addon-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  color: rgb(var(--system-accent));
+  font-size: 24px;
+  background: var(--design-highlight-background);
+  border-radius: 8px;
+}
+.addon-info {
+  flex: 1;
+  min-width: 0;
+  line-height: 24px;
+}
+.addon-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/addons/addon-manager/src/renderer/index.ts b/addons/addon-manager/src/renderer/index.ts
@@ -9,9 +9,6 @@ export default () => {
   commas.workspace.registerTabPane('addon-manager', {
     title: 'Addons#!addon-manager.1',
     component: AddonManagerPane,
-    icon: {
-      name: 'lucide-blocks',
-    },
   })
 
   commas.context.provide('preference.item', {
diff --git a/addons/ai/package.json b/addons/ai/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-sparkles"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "AI",
diff --git a/addons/cleaner/package.json b/addons/cleaner/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-eraser"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "缓存清理",
diff --git a/addons/cli/package.json b/addons/cli/package.json
@@ -15,6 +15,9 @@
     "chalk": "^4.1.2",
     "text-table": "^0.2.0"
   },
+  "commas:icon": {
+    "name": "lucide-terminal"
+  },
   "commas:i18n": {
     "zh-CN": {
       "description": "Commas 命令行工具"
diff --git a/addons/clippy/package.json b/addons/clippy/package.json
@@ -10,6 +10,9 @@
   "devDependencies": {
     "clippyjs": "^0.0.3"
   },
+  "commas:icon": {
+    "name": "lucide-sticker"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "大眼夹",
diff --git a/addons/editor/package.json b/addons/editor/package.json
@@ -10,6 +10,9 @@
   "devDependencies": {
     "monaco-editor": "^0.51.0"
   },
+  "commas:icon": {
+    "name": "lucide-file-pen-line"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "编辑器",
diff --git a/addons/git/package.json b/addons/git/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-git-branch"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "Git 集成",
diff --git a/addons/iterm2/package.json b/addons/iterm2/package.json
@@ -11,6 +11,9 @@
     "@types/canvas-confetti": "^1.6.4",
     "canvas-confetti": "^1.9.3"
   },
+  "commas:icon": {
+    "name": "lucide-dollar-sign"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "iTerm2 转义码",
diff --git a/addons/l10n-ext/package.json b/addons/l10n-ext/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-earth"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "扩展本地化",
diff --git a/addons/launcher/package.json b/addons/launcher/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-list-video"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "启动项",
diff --git a/addons/power-mode/package.json b/addons/power-mode/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-audio-lines"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "给力模式",
diff --git a/addons/preference/package.json b/addons/preference/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-settings"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "首选项",
diff --git a/addons/preference/src/renderer/index.ts b/addons/preference/src/renderer/index.ts
@@ -19,9 +19,6 @@ export default () => {
   commas.workspace.registerTabPane('preference', {
     title: 'Preferences#!preference.1',
     component: PreferencePane,
-    icon: {
-      name: 'lucide-settings',
-    },
   })
 
   commas.ipcRenderer.on('open-preference-pane', () => {
diff --git a/addons/proxy/package.json b/addons/proxy/package.json
@@ -10,6 +10,9 @@
   "dependencies": {
     "address": "^2.0.3"
   },
+  "commas:icon": {
+    "name": "lucide-router"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "代理",
diff --git a/addons/proxy/src/renderer/index.ts b/addons/proxy/src/renderer/index.ts
@@ -16,9 +16,6 @@ export default () => {
   commas.workspace.registerTabPane('proxy', {
     title: 'Proxy#!proxy.1',
     component: ProxyPane,
-    icon: {
-      name: 'lucide-router',
-    },
   })
 
   commas.ipcRenderer.on('configure-proxy', () => {
diff --git a/addons/settings/package.json b/addons/settings/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-user-cog"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "设置",
diff --git a/addons/settings/src/renderer/index.ts b/addons/settings/src/renderer/index.ts
@@ -9,9 +9,6 @@ export default () => {
   commas.workspace.registerTabPane('settings', {
     title: 'Settings#!settings.1',
     component: SettingsPane,
-    icon: {
-      name: 'lucide-user-cog',
-    },
   })
 
   commas.context.provide('preference.item', {
diff --git a/addons/sync/package.json b/addons/sync/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-cloud-upload"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "同步",
diff --git a/addons/sync/src/renderer/index.ts b/addons/sync/src/renderer/index.ts
@@ -9,9 +9,6 @@ export default () => {
   commas.workspace.registerTabPane('sync', {
     title: 'Sync#!sync.1',
     component: SyncPane,
-    icon: {
-      name: 'lucide-cloud-upload',
-    },
   })
 
   commas.context.provide('preference.item', {
diff --git a/addons/theme/package.json b/addons/theme/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-palette"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "主题",
diff --git a/addons/theme/src/renderer/index.ts b/addons/theme/src/renderer/index.ts
@@ -9,9 +9,6 @@ export default () => {
   commas.workspace.registerTabPane('theme', {
     title: 'Theme#!theme.1',
     component: ThemePane,
-    icon: {
-      name: 'lucide-palette',
-    },
   })
 
   commas.context.provide('preference.item', {
diff --git a/addons/updater/package.json b/addons/updater/package.json
@@ -7,6 +7,9 @@
   "main": "index.js",
   "author": "commas",
   "license": "ISC",
+  "commas:icon": {
+    "name": "lucide-circle-arrow-up"
+  },
   "commas:i18n": {
     "zh-CN": {
       "productName": "自动更新",
diff --git a/src/api/core-main.ts b/src/api/core-main.ts
@@ -4,6 +4,7 @@ import * as addon from './modules/addon'
 const proxy = addon.cloneAPI(raw, {
   __name__: 'terminal',
   __entry__: '',
+  __manifest__: {},
 })
 
 export {
diff --git a/src/api/core-renderer.ts b/src/api/core-renderer.ts
@@ -4,6 +4,7 @@ import * as raw from './renderer'
 const proxy = addon.cloneAPI(raw, {
   __name__: 'terminal',
   __entry__: '',
+  __manifest__: {},
 })
 
 export {
diff --git a/src/api/modules/addon.ts b/src/api/modules/addon.ts
@@ -96,6 +96,7 @@ function loadAddon(addon: AddonInfo, api: CompatableAPI) {
   const clonedAPI = cloneAPI(api, {
     __name__: addon.name,
     __entry__: addon.entry,
+    __manifest__: addon.manifest,
   })
   // Share reactivity system
   addCommasExternalModules(['@vue/reactivity', 'vue'])
diff --git a/src/api/modules/workspace.ts b/src/api/modules/workspace.ts
@@ -25,7 +25,11 @@ const tabs = $(useTerminalTabs())
 const panes = shallowReactive<Record<string, TerminalTabPane | undefined>>({})
 
 function registerTabPane(this: RendererAPIContext, name: string, pane: TerminalTabPane) {
-  panes[name] = { name, ...pane }
+  panes[name] = {
+    name,
+    icon: this.__manifest__?.['commas:icon'],
+    ...pane,
+  }
   this.$.app.onInvalidate(() => {
     delete panes[name]
   })
diff --git a/src/api/shim.ts b/src/api/shim.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 export const __name__ = ''
 export const __entry__ = ''
+export const __manifest__ = {}
 export const $ = Object.create(null)
 export const _ = undefined
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -15,6 +15,7 @@ export type APIAddon = (api: CompatableAPI) => void
 export interface APIContext<T = API> {
   __name__: string,
   __entry__: string,
+  __manifest__: any,
   $: MixValues<T, APIContext>,
   _: unknown,
 }
diff --git a/src/renderer/components/App.vue b/src/renderer/components/App.vue
@@ -129,7 +129,6 @@ onMounted(() => {
   --design-highlight-color: rgb(var(--system-blue));
   --design-highlight-background: color-mix(in hsl, rgb(var(--theme-foreground) / 5%), rgb(var(--acrylic-background) / 5%));
   --design-input-background: color-mix(in hsl, rgb(var(--theme-foreground) / 10%) 75%, rgb(var(--acrylic-background) / 10%));
-  --design-separator: rgb(var(--theme-foreground) / 10%);
   @media (prefers-color-scheme: dark) {
     --system-cyan: 108 224 219;
     --design-active-background: rgb(255 255 255 / 16.667%);
