@@ -5,11 +5,11 @@ import type {
55 DevframeTerminalSession ,
66} from '@devframes/hub/types'
77import { connectDevframe } from '@devframes/hub/client'
8- import { iconSvg } from './icons'
8+ import { iconClass } from './icons'
9+ import 'virtual:uno.css'
910
1011const HUB_BASE = '/__hub/'
1112
12- const statusEl = document . querySelector < HTMLElement > ( '#status' ) !
1313const connEl = document . querySelector < HTMLElement > ( '#conn' ) !
1414const docksEl = document . querySelector < HTMLElement > ( '#docks' ) !
1515const commandsEl = document . querySelector < HTMLElement > ( '#commands' ) !
@@ -20,26 +20,26 @@ const iframeEl = document.querySelector<HTMLIFrameElement>('#dock-iframe')!
2020
2121let selectedDockId : string | null = null
2222
23- function setStatus ( text : string , klass ?: 'ready' | 'error' ) {
24- connEl . textContent = text
25- statusEl . className = klass ?? ''
23+ function setStatus ( text : string , kind ?: 'ready' | 'error' ) {
24+ const color = kind === 'ready' ? 'color-primary-500' : kind === 'error' ? 'color-red-500' : 'op-mute'
25+ connEl . innerHTML = `<span class="dot ${ color } mr-1.5 align-middle"></span> ${ text } `
2626}
2727
2828function renderList < T > ( host : HTMLElement , items : readonly T [ ] , render : ( item : T ) => string ) {
2929 if ( ! items . length ) {
30- host . innerHTML = '<li class="muted ">empty</li>'
30+ host . innerHTML = '<li class="op-mute panel-row border-dashed ">empty</li>'
3131 return
3232 }
3333 host . innerHTML = items . map ( render ) . join ( '' )
3434}
3535
3636/** Render a dock icon, falling back to the title's initial when unknown. */
3737function dockIcon ( entry : DevframeDockEntry ) : string {
38- const svg = iconSvg ( entry . icon , 20 )
39- if ( svg )
40- return svg
38+ const cls = iconClass ( entry . icon )
39+ if ( cls )
40+ return `<span class="dock-ico ${ cls } "></span>`
4141 const initial = ( entry . title ?. [ 0 ] ?? '?' ) . toUpperCase ( )
42- return `<span class="dock-initial"> ${ initial }
42+ return `<span class="dock-ico"><span class="grid h-5 w-5 place-items-center rounded bg-active text-2.5 font-700"> ${ initial } </span> </span>`
4343}
4444
4545function isIframeDock ( d : DevframeDockEntry ) : d is DevframeDockEntry & { type : 'iframe' , url : string } {
@@ -67,13 +67,13 @@ async function main() {
6767 selectedDockId = iframeDocks [ 0 ] . id
6868
6969 if ( ! iframeDocks . length ) {
70- docksEl . innerHTML = '<li class="muted ">No iframe docks</li>'
70+ docksEl . innerHTML = '<li class="op-mute px2 text-sm ">No iframe docks</li>'
7171 iframeEl . src = 'about:blank'
7272 return
7373 }
7474
7575 renderList ( docksEl , iframeDocks , d =>
76- `<li><button type="button" data-dock-id="${ d . id } btn ${ d . id === selectedDockId ? ' active' : '' } ${ d . title } <span class="dock-ico"> ${ dockIcon ( d ) } / span><span class="dock-label ">${ d . title } )
76+ `<li><button type="button" data-dock-id="${ d . id } item ${ d . id === selectedDockId ? ' dock-item- active' : '' } ${ d . title } ${ dockIcon ( d ) } truncate ">${ d . title } )
7777
7878 const selected = iframeDocks . find ( d => d . id === selectedDockId )
7979 if ( selected && iframeEl . getAttribute ( 'src' ) !== selected . url )
@@ -100,7 +100,7 @@ async function main() {
100100 { initialValue : [ ] } ,
101101 )
102102 const renderCommands = ( ) => renderList ( commandsEl , commands . value ( ) ?? [ ] , c =>
103- `<li><strong> ${ c . title } </strong> <code>${ c . id } )
103+ `<li class="panel-row"> ${ c . title } class="op-fade" >${ c . id } )
104104 commands . on ( 'updated' , renderCommands )
105105 renderCommands ( )
106106
@@ -112,7 +112,7 @@ async function main() {
112112 'minimal-vite-devframe-hub:messages:list' as any ,
113113 ) as DevframeMessageEntry [ ]
114114 renderList ( messagesEl , entries , m =>
115- `<li><strong >[${ m . level } strong > ${ m . message } )
115+ `<li class="panel-row"><span class="op-fade" >[${ m . level } span > ${ m . message } )
116116 }
117117 await refreshMessages ( )
118118
@@ -122,7 +122,7 @@ async function main() {
122122 'minimal-vite-devframe-hub:terminals:list' as any ,
123123 ) as Pick < DevframeTerminalSession , 'id' | 'title' | 'status' | 'description' > [ ]
124124 renderList ( terminalsEl , sessions , t =>
125- `<li><strong> ${ t . title } </strong> <code>${ t . id } ${ t . status } )
125+ `<li class="panel-row"> ${ t . title } class="op-fade" >${ t . id } ${ t . status } )
126126 }
127127 await refreshTerminals ( )
128128
0 commit comments