@yancyyu/openhermit 1.5.8

package/src/renderer/components/common/RepositoryDropdown.tsx

@@ -0,0 +1,230 @@
+/**
+ * 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 = '选择仓库...',
+  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 ? '暂无可用仓库' : 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="移除仓库"
+      >
+        <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);