@yancyyu/openhermit 1.5.8

package/src/renderer/components/extensions/common/InstallButton.tsx

@@ -0,0 +1,186 @@
+/**
+ * InstallButton — animated install/uninstall button for extensions.
+ * States: idle → pending (spinner) → success (checkmark, 2s) → idle
+ */
+
+import { useEffect, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@renderer/components/ui/tooltip';
+import { useStore } from '@renderer/store';
+import { getExtensionActionDisableReason } from '@shared/utils/extensionNormalizers';
+import { Check, Loader2, Trash2 } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { CliInstallationStatus } from '@shared/types';
+import type { ExtensionOperationState } from '@shared/types/extensions';
+
+interface InstallButtonProps {
+  state: ExtensionOperationState;
+  isInstalled: boolean;
+  onInstall: () => void;
+  onUninstall: () => void;
+  section?: 'plugins' | 'mcp';
+  disabled?: boolean;
+  size?: 'sm' | 'default';
+  errorMessage?: string;
+  cliStatus?: Pick<
+    CliInstallationStatus,
+    'installed' | 'authLoggedIn' | 'binaryPath' | 'launchError' | 'flavor' | 'providers'
+  > | null;
+  cliStatusLoading?: boolean;
+}
+
+export const InstallButton = ({
+  state,
+  isInstalled,
+  onInstall,
+  onUninstall,
+  section = 'plugins',
+  disabled,
+  size = 'sm',
+  errorMessage,
+  cliStatus: cliStatusOverride,
+  cliStatusLoading: cliStatusLoadingOverride,
+}: InstallButtonProps) => {
+  const { cliStatus: storedCliStatus, cliStatusLoading: storedCliStatusLoading } = useStore(
+    useShallow((s) => ({
+      cliStatus: s.cliStatus,
+      cliStatusLoading: s.cliStatusLoading,
+    }))
+  );
+  const cliStatus = cliStatusOverride ?? storedCliStatus;
+  const cliStatusLoading = cliStatusLoadingOverride ?? storedCliStatusLoading;
+  const disableReason = getExtensionActionDisableReason({
+    isInstalled,
+    cliStatus,
+    cliStatusLoading,
+    section,
+  });
+  const isDisabled = disabled || Boolean(disableReason);
+  const [lastAction, setLastAction] = useState<'install' | 'uninstall' | null>(null);
+
+  useEffect(() => {
+    if (state === 'idle' || state === 'success') {
+      setLastAction(null);
+    }
+  }, [state]);
+
+  const pendingAction = lastAction ?? (isInstalled ? 'uninstall' : 'install');
+  if (state === 'pending') {
+    return (
+      <Button size={size} variant="outline" disabled>
+        <Loader2 className="size-3.5 animate-spin" />
+        <span className="ml-1.5">
+          {pendingAction === 'uninstall' ? '正在移除...' : '正在安装...'}
+        </span>
+      </Button>
+    );
+  }
+
+  if (state === 'success') {
+    return (
+      <Button size={size} variant="outline" disabled className="text-green-400">
+        <Check className="size-3.5" />
+        <span className="ml-1.5">完成</span>
+      </Button>
+    );
+  }
+
+  if (state === 'error') {
+    const retryButton = (
+      <Button
+        size={size}
+        variant="outline"
+        className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+        onClick={(e) => {
+          e.stopPropagation();
+          if (pendingAction === 'uninstall') {
+            setLastAction('uninstall');
+            onUninstall();
+            return;
+          }
+
+          setLastAction('install');
+          onInstall();
+        }}
+        disabled={isDisabled}
+      >
+        <span>重试</span>
+      </Button>
+    );
+
+    const tooltipMessage = disableReason ?? errorMessage;
+
+    if (tooltipMessage) {
+      return (
+        <div className="flex max-w-64 flex-col items-end gap-1">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span tabIndex={0}>{retryButton}</span>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-64 text-red-300">{tooltipMessage}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          {errorMessage && !disableReason ? (
+            <p className="text-right text-[11px] leading-4 text-red-300">{errorMessage}</p>
+          ) : null}
+        </div>
+      );
+    }
+
+    return retryButton;
+  }
+
+  // idle — wrap in tooltip when install is unavailable
+  const button = isInstalled ? (
+    <Button
+      size={size}
+      variant="outline"
+      className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+      onClick={(e) => {
+        e.stopPropagation();
+        setLastAction('uninstall');
+        onUninstall();
+      }}
+      disabled={isDisabled}
+    >
+      <Trash2 className="size-3.5" />
+      <span className="ml-1.5">卸载</span>
+    </Button>
+  ) : (
+    <Button
+      size={size}
+      variant="default"
+      onClick={(e) => {
+        e.stopPropagation();
+        setLastAction('install');
+        onInstall();
+      }}
+      disabled={isDisabled}
+    >
+      安装
+    </Button>
+  );
+
+  if (disableReason) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span tabIndex={0}>{button}</span>
+          </TooltipTrigger>
+          <TooltipContent className="max-w-64">{disableReason}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};

package/src/renderer/components/extensions/common/InstallCountBadge.tsx

@@ -0,0 +1,21 @@
+/**
+ * InstallCountBadge — formatted download count with icon.
+ */
+
+import { formatInstallCount } from '@shared/utils/extensionNormalizers';
+import { Download } from 'lucide-react';
+
+interface InstallCountBadgeProps {
+  count: number;
+}
+
+export const InstallCountBadge = ({ count }: InstallCountBadgeProps): React.JSX.Element | null => {
+  if (count <= 0) return null;
+
+  return (
+    <span className="inline-flex items-center gap-1 text-xs text-text-muted">
+      <Download className="size-3" />
+      {formatInstallCount(count)}
+    </span>
+  );
+};

package/src/renderer/components/extensions/common/SearchInput.tsx

@@ -0,0 +1,70 @@
+/**
+ * SearchInput — debounced search input with clear button.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { Input } from '@renderer/components/ui/input';
+import { Search, X } from 'lucide-react';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  debounceMs?: number;
+}
+
+export const SearchInput = ({
+  value,
+  onChange,
+  placeholder = 'Search...',
+  debounceMs,
+}: SearchInputProps): React.JSX.Element => {
+  const [localValue, setLocalValue] = useState(value);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const handleChange = (next: string) => {
+    setLocalValue(next);
+    if (debounceMs && debounceMs > 0) {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => onChange(next), debounceMs);
+    } else {
+      onChange(next);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-muted" />
+      <Input
+        type="text"
+        value={localValue}
+        onChange={(e) => handleChange(e.target.value)}
+        placeholder={placeholder}
+        className="pl-9 pr-8"
+      />
+      {localValue && (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => handleChange('')}
+          className="absolute right-1 top-1/2 size-7 -translate-y-1/2"
+        >
+          <X className="size-3.5" />
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/extensions/common/SourceBadge.tsx

@@ -0,0 +1,31 @@
+/**
+ * SourceBadge — displays the source of a catalog item.
+ */
+
+import { Badge } from '@renderer/components/ui/badge';
+
+interface SourceBadgeProps {
+  source: 'official' | 'glama' | string;
+}
+
+export const SourceBadge = ({ source }: SourceBadgeProps): React.JSX.Element => {
+  if (source === 'official') {
+    return (
+      <Badge className="border-blue-500/30 bg-blue-500/10 text-blue-400" variant="outline">
+        Official
+      </Badge>
+    );
+  }
+  if (source === 'glama') {
+    return (
+      <Badge className="border-zinc-500/30 bg-zinc-500/10 text-zinc-400" variant="outline">
+        Glama
+      </Badge>
+    );
+  }
+  return (
+    <Badge className="border-orange-500/30 bg-orange-500/10 text-orange-400" variant="outline">
+      Community
+    </Badge>
+  );
+};