now-playing

import type { Register } from 'claude-code'

// Drawn like now-playing by Ben (pane, band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/benjaminr-now-playing/
// 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 stateGlyph = '…'
    const titleText = '…'
    const truncateText = '…'
    const played = '…'
    const remaining = '…'
    const clock = '…'
    const volumeText = '…'
    const modes = '…'
    const hotkey = '…'
    const label = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1} borderStyle="round" paddingX={1}>
          <Box flexDirection="column" flexGrow={1}>
            <Box flexDirection="row" gap={1}>
              <Text>
                {stateGlyph}
              </Text>
              <Text bold>
                {titleText}
              </Text>
            </Box>
            <Text dimColor>
              {truncateText}
            </Text>
            <Box flexDirection="row" gap={1}>
              <Text>
                <Text>
                  {played}
                </Text>
                <Text dimColor>
                  {remaining}
                </Text>
              </Text>
              <Text dimColor>
                {clock}
              </Text>
              <Text dimColor>
                {volumeText}
              </Text>
              <Text>
                {modes}
              </Text>
            </Box>
            <Box flexGrow={1} />
            <Box flexDirection="row" gap={1}>
              <Button plain hotkey={`${hotkey}`} label={`${label}`} />
              <Button plain hotkey={`${hotkey}`} label={`${label}`} />
              <Button plain hotkey={`${hotkey}`} label={`${label}`} />
            </Box>
          </Box>
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Up next & playlist" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const truncateText = '…'
    const label = '…'
    const truncateText2 = '…'
    const truncateText3 = '…'
    const truncateText4 = '…'
    const query = '…'
    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Box flexDirection="row" gap={1}>
            <Text bold>
              {truncateText}
            </Text>
            <Button role="dismiss" plain hotkey="x" label="close" dimColor />
          </Box>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            {`Add to the ${label}`}
          </Text>
          <Text dimColor>
            {truncateText2}
          </Text>
          <Text dimColor>
            {truncateText3}
          </Text>
          <Text dimColor>
            {truncateText4}
          </Text>
          <Box flexDirection="column">
            <Box flexDirection="row" gap={1}>
              <Text dimColor>
                {`"${query}"`}
              </Text>
              <Button plain label="clear" dimColor />
            </Box>
            <Text dimColor>
              In your library, press one to add it to the playlist:
            </Text>
            <Button plain label={`${truncateText}`} />
            <Button plain label={`${truncateText}`} />
            <Button plain label={`${truncateText}`} />
            <Text dimColor>
              On Apple Music but not in your library, so not addable here.
            </Text>
            <Text dimColor>
              Press one to open it in Music and add it to your library there:
            </Text>
            <Button plain dimColor label={`${truncateText}`} />
            <Button plain dimColor label={`${truncateText}`} />
            <Button plain dimColor label={`${truncateText}`} />
          </Box>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const errorText = '…'
    const title = '…'
    const label = '…'
    await $.ui.toast(`Music did not start the track: ${errorText}`)
    await $.ui.toast(`Could not add ${title} to the ${label}.`)
    return next(e)
  })
}