claudepad

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    const Input = 'Input' in els ? els.Input : undefined
    const project = await projectOf($)
    const list = await read($, notes)
    const where = await read($, scope)

    const session = await read($, editor)
    if (session) {
      const Client = 'Client' in els ? els.Client : undefined
      const isLines = !Client || (await read($, isLineMode))
      const isNew = session.id === 'new'
      const heading = isNew
        ? `✎ New note (${where === 'global' ? 'global' : baseName(project)})`
        : '✎ Editing note'
      const save = async () => $.ui.toast(await saveEditor($))

      // Line mode: the draft as numbered lines, one Input adding or replacing a line.
      const lineView = async () => {
        const text = await read($, draft)
        const all = text === '' ? [] : text.split('\n')
        const setLines = (fn: (lines: string[]) => string[]) =>
          update($, draft, current => fn(current === '' ? [] : current.split('\n')).join('\n'))
        const editLine = (line: number | null) =>
          update($, editor, current => (current ? { ...current, line } : current))
        const target = session.line !== null && session.line < all.length ? session.line : null
        return (
          <Box flexDirection="column">
            {all.length === 0 && <Text dimColor>Empty. Type the first line below and press Enter.</Text>}
            {all.map((line, i) => (
              <Box key={`line-${i}`} gap={1}>
                <Text dimColor={target !== null && target !== i} bold={target === i}>
                  {`${String(i + 1).padStart(String(all.length).length)} │ ${line}`}
                </Text>
                <Button key={`line-edit-${i}`} plain dimColor onPress={() => editLine(i)}>
                  edit
                </Button>
                <Button
                  key={`line-del-${i}`}
                  plain
                  dimColor
                  onPress={async () => {
                    await setLines(lines => lines.filter((_, at) => at !== i))
                    await editLine(null)
                  }}
                >
                  ×
                </Button>
              </Box>
            ))}
            {Input && (
              <Input
                key={target === null ? `line-add-${all.length}` : `line-set-${target}`}
                label={target === null ? `${all.length + 1} + ` : `${target + 1} ✎ `}
                placeholder={target === null ? 'Next line; Enter adds it (empty adds a blank line)' : 'Enter replaces the line; empty deletes it'}
                value={target === null ? '' : all[target] ?? ''}
                submitLabel={target === null ? 'add line' : 'replace'}
                autoFocus
                onSubmit={async value => {
                  if (target === null) {
                    await setLines(lines => [...lines, value])
                  } else {
                    await setLines(lines =>
                      value === '' ? lines.filter((_, at) => at !== target) : lines.map((l, at) => (at === target ? value : l)),
                    )
                    await editLine(null)
                  }
                }}
              />
            )}
            {target !== null && (
              <Button key="line-stop" plain dimColor onPress={() => editLine(null)}>
                back to adding lines
              </Button>
            )}
          </Box>
        )
      }

      return (
        <Box flexDirection="column">
          <Text bold>{heading}</Text>
          {isLines || !Client ? (
            await lineView()
          ) : (
            <Box flexDirection="column">
              <Client key={`editor-${session.id}`} module="./editor.tsx" props={{ text: session.initial }} />
              <Text dimColor>
                Click the box to type · Enter new line · Ctrl+S save · arrows, Home/End, PgUp/PgDn move · Esc leaves the box
              </Text>
            </Box>
          )}
          <Box marginTop={1} gap={2}>
            <Button key="editor-save" variant="primary" onPress={save}>
              Save
            </Button>
            <Button key="editor-cancel" role="dismiss" onPress={() => closeEditor($)}>
              Cancel
            </Button>
            {Client && (
              <Button
                key="editor-mode"
                plain
                dimColor
                onPress={async () => {
                  const text = await read($, draft)
                  // Back to the full editor: it reopens on the text as it stands now.
                  await update($, editor, current => (current ? { ...current, initial: text, line: null } : current))
                  await update($, isLineMode, value => !value)
                }}
              >
                {isLines ? 'switch to full editor' : 'switch to line editor'}
              </Button>
            )}
          </Box>
        </Box>
      )
    }

    const search = (await read($, query)).trim()
    const tag = await read($, activeTag)
    const isSearching = search !== '' || tag !== null
    const shown = (note: Note) =>
      (search === '' || matches(note, search)) && (tag === null || tagsOf(note.text).includes(tag))

    const ordered = (subset: Note[]) =>
      [...subset].sort(
        (a, b) =>
          Number(b.isPinned) - Number(a.isPinned) ||
          Number(a.isDone) - Number(b.isDone) ||
          a.createdAt - b.createdAt,
      )
    const allHere = list.filter(note => isHere(note, project))
    const allGlobal = list.filter(isGlobal)
    const here = ordered(allHere.filter(shown))
    const global = ordered(allGlobal.filter(shown))
    // Only while searching: matches from every other project too.
    const elsewhere = isSearching
      ? ordered(list.filter(note => !isGlobal(note) && !isHere(note, project) && shown(note)))
      : []

    const submit = async (value: string) => {
      const text = value.trim()
      if (text !== '') {
        await addNote($, text, 'you', where)
      }
    }

    const toggle = (id: string, field: 'isDone' | 'isPinned') =>
      change($, all => all.map(note => (note.id === id ? { ...note, [field]: !note[field] } : note)))

    const move = (id: string) =>
      change($, all =>
        all.map(note =>
          note.id === id ? { ...note, project: isGlobal(note) ? project : null } : note,
        ),
      )

    /** The note's text with each #tag drawn in its color. */