pr-pane

import type { Register } from 'claude-code'

// Drawn like pr-pane by ASRagab (band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/asragab-pr-pane/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const login = '…'
    const total = '…'
    const length = '…'
    const at = '…'
    const GLYPH = '…'
    const n = '…'
    const SHORT = '…'
    const GLYPH2 = '…'
    const n2 = '…'
    const SHORT2 = '…'
    const GLYPH3 = '…'
    const n3 = '…'
    const SHORT3 = '…'
    const error = '…'
    const mode = '…'
    const row = '…'
    const row2 = '…'
    const row3 = '…'
    const current = '…'
    const pages = '…'
    return (
      <Box flexDirection="column">
        <Text dimColor wrap="truncate-end">
          ────────
        </Text>
        <Text bold>
          {`@${login}`}
          {" · "}
          {total}
          {" open"}
          {` (showing ${length})`}
          {` · updated ${at}`}
        </Text>
        <Box>
          <Text>
            {GLYPH}
            {" "}
            {n}
            {" "}
            {SHORT}
            {"   "}
          </Text>
          <Text>
            {GLYPH2}
            {" "}
            {n2}
            {" "}
            {SHORT2}
            {"   "}
          </Text>
          <Text>
            {GLYPH3}
            {" "}
            {n3}
            {" "}
            {SHORT3}
            {"   "}
          </Text>
        </Box>
        <Text color="red">
          {error}
        </Text>
        <Text dimColor>
          No open PRs.
        </Text>
        <Box columnGap={2}>
          <Text dimColor>
            Sort:
          </Text>
          <Button plain hotkey={`${mode}`} label={`[${mode}]`} />
          <Button plain hotkey={`${mode}`} label={`[${mode}]`} />
          <Button plain hotkey={`${mode}`} label={`[${mode}]`} />
          <Text dimColor>
            updated ↓
          </Text>
        </Box>
        <Box columnGap={1}>
          <Button plain label="›" autoFocus />
          <Text wrap="truncate-end">
            {row}
          </Text>
        </Box>
        <Box columnGap={1}>
          <Button plain label="›" autoFocus />
          <Text wrap="truncate-end">
            {row2}
          </Text>
        </Box>
        <Box columnGap={1}>
          <Button plain label="›" autoFocus />
          <Text wrap="truncate-end">
            {row3}
          </Text>
        </Box>
        <Box columnGap={2}>
          <Button plain hotkey="p" label="Previous" />
          <Text dimColor>
            {"Page "}
            {`${current}1`}
            /
            {pages}
          </Text>
          <Button plain hotkey="n" label="Next" />
        </Box>
        <Text dimColor>
          Ctrl+X then Tab focuses · ↑/↓ or Tab move · Enter opens · r/s/d sort · p/n page · Esc prompt · /prs hides
        </Text>
        <Text dimColor wrap="truncate-end">
          ────────
        </Text>
        {await next(e)}
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const url = '…'
    await $.ui.toast(`Could not open ${url}`)
    return next(e)
  })
}