Skip to content

feat: move plugin catalog filters into a dialog - #27

Open
marekdano wants to merge 1 commit into
mainfrom
6242-plugins-filters-dialog
Open

feat: move plugin catalog filters into a dialog#27
marekdano wants to merge 1 commit into
mainfrom
6242-plugins-filters-dialog

Conversation

@marekdano

Copy link
Copy Markdown
Contributor

Closes #6242.

Summary

Moves the plugin catalog's filters (Hook, Tags) from an inline popover into a dialog, matching the pattern already used on the server catalog page. Rebased on top of #24, which landed on main while this was in progress and removed the Mode filter — that decision is preserved here (no Mode section was reintroduced).

  • Replaced the single-select Hook <Select> dropdown and the tag checkbox popover with a Dialog containing two sections (Hooks, Tags), each with an All/Select radio and a multi-select checkbox grid — reusing the exact draft/apply pattern from CatalogFiltersDialog (CatalogToolbar.tsx).
  • hook is now multi-select (string[], OR semantics) and uses repeatable URL query params (?hook=a&hook=b), matching how tags already worked. Both sections commit in a single navigation when "Add filters" is clicked, instead of applying immediately per field.
  • Added an orange icon badge (bg-selection) around the Filter icon in both the plugins and server catalog dialog headers, matching the Figma design.
  • Fixed a horizontal-overflow bug in the Hooks section: long snake_case hook identifiers (e.g. http_auth_resolve_user) have no natural break point, which forced the CSS multi-column layout wider than the dialog and pushed a horizontal scrollbar onto the whole dialog. Fixed with min-w-0 + overflow-wrap: anywhere on the option labels, plus dropping the Hooks section to 3 columns instead of 4 (maxColumns prop) since its labels run longer than Tags.
  • Consolidated i18n keys that turned out identical across plugins.json and mcpServer.json:
    • common.addFilters ("Add filters") replaces the duplicatedplugins.catalog.addFilters / mcpServer.catalog.addFilters.
    • common.selectOption ("Select...") replaces 5 duplicated select* keys (selectHooks, selectTags, selectCategories, selectProviders) — safe because the ES/PT-BR translations are grammatically invariant across sections.
    • Left the all*Option ("All") keys per-section, since ES/PT-BR need gender agreement (Todos vs Todas) that a shared key can't express correctly.
    • Removed now-dead keys left over from the old popover UI and the earlier Mode-filter work: allHooks, allTags (old naming), modes, allModesOption.

Files changed

  • src/components/plugins/PluginToolbar.tsx — dialog-based filter UI (Hooks + Tags)
  • src/components/server-catalog/CatalogToolbar.tsx — icon badge, shared i18n keys
  • src/pages/Plugins.tsx — multi-select filter state, single-commit apply
  • src/pages/Plugins.test.tsx — updated to drive the dialog (open → select → apply); added a regression test asserting no Modes section is offered
  • src/i18n/locales/{en-US,es-ES,pt-BR}/{common,plugins,mcpServer}.json

Screenshots

Plugins page

Screenshot 2026-08-14 at 12 21 42

Server catalog page

Screenshot 2026-08-14 at 12 22 01

Signed-off-by: Marek Dano <mk.dano@gmail.com>

@gcgoncalves gcgoncalves left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants