stack/packages/cli/src/tui/components/search-bar.tsx

import React from 'react';
import { Box, Text, useInput } from 'ink';
import TextInput from 'ink-text-input';

export interface SearchBarProps {
  query: string;
  onQueryChange: (q: string) => void;
  totalMatches: number;
  currentMatch: number;
  onNext: () => void;
  onPrev: () => void;
  onClose: () => void;
  focused: boolean;
}

export function SearchBar({
  query,
  onQueryChange,
  totalMatches,
  currentMatch,
  onNext,
  onPrev,
  onClose,
  focused,
}: SearchBarProps) {
  useInput(
    (_input, key) => {
      if (key.upArrow) {
        onPrev();
      }
      if (key.downArrow) {
        onNext();
      }
      if (key.escape) {
        onClose();
      }
    },
    { isActive: focused },
  );

  const borderColor = focused ? 'yellow' : 'gray';

  const matchDisplay =
    query.length >= 2
      ? totalMatches > 0
        ? `${String(currentMatch + 1)}/${String(totalMatches)}`
        : 'no matches'
      : '';

  return (
    <Box borderStyle="round" borderColor={borderColor} paddingX={1} flexDirection="row" gap={1}>
      <Text>🔍</Text>
      <Box flexGrow={1}>
        <TextInput value={query} onChange={onQueryChange} focus={focused} />
      </Box>
      {matchDisplay && <Text dimColor>{matchDisplay}</Text>}
      <Text dimColor>↑↓ navigate · Esc close</Text>
    </Box>
  );
}