links-bar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // The band is one site: what the plugins beneath draw (project tabs, say)
    // stays, and the links row goes under it.
    const below = await next(e)
    if (e.props.hasSurvey) return below
    // A fault in the links row costs the row alone: what the plugins beneath
    // drew (the tabs) is drawn as it is.
    try {

      const [rec, pLinks, sLinks, sc, sec, d, icons, l, isPaneOpen, dragged, typing] = await Promise.all([
        read($, recent),
        read($, projectLinks),
        read($, sessionLinks),
        read($, scope),
        read($, section),
        read($, draft),
        read($, favicons),
        read($, lang),
        read($, paneOpen),
        read($, drag),
        read($, activeField),
      ])
      const k = kitOf($.ui.resolve(e), e.surface, icons)
      const { Box, Text, Button } = k
      // The add form's parts that need `$`, made here: the fields and the buttons' actions.
      // Made only while the form is open: a surface module made and not drawn
    // left the whole band undrawn, the tabs too.
    const formTitle = sec === 'add' ? textField($, e, 'draft-title', fieldProps(l, d, 'draft-title', typing), '100%') : null
      const formUrl = sec === 'add' ? textField($, e, 'draft-url', fieldProps(l, d, 'draft-url', typing), '100%') : null
      const formActions: FormActions = {
        scope: s => void update($, draft, now => ({ ...now, scope: s })),
        cancel: () => void closeDraft($),
        save: () => void submitDraft($, {}),
      }
      const budget = labelBudget(e.props.bodyColumns, Math.min(BAR_LINKS, (sc === 'project' ? pLinks : sLinks).length))

      const links = sc === 'project' ? pLinks : sLinks
      const onBar = links.slice(0, BAR_LINKS)
      const total = pLinks.length + sLinks.length

      const scopeSwitch = (
        <Box flexDirection="row" alignItems="center" columnGap={1} flexShrink={0}>
          {/* The chosen scope is the desktop's own (rounded) button; the other one is
              plain and dim. A Box fill behind a button draws square corners. */}
          {(['project', 'session'] as const).map(s =>
            s === sc ? (
              <Button key={`scope-${s}`} label={t(l, s)} onPress={() => void setScope($, s)} />
            ) : (
              <Button key={`scope-${s}`} label={t(l, s)} plain dimColor onPress={() => void setScope($, s)} />
            ),
          )}
        </Box>
      )

      const chips =
        onBar.length === 0 ? (
          <Text dimColor wrap="truncate">
            {t(l, sc === 'project' ? 'emptyProject' : 'emptySession')}
          </Text>
        ) : (
          onBar.map((link, i) => {
            const name = labelOf(link)
            const shown = truncate(name, budget)
            // The chip is the desktop's own button, so it lights rounded and as
            // tall as «Recent» and «All». The favicon lies over the button's left
            // end, room kept for it by figure spaces (plain ones would collapse).
            const host = hostOf(link.url)
            return (
              <Box key={`chip-${i}`} position="relative" flexShrink={0}>
                <Button
                  key={`open-${i}`}
                  label={k.Svg !== undefined ? `${ICON_ROOM}${shown}` : shown}
                  plain
                  onPress={() => void openUrl($, link.url)}
                />
                {k.Svg !== undefined && (
                  <Box position="absolute" top={0} left={1}>
                    <k.Svg
                      source={faviconSvg(icons[host], host, BUTTON_HEIGHT)}
                      alt={host}
                      width={ICON_BOX}
                      height={BUTTON_HEIGHT}
                    />
                  </Box>
                )}
                {/* The full name and the URL, over the chip under the pointer. */}
                <Box
                  position="absolute"
                  bottom={2}
                  left={0}
                  display="none"
                  hover={{ display: 'flex' }}
                  flexDirection="column"
                  minWidth={Math.min(64, Math.max([...name].length, shortUrl(link.url).length) + 4)}
                  paddingX={1}
                  borderStyle="round"
                  borderColor="inactive"
                  backgroundColor="userMessageBackground"
                >
                  <Text>{name}</Text>
                  <Text dimColor wrap="truncate">
                    {shortUrl(link.url)}
                  </Text>
                </Box>
              </Box>
            )
          })
        )

      // «Recent» as a tab's recent sessions in the tabs mod: hovering the button
      // shows the list above it, sized to its rows; the pointer may move into it.
      const recentWidth = Math.max(16, Math.min(40, Math.floor(e.props.bodyColumns / 3)))
      // Two columns, «Project» and «Session», named once in the header: 📌 pins the
      // link there, ✓ says it is pinned there and unpins it; ✎ renames a pinned one.
      // Every row is as wide as the header: the name has a column of its own, so the
      // marks stand under their titles whatever the name's length.
      const columnWidth = Math.max([...t(l, 'project')].length, [...t(l, 'session')].length) + 3
      // The window's width is set, not left to its rows, and it fits the band: its
      // right edge at the button's, it opens leftward over the bar.
      const columnsWidth = 2 * columnWidth + 3
      const popupChrome = 2 + 2 + 2
      const nameWidth = Math.max(12, Math.min(recentWidth + 4, e.props.bodyColumns - 4 - columnsWidth - popupChrome))
      const popupWidth = nameWidth + columnsWidth + popupChrome
      const recentButtonWidth = [...t(l, 'recent')].length + 4
      const columns = (cells: [RenderChildren, RenderChildren, RenderChildren]) => (
        <Box flexDirection="row" alignItems="center" flexShrink={0}>
          <Box width={columnWidth} justifyContent="center">
            {cells[0]}
          </Box>
          <Box width={columnWidth} justifyContent="center">
            {cells[1]}
          </Box>
          <Box width={3} justifyContent="center">
            {cells[2]}
          </Box>
        </Box>
      )
      const recentList = (
        <Box
          position="absolute"
          bottom={2}
          left={recentButtonWidth - popupWidth}
          width={popupWidth}
          display="none"
          hover={{ display: 'flex' }}
          flexDirection="column"
          paddingX={1}
          borderStyle="round"
          borderColor="inactive"
          backgroundColor="userMessageBackground"
        >
          <Box flexDirection="row" alignItems="center" columnGap={2}>
            <Box width={nameWidth} flexShrink={0} overflow="hidden">
              <Text dimColor wrap="truncate">
                {t(l, 'recentTitle')}
              </Text>
            </Box>
            {rec.length > 0 &&
              columns([
                <Text dimColor>{t(l, 'project')}</Text>,

function linkIcon(k: Kit, url: string) {
  if (k.Svg === undefined) return null
  const { Svg } = k
  const host = hostOf(url)
  return <Svg source={faviconSvg(k.icons[host], host)} alt={host} width={ICON_BOX} height={ICON_BOX} />
}

function formLayout(
  k: Kit,
  l: Lang,
  d: Draft,
  title: RenderChildren,
  url: RenderChildren,
  act: FormActions,
  isNarrow = false,
) {
  const { Box, Button } = k
  // One height for both: the chosen scope is lit (primary, as «All» is), the
  // other dim; a new link starts on the bar's scope, «Project» by default.
  const scopes = (
    <Box flexDirection="row" alignItems="center" columnGap={1} flexShrink={0}>
      {(['project', 'session'] as const).map(s => (
        <Button
          key={`draft-${s}`}
          label={t(l, s)}
          {...(d.scope === s ? { variant: 'primary' as const } : { dimColor: true })}
          onPress={() => act.scope(s)}
        />
      ))}
    </Box>
  )
  const buttons = (
    <Box flexDirection="row" alignItems="center" justifyContent="flex-end" columnGap={1} flexShrink={0}>
      <Button key="draft-cancel" label={t(l, 'cancel')} onPress={act.cancel} />
      <Button key="draft-save" label={t(l, 'saveEdit')} variant="primary" onPress={act.save} />
    </Box>
  )
  if (isNarrow) {
    return (
      <Box flexDirection="column" alignItems="stretch" rowGap={1}>
        {title}
        {url}
        <Box flexDirection="row" alignItems="center" justifyContent="space-between" columnGap={1} flexWrap="wrap">
          {scopes}
          {buttons}
        </Box>
      </Box>
    )
  }
  // Under the bar each field fills a Box that grows from no width: half each.
  return (
    <Box flexDirection="row" alignItems="center" columnGap={1}>
      <Box key="draft-title-box" flexGrow={1} flexShrink={1} width={0} minWidth={0}>
        {title}
      </Box>
      <Box key="draft-url-box" flexGrow={1} flexShrink={1} width={0} minWidth={0}>
        {url}
      </Box>
      {scopes}
      {buttons}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const [pLinks, sLinks, d, icons, l, query, dragged, typingIn, pressed] = await Promise.all([
      read($, projectLinks),
      read($, sessionLinks),
      read($, draft),
      read($, favicons),
      read($, lang),
      read($, search),
      read($, drag),
      read($, activeField),
      read($, sorts),
    ])
    const k = kitOf($.ui.resolve(e), e.surface, icons)
    const { Box, Text, Button, Input } = k
    // A field of the pane holds the keys only while the pane has the focus.
    const isTyping = e.props.isFocused ? typingIn : null
    // The edit form's parts that need `$`, made here: the fields and the buttons' actions.
    // Made only while a link is edited: a surface module made and not drawn
    // left the whole site undrawn.
    const paneTitle = d.edit !== null ? textField($, e, 'draft-title', fieldProps(l, d, 'draft-title', isTyping), '100%') : null
    const paneUrl = d.edit !== null ? textField($, e, 'draft-url', fieldProps(l, d, 'draft-url', isTyping), '100%') : null
    const paneActions: FormActions = {
      scope: s => void update($, draft, now => ({ ...now, scope: s })),
      cancel: () => void closeDraft($),
      save: () => void submitDraft($, {}),
    }
    // The name has its line to itself, the URL and the buttons the next one.
    const width = Math.max(16, e.props.bodyColumns - 14)
    const isSearching = query.trim() !== ''
    const groups: [Scope, PinnedLink[], string][] = [
      ['project', pLinks, t(l, 'project')],
      ['session', sLinks, t(l, 'sessionSection')],
    ]

    const sortButton = (s: Scope, list: PinnedLink[], by: SortBy) => {
      // Only the pressed sort lights, and only while the list stands in its order
      // (a drag undoes it); two lists may stand sorted both ways at once.
      const sort = pressed[s]
      const dir = sort !== null && sort.by === by && sortedAs(list, by) === sort.dir ? sort.dir : null
      const label = t(l, by === 'title' ? 'byTitle' : 'byUrl')
      // Both are the desktop's own button, so lighting one moves nothing: the
      // pressed sort is primary (lit as «All» is), the other dim. The arrow is
      // the order: ↓ A→Z, what a press gives first; ↑ Z→A.
      return (
        <Button
          key={`sort-${s}-${by}`}
          label={`${label} ${dir === 'desc' ? '↑' : '↓'}`}
          {...(dir === null ? { dimColor: true } : { variant: 'primary' as const })}
          onPress={() => void sortBy($, s, by)}
        />
      )
    }

    return (
      <Box flexDirection="column" rowGap={1}>
        {drawsModules(e) ? (
          textField($, e, 'search', { value: query, placeholder: t(l, 'search'), isActive: isTyping === 'search', icon: '🔍', rev: 0 }, '100%')
        ) : (
          Input !== undefined && (
            <Input
              key="search"
              placeholder={t(l, 'search')}
              value={query}
              onInput={value => void update($, search, () => value)}
              onSubmit={value => void update($, search, () => value)}
            />
          )
        )}
        {groups.map(([s, list, title]) => {
          const shown = list.map((link, i) => ({ link, i })).filter(({ link }) => matches(link, query))
          const paneDrag = dragged?.where === 'pane' && dragged.scope === s ? dragged : null
          // Dragging needs the whole list in its place: not while searching or editing.
          const canDrag = !isSearching && d.edit === null && list.length > 1
          return (
            <Box key={`group-${s}`} flexDirection="column" rowGap={1}>
              <Box flexDirection="row" alignItems="center" justifyContent="space-between" columnGap={1}>
                <Text bold wrap="truncate-end">{`${title} (${list.length})`}</Text>
                {list.length > 1 && (
                  <Box flexDirection="row" alignItems="center" columnGap={1} flexShrink={0}>
                    {sortButton(s, list, 'title')}
                    {sortButton(s, list, 'url')}
                  </Box>
                )}
              </Box>
              {list.length === 0 && <Text dimColor>{t(l, 'none')}</Text>}
              {list.length > 0 && shown.length === 0 && <Text dimColor>{t(l, 'noMatches')}</Text>}
              {shown.map(({ link, i }) => {
                const isEdited = d.edit?.scope === s && d.edit.index === i
                const row = linkRow(
                  $,
                  k,
                  `all-${s}-${i}`,
                  link,
                  width,
                  [
                    <Button key={`all-edit-${s}-${i}`} label="✎" plain onPress={() => void editPin($, s, i, link)} />,
                    <Button key={`all-unpin-${s}-${i}`} label="✕" plain onPress={() => void unpin($, s, i)} />,
                  ],
                  i >= BAR_LINKS,
                  // One cell wide, so the column centres it under the favicon.
                  canDrag ? dragHandle($, e, `drag-pane-${s}-${i}`, paneDrag?.from === i, 1) : null,
                  paneDrag !== null && paneDrag.to === i && paneDrag.from !== i,
                )
                return isEdited ? (
                  <Box key={`all-edit-box-${s}-${i}`} flexDirection="column" rowGap={1}>
                    {row}
                    <Box
                      flexDirection="column"
                      alignItems="stretch"
                      marginLeft={3}
                      marginBottom={1}
                      paddingX={1}
                      paddingY={1}
                      borderStyle="round"
                      borderColor="inactive"
                    >
                      {formLayout(k, l, d, paneTitle, paneUrl, paneActions, true)}
                    </Box>
                  </Box>
                ) : (
                  row
                )
              })}
            </Box>
          )
        })}
      </Box>
    )
  })

function textField($: Engine, e: ResolveInput, key: string, props: FieldProps, width: string) {
  if (e.surface !== 'desktop' && e.surface !== 'terminal') return null
  const els = $.ui.resolve(e)
  return <els.Client key={key} width={width} module="./text-field.tsx" props={props} />
}