Skip to content

Redesign Plugins gallery with chip filters and a two-column catalog #544

Description

@pratikbuilds

Problem

The Plugins gallery currently stretches each connector across a full-width row. At desktop widths, the plugin identity and its action feel disconnected, while long category sections make the catalog slower to scan.

We should keep Plugins / Skills as the content-level navigation without repeating the same tab treatment for category filtering.

Proposal

  • Keep Plugins / Skills as the only tab list.
  • Replace category tabs with compact filter chips: All, Connected, Work, Developer, and Research.
  • Make chips visually distinct from tabs: contained shapes, spacing between controls, no underline, and a quiet selected state using existing semantic tokens.
  • Render the plugin catalog in two equal columns at desktop widths, collapsing to one column on narrower screens.
  • Keep each plugin logo, name, outcome sentence, connection status, and Connect / Manage action in one tight local grouping.
  • Preserve the existing page-level search behavior.

Interaction

  • All is selected by default.
  • Selecting a chip filters the current catalog without changing routes.
  • Chip counts reflect the available result set.
  • Connected acts as a quick status filter.
  • Connect continues into the existing connection flow; connected plugins use Manage.

Acceptance criteria

  • The page exposes exactly one semantic tab list: Plugins / Skills.
  • Category and status controls use button or radio semantics rather than tab semantics.
  • The catalog renders as two columns at the desktop breakpoint and one column below it.
  • Plugin actions remain visually adjacent to the plugin identity and status.
  • Filtering and search work together and have visible keyboard focus states.
  • Layout, color, type, spacing, and icons use the existing Workbench design system.
  • Composition tests cover chip filtering and responsive column behavior.
  • The result is verified through the browser walkthrough, not only API or DOM tests.

Proposed direction

Use the approved two-column catalog mockup as the hierarchy and layout reference; it is not a pixel specification.

Image

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions