tasknotes-preview

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ref = memberOf(TARGET, e)
    const { value: t } = await $.state.get(ref)
    const patch = (change: Partial<TasksTarget>) => update($, ref, cur => (cur ? { ...cur, ...change, rev: cur.rev + 1 } : cur))
    const open = async (rel: string) => {
      if (!t) return
      const target: Target = { rel, real: joinPath(t.root, rel), ...(t.vault ? { vault: t.vault } : {}) }
      try {
        $.ui.toast(`Opened ${rel} in Obsidian (${await openInObsidian($, target)})`)
      } catch (err) {
        $.ui.toast(`Could not open Obsidian: ${errorText(err)}`)
      }
    }
    const empty = 'No tasks open. Run /taskboard, or /taskboard kanban, or /taskboard <file.base>.'

    let drawn: Drawn | undefined
    let failure: string | undefined
    if (t) {
      try {
        drawn = await evaluate($, t)
      } catch (err) {
        failure = errorText(err)
      }
    }

    if (e.surface === 'terminal') {
      const { Box, Text } = $.ui.resolve(e)
      return (
        <Box flexDirection="column">
          <Text>{t ? t.rel : empty}</Text>
          {drawn && <Text>{summarize(drawn, t as TasksTarget)}</Text>}
          {failure && <Text color="red">{failure}</Text>}
          <Text dimColor>The board, agenda and graph are drawn in the Desktop Code tab.</Text>
        </Box>
      )
    }

    const elements = $.ui.resolve(e)
    const { Box, Text, Button, Svg } = elements
    const Select = 'Select' in elements ? elements.Select : undefined
    if (!t) return <Text dimColor>{empty}</Text>
    if (!drawn) return <Text color="red">Cannot show {t.rel}: {failure}</Text>

    const { model, all, config, vault, layout, now } = drawn
    const filters = filtersOf(t)
    const filtering = filters.projects.length + filters.contexts.length > 0
    const settings = vault.settings
    const isExpanded = (key: string) => t.expanded.includes(`${layout}:${key}`)
    const expand = (key: string) => patch({ expanded: [...t.expanded, `${layout}:${key}`] })
    const collapse = (key: string) => patch({ expanded: t.expanded.filter(k => k !== `${layout}:${key}`) })

    // The popup a card or agenda row shows while the pointer is on it: every property of the
    // task and an Open in Obsidian button. A hover reveal runs no hook, so it costs no redraw;
    // it is drawn display:none, absolute (moves nothing) and lit by the keyed Box around it.
    const taskIndexOf = memo(`${drawn.key}|index`, () => taskIndex(vault.tasks))
    const taskByPath = memo(`${drawn.key}|byPath`, () => new Map(vault.tasks.map(task => [task.file.path, task])))
    const popup = (path: string, place: { top: number; left: number }) => {
      const task = taskByPath.get(path)
      if (!task) return undefined
      return (
        <Box
          position="absolute"
          top={place.top}
          left={place.left}
          right={0}
          display="none"
          hover={{ display: 'flex' }}
          flexDirection="column"
          borderStyle="round"
          borderColor={task.statusDef?.color ?? 'gray'}
          backgroundColor="#1e1e1e"
          paddingX={1}
        >
          <Text bold color="white" wrap="wrap">{task.title}</Text>
          {detailOf(task, taskIndexOf, now).map((m, k) => (
            <Text key={`pop:${path}:${k}`} color={m.color ?? 'white'} {...(k === 0 || m.color ? {} : { dimColor: true })} wrap="wrap">{m.text}</Text>
          ))}
          {t.vault && <Button key={`pop-open:${path}`} label="Open in Obsidian" variant="primary" onPress={() => open(path)} />}
        </Box>
      )
    }

    const cardView = (card: Card, compact: boolean) => (
      <Box key={`card:${card.key}`} flexDirection="column" borderStyle="round" borderColor={card.color ?? 'gray'} paddingX={1} marginBottom={compact ? 0 : 1}>
        {popup(card.path, { top: 0, left: 0 })}
        <Box flexDirection="row" gap={1} alignItems="flex-start">
          <Text color={card.color ?? 'gray'}>●</Text>
          <Box flexGrow={1} flexShrink={1}>
            <Text bold={!card.done} strikethrough={card.done} dimColor={card.done} wrap="wrap">{card.title}</Text>
          </Box>
          <Button key={`open:${card.path}`} label="↗" plain dimColor onPress={() => open(card.path)} />
        </Box>
        {card.meta.length > 0 && (
          <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
            {card.meta.map((m, k) => (
              <Text key={`${card.key}:m${k}`} {...(m.color ? { color: m.color } : { dimColor: true })}>{m.text}</Text>
            ))}
          </Box>
        )}
      </Box>
    )

    const more = (key: string, total: number) =>
      total > CAP && (isExpanded(key)
        ? <Button key={`less:${key}`} label="Show fewer" dimColor onPress={() => collapse(key)} />
        : <Button key={`more:${key}`} label={`Show all ${total}`} dimColor onPress={() => expand(key)} />)

    const columnView = (col: Column, board: boolean) => {
      const shown = isExpanded(col.key) ? col.cards : col.cards.slice(0, CAP)
      return (
        <Box key={`col:${col.key}`} flexDirection="column" flexGrow={1} flexShrink={1} {...(board ? { minWidth: 30, width: 34 } : {})}>
          <Box flexDirection="row" gap={1}>
            <Text color={col.color ?? 'gray'}>●</Text>
            <Text bold>{col.label}</Text>
            <Text dimColor>{col.cards.length}</Text>
          </Box>
          {col.cards.length === 0 && <Text dimColor italic>No tasks</Text>}
          {shown.map(card => cardView(card, false))}
          {more(col.key, col.cards.length)}
        </Box>
      )
    }

    const agendaRow = (item: AgendaItem, k: number, overdue: boolean) => {
      const status = item.task.statusDef
      const kind = item.kind === 'recurring' ? '↻' : item.kind === 'due' ? 'due' : 'sched'
      return (
        <Box key={`ag:${item.task.file.path}:${item.date}:${k}`} flexDirection="row" gap={1}>
          {popup(item.task.file.path, { top: 1, left: 2 })}
          <Text color={status?.color ?? 'gray'}>●</Text>
          <Text {...(overdue ? { color: '#d62728' } : { dimColor: true })}>{overdue ? dayLabel(item.date, now) : kind}</Text>
          <Box flexGrow={1} flexShrink={1}>
            <Text wrap="wrap">{item.task.title}</Text>
          </Box>
          {item.task.priorityDef && item.task.priority !== 'none' && <Text color={item.task.priorityDef.color}>{item.task.priorityDef.label}</Text>}
          <Button key={`open:${item.task.file.path}:${item.date}`} label="↗" plain dimColor onPress={() => open(item.task.file.path)} />
        </Box>
      )
    }

    // Pills: the projects and contexts of the whole view, most used first. A press toggles one;
    // several in a row widen (any of them), the two rows narrow each other (both must hold).
    const facetsOf = memo(`${drawn.key}|facets`, () => facets(all.tasks))
    const PILLS = 10
    const pillRow = (kind: 'project' | 'context', label: string, list: Facet[], selected: string[], prefix: string) => {
      if (!list.length) return undefined
      const chosen = selected.map(s => s.toLowerCase())
      const field = kind === 'project' ? 'projects' : 'contexts'
      const toggle = (name: string) =>
        patch({ [field]: chosen.includes(name.toLowerCase()) ? selected.filter(s => s.toLowerCase() !== name.toLowerCase()) : [...selected, name] } as Partial<TasksTarget>)
      // Selected pills always show, even beyond the cap.
      const visible = t.allPills ? list : list.filter((f, i) => i < PILLS || chosen.includes(f.name.toLowerCase()))
      return (
        <Box key={`pills-${kind}`} flexDirection="row" flexWrap="wrap" gap={1} alignItems="center">
          <Text dimColor>{label}</Text>
          {visible.map(f => (
            <Button
              key={`pill-${kind}:${f.name}`}
              label={`${prefix}${f.name} ${f.count}`}
              {...(chosen.includes(f.name.toLowerCase()) ? { variant: 'primary' as const } : { dimColor: true })}