Function PluginsPage

client-next/src/app/plugins/page.tsx:19–137

()

import { PresetsManager } from "@/components/presets-manager";

export default function PluginsPage() {
  const { plugins, loading, refreshData, togglePlugin } = useApp();
  const router = useRouter();
  const [search, setSearch] = useState("");
  const [activeGPlugin, setActiveGPlugin] = useState<string | null>(null);

  useEffect(() => {
    getActiveGooglePlugin().then(res => setActiveGPlugin(res.activePlugin)).catch(() => {});
  }, []);

  const filteredPlugins = useMemo(() => {
    if (!search.trim()) return plugins;
    const q = search.toLowerCase();
    return plugins.filter(p => p.name.toLowerCase().includes(q));
  }, [plugins, search]);

  const handleOpen = (name: string, type: 'file' | 'npm') => {
    if (type === 'npm') return;
    router.push(`/editor?type=plugins&name=${encodeURIComponent(name)}`);
  };

  const handleToggle = async (name: string) => {
    try {
      await togglePlugin(name);
      const plugin = plugins.find(p => p.name === name);
      toast.success(`${name} ${plugin?.enabled ? "disabled" : "enabled"}`);
    } catch (err: any) {
      const msg = err.response?.data?.error || err.message || "Unknown error";
      toast.error(`Failed to toggle plugin: ${msg}`);
    }
  };

  const handleDelete = async (name: string, type: 'file' | 'npm') => {
    if (!confirm(`Delete ${name}?`)) return;
    try {
      if (type === 'npm') {
        await deletePluginFromConfig(name);
      } else {
        await deletePlugin(name);
      }
      toast.success(`${name} deleted`);
      refreshData();
    } catch (err: any) {
      const msg = err.response?.data?.error || err.message || "Unknown error";
      toast.error(`Failed to delete plugin: ${msg}`);
    }
  };

  if (loading) {
    return (
      <div className="space-y-4">
        <div className="flex justify-between items-center">
<PageHelp title="Plugins" docUrl="https://opencode.ai/docs/plugins" docTitle="Plugins Documentation" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <Skeleton key={i} className="h-16" />
          ))}