lazyreview 0.1.4

package/src/components/common/PaginationBar.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { useTheme } from '../../theme/index'
+
+interface PaginationBarProps {
+  readonly currentPage: number
+  readonly totalPages: number
+  readonly totalItems: number
+  readonly startIndex: number
+  readonly endIndex: number
+  readonly hasNextPage: boolean
+  readonly hasPrevPage: boolean
+}
+
+export function PaginationBar({
+  currentPage,
+  totalPages,
+  totalItems,
+  startIndex,
+  endIndex,
+  hasNextPage,
+  hasPrevPage,
+}: PaginationBarProps): React.ReactElement {
+  const theme = useTheme()
+
+  if (totalPages <= 1) {
+    return (
+      <Box paddingX={1}>
+        <Text color={theme.colors.muted}>
+          {totalItems} item{totalItems !== 1 ? 's' : ''}
+        </Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Box paddingX={1} gap={2}>
+      <Text color={theme.colors.muted}>
+        {startIndex + 1}-{endIndex} of {totalItems}
+      </Text>
+      <Box gap={1}>
+        <Text color={hasPrevPage ? theme.colors.accent : theme.colors.muted}>
+          {hasPrevPage ? '← [p]rev' : '← prev'}
+        </Text>
+        <Text color={theme.colors.muted}>│</Text>
+        <Text color={theme.colors.text}>
+          Page {currentPage}/{totalPages}
+        </Text>
+        <Text color={theme.colors.muted}>│</Text>
+        <Text color={hasNextPage ? theme.colors.accent : theme.colors.muted}>
+          {hasNextPage ? '[n]ext →' : 'next →'}
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/common/SortModal.tsx

@@ -0,0 +1,91 @@
+import React, { useMemo } from 'react'
+import { Box, Text, useInput } from 'ink'
+import SelectInput from 'ink-select-input'
+import { useTheme } from '../../theme/index'
+import { Modal } from './Modal'
+import type { SortField, SortDirection } from '../../hooks/useFilter'
+
+const SORT_OPTIONS: readonly { key: SortField; label: string }[] = [
+  { key: 'updated', label: 'Last Updated' },
+  { key: 'created', label: 'Created Date' },
+  { key: 'repo', label: 'Repository' },
+  { key: 'author', label: 'Author' },
+  { key: 'title', label: 'Title' },
+]
+
+interface SortModalProps {
+  readonly currentSort: SortField
+  readonly sortDirection: SortDirection
+  readonly onSortChange: (sortBy: SortField) => void
+  readonly onSortDirectionToggle: () => void
+  readonly onClose: () => void
+}
+
+export function SortModal({
+  currentSort,
+  sortDirection,
+  onSortChange,
+  onSortDirectionToggle,
+  onClose,
+}: SortModalProps): React.ReactElement {
+  const theme = useTheme()
+
+  useInput((input, key) => {
+    if (key.escape || input === 's') {
+      onClose()
+    }
+  })
+
+  const items = useMemo(
+    () =>
+      SORT_OPTIONS.map((option) => ({
+        label: `${option.label}${option.key === currentSort ? (sortDirection === 'desc' ? ' ↓' : ' ↑') : ''}`,
+        value: option.key,
+      })),
+    [currentSort, sortDirection],
+  )
+
+  const initialIndex = Math.max(
+    0,
+    SORT_OPTIONS.findIndex((o) => o.key === currentSort),
+  )
+
+  const handleSelect = (item: { label: string; value: SortField }) => {
+    if (item.value === currentSort) {
+      onSortDirectionToggle()
+    } else {
+      onSortChange(item.value)
+    }
+    onClose()
+  }
+
+  return (
+    <Modal>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.colors.accent}
+        // @ts-ignore
+        backgroundColor={theme.colors.bg}
+        paddingX={2}
+        paddingY={1}
+        gap={1}
+      >
+        <Text color={theme.colors.accent} bold>
+          Sort by
+        </Text>
+
+        <SelectInput
+          items={items}
+          initialIndex={initialIndex}
+          onSelect={handleSelect}
+          isFocused={true}
+        />
+
+        <Text color={theme.colors.muted} dimColor>
+          j/k: move | Enter: select | Esc: close
+        </Text>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/common/Spinner.tsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react'
+import { Text } from 'ink'
+import { useTheme } from '../../theme/index'
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+
+interface SpinnerProps {
+  readonly label?: string
+}
+
+export function Spinner({ label }: SpinnerProps): React.ReactElement {
+  const theme = useTheme()
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame((prev) => (prev + 1) % SPINNER_FRAMES.length)
+    }, 80)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <Text color={theme.colors.accent}>
+      {SPINNER_FRAMES[frame]} {label}
+    </Text>
+  )
+}

package/src/components/common/index.ts

@@ -0,0 +1,9 @@
+export { LoadingIndicator } from './LoadingIndicator'
+export { EmptyState } from './EmptyState'
+export { Divider } from './Divider'
+export { Spinner } from './Spinner'
+export { BorderedBox } from './BorderedBox'
+export { Modal } from './Modal'
+export { PaginationBar } from './PaginationBar'
+export { FilterModal } from './FilterModal'
+export { SortModal } from './SortModal'

package/src/components/layout/HelpModal.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { useTheme } from '../../theme/index'
+import { Divider } from '../common/Divider'
+import { Modal } from '../common/Modal'
+
+interface HelpModalProps {
+  readonly onClose: () => void
+}
+
+const shortcuts = [
+  { key: 'j / k', description: 'Move down / up' },
+  { key: 'Enter', description: 'Select / Open' },
+  { key: 'Tab', description: 'Switch focus panel' },
+  { key: 'b', description: 'Toggle sidebar' },
+  { key: '/', description: 'Search / Filter PRs' },
+  { key: 's', description: 'Sort PRs' },
+  { key: 'n / p', description: 'Next / Previous page' },
+  { key: '1 / 2 / 3', description: 'Switch PR detail tabs' },
+  { key: 'q', description: 'Back / Quit' },
+  { key: '?', description: 'Toggle this help' },
+  { key: 'Ctrl+c', description: 'Force quit' },
+]
+
+export function HelpModal({ onClose }: HelpModalProps): React.ReactElement {
+  const theme = useTheme()
+
+  return (
+    <Modal>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.colors.accent}
+        // @ts-ignore
+        backgroundColor={theme.colors.bg}
+        paddingX={2}
+        paddingY={1}
+        gap={1}
+      >
+        <Text color={theme.colors.accent} bold>
+          Keyboard Shortcuts
+        </Text>
+        <Divider />
+        <Box flexDirection="column">
+          {shortcuts.map((s) => (
+            <Box key={s.key} gap={2}>
+              <Box width={16}>
+                <Text color={theme.colors.warning}>{s.key}</Text>
+              </Box>
+              <Text color={theme.colors.text}>{s.description}</Text>
+            </Box>
+          ))}
+        </Box>
+        <Divider />
+        <Text color={theme.colors.muted} dimColor>
+          Press ? to close
+        </Text>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/layout/MainPanel.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Box } from 'ink'
+import { useTheme } from '../../theme/index'
+
+interface MainPanelProps {
+  readonly children: React.ReactNode
+  readonly isActive?: boolean
+}
+
+export function MainPanel({
+  children,
+  isActive = false,
+}: MainPanelProps): React.ReactElement {
+  const theme = useTheme()
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="single"
+      borderColor={isActive ? theme.colors.accent : theme.colors.border}
+    >
+      {children}
+    </Box>
+  )
+}

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { useTheme } from '../../theme/index'
+
+export const SIDEBAR_ITEMS = [
+  'Involved',
+  'My PRs',
+  'For Review',
+  'This Repo',
+  'Settings',
+] as const
+
+export type SidebarItem = (typeof SIDEBAR_ITEMS)[number]
+
+const sidebarIcons: Record<SidebarItem, string> = {
+  Involved: '◆',
+  'My PRs': '●',
+  'For Review': '◎',
+  'This Repo': '◈',
+  Settings: '⚙',
+}
+
+interface SidebarProps {
+  readonly selectedIndex: number
+  readonly visible: boolean
+  readonly isActive: boolean
+}
+
+export function Sidebar({
+  selectedIndex,
+  visible,
+  isActive,
+}: SidebarProps): React.ReactElement | null {
+  const theme = useTheme()
+
+  if (!visible) return null
+
+  return (
+    <Box
+      flexDirection="column"
+      width={24}
+      borderStyle="single"
+      borderColor={isActive ? theme.colors.accent : theme.colors.border}
+    >
+      <Box paddingX={1} paddingY={0}>
+        <Text color={theme.colors.accent} bold={isActive} dimColor={!isActive}>
+          Navigation
+        </Text>
+      </Box>
+      <Box flexDirection="column" paddingTop={1}>
+        {SIDEBAR_ITEMS.map((label, index) => {
+          const isSelected = index === selectedIndex
+          const icon = sidebarIcons[label]
+          return (
+            <Box key={label} paddingX={1}>
+              <Text
+                color={isSelected ? theme.colors.accent : theme.colors.text}
+                backgroundColor={isSelected ? theme.colors.selection : undefined}
+                bold={isSelected}
+                dimColor={!isActive && !isSelected}
+              >
+                {isSelected ? '▸ ' : '  '}
+                {icon} {label}
+              </Text>
+            </Box>
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}

package/src/components/layout/StatusBar.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { Spinner } from '../common/Spinner'
+import { useTheme } from '../../theme/index'
+import { useLoading } from '../../hooks/useLoading'
+import type { Panel } from '../../hooks/useActivePanel'
+
+const PANEL_HINTS: Record<Panel, string> = {
+  sidebar: 'j/k:nav  gg/G:top/bottom  Enter:select  Tab:list  b:toggle  ?:help  q:quit',
+  list: 'j/k:nav  gg/G:top/bottom  Enter:detail  Esc:sidebar  Tab:next  ?:help  q:quit',
+  detail: 'j/k:scroll  Tab:tabs  Esc:list  ?:help  q:quit',
+}
+
+interface StatusBarProps {
+  readonly activePanel?: Panel
+}
+
+export function StatusBar({ activePanel = 'sidebar' }: StatusBarProps): React.ReactElement {
+  const theme = useTheme()
+  const loadingState = useLoading()
+  const hints = PANEL_HINTS[activePanel]
+
+  return (
+    <Box
+      height={1}
+      width="100%"
+      justifyContent="space-between"
+      paddingX={1}
+    >
+      <Box>
+        {loadingState.isLoading ? (
+          <Spinner label={loadingState.message ?? 'Loading...'} />
+        ) : (
+          <Text color={theme.colors.success}>Ready</Text>
+        )}
+      </Box>
+      <Box gap={1}>
+        <Text color={theme.colors.muted}>{hints}</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/layout/TokenInputModal.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text, useInput } from 'ink'
+import { TextInput } from '@inkjs/ui'
+import { useTheme } from '../../theme/index'
+import { useInputFocus } from '../../hooks/useInputFocus'
+import { Modal } from '../common/Modal'
+
+interface TokenInputModalProps {
+  readonly onClose: () => void
+  readonly onSubmit: (token: string) => void
+  readonly error?: string | null
+}
+
+export function TokenInputModal({
+  onSubmit,
+  error,
+}: TokenInputModalProps): React.ReactElement {
+  const theme = useTheme()
+  const { setInputActive } = useInputFocus()
+  const [value, setValue] = useState('')
+
+  // Disable global shortcuts while this modal is open
+  useEffect(() => {
+    setInputActive(true)
+    return () => setInputActive(false)
+  }, [setInputActive])
+
+  const handleSubmit = (): void => {
+    const trimmed = value.trim()
+    if (trimmed) {
+      onSubmit(trimmed)
+    }
+  }
+
+  useInput((_input, key) => {
+    if (key.return) {
+      handleSubmit()
+    }
+  })
+
+  return (
+    <Modal>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.colors.accent}
+        // @ts-ignore
+        backgroundColor={theme.colors.bg}
+        paddingX={2}
+        paddingY={1}
+        gap={1}
+      >
+        <Text color={theme.colors.accent} bold>
+          GitHub Token Required
+        </Text>
+        <Box flexDirection="column">
+          <Text color={theme.colors.text}>
+            No GitHub token found in your environment.
+          </Text>
+          <Text color={theme.colors.muted}>
+            Please enter your GitHub Personal Access Token:
+          </Text>
+        </Box>
+        {error && <Text color={theme.colors.error}>Error: {error}</Text>}
+        <Box
+          borderStyle="single"
+          borderColor={theme.colors.border}
+          paddingX={1}
+          width={50}
+        >
+          <TextInput defaultValue={value} onChange={setValue} />
+        </Box>
+        <Box flexDirection="column">
+          <Text color={theme.colors.muted} dimColor>
+            The token will be saved to ~/.config/lazyreview/.token
+          </Text>
+          <Text color={theme.colors.muted} dimColor>
+            Press Enter to submit, Ctrl+C to quit.
+          </Text>
+        </Box>
+        <Box flexDirection="column" marginTop={1}>
+          <Text color={theme.colors.info}>
+            Get a token at: github.com/settings/tokens
+          </Text>
+          <Text color={theme.colors.muted}>
+            Required scopes: repo, read:user
+          </Text>
+        </Box>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/layout/TopBar.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { useTheme } from '../../theme/index'
+
+interface TopBarProps {
+  readonly username: string
+  readonly provider: string
+  readonly repoPath?: string
+}
+
+export function TopBar({
+  username,
+  provider,
+  repoPath,
+}: TopBarProps): React.ReactElement {
+  const theme = useTheme()
+
+  return (
+    <Box
+      height={1}
+      width="100%"
+      justifyContent="space-between"
+      paddingX={1}
+      marginTop={0.6}
+    >
+      <Box gap={1}>
+        <Text color={theme.colors.accent} bold>
+          LazyReview
+        </Text>
+        {repoPath && (
+          <>
+            <Text color={theme.colors.muted}>│</Text>
+            <Text color={theme.colors.text}>{repoPath}</Text>
+          </>
+        )}
+      </Box>
+      <Box gap={1}>
+        <Text color={theme.colors.muted}>{provider}</Text>
+        <Text color={theme.colors.muted}>│</Text>
+        <Text color={theme.colors.secondary}>{username}</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/layout/index.ts

@@ -0,0 +1,6 @@
+export { TopBar } from './TopBar'
+export { Sidebar, SIDEBAR_ITEMS } from './Sidebar'
+export type { SidebarItem } from './Sidebar'
+export { MainPanel } from './MainPanel'
+export { StatusBar } from './StatusBar'
+export { HelpModal } from './HelpModal'

package/src/components/pr/CommentsTab.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react'
+import { Box, Text, useStdout } from 'ink'
+import { ScrollList, type ScrollListRef } from 'ink-scroll-list'
+import { useTheme } from '../../theme/index'
+import { useListNavigation } from '../../hooks/useListNavigation'
+import type { Comment } from '../../models/comment'
+import { timeAgo } from '../../utils/date'
+import { EmptyState } from '../common/EmptyState'
+
+interface CommentsTabProps {
+  readonly comments: readonly Comment[]
+}
+
+interface CommentItemProps {
+  readonly item: Comment
+  readonly isFocus: boolean
+}
+
+function CommentItem({ item, isFocus }: CommentItemProps): React.ReactElement {
+  const theme = useTheme()
+
+  return (
+    <Box
+      flexDirection="column"
+      paddingX={1}
+      paddingY={0}
+      borderStyle={isFocus ? 'single' : undefined}
+      borderColor={isFocus ? theme.colors.accent : undefined}
+    >
+      <Box gap={1}>
+        <Text color={theme.colors.secondary} bold>
+          {item.user.login}
+        </Text>
+        <Text color={theme.colors.muted}>{timeAgo(item.created_at)}</Text>
+        {item.path && (
+          <>
+            <Text color={theme.colors.muted}>on</Text>
+            <Text color={theme.colors.info}>{item.path}</Text>
+            {item.line && (
+              <Text color={theme.colors.muted}>:{item.line}</Text>
+            )}
+          </>
+        )}
+      </Box>
+      <Box paddingLeft={2}>
+        <Text color={theme.colors.text} wrap="wrap">
+          {item.body}
+        </Text>
+      </Box>
+    </Box>
+  )
+}
+
+export function CommentsTab({
+  comments,
+}: CommentsTabProps): React.ReactElement {
+  const { stdout } = useStdout()
+  const listRef = useRef<ScrollListRef>(null)
+  const viewportHeight = Math.max(1, Math.floor((stdout?.rows ?? 24) - 8) / 4)
+
+  const { selectedIndex } = useListNavigation({
+    itemCount: comments.length,
+    viewportHeight,
+    isActive: true,
+  })
+
+  useEffect(() => {
+    const handleResize = (): void => listRef.current?.remeasure()
+    stdout?.on('resize', handleResize)
+    return () => {
+      stdout?.off('resize', handleResize)
+    }
+  }, [stdout])
+
+  if (comments.length === 0) {
+    return <EmptyState message="No comments yet" />
+  }
+
+  return (
+    <Box flexDirection="column" flexGrow={1} overflow="hidden" height={viewportHeight}>
+      <ScrollList ref={listRef} selectedIndex={selectedIndex} scrollAlignment="auto">
+        {comments.map((comment, index) => (
+          <CommentItem
+            key={comment.id}
+            item={comment}
+            isFocus={index === selectedIndex}
+          />
+        ))}
+      </ScrollList>
+    </Box>
+  )
+}