mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-28 06:05:24 +00:00
1389 lines
40 KiB
TypeScript
1389 lines
40 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
ArrowDownWideNarrow,
|
|
Check,
|
|
Columns3,
|
|
Download,
|
|
Globe,
|
|
Library,
|
|
Puzzle,
|
|
RefreshCw,
|
|
RotateCcw,
|
|
Search,
|
|
Trash2,
|
|
TriangleAlert,
|
|
Upload,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/button";
|
|
import { Card } from "@/components/card";
|
|
import { Input } from "@/components/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/select";
|
|
import { EmptyState } from "@/components/empty-state";
|
|
import { TabStrip } from "@/components/tab-strip";
|
|
import { FakeSwitch } from "@/components/section-card";
|
|
import {
|
|
Facts,
|
|
GroupHeading,
|
|
PANEL,
|
|
PanelShell,
|
|
ViewToggle,
|
|
type PanelViewMode,
|
|
} from "@/components/panel-layout";
|
|
import { DataView, type DataColumn } from "@/components/data-view";
|
|
import { InlineView, SurfaceScope } from "@/components/surface/surface-scope";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
BetaBadge,
|
|
DownloadCount,
|
|
PluginIconBox,
|
|
SourceBadge,
|
|
UnverifiedBadge,
|
|
} from "./plugin-bits";
|
|
import { RegistriesSection } from "./RegistriesSection";
|
|
import { PluginConsentPrompt } from "./PluginConsentPrompt";
|
|
import { PluginDetail } from "./PluginDetail";
|
|
import {
|
|
categoriesOf,
|
|
describeContributions,
|
|
isSevere,
|
|
matchesQuery,
|
|
orderByRisk,
|
|
sortPlugins,
|
|
type PluginEntry,
|
|
type SortKey,
|
|
} from "./plugin-model";
|
|
import { usePluginsManager, type PluginsManager } from "./use-plugins-manager";
|
|
import { docsUrl } from "@/lib/docs";
|
|
import { DocsLink } from "@/components/docs-link";
|
|
|
|
type Section = "installed" | "browse" | "updates" | "registries";
|
|
|
|
const GRID_SIZES = ["auto", "2", "3", "4", "5", "6"] as const;
|
|
type GridSize = (typeof GRID_SIZES)[number];
|
|
|
|
interface Layout {
|
|
view: PanelViewMode;
|
|
columns: GridSize;
|
|
}
|
|
|
|
function useStoredChoice<T extends string>(
|
|
key: string,
|
|
allowed: readonly T[],
|
|
fallback: T,
|
|
) {
|
|
const [value, setValue] = useState<T>(() => {
|
|
try {
|
|
const saved = localStorage.getItem(key);
|
|
return allowed.includes(saved as T) ? (saved as T) : fallback;
|
|
} catch {
|
|
return fallback;
|
|
}
|
|
});
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem(key, value);
|
|
} catch {
|
|
// blocked storage just means the choice won't stick
|
|
}
|
|
}, [key, value]);
|
|
return [value, setValue] as const;
|
|
}
|
|
|
|
export function PluginsTab() {
|
|
return (
|
|
<SurfaceScope kind="tab" className="h-full min-h-0">
|
|
<PluginsTabBody />
|
|
</SurfaceScope>
|
|
);
|
|
}
|
|
|
|
function PluginsTabBody() {
|
|
const { t } = useTranslation();
|
|
const manager = usePluginsManager();
|
|
const [section, setSection] = useState<Section>("installed");
|
|
const [query, setQuery] = useState("");
|
|
const [detailId, setDetailId] = useState<string | null>(null);
|
|
const [view, setView] = useStoredChoice<PanelViewMode>(
|
|
"pluginsTab.view",
|
|
["grid", "list"],
|
|
"grid",
|
|
);
|
|
const [columns, setColumns] = useStoredChoice<GridSize>(
|
|
"pluginsTab.columns",
|
|
GRID_SIZES,
|
|
"auto",
|
|
);
|
|
const layout: Layout = { view, columns };
|
|
const layoutControls = (
|
|
<LayoutControls layout={layout} onView={setView} onColumns={setColumns} />
|
|
);
|
|
|
|
const installed = manager.plugins.filter((p) => p.installed);
|
|
const available = manager.plugins.filter((p) => p.inRegistry);
|
|
const updates = installed.filter((p) => p.updateAvailable);
|
|
const running = installed.filter((p) => p.status === "running").length;
|
|
const detail = manager.plugins.find((p) => p.id === detailId) ?? null;
|
|
|
|
const tabs = [
|
|
{
|
|
id: "installed",
|
|
label: t("plugins.manager.tabs.installed"),
|
|
icon: <Puzzle className="size-3" />,
|
|
count: installed.length,
|
|
},
|
|
{
|
|
id: "browse",
|
|
label: t("plugins.manager.tabs.browse"),
|
|
icon: <Globe className="size-3" />,
|
|
},
|
|
{
|
|
id: "updates",
|
|
label: t("plugins.manager.tabs.updates"),
|
|
icon: <Download className="size-3" />,
|
|
count: updates.filter((p) => !p.pinnedVersion).length || undefined,
|
|
},
|
|
{
|
|
id: "registries",
|
|
label: t("plugins.manager.tabs.registries"),
|
|
icon: <Library className="size-3" />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<PanelShell
|
|
icon={<Puzzle className="size-4" />}
|
|
title={t("nav.plugins")}
|
|
docs={docsUrl("plugins")}
|
|
status={t("plugins.manager.status.summary", {
|
|
installed: installed.length,
|
|
running,
|
|
})}
|
|
scroll={false}
|
|
actions={
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
title={t("plugins.manager.checkRegistry")}
|
|
aria-label={t("plugins.manager.checkRegistry")}
|
|
disabled={manager.refreshing}
|
|
onClick={() => void manager.refresh()}
|
|
className="text-muted-foreground"
|
|
>
|
|
<RefreshCw
|
|
className={cn("size-3.5", manager.refreshing && "animate-spin")}
|
|
/>
|
|
</Button>
|
|
}
|
|
tabs={
|
|
<TabStrip
|
|
tabs={tabs}
|
|
activeTab={section}
|
|
onTabChange={(id) => setSection(id as Section)}
|
|
/>
|
|
}
|
|
>
|
|
<div className="min-h-0 flex-1 overflow-y-auto thin-scrollbar">
|
|
{manager.managedByServer && (
|
|
<Notice>{t("plugins.manager.managedByServer")}</Notice>
|
|
)}
|
|
{manager.registryError && (
|
|
<Notice>
|
|
{t("plugins.manager.registryUnreachable", {
|
|
error: manager.registryError,
|
|
})}
|
|
</Notice>
|
|
)}
|
|
{manager.loading ? (
|
|
<div className={PANEL.body}>
|
|
<EmptyState icon={Puzzle} title={t("plugins.manager.loading")} />
|
|
</div>
|
|
) : section === "installed" ? (
|
|
<InstalledSection
|
|
plugins={installed}
|
|
manager={manager}
|
|
query={query}
|
|
onQuery={setQuery}
|
|
onOpen={setDetailId}
|
|
layout={layout}
|
|
layoutControls={layoutControls}
|
|
/>
|
|
) : section === "browse" ? (
|
|
<BrowseSection
|
|
plugins={available}
|
|
manager={manager}
|
|
query={query}
|
|
onQuery={setQuery}
|
|
onOpen={setDetailId}
|
|
layout={layout}
|
|
layoutControls={layoutControls}
|
|
/>
|
|
) : section === "updates" ? (
|
|
<UpdatesSection
|
|
plugins={updates}
|
|
manager={manager}
|
|
onOpen={setDetailId}
|
|
/>
|
|
) : (
|
|
<RegistriesSection manager={manager} />
|
|
)}
|
|
</div>
|
|
</PanelShell>
|
|
|
|
<InlineView
|
|
open={!!detail}
|
|
onOpenChange={(open) => !open && setDetailId(null)}
|
|
title={detail?.name ?? ""}
|
|
icon={<Puzzle className="size-4" />}
|
|
width="wide"
|
|
bare
|
|
>
|
|
{detail && (
|
|
<PluginDetail
|
|
plugin={detail}
|
|
manager={manager}
|
|
onUninstalled={() => setDetailId(null)}
|
|
/>
|
|
)}
|
|
</InlineView>
|
|
|
|
<PluginConsentPrompt
|
|
request={manager.consent}
|
|
onCancel={() => manager.setConsent(null)}
|
|
onConfirm={() => void manager.confirmConsent()}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Notice({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex items-start gap-2 border-b border-warning/30 bg-warning/5 px-3 py-2">
|
|
<TriangleAlert className="mt-px size-3.5 shrink-0 text-warning" />
|
|
<span className="text-[11px] leading-snug text-muted-foreground">
|
|
{children}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SortSelect({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: SortKey;
|
|
onChange: (next: SortKey) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const keys: SortKey[] = ["popular", "name", "updated", "category"];
|
|
return (
|
|
<Select value={value} onValueChange={(v) => onChange(v as SortKey)}>
|
|
<SelectTrigger size="sm" className="w-auto gap-1.5 text-xs">
|
|
<ArrowDownWideNarrow className="size-3.5 text-muted-foreground" />
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{keys.map((key) => (
|
|
<SelectItem key={key} value={key} className="text-xs">
|
|
{t(`plugins.manager.sort.${key}`)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|
|
|
|
function Toolbar({
|
|
query,
|
|
onQuery,
|
|
placeholder,
|
|
children,
|
|
}: {
|
|
query: string;
|
|
onQuery: (v: string) => void;
|
|
placeholder: string;
|
|
children?: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="relative min-w-40 max-w-xs flex-1">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={query}
|
|
onChange={(e) => onQuery(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="h-8 pl-8 text-xs"
|
|
/>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Group({
|
|
title,
|
|
count,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
count: number;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<section className="flex flex-col gap-2.5">
|
|
<GroupHeading title={title} count={count} />
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function LayoutControls({
|
|
layout,
|
|
onView,
|
|
onColumns,
|
|
}: {
|
|
layout: Layout;
|
|
onView: (next: PanelViewMode) => void;
|
|
onColumns: (next: GridSize) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<>
|
|
{layout.view === "grid" && (
|
|
<Select
|
|
value={layout.columns}
|
|
onValueChange={(v) => onColumns(v as GridSize)}
|
|
>
|
|
<SelectTrigger
|
|
size="sm"
|
|
className="w-auto gap-1.5 text-xs"
|
|
title={t("plugins.manager.columns.title")}
|
|
aria-label={t("plugins.manager.columns.title")}
|
|
>
|
|
<Columns3 className="size-3.5 text-muted-foreground" />
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{GRID_SIZES.map((size) => (
|
|
<SelectItem key={size} value={size} className="text-xs">
|
|
{size === "auto"
|
|
? t("plugins.manager.columns.auto")
|
|
: t("plugins.manager.columns.count", { count: Number(size) })}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
<ViewToggle view={layout.view} onView={onView} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Sized off the tab's own width, not the window. Cards keep a min width,
|
|
// so narrow panes drop columns on their own.
|
|
function gridStyle(columns: GridSize): React.CSSProperties {
|
|
if (columns === "auto") {
|
|
return {
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 400px), 1fr))",
|
|
};
|
|
}
|
|
const n = Number(columns);
|
|
const gaps = (n - 1) * 12;
|
|
return {
|
|
gridTemplateColumns: `repeat(auto-fill, minmax(max(220px, calc((100% - ${gaps}px) / ${n} - 0.5px)), 1fr))`,
|
|
};
|
|
}
|
|
|
|
function PluginCollection({
|
|
plugins,
|
|
layout,
|
|
renderCard,
|
|
listColumns,
|
|
onOpen,
|
|
}: {
|
|
plugins: PluginEntry[];
|
|
layout: Layout;
|
|
renderCard: (plugin: PluginEntry) => React.ReactNode;
|
|
listColumns: DataColumn<PluginEntry>[];
|
|
onOpen: (id: string) => void;
|
|
}) {
|
|
if (layout.view === "list") {
|
|
return (
|
|
<DataView
|
|
items={plugins}
|
|
view="list"
|
|
getKey={(p) => p.id}
|
|
renderCard={renderCard}
|
|
columns={{}}
|
|
listColumns={listColumns}
|
|
onRowClick={(p) => onOpen(p.id)}
|
|
empty={null}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<div className="grid gap-3" style={gridStyle(layout.columns)}>
|
|
{plugins.map((p) => (
|
|
<div key={p.id} className="flex flex-col *:flex-1">
|
|
{renderCard(p)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NameCell({ plugin, muted }: { plugin: PluginEntry; muted?: boolean }) {
|
|
return (
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<PluginIconBox name={plugin.icon} size="sm" muted={muted} />
|
|
<span
|
|
className={cn(
|
|
"truncate font-semibold",
|
|
muted && "text-muted-foreground",
|
|
)}
|
|
>
|
|
{plugin.name}
|
|
</span>
|
|
{plugin.unverified && <UnverifiedBadge />}
|
|
<SourceBadge source={plugin.source} registryName={plugin.registryName} />
|
|
{plugin.isBeta && <BetaBadge />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DescriptionCell({ plugin }: { plugin: PluginEntry }) {
|
|
return (
|
|
<span className="text-muted-foreground" title={plugin.description}>
|
|
{plugin.description}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function stop(e: React.MouseEvent) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
function InstalledSection({
|
|
plugins,
|
|
manager,
|
|
query,
|
|
onQuery,
|
|
onOpen,
|
|
layout,
|
|
layoutControls,
|
|
}: {
|
|
plugins: PluginEntry[];
|
|
manager: PluginsManager;
|
|
query: string;
|
|
onQuery: (v: string) => void;
|
|
onOpen: (id: string) => void;
|
|
layout: Layout;
|
|
layoutControls: React.ReactNode;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [sort, setSort] = useState<SortKey>("name");
|
|
const rows = sortPlugins(
|
|
plugins.filter((p) => matchesQuery(p, query)),
|
|
sort,
|
|
);
|
|
const running = rows.filter((p) => p.status === "running");
|
|
const onServer = rows.filter((p) => p.status === "server");
|
|
const stopped = rows.filter(
|
|
(p) => p.status !== "running" && p.status !== "server",
|
|
);
|
|
const pending = plugins.filter((p) => p.updateAvailable && !p.pinnedVersion);
|
|
|
|
const listColumns: DataColumn<PluginEntry>[] = [
|
|
{
|
|
key: "name",
|
|
header: t("plugins.manager.table.name"),
|
|
width: "minmax(0,1.3fr)",
|
|
cell: (p) => <NameCell plugin={p} muted={p.status !== "running"} />,
|
|
},
|
|
{
|
|
key: "description",
|
|
header: t("plugins.manager.table.description"),
|
|
width: "minmax(0,2fr)",
|
|
hideBelow: "md",
|
|
cell: (p) => <DescriptionCell plugin={p} />,
|
|
},
|
|
{
|
|
key: "version",
|
|
header: t("plugins.manager.table.version"),
|
|
width: "80px",
|
|
cell: (p) => (
|
|
<span className="tabular-nums text-muted-foreground">v{p.version}</span>
|
|
),
|
|
},
|
|
{
|
|
key: "status",
|
|
header: t("plugins.manager.table.status"),
|
|
width: "140px",
|
|
hideBelow: "lg",
|
|
cell: (p) => <StatusCell plugin={p} />,
|
|
},
|
|
{
|
|
key: "actions",
|
|
header: "",
|
|
width: "150px",
|
|
align: "end",
|
|
cell: (p) => <InstalledRowActions plugin={p} manager={manager} />,
|
|
},
|
|
];
|
|
const collection = (items: PluginEntry[]) => (
|
|
<PluginCollection
|
|
plugins={items}
|
|
layout={layout}
|
|
renderCard={(p) => (
|
|
<InstalledCard
|
|
plugin={p}
|
|
manager={manager}
|
|
onOpen={() => onOpen(p.id)}
|
|
/>
|
|
)}
|
|
listColumns={listColumns}
|
|
onOpen={onOpen}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div className={`flex flex-col ${PANEL.gap} ${PANEL.body}`}>
|
|
<Toolbar
|
|
query={query}
|
|
onQuery={onQuery}
|
|
placeholder={t("plugins.manager.searchInstalled")}
|
|
>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<SortSelect value={sort} onChange={setSort} />
|
|
{layoutControls}
|
|
{manager.developerMode && !manager.signedOnly && (
|
|
<UploadButton manager={manager} />
|
|
)}
|
|
<Button
|
|
variant="outline"
|
|
className="gap-1.5"
|
|
disabled={
|
|
pending.length === 0 ||
|
|
manager.busy.size > 0 ||
|
|
manager.managedByServer
|
|
}
|
|
onClick={() => void manager.updateAll()}
|
|
>
|
|
<Download className="size-3.5" />
|
|
{t("plugins.manager.updateAll")}
|
|
</Button>
|
|
</div>
|
|
</Toolbar>
|
|
|
|
{rows.length === 0 ? (
|
|
<EmptyState
|
|
icon={Puzzle}
|
|
title={
|
|
plugins.length === 0
|
|
? t("plugins.manager.noneInstalled")
|
|
: t("plugins.manager.nothingMatches")
|
|
}
|
|
/>
|
|
) : (
|
|
<>
|
|
{running.length > 0 && (
|
|
<Group
|
|
title={t("plugins.manager.groups.running")}
|
|
count={running.length}
|
|
>
|
|
{collection(running)}
|
|
</Group>
|
|
)}
|
|
{onServer.length > 0 && (
|
|
<Group
|
|
title={t("plugins.manager.groups.onServer")}
|
|
count={onServer.length}
|
|
>
|
|
{collection(onServer)}
|
|
</Group>
|
|
)}
|
|
{stopped.length > 0 && (
|
|
<Group
|
|
title={t("plugins.manager.groups.notRunning")}
|
|
count={stopped.length}
|
|
>
|
|
{collection(stopped)}
|
|
</Group>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function UploadButton({ manager }: { manager: PluginsManager }) {
|
|
const { t } = useTranslation();
|
|
const input = useRef<HTMLInputElement>(null);
|
|
return (
|
|
<>
|
|
<input
|
|
ref={input}
|
|
type="file"
|
|
accept=".tmxplug"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
e.target.value = "";
|
|
if (file) void manager.requestUpload(file);
|
|
}}
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
className="gap-1.5"
|
|
disabled={manager.busy.size > 0 || manager.managedByServer}
|
|
onClick={() => input.current?.click()}
|
|
>
|
|
<Upload className="size-3.5" />
|
|
{t("plugins.manager.developer.installFromFile")}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function CardHead({
|
|
plugin,
|
|
muted,
|
|
facts,
|
|
onOpen,
|
|
}: {
|
|
plugin: PluginEntry;
|
|
muted?: boolean;
|
|
facts: React.ReactNode;
|
|
onOpen: () => void;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onOpen}
|
|
className="group/open flex flex-1 items-start gap-3 p-3 text-left"
|
|
>
|
|
<PluginIconBox name={plugin.icon} muted={muted} />
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
|
<span
|
|
className={cn(
|
|
"truncate text-sm font-semibold transition-colors group-hover/open:text-accent-brand",
|
|
muted && "text-muted-foreground",
|
|
)}
|
|
>
|
|
{plugin.name}
|
|
</span>
|
|
<span className="line-clamp-2 text-[11px] leading-snug text-muted-foreground">
|
|
{plugin.description}
|
|
</span>
|
|
<Facts className="text-[10px] text-muted-foreground/70">{facts}</Facts>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function InstalledCard({
|
|
plugin,
|
|
manager,
|
|
onOpen,
|
|
}: {
|
|
plugin: PluginEntry;
|
|
manager: PluginsManager;
|
|
onOpen: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const running = plugin.status === "running";
|
|
const failed = plugin.status === "failed" || plugin.status === "blocked";
|
|
const busy = manager.busy.has(plugin.id) || manager.busy.has("*");
|
|
const locked = manager.managedByServer;
|
|
const adds = describeContributions(plugin.contributes)
|
|
.slice(0, 3)
|
|
.map((c) => t(`plugins.manager.contributes.${c.kind}`, { count: c.count }));
|
|
|
|
return (
|
|
<Card className="gap-0 overflow-hidden py-0">
|
|
<CardHead
|
|
plugin={plugin}
|
|
muted={!running}
|
|
onOpen={onOpen}
|
|
facts={
|
|
<>
|
|
{plugin.unverified && <UnverifiedBadge />}
|
|
<SourceBadge
|
|
source={plugin.source}
|
|
registryName={plugin.registryName}
|
|
/>
|
|
{plugin.isBeta && <BetaBadge />}
|
|
{plugin.author && <span>{plugin.author}</span>}
|
|
<span>v{plugin.version}</span>
|
|
{adds.length > 0 && <span>{adds.join(", ")}</span>}
|
|
</>
|
|
}
|
|
/>
|
|
|
|
{failed ? (
|
|
<div className="flex items-center gap-2 border-t border-border bg-destructive/5 px-3 py-2">
|
|
<TriangleAlert className="size-3.5 shrink-0 text-destructive" />
|
|
<span
|
|
className="flex-1 truncate text-[11px] text-muted-foreground"
|
|
title={plugin.lastError ?? undefined}
|
|
>
|
|
{plugin.status === "blocked"
|
|
? t("plugins.manager.status.blocked")
|
|
: t("plugins.manager.status.failed")}
|
|
</span>
|
|
</div>
|
|
) : !running ? (
|
|
<div className="flex items-center gap-2 border-t border-border px-3 py-2">
|
|
<span className="size-1.5 shrink-0 bg-muted-foreground/40" />
|
|
<span className="text-[11px] text-muted-foreground">
|
|
{plugin.status === "server"
|
|
? t("plugins.manager.status.server")
|
|
: t("plugins.manager.status.disabled")}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2 border-t border-border px-3 py-2">
|
|
<span className="size-1.5 shrink-0 bg-green-500" />
|
|
<span className="text-[11px] text-muted-foreground">
|
|
{plugin.pinnedVersion
|
|
? t("plugins.manager.pinnedTo", {
|
|
version: plugin.pinnedVersion,
|
|
})
|
|
: t("plugins.manager.status.running")}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-1.5 border-t border-border px-3 py-2">
|
|
{plugin.updateAvailable && !plugin.pinnedVersion && !failed && (
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
className="gap-1 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand dark:border-accent-brand/40 dark:bg-transparent dark:hover:bg-accent-brand/10"
|
|
disabled={busy || locked}
|
|
onClick={() => void manager.requestUpdate(plugin)}
|
|
>
|
|
<Download className="size-3" />
|
|
{plugin.addedCapabilities.length > 0
|
|
? t("plugins.manager.reviewUpdate")
|
|
: t("plugins.manager.updateTo", {
|
|
version: plugin.latestVersion,
|
|
})}
|
|
</Button>
|
|
)}
|
|
{failed ? (
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
className="gap-1"
|
|
disabled={busy || locked}
|
|
onClick={() => void manager.retry(plugin)}
|
|
>
|
|
<RotateCcw className="size-3" />
|
|
{t("plugins.manager.restart")}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
disabled={busy || plugin.managedByServer}
|
|
onClick={() => void manager.toggle(plugin)}
|
|
>
|
|
{plugin.enabled
|
|
? t("plugins.manager.disable")
|
|
: t("plugins.manager.enable")}
|
|
</Button>
|
|
)}
|
|
<DocsLink
|
|
href={plugin.docs}
|
|
variant="icon"
|
|
className="ml-auto size-6"
|
|
/>
|
|
{!plugin.defaultLook && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-xs"
|
|
disabled={busy || locked}
|
|
title={t("plugins.manager.uninstall")}
|
|
aria-label={t("plugins.manager.uninstall")}
|
|
className={cn(
|
|
"text-muted-foreground hover:text-destructive",
|
|
!plugin.docs && "ml-auto",
|
|
)}
|
|
onClick={() => void manager.uninstall(plugin)}
|
|
>
|
|
<Trash2 className="size-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function StatusCell({ plugin }: { plugin: PluginEntry }) {
|
|
const { t } = useTranslation();
|
|
const running = plugin.status === "running";
|
|
const failed = plugin.status === "failed" || plugin.status === "blocked";
|
|
const label =
|
|
plugin.status === "blocked"
|
|
? t("plugins.manager.status.blocked")
|
|
: failed
|
|
? t("plugins.manager.status.failed")
|
|
: plugin.status === "server"
|
|
? t("plugins.manager.status.server")
|
|
: !running
|
|
? t("plugins.manager.status.disabled")
|
|
: plugin.pinnedVersion
|
|
? t("plugins.manager.pinnedTo", { version: plugin.pinnedVersion })
|
|
: t("plugins.manager.status.running");
|
|
return (
|
|
<span
|
|
className="flex min-w-0 items-center gap-1.5 text-muted-foreground"
|
|
title={failed ? (plugin.lastError ?? undefined) : undefined}
|
|
>
|
|
{failed ? (
|
|
<TriangleAlert className="size-3 shrink-0 text-destructive" />
|
|
) : (
|
|
<span
|
|
className={cn(
|
|
"size-1.5 shrink-0",
|
|
running ? "bg-green-500" : "bg-muted-foreground/40",
|
|
)}
|
|
/>
|
|
)}
|
|
<span className="truncate">{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function InstalledRowActions({
|
|
plugin,
|
|
manager,
|
|
}: {
|
|
plugin: PluginEntry;
|
|
manager: PluginsManager;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const failed = plugin.status === "failed" || plugin.status === "blocked";
|
|
const busy = manager.busy.has(plugin.id) || manager.busy.has("*");
|
|
const locked = manager.managedByServer;
|
|
const updateLabel =
|
|
plugin.addedCapabilities.length > 0
|
|
? t("plugins.manager.reviewUpdate")
|
|
: t("plugins.manager.updateTo", { version: plugin.latestVersion });
|
|
|
|
return (
|
|
<div className="flex items-center justify-end gap-1" onClick={stop}>
|
|
{plugin.updateAvailable && !plugin.pinnedVersion && !failed && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-xs"
|
|
title={updateLabel}
|
|
aria-label={updateLabel}
|
|
className="text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
disabled={busy || locked}
|
|
onClick={() => void manager.requestUpdate(plugin)}
|
|
>
|
|
<Download className="size-3" />
|
|
</Button>
|
|
)}
|
|
{failed ? (
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
className="gap-1"
|
|
disabled={busy || locked}
|
|
onClick={() => void manager.retry(plugin)}
|
|
>
|
|
<RotateCcw className="size-3" />
|
|
{t("plugins.manager.restart")}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
disabled={busy || plugin.managedByServer}
|
|
onClick={() => void manager.toggle(plugin)}
|
|
>
|
|
{plugin.enabled
|
|
? t("plugins.manager.disable")
|
|
: t("plugins.manager.enable")}
|
|
</Button>
|
|
)}
|
|
<DocsLink href={plugin.docs} variant="icon" className="size-6" />
|
|
{!plugin.defaultLook && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-xs"
|
|
disabled={busy || locked}
|
|
title={t("plugins.manager.uninstall")}
|
|
aria-label={t("plugins.manager.uninstall")}
|
|
className="text-muted-foreground hover:text-destructive"
|
|
onClick={() => void manager.uninstall(plugin)}
|
|
>
|
|
<Trash2 className="size-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BrowseSection({
|
|
plugins,
|
|
manager,
|
|
query,
|
|
onQuery,
|
|
onOpen,
|
|
layout,
|
|
layoutControls,
|
|
}: {
|
|
plugins: PluginEntry[];
|
|
manager: PluginsManager;
|
|
query: string;
|
|
onQuery: (v: string) => void;
|
|
onOpen: (id: string) => void;
|
|
layout: Layout;
|
|
layoutControls: React.ReactNode;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [category, setCategory] = useState<string | null>(null);
|
|
const [registry, setRegistry] = useState<string | null>(null);
|
|
const [sort, setSort] = useState<SortKey>("popular");
|
|
const [installedChoice, setInstalledChoice] = useStoredChoice(
|
|
"pluginsTab.browseInstalled",
|
|
["hide", "show"],
|
|
"hide",
|
|
);
|
|
const showInstalled = installedChoice === "show";
|
|
const categories = useMemo(() => categoriesOf(plugins), [plugins]);
|
|
const registries = manager.registries;
|
|
const registryFilter = registries.some((entry) => entry.id === registry)
|
|
? registry
|
|
: null;
|
|
|
|
const rows = sortPlugins(
|
|
plugins.filter(
|
|
(p) =>
|
|
(showInstalled || !p.installed) &&
|
|
matchesQuery(p, query) &&
|
|
(category === null || p.category === category) &&
|
|
(registryFilter === null || p.registryId === registryFilter),
|
|
),
|
|
sort,
|
|
);
|
|
|
|
const allInstalledHidden =
|
|
!showInstalled && plugins.length > 0 && plugins.every((p) => p.installed);
|
|
|
|
const listColumns: DataColumn<PluginEntry>[] = [
|
|
{
|
|
key: "name",
|
|
header: t("plugins.manager.table.name"),
|
|
width: "minmax(0,1.3fr)",
|
|
cell: (p) => <NameCell plugin={p} />,
|
|
},
|
|
{
|
|
key: "description",
|
|
header: t("plugins.manager.table.description"),
|
|
width: "minmax(0,2fr)",
|
|
hideBelow: "md",
|
|
cell: (p) => <DescriptionCell plugin={p} />,
|
|
},
|
|
{
|
|
key: "category",
|
|
header: t("plugins.manager.table.category"),
|
|
width: "120px",
|
|
hideBelow: "lg",
|
|
cell: (p) => (
|
|
<span className="text-muted-foreground">{p.category ?? ""}</span>
|
|
),
|
|
},
|
|
{
|
|
key: "downloads",
|
|
header: t("plugins.manager.table.downloads"),
|
|
width: "110px",
|
|
hideBelow: "lg",
|
|
cell: (p) => (
|
|
<span className="text-muted-foreground">
|
|
<DownloadCount count={p.downloads} />
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "version",
|
|
header: t("plugins.manager.table.version"),
|
|
width: "80px",
|
|
cell: (p) => (
|
|
<span className="tabular-nums text-muted-foreground">
|
|
{p.latestVersion ? `v${p.latestVersion}` : ""}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "actions",
|
|
header: "",
|
|
width: "120px",
|
|
align: "end",
|
|
cell: (p) => <BrowseAction plugin={p} manager={manager} />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={`flex flex-col ${PANEL.gap} ${PANEL.body}`}>
|
|
<Toolbar
|
|
query={query}
|
|
onQuery={onQuery}
|
|
placeholder={t("plugins.manager.searchPlugins")}
|
|
>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<label className="flex items-center gap-1.5">
|
|
<span className="text-xs text-muted-foreground">
|
|
{t("plugins.manager.showInstalled")}
|
|
</span>
|
|
<FakeSwitch
|
|
checked={showInstalled}
|
|
onChange={(v) => setInstalledChoice(v ? "show" : "hide")}
|
|
/>
|
|
</label>
|
|
{registries.length > 1 && (
|
|
<Select
|
|
value={registryFilter ?? "__all"}
|
|
onValueChange={(v) => setRegistry(v === "__all" ? null : v)}
|
|
>
|
|
<SelectTrigger
|
|
size="sm"
|
|
className="w-auto gap-1.5 text-xs"
|
|
aria-label={t("plugins.manager.registries.filter")}
|
|
>
|
|
<Library className="size-3.5 text-muted-foreground" />
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__all" className="text-xs">
|
|
{t("plugins.manager.registries.allRegistries")}
|
|
</SelectItem>
|
|
{registries.map((entry) => (
|
|
<SelectItem
|
|
key={entry.id}
|
|
value={entry.id}
|
|
className="text-xs"
|
|
>
|
|
{entry.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
<SortSelect value={sort} onChange={setSort} />
|
|
{layoutControls}
|
|
</div>
|
|
</Toolbar>
|
|
|
|
{categories.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-1">
|
|
{[null, ...categories].map((c) => (
|
|
<button
|
|
key={c ?? "__all"}
|
|
type="button"
|
|
onClick={() => setCategory(c)}
|
|
className={cn(
|
|
"border px-2 py-1 text-[11px] font-medium transition-colors",
|
|
category === c
|
|
? "border-accent-brand bg-accent-brand/10 text-accent-brand"
|
|
: "border-border text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
{c ?? t("plugins.manager.allCategories")}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{rows.length === 0 ? (
|
|
allInstalledHidden ? (
|
|
<EmptyState
|
|
icon={Puzzle}
|
|
title={t("plugins.manager.allInstalled")}
|
|
hint={t("plugins.manager.allInstalledHint")}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
icon={Puzzle}
|
|
title={t("plugins.manager.nothingHere")}
|
|
hint={
|
|
plugins.length === 0
|
|
? undefined
|
|
: t("plugins.manager.nothingHereHint")
|
|
}
|
|
/>
|
|
)
|
|
) : (
|
|
<PluginCollection
|
|
plugins={rows}
|
|
layout={layout}
|
|
renderCard={(p) => (
|
|
<BrowseCard
|
|
plugin={p}
|
|
manager={manager}
|
|
onOpen={() => onOpen(p.id)}
|
|
/>
|
|
)}
|
|
listColumns={listColumns}
|
|
onOpen={onOpen}
|
|
/>
|
|
)}
|
|
|
|
<p className="text-[11px] text-muted-foreground">
|
|
{t("plugins.manager.registries.browseHint")}{" "}
|
|
<DocsLink core="communityRegistry" className="text-[11px]">
|
|
{t("plugins.manager.communitySubmit")}
|
|
</DocsLink>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BrowseCard({
|
|
plugin,
|
|
manager,
|
|
onOpen,
|
|
}: {
|
|
plugin: PluginEntry;
|
|
manager: PluginsManager;
|
|
onOpen: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const severe = orderByRisk(plugin.capabilities).filter(isSevere);
|
|
|
|
return (
|
|
<Card className="gap-0 overflow-hidden py-0">
|
|
<CardHead
|
|
plugin={plugin}
|
|
onOpen={onOpen}
|
|
facts={
|
|
<>
|
|
<SourceBadge
|
|
source={plugin.source}
|
|
registryName={plugin.registryName}
|
|
/>
|
|
{plugin.author && <span>{plugin.author}</span>}
|
|
{plugin.latestVersion && <span>v{plugin.latestVersion}</span>}
|
|
{plugin.category && <span>{plugin.category}</span>}
|
|
<DownloadCount count={plugin.downloads} />
|
|
</>
|
|
}
|
|
/>
|
|
<div className="flex items-center gap-2 border-t border-border px-3 py-2">
|
|
<span className="min-w-0 flex-1 truncate text-[10px] text-muted-foreground">
|
|
{severe.length > 0
|
|
? t(`plugins.capabilities.${severe[0]}.title`, {
|
|
defaultValue: severe[0],
|
|
nsSeparator: false,
|
|
})
|
|
: t("plugins.manager.noServerAccess")}
|
|
</span>
|
|
<BrowseAction plugin={plugin} manager={manager} />
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function BrowseAction({
|
|
plugin,
|
|
manager,
|
|
}: {
|
|
plugin: PluginEntry;
|
|
manager: PluginsManager;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const busy = manager.busy.has(plugin.id) || manager.busy.has("*");
|
|
return (
|
|
<div
|
|
className="flex shrink-0 items-center justify-end gap-2"
|
|
onClick={stop}
|
|
>
|
|
<DocsLink href={plugin.docs} variant="icon" className="size-6" />
|
|
{plugin.installed ? (
|
|
<span className="flex shrink-0 items-center gap-1 text-[11px] font-medium text-accent-brand">
|
|
<Check className="size-3" />
|
|
{t("plugins.manager.installedBadge")}
|
|
</span>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
disabled={busy || manager.managedByServer || !plugin.latestVersion}
|
|
onClick={() => manager.requestInstall(plugin)}
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand dark:border-accent-brand/40 dark:bg-transparent dark:hover:bg-accent-brand/10"
|
|
>
|
|
{t("plugins.manager.install")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function UpdatesSection({
|
|
plugins,
|
|
manager,
|
|
onOpen,
|
|
}: {
|
|
plugins: PluginEntry[];
|
|
manager: PluginsManager;
|
|
onOpen: (id: string) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const pinned = plugins.filter((p) => p.pinnedVersion);
|
|
const open = plugins.filter((p) => !p.pinnedVersion);
|
|
const gated = open.filter((p) => p.addedCapabilities.length > 0);
|
|
const plain = open.filter((p) => p.addedCapabilities.length === 0);
|
|
|
|
if (plugins.length === 0) {
|
|
return (
|
|
<div className={PANEL.body}>
|
|
<EmptyState
|
|
icon={Check}
|
|
title={t("plugins.manager.upToDate")}
|
|
hint={
|
|
manager.lastCheckedAt
|
|
? t("plugins.manager.lastChecked", {
|
|
time: new Date(manager.lastCheckedAt).toLocaleString(),
|
|
})
|
|
: undefined
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`flex flex-col ${PANEL.gap} ${PANEL.body}`}>
|
|
{plain.length > 0 && (
|
|
<Card className="flex-row items-center gap-3 px-3 py-2.5">
|
|
<span className="flex-1 text-xs text-muted-foreground">
|
|
{t("plugins.manager.updatesReady", { count: plain.length })}
|
|
{gated.length > 0 &&
|
|
` ${t("plugins.manager.updatesNeedReview", { count: gated.length })}`}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="gap-1.5 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand dark:border-accent-brand/40 dark:bg-transparent dark:hover:bg-accent-brand/10"
|
|
disabled={manager.busy.size > 0 || manager.managedByServer}
|
|
onClick={() => void manager.updateAll()}
|
|
>
|
|
<Download className="size-3.5" />
|
|
{t("plugins.manager.updateAll")}
|
|
</Button>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-3">
|
|
{[...gated, ...plain, ...pinned].map((p) => (
|
|
<UpdateRow
|
|
key={p.id}
|
|
plugin={p}
|
|
manager={manager}
|
|
onOpen={() => onOpen(p.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function UpdateRow({
|
|
plugin,
|
|
manager,
|
|
onOpen,
|
|
}: {
|
|
plugin: PluginEntry;
|
|
manager: PluginsManager;
|
|
onOpen: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const gated = plugin.addedCapabilities.length > 0;
|
|
const busy = manager.busy.has(plugin.id) || manager.busy.has("*");
|
|
const notes = plugin.versions.find((v) => v.version === plugin.latestVersion);
|
|
|
|
return (
|
|
<Card className="gap-0 overflow-hidden py-0">
|
|
<div className="flex flex-wrap items-start gap-3 p-3">
|
|
<PluginIconBox name={plugin.icon} />
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
onClick={onOpen}
|
|
className="truncate text-sm font-semibold hover:text-accent-brand"
|
|
>
|
|
{plugin.name}
|
|
</button>
|
|
<span className="shrink-0 text-[11px] text-muted-foreground">
|
|
{t("plugins.manager.versionChange", {
|
|
from: plugin.version,
|
|
to: plugin.latestVersion,
|
|
})}
|
|
</span>
|
|
</div>
|
|
{plugin.pinnedVersion ? (
|
|
<span className="text-[11px] leading-snug text-muted-foreground">
|
|
{t("plugins.manager.pinnedTo", { version: plugin.pinnedVersion })}
|
|
</span>
|
|
) : gated ? (
|
|
<span className="text-[11px] leading-snug text-muted-foreground">
|
|
{t("plugins.manager.updateAsksMore")}
|
|
</span>
|
|
) : null}
|
|
{notes?.releaseNotesUrl && (
|
|
<a
|
|
href={notes.releaseNotesUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="w-fit text-[11px] text-muted-foreground hover:text-accent-brand"
|
|
>
|
|
{t("plugins.manager.releaseNotes")}
|
|
</a>
|
|
)}
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-3">
|
|
<label className="flex items-center gap-1.5">
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("plugins.manager.auto")}
|
|
</span>
|
|
<FakeSwitch
|
|
checked={plugin.autoUpdate}
|
|
disabled={
|
|
busy || manager.managedByServer || !!plugin.pinnedVersion
|
|
}
|
|
onChange={(v) =>
|
|
void manager.setOptions(plugin, { autoUpdate: v })
|
|
}
|
|
/>
|
|
</label>
|
|
{!plugin.pinnedVersion && (
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
disabled={busy || manager.managedByServer}
|
|
onClick={() => void manager.requestUpdate(plugin)}
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand dark:border-accent-brand/40 dark:bg-transparent dark:hover:bg-accent-brand/10"
|
|
>
|
|
{gated
|
|
? t("plugins.manager.review")
|
|
: t("plugins.manager.update")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|