fix(storybook): render inline dock and launcher icons

Author: dvcolomban

storybook/src/client/icons.ts

@@ -1,4 +1,7 @@
 // @unocss-include
+import type { DevframeIcon } from 'devframe/types'
+import { getIconSource, getIconSvg, isIconImage } from '../../../packages/hub-ui/src/client/utils/icons'
+
 // Map a devframe dock `icon` (e.g. `ph:git-branch-duotone`) to a UnoCSS
 // `preset-icons` class. Keeping the class strings literal lets UnoCSS
 // statically extract them and inline only these glyphs from `@iconify-json/ph`
@@ -20,9 +23,32 @@ const ICON_CLASS: Record<string, string> = {
  * Resolve a dock icon to its UnoCSS class, or an empty string when the icon
  * isn't mapped (the caller falls back to a text initial).
  */
-export function iconClass(name: string | { light: string, dark: string } | undefined): string {
+export function iconClass(name: DevframeIcon | undefined): string {
   if (!name)
     return ''
-  const id = typeof name === 'string' ? name : name.light
-  return ICON_CLASS[id] ?? ''
+  const source = getIconSource(name, matchMedia('(prefers-color-scheme: dark)').matches)
+  return typeof source === 'string' ? ICON_CLASS[source] ?? '' : ''
+}
+
+/** Fill a rendered placeholder without applying late results to a replacement view. */
+export async function fillIcon(element: HTMLElement | null, icon: DevframeIcon | undefined): Promise<void> {
+  if (!element || !icon || iconClass(icon))
+    return
+  const source = getIconSource(icon, matchMedia('(prefers-color-scheme: dark)').matches)
+  if (isIconImage(source)) {
+    const image = document.createElement('img')
+    image.src = source
+    image.className = 'w-full h-full'
+    image.alt = ''
+    element.replaceChildren(image)
+    return
+  }
+  try {
+    const svg = await getIconSvg(source)
+    if (svg && element.isConnected)
+      element.innerHTML = svg
+  }
+  catch {
+    /** Preserve the placeholder when a remote icon is unavailable. */
+  }
 }

storybook/src/client/main.ts

@@ -1,7 +1,7 @@
 import type { DevframeDockEntry, DevframeViewLauncher } from '@devframes/hub/types'
 import { connectDevframe } from '@devframes/hub/client'
 import { createIframePanes } from 'iframe-pane'
-import { iconClass } from './icons'
+import { fillIcon, iconClass } from './icons'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
 
@@ -67,7 +67,7 @@ function dockIcon(entry: DevframeDockEntry): string {
   if (cls)
     return `<span class="${cls} shrink-0 text-lg"></span>`
   const initial = (entry.title?.[0] ?? '?').toUpperCase()
-  return `<span class="grid h-5 w-5 shrink-0 place-items-center rounded bg-active text-[0.7rem] font-bold">${initial}</span>`
+  return `<span data-dock-icon="${entry.id}" class="grid h-5 w-5 shrink-0 place-items-center rounded bg-active text-[0.7rem] font-bold">${initial}</span>`
 }
 
 function overlay(html: string) {
@@ -79,7 +79,7 @@ function overlay(html: string) {
 function launcherTile(entry: LauncherDock): string {
   const l = entry.launcher
   const cls = iconClass(l.icon ?? entry.icon)
-  const glyph = cls ? `<span class="${cls} text-4xl color-active"></span>` : '<span class="i-ph-books-duotone text-4xl op-fade"></span>'
+  const glyph = cls ? `<span class="${cls} text-4xl color-active"></span>` : '<span data-launcher-icon class="w-10 h-10"><span class="i-ph-books-duotone text-4xl op-fade"></span></span>'
   return `
     ${glyph}
     <div class="text-base font-medium">${l.title}</div>
@@ -148,6 +148,7 @@ function updateStage() {
 
   if (entry && isLauncherDock(entry)) {
     overlay(launcherStageTile(entry, rt, title))
+    void fillIcon(overlayEl.querySelector('[data-launcher-icon]'), entry.launcher.icon ?? entry.icon)
     return
   }
 
@@ -248,6 +249,10 @@ async function main() {
         `<li><button type="button" data-dock-id="${d.id}" class="relative inline-flex items-center gap-2.5 w-full px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active${d.id === selectedId ? ' op100! bg-active border-base! color-base' : ''}" title="${d.title}">${dockIcon(d)}<span class="truncate">${d.title}</span></button></li>`).join('')
       return `<li class="px2 pt2 pb1 text-[0.68rem] uppercase tracking-wider color-muted">${category}</li>${buttons}`
     }).join('')
+    for (const element of docksEl.querySelectorAll<HTMLElement>('[data-dock-icon]')) {
+      const entry = docks.find(dock => dock.id === element.dataset.dockIcon)
+      void fillIcon(element, entry?.icon)
+    }
   }
 
   // Docks, read from `devframe:docks` shared state, keeping launcher (Storybook)