src/ui/HelpModal.tsx - master - foult080/terminal-db

src/ui/HelpModal.tsx
95 строк3 KB
foult080
refactor(): it's work
14 июл 2026, 13:14
14 июл 2026, 13:142260738
import { TextAttributes } from "@opentui/core"
import { useKeyboard } from "@opentui/react"
import { useState } from "react"
import type { Command } from "../core/types/commands.js"
import type { ThemeColors } from "../core/themes/index.js"

interface HelpModalProps {
  commands: Command[]
  theme: ThemeColors
  onCancel: () => void
}

const WIDTH = 64
const MAX_VISIBLE = 16

export function HelpModal({ commands, theme, onCancel }: HelpModalProps) {
  const [scrollOffset, setScrollOffset] = useState(0)
  const innerWidth = WIDTH - 2

  useKeyboard((key) => {
    if (key.name === "escape") {
      onCancel()
      return
    }
    if (key.name === "up") {
      setScrollOffset((o) => Math.max(0, o - 1))
      return
    }
    if (key.name === "down") {
      setScrollOffset((o) => Math.min(commands.length - MAX_VISIBLE, o + 1))
      return
    }
  })

  const visible = commands.slice(scrollOffset, scrollOffset + MAX_VISIBLE)

  return (
    <box
      position="absolute"
      left={0}
      top={0}
      width="100%"
      height="100%"
      justifyContent="center"
      alignItems="center"
    >
      <box
        flexDirection="column"
        width={WIDTH}
        borderStyle="single"
        backgroundColor={theme.surface}
      >
        <box height={1} flexDirection="row" paddingLeft={1} paddingRight={1}>
          <text attributes={TextAttributes.BOLD} fg={theme.primary}>
            Available Commands
          </text>
          <box flexGrow={1} />
          <text fg={theme.textMuted} attributes={TextAttributes.DIM}>
            {commands.length} total
          </text>
        </box>

        <text paddingLeft={1} paddingRight={1} fg={theme.border}>
          {"\u2500".repeat(innerWidth)}
        </text>

        <box flexDirection="column" paddingY={1}>
          {visible.map((cmd) => {
            const argsStr =
              cmd.args && cmd.args.length > 0
                ? "  " + cmd.args.map((a) => (a.required ? `--${a.name}` : `[--${a.name}]`)).join(" ")
                : ""
            return (
              <box key={cmd.id} height={1} paddingLeft={1} paddingRight={1} flexDirection="row">
                <text fg={theme.secondary}>/{cmd.id}</text>
                <text fg={theme.textMuted}>{"  "}{cmd.description}</text>
                {argsStr && <text fg={theme.textAccent}>{argsStr}</text>}
              </box>
            )
          })}
        </box>

        <text paddingLeft={1} paddingRight={1} fg={theme.border}>
          {"\u2500".repeat(innerWidth)}
        </text>

        <box height={1} paddingLeft={1} paddingRight={1} flexDirection="row">
          <text fg={theme.textMuted} attributes={TextAttributes.DIM}>
            {"\u2191\u2193"} scroll  Esc close
          </text>
        </box>
      </box>
    </box>
  )
}