agent-ecosystem/src/renderer/components/common/RepositoryDropdown.tsx

/**
 * RepositoryDropdown - Dropdown for selecting repository groups.
 *
 * Features:
 * - Shows repository groups (not individual worktrees)
 * - Displays worktree count and total sessions
 * - Click outside to close
 * - Keyboard navigation (Escape to close)
 * - Filter out already selected items
 */

import React, { useEffect, useMemo, useRef, useState } from 'react';

import { useStore } from '@renderer/store';
import { ChevronDown, FolderOpen, GitBranch } from 'lucide-react';

import type { RepositoryDropdownItem } from '@renderer/components/settings/hooks/useSettingsConfig';

interface RepositoryDropdownProps {
  /** Callback when a repository is selected */
  onSelect: (item: RepositoryDropdownItem) => void;
  /** IDs of items to exclude from the list */
  excludeIds?: string[];
  /** Placeholder text */
  placeholder?: string;
  /** Whether the dropdown is disabled */
  disabled?: boolean;
  /** Whether to drop up instead of down */
  dropUp?: boolean;
  /** Custom class for the container */
  className?: string;
}

export const RepositoryDropdown = ({
  onSelect,
  excludeIds = [],
  placeholder = 'Select repository...',
  disabled = false,
  dropUp = false,
  className = '',
}: Readonly<RepositoryDropdownProps>): React.JSX.Element => {
  const [isOpen, setIsOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  // Get repository groups from store
  const repositoryGroups = useStore((state) => state.repositoryGroups);
  const fetchRepositoryGroups = useStore((state) => state.fetchRepositoryGroups);

  // Fetch data if not loaded
  useEffect(() => {
    if (repositoryGroups.length === 0) {
      void fetchRepositoryGroups();
    }
  }, [repositoryGroups.length, fetchRepositoryGroups]);

  // Convert repository groups to dropdown items
  const allItems = useMemo((): RepositoryDropdownItem[] => {
    return repositoryGroups.map((group) => ({
      id: group.id,
      name: group.name,
      path: group.worktrees[0]?.path ?? '',
      worktreeCount: group.worktrees.length,
      totalSessions: group.totalSessions,
    }));
  }, [repositoryGroups]);

  // Filter out excluded items
  const availableItems = useMemo(() => {
    return allItems.filter((item) => !excludeIds.includes(item.id));
  }, [allItems, excludeIds]);

  // Close dropdown on outside click
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent): void => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => document.removeEventListener('mousedown', handleClickOutside);
    }
  }, [isOpen]);

  // Close on escape
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent): void => {
      if (event.key === 'Escape') {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      return () => document.removeEventListener('keydown', handleEscape);
    }
  }, [isOpen]);

  const handleSelect = (item: RepositoryDropdownItem): void => {
    onSelect(item);
    setIsOpen(false);
  };

  const isEmpty = availableItems.length === 0;

  return (
    <div ref={containerRef} className={`relative ${className}`}>
      {/* Trigger Button */}
      <button
        type="button"
        onClick={() => !disabled && !isEmpty && setIsOpen(!isOpen)}
        disabled={disabled || isEmpty}
        className={`flex w-full items-center justify-between gap-2 rounded border border-border bg-transparent px-2 py-1.5 text-xs text-text-secondary transition-colors hover:bg-surface-raised ${disabled || isEmpty ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} `}
      >
        <span className="flex items-center gap-2">
          <FolderOpen className="size-3" />
          {isEmpty ? 'No repositories available' : placeholder}
        </span>
        <ChevronDown
          className={`size-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
        />
      </button>

      {/* Dropdown Menu */}
      {isOpen && !isEmpty && (
        <div
          className={`absolute inset-x-0 z-50 max-h-64 overflow-y-auto rounded border border-border bg-surface-overlay py-1 shadow-lg ${dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} `}
        >
          {availableItems.map((item) => (
            <RepositoryDropdownItemComponent
              key={item.id}
              item={item}
              onSelect={() => handleSelect(item)}
            />
          ))}
        </div>
      )}
    </div>
  );
};

/**
 * Individual item in the dropdown.
 */
const RepositoryDropdownItemComponentInner = ({
  item,
  onSelect,
}: Readonly<{
  item: RepositoryDropdownItem;
  onSelect: () => void;
}>): React.JSX.Element => {
  return (
    <button
      type="button"
      onClick={onSelect}
      className="flex w-full items-center gap-2 px-2 py-1.5 text-left transition-colors hover:bg-surface-raised"
    >
      <FolderOpen className="size-3 shrink-0 text-indigo-400" />
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-1.5">
          <span className="truncate text-xs text-text">{item.name}</span>
          {item.worktreeCount > 1 && (
            <span className="flex shrink-0 items-center gap-0.5 rounded bg-surface-raised px-1 py-0.5 text-[10px] text-text-muted">
              <GitBranch className="size-2.5" />
              {item.worktreeCount}
            </span>
          )}
          <span className="shrink-0 text-[10px] text-text-muted">
            {item.totalSessions} session{item.totalSessions !== 1 ? 's' : ''}
          </span>
        </div>
        <span className="block truncate text-[10px] text-text-muted">{item.path}</span>
      </div>
    </button>
  );
};

const RepositoryDropdownItemComponent = React.memo(RepositoryDropdownItemComponentInner);

/**
 * Selected repository item with remove button.
 */
const SelectedRepositoryItemInner = ({
  item,
  onRemove,
  disabled = false,
}: Readonly<{
  item: RepositoryDropdownItem;
  onRemove: () => void;
  disabled?: boolean;
}>): React.JSX.Element => {
  return (
    <div className="flex items-center gap-2 border-b border-border-subtle py-1.5">
      <FolderOpen className="size-3 shrink-0 text-indigo-400" />
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-1.5">
          <span className="truncate text-xs text-text">{item.name}</span>
          {item.worktreeCount > 1 && (
            <span className="flex shrink-0 items-center gap-0.5 rounded bg-surface-raised px-1 py-0.5 text-[10px] text-text-muted">
              <GitBranch className="size-2.5" />
              {item.worktreeCount}
            </span>
          )}
        </div>
        <span className="truncate text-[10px] text-text-muted" title={item.path}>
          {item.path}
        </span>
      </div>
      <button
        type="button"
        onClick={onRemove}
        disabled={disabled}
        className={`shrink-0 rounded p-1 text-text-muted transition-colors hover:bg-red-500/10 hover:text-red-400 ${disabled ? 'cursor-not-allowed opacity-50' : ''} `}
        aria-label="Remove repository"
      >
        <svg className="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>
  );
};

export const SelectedRepositoryItem = React.memo(SelectedRepositoryItemInner);