import { useState } from "react"; import { useTranslation } from "react-i18next"; import { IconSettings } from "@tabler/icons-react"; import { Button } from "@/shared/ui/button"; import { Switch } from "@/shared/ui/switch"; import { getDisplayName, type ExtensionEntry } from "../types"; interface ExtensionItemProps { extension: ExtensionEntry; onToggle: (extension: ExtensionEntry) => Promise; onConfigure?: (extension: ExtensionEntry) => void; } function getSubtitle(ext: ExtensionEntry): string { if (ext.description) return ext.description; if (ext.type === "stdio") return ext.cmd; if (ext.type === "streamable_http") return ext.uri; return ext.type; } const EDITABLE_TYPES = new Set(["stdio", "streamable_http"]); function isEditable(ext: ExtensionEntry): boolean { return EDITABLE_TYPES.has(ext.type) && !ext.bundled; } export function ExtensionItem({ extension, onToggle, onConfigure, }: ExtensionItemProps) { const { t } = useTranslation("settings"); const [isToggling, setIsToggling] = useState(false); const [visualEnabled, setVisualEnabled] = useState(extension.enabled); const handleToggle = async () => { if (isToggling) return; setIsToggling(true); setVisualEnabled(!extension.enabled); try { await onToggle(extension); } catch { setVisualEnabled(extension.enabled); } finally { setIsToggling(false); } }; const editable = isEditable(extension); const checked = isToggling ? visualEnabled : extension.enabled; const displayName = getDisplayName(extension); return (

{displayName} {t(`extensions.types.${extension.type}`, { defaultValue: extension.type, })}

{getSubtitle(extension)}

{editable && onConfigure && ( )}

); }