Skip to content

[UI-REWRITE] catalog icon tile & logo fallback adjustments - #139

Open
a-effort wants to merge 3 commits into
mainfrom
catalog-icon-tile-tokens
Open

a-effort wants to merge 3 commits into
mainfrom
catalog-icon-tile-tokens

Conversation

@a-effort

@a-effort a-effort commented Sep 17, 2026

Copy link
Copy Markdown
Contributor

Follow-up to #132.

Adds --catalog-icon-tile and --catalog-icon-backing, replacing bg-muted and bg-neutral-100 in CatalogLogo:

CleanShot 2026-09-17 at 13 22 58@2x CleanShot 2026-09-17 at 13 22 43@2x

Notes:

  • Catalog entries with no bundled logo now render the MCP mark on that tile instead of ServerIcon, which picked a background by hashing the server name. ServerIcon is unchanged and still used elsewhere.
  • Restores the overflow-hidden dropped in 9d8ef94.
  • Assertions in ServerCatalog.test.tsx used ServerIcon's aria-label to detect the fallback. That label is gone, so they assert the tile and its mark instead.

Stacked on #132, so the diff includes its two commits. Will rebase onto main once it merges.

…server catalog page

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

Signed-off-by: Marek Dano <mk.dano@gmail.com>
@a-effort
a-effort marked this pull request as ready for review September 17, 2026 20:36
@a-effort
a-effort force-pushed the catalog-icon-tile-tokens branch from a9e2cd2 to 3797033 Compare September 17, 2026 20:38
… is missing

Adds --catalog-icon-tile and --catalog-icon-backing so the tile and the light
patch behind dark glyphs follow the theme by name instead of reusing bg-muted
and bg-neutral-100. The light-mode tile moves from oklch(0.97) to white and the
dark-mode backing softens from neutral-100 to neutral-300.

Catalog entries with no bundled logo now render the MCP mark on that same tile
rather than a name-hashed brand colour, so every card reads as one surface.
Restores the overflow-hidden that the rounded tile was added for.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
@a-effort
a-effort force-pushed the catalog-icon-tile-tokens branch from 3797033 to 9fc1479 Compare September 17, 2026 20:40
@a-effort a-effort changed the title feat: tokenize the catalog icon tile and use the MCP mark when a logo is missing [UI-REWRITE] catalog icon tile & logo fallback adjustments Sep 17, 2026
@a-effort
a-effort requested a balanced review from Copilot September 17, 2026 20:44

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🟢 Approval recommended

The focused visual changes are consistent with the stated requirements and adequately covered by updated tests.

Pull request overview

Adds theme-aware catalog icon tiles, improved dark-logo backing, and an MCP fallback mark.

Changes:

  • Introduces catalog icon color tokens for light and dark themes.
  • Updates catalog logos with clipping, backing, and fallback behavior.
  • Adjusts tests and shared API mocks accordingly.
File summaries
File Description
src/components/server-catalog/CatalogLogo.tsx Implements the revised icon tile and fallback.
src/index.css Adds theme-aware catalog icon tokens.
src/components/server-catalog/CatalogResults.test.tsx Tests tile and backing behavior.
src/pages/ServerCatalog.test.tsx Updates fallback assertions.
src/test/mocks/handlers.ts Adds default tag and permission handlers.
Review details
  • Files reviewed: 5/5 changed files
  • Comments generated: 0
  • Review effort level: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@marekdano marekdano 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.

Solid, small, well-scoped change.

LGTM 🚀

Comment on lines +9 to +10
const TILE =
"flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-catalog-icon-tile p-2 shadow-xs";

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 touch here, great way to ensure consistency between the tiles and preventing someone from accidentally updating one of the logo types! 👏

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.

4 participants