Function ProjectPickerScreen

cli/src/components/project-picker-screen.tsx:59–484

({
  onSelectProject,
  initialPath,
})

}

export const ProjectPickerScreen: React.FC<ProjectPickerScreenProps> = ({
  onSelectProject,
  initialPath,
}) => {
  const theme = useTheme()
  const [sheenPosition, setSheenPosition] = useState(0)

  // Directory browsing state and navigation
  const {
    currentPath,
    setCurrentPath,
    directories,
    expandPath,
    tryNavigateToPath,
    navigateToDirectory,
  } = useDirectoryBrowser({ initialPath })

  // Convert directories to SelectableListItem format
  const directoryItems: SelectableListItem[] = useMemo(
    () =>
      directories.map((entry) => ({
        id: entry.path,
        label: entry.name,
        icon: entry.isParent ? '📂' : '📁',
        accent: entry.isGitRepo,
      })),
    [directories],
  )

  // Search filtering and focus management
  const {
    searchQuery,
    setSearchQuery,
    focusedIndex,
    setFocusedIndex,
    filteredItems: filteredDirectoryItems,
    handleFocusChange,
  } = useSearchableList({
    items: directoryItems,
    resetKey: currentPath,
  })

  // Load recent projects, excluding the home directory
  const recentProjects = useMemo(() => {
    const homeDir = os.homedir()
    return loadRecentProjects().filter((project) => project.path !== homeDir)
  }, [])

  // Use the terminal layout hook for responsive breakpoints
  const { terminalWidth, terminalHeight } = useTerminalLayout()
  const contentMaxWidth = Math.min(
    terminalWidth - LAYOUT.CONTENT_PADDING,
    LAYOUT.MAX_CONTENT_WIDTH,
  )
  const contentWidth = Math.min(LAYOUT.PREFERRED_CONTENT_WIDTH, contentMaxWidth)

  // Compact mode: remove padding/margins when space is tight
  const isCompactMode = terminalHeight < LAYOUT.COMPACT_MODE_THRESHOLD