dock

  on('ui.render', { component: 'Pane', requestId: SETTINGS }, async ($, e) => {
    const { Box, Text, Button, Input } = $.ui.resolve(e) as any
    const list = await read($, items)
    const pinned = new Set(list.map(i => i.command))
    const q = (await read($, filter)).toLowerCase()
    const cols = Math.max(30, (e.props as { bodyColumns?: number }).bodyColumns ?? 60)
    const all = commands
      .filter(c => !q || c.name.toLowerCase().includes(q) || c.description.toLowerCase().includes(q))
      .sort((a, b) => (SOURCE_ORDER[a.source] ?? 9) - (SOURCE_ORDER[b.source] ?? 9) || a.name.localeCompare(b.name))
    const rows: any[] = []
    let group = ''
    for (const c of all.slice(0, 120)) {
      if (c.source !== group) {
        group = c.source
        rows.push(<Text key={`g-${group}`} bold color="#e8875b">{SOURCE_LABEL[group] ?? group}</Text>)
      }
      const isPinned = pinned.has(c.name)
      rows.push(
        <Box key={`c-${c.name}`} flexDirection="row" columnGap={1} width={cols}>
          <Text color={isPinned ? colorOf(list.find(i => i.command === c.name)!, list.findIndex(i => i.command === c.name)) : '#5b5b66'}>{iconFor(c.name)}</Text>
          <Button key={`t-${c.name}`} plain label={`${isPinned ? '✓' : '○'} /${c.name}`} variant={isPinned ? 'primary' : undefined} onPress={() => { void toggleItem($, c.name) }} />
          <Text dimColor wrap="truncate">{c.description}</Text>
        </Box>,
      )
    }
    return (
      <Box flexDirection="column" width={cols}>
        <Text key="head" dimColor>{`In the dock: ${list.map(i => '/' + i.command).join(' ') || 'nothing'}`}</Text>
        {Input ? <Input key="filter" placeholder="filter commands" autoFocus onInput={(v: string) => { void update($, filter, () => v) }} onSubmit={(v: string) => { void update($, filter, () => v) }} /> : null}
        {rows.length ? rows : <Text key="none" dimColor>No command matches.</Text>}
        {all.length > 120 ? <Text key="more" dimColor>{`… ${all.length - 120} more, filter to find them`}</Text> : null}
      </Box>
    )
  })