feat(web): add category filter to provider browser (oomol-lab#262)

Adds a category dropdown to the provider browser with per-category
counts, so users exploring by capability can filter instead of scrolling
the flat list. Also renders each provider's short description in its
card when one exists.

Closes oomol-lab#219.

---------

Co-authored-by: l1shen <648952316@qq.com>

Author: DavidPandleton

web/src/i18n.test.ts

@@ -62,18 +62,25 @@ describe("resolveInitialLang", () => {
 describe("createAppI18n", () => {
   it("creates an i18n instance with app translations", () => {
     const french = createAppI18n("fr");
+    const japanese = createAppI18n("ja");
     const russian = createAppI18n("ru");
+    const simplifiedChinese = createAppI18n("zh-CN");
     const traditionalChinese = createAppI18n("zh-TW");
 
     expect(french.lang).toBe("fr");
     expect(french.t("nav.providers")).toBe("Fournisseurs");
     expect(french.t("language.fr")).toBe("Français");
+    expect(french.t("providers.categories.all")).toBe("Toutes les catégories");
+    expect(japanese.t("providers.categories.all")).toBe("すべてのカテゴリー");
     expect(russian.lang).toBe("ru");
     expect(russian.t("nav.providers")).toBe("Провайдеры");
     expect(russian.t("language.ru")).toBe("Русский");
+    expect(russian.t("providers.categories.all")).toBe("Все категории");
+    expect(simplifiedChinese.t("providers.categories.all")).toBe("所有分类");
     expect(traditionalChinese.lang).toBe("zh-TW");
     expect(traditionalChinese.t("nav.providers")).toBe("服務提供者");
     expect(traditionalChinese.t("language.zh-TW")).toBe("繁體中文");
+    expect(traditionalChinese.t("providers.categories.all")).toBe("所有分類");
     expect(supportedLangs).toEqual(["en", "zh-CN", "zh-TW", "ja", "ru", "fr"]);
   });
 });

web/src/locales/en.json

@@ -247,6 +247,10 @@
     "execution": {
       "executable": "Executable",
       "catalogOnly": "Catalog only"
+    },
+    "categoryFilterLabel": "Category",
+    "categories": {
+      "all": "All categories"
     }
   },
   "actions": {

web/src/locales/fr.json

@@ -247,6 +247,10 @@
     "execution": {
       "executable": "Exécutable",
       "catalogOnly": "Catalogue uniquement"
+    },
+    "categoryFilterLabel": "Catégorie",
+    "categories": {
+      "all": "Toutes les catégories"
     }
   },
   "actions": {

web/src/locales/ja.json

@@ -247,6 +247,10 @@
     "execution": {
       "executable": "実行可能",
       "catalogOnly": "カタログのみ"
+    },
+    "categoryFilterLabel": "カテゴリー",
+    "categories": {
+      "all": "すべてのカテゴリー"
     }
   },
   "actions": {

web/src/locales/ru.json

@@ -247,6 +247,10 @@
     "execution": {
       "executable": "Выполняемое",
       "catalogOnly": "Только каталог"
+    },
+    "categoryFilterLabel": "Категория",
+    "categories": {
+      "all": "Все категории"
     }
   },
   "actions": {

web/src/locales/zh-CN.json

@@ -247,6 +247,10 @@
     "execution": {
       "executable": "可执行",
       "catalogOnly": "仅目录"
+    },
+    "categoryFilterLabel": "分类",
+    "categories": {
+      "all": "所有分类"
     }
   },
   "actions": {

web/src/locales/zh-TW.json

@@ -247,6 +247,10 @@
     "execution": {
       "executable": "可執行",
       "catalogOnly": "僅供目錄查閱"
+    },
+    "categoryFilterLabel": "分類",
+    "categories": {
+      "all": "所有分類"
     }
   },
   "actions": {

web/src/model.test.ts

@@ -1,7 +1,13 @@
 import type { AppData, ProviderDefinition, RunLog } from "./model";
 
 import { describe, expect, it } from "vitest";
-import { createOverviewSummary, resolveProviderConnectionStatus, sortProviders } from "./model";
+import {
+  createOverviewSummary,
+  filterProvidersByCategory,
+  providerCategoryCounts,
+  resolveProviderConnectionStatus,
+  sortProviders,
+} from "./model";
 
 function provider(service: string, displayName: string): ProviderDefinition {
   return {
@@ -101,6 +107,56 @@ describe("sortProviders", () => {
   });
 });
 
+describe("filterProvidersByCategory", () => {
+  function categorized(service: string, categories: string[]): ProviderDefinition {
+    return { ...provider(service, service), categories };
+  }
+
+  it("returns everything for the all filter", () => {
+    const providers = [categorized("a", ["Data"]), categorized("b", ["Communication"])];
+
+    expect(filterProvidersByCategory(providers, "all")).toEqual(providers);
+  });
+
+  it("keeps only providers in the selected category", () => {
+    const providers = [
+      categorized("a", ["Data"]),
+      categorized("b", ["Communication"]),
+      categorized("c", ["Data", "AI"]),
+    ];
+
+    expect(filterProvidersByCategory(providers, "Data").map((item) => item.service)).toEqual(["a", "c"]);
+    expect(filterProvidersByCategory(providers, "AI").map((item) => item.service)).toEqual(["c"]);
+  });
+
+  it("returns nothing for an unmatched category", () => {
+    const providers = [categorized("a", ["Data"])];
+
+    expect(filterProvidersByCategory(providers, "Storage")).toEqual([]);
+  });
+});
+
+describe("providerCategoryCounts", () => {
+  it("counts providers per category, including multi-category providers once per category", () => {
+    const providers = [
+      { ...provider("a", "a"), categories: ["Data", "AI"] },
+      { ...provider("b", "b"), categories: ["Data"] },
+      { ...provider("c", "c"), categories: ["Communication"] },
+    ];
+
+    const counts = providerCategoryCounts(providers);
+    expect(counts.get("Data")).toBe(2);
+    expect(counts.get("AI")).toBe(1);
+    expect(counts.get("Communication")).toBe(1);
+    expect(counts.get("Storage")).toBeUndefined();
+  });
+
+  it("handles providers without categories", () => {
+    const counts = providerCategoryCounts([provider("a", "a"), provider("b", "b")]);
+    expect(counts.size).toBe(0);
+  });
+});
+
 describe("createOverviewSummary", () => {
   it("counts locally executable actions", () => {
     const clock = {

web/src/model.ts

@@ -370,6 +370,21 @@ export function filterProviders(providers: ProviderDefinition[], query: string):
   );
 }
 
+export function filterProvidersByCategory(providers: ProviderDefinition[], category: string): ProviderDefinition[] {
+  if (category === "all") return providers;
+  return providers.filter((provider) => provider.categories.includes(category));
+}
+
+export function providerCategoryCounts(providers: ProviderDefinition[]): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const provider of providers) {
+    for (const category of provider.categories) {
+      counts.set(category, (counts.get(category) ?? 0) + 1);
+    }
+  }
+  return counts;
+}
+
 export function sortProviders(
   providers: ProviderDefinition[],
   connectionsByService: Map<string, ConnectionRecord>,

web/src/providers-page.test.ts

@@ -443,9 +443,14 @@ describe("isProviderLocallyAvailable", () => {
 });
 
 describe("providerBrowserResetKey", () => {
-  it("changes when search or status filters change", () => {
-    expect(providerBrowserResetKey("gmail", "all")).not.toBe(providerBrowserResetKey("gmail", "connected"));
-    expect(providerBrowserResetKey("gmail", "all")).not.toBe(providerBrowserResetKey("slack", "all"));
+  it("changes when search, status, or category filters change", () => {
+    expect(providerBrowserResetKey("gmail", "all", "all")).not.toBe(
+      providerBrowserResetKey("gmail", "connected", "all"),
+    );
+    expect(providerBrowserResetKey("gmail", "all", "all")).not.toBe(providerBrowserResetKey("slack", "all", "all"));
+    expect(providerBrowserResetKey("gmail", "all", "all")).not.toBe(
+      providerBrowserResetKey("gmail", "all", "Communication"),
+    );
   });
 });