dsh-plugin 0.1.1 → 1.1.0

package/src/client/components/modals.tsx

@@ -0,0 +1,368 @@
+/**
+ * Dialog layer for the Plugin Hub: the install-confirm dialog, the uninstall
+ * dialog and the global toast. Both dialogs lock themselves while a mutation
+ * or restart is running, then switch to a result view offering an immediate
+ * restart or a "later" deferral.
+ */
+import { createElement as h } from 'react'
+import type { MouseEvent } from 'react'
+import styles from '../styles/Modal.module.css'
+import type { EnvInfo, HubPlugin, TaskState, ToastState, Translate } from '../types.ts'
+import { CloseIcon, CopyIcon, LinkIcon } from './icons.tsx'
+import { ProgressView } from './ProgressView.tsx'
+import { installCommandOf, pluginDetailUrl, pluginIssueUrl, pluginSiteUrl } from '../lib/catalog.ts'
+import { classifyFailure } from '../lib/failures.ts'
+
+/** 完成结果视图：绿色对勾 + 标题/描述 + 「稍后重启 / 立即重启」按钮对（部分插件需重启后才会挂载） */
+function ResultView({
+  title, desc, t, restarting, onRestart, onClose,
+}: {
+  title: string
+  desc: string
+  t: Translate
+  restarting: boolean
+  onRestart: () => void
+  onClose: () => void
+}) {
+  return h('div', { className: styles.result },
+    h('div', { className: styles.resultCheck },
+      h('svg', {
+        className: styles.resultCheckIcon,
+        viewBox: '0 0 16 16',
+        width: 20,
+        height: 20,
+        fill: 'none',
+        'aria-hidden': 'true',
+      }, h('path', {
+        d: 'M2.5 8.5l3.5 3.5 7.5-7.5',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      })),
+    ),
+    h('div', { className: styles.resultTitle }, title),
+    desc ? h('div', { className: styles.resultDesc }, desc) : null,
+    h('div', { className: styles.resultRestarting }, restarting ? t('restarting') : t('restartHint')),
+    h('div', { className: styles.modalActions },
+      h('button', { className: styles.restartLater, onClick: onClose, disabled: restarting }, t('restartLater')),
+      h('button', { className: styles.restartNow, onClick: onRestart, disabled: restarting },
+        restarting ? t('restarting') : t('restartNow')),
+    ),
+  )
+}
+
+export interface InstallModalProps {
+  plugin: HubPlugin
+  done: boolean
+  task: TaskState | null
+  t: Translate
+  langPath: string
+  restarting: boolean
+  /** 已安装插件的覆盖更新（走同一条 add 命令原位重装，文案区分安装/更新） */
+  update: boolean
+  /** 安装请求在途（fetch 等待响应）：此时任务尚未入队，需禁用确认按钮防止二次点击 */
+  submitting: boolean
+  onClose: () => void
+  onCopy: () => void
+  onInstall: () => void
+  onRestart: () => void
+}
+
+/**
+ * 信任确认弹窗：安装进入后台队列后弹窗仍可关闭（任务继续），
+ * 只在本任务执行中展示实时进度；完成后切换为结果视图，与卸载一致。
+ */
+export function InstallModal(props: InstallModalProps) {
+  const { plugin, done, task, t, langPath, restarting, submitting, update, onClose, onCopy, onInstall, onRestart } = props
+  const busy = submitting || (task !== null && (task.status === 'pending' || task.status === 'running'))
+  // 进行中标题带上插件名（中文「XX 插件安装中」；英文状态词在前更自然），并用状态色区分
+  const name = plugin.displayName ?? plugin.slug
+  const busyTitle = (label: string) => langPath === 'zh/' ? `${name} 插件${label}` : `${label} ${name}`
+  const title = busy
+    ? task && task.status === 'pending'
+      ? busyTitle(update ? t('queuedUpdateTitle') : t('queuedTitle'))
+      : busyTitle(update ? t('updating') : t('installing'))
+    : done
+      ? update ? t('updateResultTitle') : t('installResultTitle')
+      : update ? t('confirmUpdateTitle') : t('confirmTitle')
+  return h('div', {
+    className: styles.overlay,
+    onClick: (e: MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose()
+    },
+  },
+    h('div', { className: styles.modal, role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: styles.modalHead },
+        h('div', {
+          className: busy
+            ? `${styles.modalTitle} ${task && task.status === 'pending' ? styles.modalTitleQueued : styles.modalTitleBusy}`
+            : styles.modalTitle,
+        }, title),
+        h('button', {
+          className: styles.modalClose,
+          'aria-label': t('confirmCancel'),
+          onClick: () => onClose(),
+        }, h(CloseIcon)),
+      ),
+      done
+        // 安装完成：结果视图（成功即生效，仅「完成」关闭）；更新时标题/描述区分语义
+        ? h(ResultView, {
+          title: update ? t('updateResultTitle') : t('installResultTitle'),
+          desc: update ? t('updateResultDesc') : t('installResultDesc'),
+          t,
+          restarting,
+          onRestart,
+          onClose,
+        })
+        // 确认/进行中：来源行 + 安装命令 + 实时进度 + 操作按钮
+        : h('div', { className: styles.modalBody },
+          h('div', { className: styles.trustHint }, t('confirmDesc')),
+          h('div', { className: styles.modalRow },
+            h('span', { className: styles.modalLabel }, t('confirmPlugin')),
+            h('span', { className: styles.modalValue, title: plugin.displayName ?? plugin.slug },
+              plugin.displayName ?? plugin.slug),
+          ),
+          plugin.source?.repo ? h('div', { className: styles.modalRow },
+            h('span', { className: styles.modalLabel }, t('confirmSource')),
+            // 来源仓库：可点击跳转官网收录详情页（新窗口打开）
+            h('a', {
+              className: styles.modalLink,
+              href: pluginDetailUrl(plugin, langPath),
+              target: '_blank',
+              rel: 'noopener noreferrer',
+              title: plugin.source.repo,
+            }, h(LinkIcon), plugin.source.repo),
+          ) : null,
+          // 手动命令条：整条点击即复制，右侧再放一个显式复制按钮
+          h('div', {
+            className: styles.modalCmd,
+            onClick: onCopy,
+            title: t('copyInstallCommand'),
+            role: 'button',
+            tabIndex: 0,
+          },
+            h('span', { className: styles.modalCmdText }, installCommandOf(plugin)),
+            h('span', { className: styles.modalCmdCopy }, h(CopyIcon), t('copyCmdLabel')),
+          ),
+          task && task.status === 'pending' ? h('div', { className: styles.queuedHint }, t('queuedHint')) : null,
+          task ? h(ProgressView, { task }) : null,
+          h('div', { className: styles.modalActions },
+            h('button', {
+              className: styles.modalCopy,
+              disabled: busy,
+              onClick: onCopy,
+            }, t('copyInstallCommand')),
+            h('button', {
+              className: styles.modalInstall,
+              disabled: busy,
+              onClick: onInstall,
+            }, busy
+              ? (task && task.status === 'pending'
+                ? (update ? t('queuedUpdateTitle') : t('queuedTitle'))
+                : (update ? t('updating') : t('installing')))
+              : (update ? t('updateNow') : t('installNow'))),
+          ),
+        ),
+    ),
+  )
+}
+
+export interface UninstallModalProps {
+  plugin: HubPlugin
+  done: boolean
+  task: TaskState | null
+  t: Translate
+  langPath: string
+  restarting: boolean
+  /** 卸载请求在途（fetch 等待响应）：此时任务尚未入队，需禁用确认按钮防止二次点击 */
+  submitting: boolean
+  onClose: () => void
+  onCancel: () => void
+  onCopyCommand: () => void
+  onConfirm: () => void
+  onRestart: () => void
+}
+
+/** 卸载确认弹窗：确认/进行中（后台队列，可关闭）；完成后切换为结果视图（成功即生效，仅「完成」关闭）。 */
+export function UninstallModal(props: UninstallModalProps) {
+  const { plugin, done, task, t, langPath, restarting, submitting, onClose, onCancel, onCopyCommand, onConfirm, onRestart } = props
+  const busy = submitting || (task !== null && (task.status === 'pending' || task.status === 'running'))
+  // 进行中标题带上插件名，与安装弹窗一致，并用状态色区分
+  const name = plugin.displayName ?? plugin.slug
+  const busyTitle = (label: string) => langPath === 'zh/' ? `${name} 插件${label}` : `${label} ${name}`
+  const title = busy
+    ? task && task.status === 'pending' ? busyTitle(t('queuedUninstallTitle')) : busyTitle(t('uninstalling'))
+    : done ? t('uninstallResultTitle') : t('uninstallTitle')
+  return h('div', {
+    className: styles.overlay,
+    onClick: (e: MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose()
+    },
+  },
+    h('div', { className: styles.modal, role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: styles.modalHead },
+        h('div', {
+          className: busy
+            // 注意 task 判空：submitting（请求在途）时任务尚未入队，task 为 null，不能直接解引用
+            ? `${styles.modalTitle} ${task !== null && task.status === 'pending' ? styles.modalTitleQueued : styles.modalTitleBusy}`
+            : styles.modalTitle,
+        }, title),
+        h('button', {
+          className: styles.modalClose,
+          'aria-label': t('confirmCancel'),
+          onClick: () => onClose(),
+        }, h(CloseIcon)),
+      ),
+      done
+        // 卸载完成：结果视图（成功即生效，仅「完成」关闭）
+        ? h(ResultView, {
+          title: t('uninstallResultTitle'),
+          desc: t('uninstallResultDesc'),
+          t,
+          restarting,
+          onRestart,
+          onClose,
+        })
+        // 确认/进行中：来源行 + 实时进度 + 操作按钮
+        : h('div', { className: styles.modalBody },
+          h('div', { className: styles.modalDesc }, t('uninstallDesc')),
+          h('div', { className: styles.modalRow },
+            h('span', { className: styles.modalLabel }, t('confirmPlugin')),
+            h('span', { className: styles.modalValue, title: plugin.displayName ?? plugin.slug },
+              plugin.displayName ?? plugin.slug),
+          ),
+          // 显示仓库来源：github 用户名 + 仓库名，让用户确认卸载的是哪一个仓库
+          plugin.source?.repo ? h('div', { className: styles.modalRow },
+            h('span', { className: styles.modalLabel }, t('confirmSource')),
+            // 来源仓库：可点击跳转官网收录详情页（新窗口打开）
+            h('a', {
+              className: styles.modalLink,
+              href: pluginDetailUrl(plugin, langPath),
+              target: '_blank',
+              rel: 'noopener noreferrer',
+              title: plugin.source.repo,
+            }, h(LinkIcon), plugin.source.repo),
+          ) : null,
+          task && task.status === 'pending' ? h('div', { className: styles.queuedHint }, t('queuedHint')) : null,
+          task ? h(ProgressView, { task }) : null,
+          h('div', { className: styles.modalActions },
+            h('button', {
+              className: styles.modalCancel,
+              onClick: onCancel,
+            }, t('confirmCancel')),
+            // 复制卸载命令：万一直接卸载失败，可去终端手动执行
+            h('button', {
+              className: styles.modalCopy,
+              disabled: busy,
+              onClick: onCopyCommand,
+            }, t('copyUninstallCommand')),
+            h('button', {
+              className: styles.uninstallConfirm,
+              disabled: busy,
+              onClick: onConfirm,
+            }, busy ? (task && task.status === 'pending' ? t('queuedUninstallTitle') : t('uninstalling')) : t('uninstall')),
+          ),
+        ),
+    ),
+  )
+}
+
+/** 预填插件仓库的 GitHub Issue 链接：标题带插件名，正文附完整错误信息，方便用户一键反馈。 */
+/** 安装/卸载失败弹窗：布局与失败记录一致（类型徽标 + 仓库超链接 + 隐蔽复制按钮），报错完整展示，底部一键提交 Issue。 */
+export function ErrorModal({ message, repo, kind, command, attempts, t, env, onCopy, onClose }: {
+  message: string
+  repo: string | null
+  kind: 'install' | 'uninstall'
+  command?: string
+  /** 尝试过的安装方式（npm 反查 + 实际执行命令）：issue 预填一并贴给作者，便于反推正确的 npm 包名 */
+  attempts?: string[]
+  t: Translate
+  env: EnvInfo | null
+  onCopy: (text: string) => void
+  onClose: () => void
+}) {
+  // 失败归类：当前安装通道（npm/git）装不上 = 插件分发/依赖的问题，一律引导提 Issue
+  const failureKind = classifyFailure(message)
+  return h('div', {
+    className: styles.overlay,
+    onClick: (e: MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose()
+    },
+  },
+    h('div', { className: styles.errorModal, role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: styles.modalHead },
+        // 标题按操作类型明确区分：安装失败 / 卸载失败
+        h('div', { className: styles.errorTitle }, kind === 'install' ? t('errorTitleInstall') : t('errorTitleUninstall')),
+        h('button', {
+          className: styles.modalClose,
+          'aria-label': t('errorClose'),
+          onClick: onClose,
+        }, h(CloseIcon)),
+      ),
+      h('div', { className: styles.modalBody },
+        // 与失败记录一致的布局：类型徽标 + 仓库超链接 + 顶部隐蔽复制按钮
+        h('div', { className: styles.failRow },
+          h('div', { className: styles.failHead },
+            h('span', {
+              className: kind === 'install' ? styles.failKindInstall : styles.failKindUninstall,
+            }, kind === 'install' ? t('install') : t('uninstall')),
+            // 仓库地址（用户名/仓库）统一显示为可点击超链接，跳转到官网详情页（含插件收录信息），而非直接跳 GitHub
+            repo ? h('a', {
+              className: styles.failRepo,
+              href: pluginSiteUrl(repo),
+              target: '_blank',
+              rel: 'noopener noreferrer',
+              title: repo,
+            }, repo) : null,
+            // 复制按钮放最上面、浅灰隐蔽；报错正文不允许鼠标选择复制，只能点这里
+            h('button', { className: styles.errorCopySoft, onClick: () => onCopy(message) }, t('errorCopy')),
+          ),
+          // 报错信息完整展示（可滚动），比失败记录的预览看得更多
+          h('pre', { className: styles.errorBox }, message),
+          // 插件问题（prepare 构建失败 / 原生依赖构建被拦截 / git 分发缺产物）：都是插件打包分发问题 —— 先说明原因，按钮在下方引导提 Issue
+          failureKind === 'pluginPrepare' || failureKind === 'pnpmIgnoredBuild'
+            ? h('div', null, [
+              // [packaging]（预检/装后校验拦截：git 分发缺产物）与
+              // prepare 构建脚本实际执行失败 / 原生依赖构建被 pnpm 拦截：都是插件打包分发问题 —— 先说明原因，按钮在下方提交
+              h('div', { className: styles.failPrepareHint }, failureKind === 'pnpmIgnoredBuild'
+                ? t('failIgnoredBuild')
+                : /\[packaging\]/i.test(message) ? t('failPackagingHint') : t('failPrepareHint')),
+              repo ? h('a', {
+                className: styles.failBigIssue,
+                href: pluginIssueUrl(repo, message, env, command, attempts),
+                target: '_blank',
+                rel: 'noopener noreferrer',
+                title: t('failIssueHint'),
+              }, t('failIssueBig')) : null,
+            ])
+            : repo ? h('a', {
+              className: styles.failBigIssue,
+              href: pluginIssueUrl(repo, message, env, command, attempts),
+              target: '_blank',
+              rel: 'noopener noreferrer',
+              title: t('failIssueHint'),
+            }, t('failIssueBig')) : null,
+        ),
+        h('div', { className: styles.modalActions },
+          h('button', { className: styles.restartLater, onClick: onClose }, t('errorClose')),
+        ),
+      ),
+    ),
+  )
+}
+
+/** 全局反馈 Toast：复制成功（反色）/ 安装完成（反色）/ 安装失败（红色）/ 卸载结果 */
+export function Toast({ toast, t }: { toast: ToastState; t: Translate }) {
+  const text = toast.kind === 'copied' ? t('toastCopied')
+    : toast.kind === 'errCopied' ? t('errCopied')
+      : toast.kind === 'done' ? t('installDone')
+        : toast.kind === 'fail' ? t('installFail')
+          : toast.kind === 'removed' ? t('uninstallDone')
+            : t('uninstallFail')
+  const fail = toast.kind === 'fail' || toast.kind === 'removeFail'
+  return h('div', {
+    key: toast.id,
+    className: fail ? `${styles.toast} ${styles.toastFail}` : styles.toast,
+  }, text)
+}

package/src/client/hooks/useCatalog.ts

@@ -0,0 +1,202 @@
+/**
+ * Catalog data + view state for the Plugin Hub section.
+ *
+ * Owns the online-data pipeline (live fetch from dsh-plugin.org), the local
+ * installed-plugin table, and the filter/search/sort/install-status view
+ * state, exposing the derived visible list and per-category counts.
+ */
+import { useEffect, useMemo, useState } from 'react'
+import type { HubPlugin, LocaleId } from '../types.ts'
+import { normalize } from '../lib/catalog.ts'
+import type { SortKey } from '../lib/catalog.ts'
+
+const PLUGINS_URL = (lang: LocaleId) => `https://dsh-plugin.org/api/plugins.${lang}.json`
+const STATS_URL = 'https://dsh-plugin.org/api/stats.json'
+
+export function useCatalog(lang: LocaleId) {
+  /** 目录插件（仅保留人工验证通过的条目） */
+  const [plugins, setPlugins] = useState<HubPlugin[] | null>(null)
+  /** 收录/精选统计（官网 /api/stats.json 实时拉取） */
+  const [stats, setStats] = useState<{ total: number; verified: number } | null>(null)
+  const [failed, setFailed] = useState(false)
+  const [reloadKey, setReloadKey] = useState(0)
+  const [category, setCategory] = useState('all')
+  const [query, setQuery] = useState('')
+  const [sort, setSort] = useState<SortKey>('sortStars')
+  /** 列表安装状态筛选：全部 / 已安装 / 未安装（分段按钮，单列表内切换，不引入第二个列表） */
+  const [installedFilter, setInstalledFilter] = useState<'all' | 'installed' | 'notInstalled'>('all')
+  /** 当前 profile 已安装插件：npm 包名 -> manifest spec（来自宿主本地路由） */
+  const [installed, setInstalled] = useState<Record<string, string>>({})
+  /** 安装时记录的目录信号：repo(小写) -> { version, updatedAt }（来自宿主本地路由）；
+   *  npmPackage 为 npm 优先通道反查命中的包名映射（目录数据未下发时客户端靠它把依赖 key 匹配回仓库） */
+  const [versions, setVersions] = useState<Record<string, { version: string; updatedAt: string; npmPackage?: string }>>({})
+
+  // 拉取目录 + 统计。在线 API 已只返回 verified；再过滤一次，保证只展示人工验证通过的插件。
+  useEffect(() => {
+    let cancelled = false
+    setPlugins(null)
+    setStats(null)
+    setFailed(false)
+    const fetchData = (url: string): Promise<unknown> =>
+      fetch(url, { cache: 'no-store' }).then((res) => {
+        if (!res.ok) throw new Error(String(res.status))
+        return res.json()
+      })
+    fetchData(PLUGINS_URL(lang)).then((data) => {
+      if (cancelled) return
+      const list = (Array.isArray(data) ? data : []).map((item) => normalize(item as Record<string, unknown>))
+      setPlugins(list.filter((p) => p.compatibility?.status === 'verified'))
+    }).catch(() => {
+      if (!cancelled) setFailed(true)
+    })
+    fetchData(STATS_URL).then((s) => {
+      const stats = s as { total?: number; verified?: number }
+      if (!cancelled && stats && typeof stats.total === 'number' && typeof stats.verified === 'number') {
+        setStats({ total: stats.total, verified: stats.verified })
+      }
+    }).catch(() => {})
+    return () => { cancelled = true }
+    // lang 必须进依赖：切换界面语言要重新拉对应语言的数据文件，
+    // 否则英文模式仍停留在 plugins.zh.json，描述/名称全是中文
+  }, [reloadKey, lang])
+
+  /** 刷新当前 profile 已安装插件表；宿主未挂本地路由时静默降级为空表。 */
+  const refreshInstalled = async () => {
+    try {
+      const res = await fetch('/dsh-plugin-hub/installed', { cache: 'no-store' })
+      if (!res.ok) return
+      const data = await res.json() as { installed?: Record<string, string>; versions?: Record<string, { version: string; updatedAt: string; npmPackage?: string }> }
+      setInstalled(data.installed ?? {})
+      setVersions(data.versions ?? {})
+    } catch {
+      // host without the plugin's server routes — keep the empty table
+    }
+  }
+
+  // 首次进入拉取已安装表（依赖宿主 webServer 服务）
+  useEffect(() => { refreshInstalled() }, [])
+
+  /** 插件是否已安装：匹配 installed spec 中的 `github:<owner>/<repo>`，或 npm 通道安装的依赖包名；命中返回 npm 包名。 */
+  const installedName = (p: HubPlugin): string | null => {
+    const repo = p.source?.repo
+    if (!repo) return null
+    const needle = `github:${repo.toLowerCase()}`
+    for (const [name, spec] of Object.entries(installed)) {
+      if (spec.toLowerCase().includes(needle)) return name
+    }
+    // npm 通道安装：profile 依赖 key 直接是 npm 包名。包名来源两处——目录数据（npmPackage），
+    // 或服务端 npm 优先反查持久化的映射（versions[repo].npmPackage，覆盖组织 scope 与 GitHub
+    // 用户名不一致、目录未下发包名的场景）；命中任一并依赖 key 真实存在即视为已安装
+    const pkg = ((p.source?.npmPackage || versions[repo.toLowerCase()]?.npmPackage) ?? '').toLowerCase()
+    if (pkg) {
+      for (const name of Object.keys(installed)) {
+        if (name.toLowerCase() === pkg) return name
+      }
+    }
+    return null
+  }
+
+  /** 该插件安装时记录的目录版本（无记录/未安装 → null）。 */
+  const installedVersion = (p: HubPlugin): string | null => {
+    const repo = p.source?.repo
+    if (!repo) return null
+    return versions[repo.toLowerCase()]?.version ?? null
+  }
+
+  /**
+   * 是否有更新：仅对已安装插件有意义。
+   * 双信号判定——有 release 版本的比版本；无版本（repo 不打 tag）的比仓库最近更新时间
+   * （repoUpdatedAt，ISO 字符串字典序 = 时间序），更新时间变新说明有新提交。
+   */
+  const hasUpdate = (p: HubPlugin): boolean => {
+    if (installedName(p) === null) return false
+    const repo = p.source?.repo
+    if (!repo) return false
+    const rec = versions[repo.toLowerCase()]
+    if (!rec) return false
+    if (p.version) return p.version !== rec.version
+    const current = p.dates?.repoUpdatedAt
+    return Boolean(current && rec.updatedAt && current > rec.updatedAt)
+  }
+
+  /** 当前分类下的插件（「全部」时为整个目录）。 */
+  const categoryPlugins = useMemo(() => {
+    if (!plugins) return []
+    if (category === 'all') return plugins
+    return plugins.filter((p) => p.category === category)
+  }, [plugins, category])
+
+  /** 当前分类下已安装插件数：已安装/未安装按钮上的计数跟随分类，不再用全局口径。 */
+  const installedCountInCategory = useMemo(() => {
+    return categoryPlugins.reduce((n, p) => n + (installedName(p) !== null ? 1 : 0), 0)
+  }, [categoryPlugins, installed])
+
+  /** 当前分类下未安装插件数。 */
+  const notInstalledCountInCategory = Math.max(0, categoryPlugins.length - installedCountInCategory)
+
+  // 自动重置：切换分类（或已安装表变化）后，若当前安装状态筛选在新分类下无结果，
+  // 自动退回「全部」，避免列表空置死胡同、也避免 0 计数按钮被误触。
+  useEffect(() => {
+    if (installedFilter === 'all') return
+    const count = installedFilter === 'installed'
+      ? installedCountInCategory
+      : notInstalledCountInCategory
+    if (count === 0) setInstalledFilter('all')
+  }, [installedFilter, installedCountInCategory, notInstalledCountInCategory])
+
+  const visible = useMemo(() => {
+    if (!plugins) return []
+    const q = query.trim().toLowerCase()
+    const list = plugins.filter((p) => {
+      if (category !== 'all' && p.category !== category) return false
+      if (installedFilter === 'installed' && installedName(p) === null) return false
+      if (installedFilter === 'notInstalled' && installedName(p) !== null) return false
+      if (!q) return true
+      return (
+        (p.displayName ?? '').toLowerCase().includes(q) ||
+        (p.description ?? '').toLowerCase().includes(q) ||
+        (p.topics ?? []).some((topic) => topic.toLowerCase().includes(q))
+      )
+    })
+    return [...list].sort((a, b) => {
+      if (sort === 'sortStars') return (b.stats?.stargazers_count ?? 0) - (a.stats?.stargazers_count ?? 0)
+      if (sort === 'sortForks') return (b.stats?.forks_count ?? 0) - (a.stats?.forks_count ?? 0)
+      if (sort === 'sortNewest') return (b.dates?.addedAt ?? '').localeCompare(a.dates?.addedAt ?? '')
+      return (b.dates?.repoUpdatedAt ?? '').localeCompare(a.dates?.repoUpdatedAt ?? '')
+    })
+  }, [plugins, category, query, sort, installed, installedFilter])
+
+  /** Per-category plugin counts shown on the category chips. */
+  const categoryCounts = useMemo(() => {
+    const counts: Record<string, number> = {}
+    for (const p of plugins ?? []) {
+      if (p.category) counts[p.category] = (counts[p.category] ?? 0) + 1
+    }
+    return counts
+  }, [plugins])
+
+  return {
+    plugins,
+    stats,
+    failed,
+    reload: () => setReloadKey((k) => k + 1),
+    installed,
+    installedName,
+    installedVersion,
+    hasUpdate,
+    refreshInstalled,
+    category,
+    setCategory,
+    query,
+    setQuery,
+    sort,
+    setSort,
+    installedFilter,
+    setInstalledFilter,
+    visible,
+    total: plugins?.length ?? 0,
+    installedCountInCategory,
+    notInstalledCountInCategory,
+    categoryCounts,
+  }
+}