Skip to content

feat(docs): add provider icons to tools sidebar#4807

Open
waleedlatif1 wants to merge 1 commit into
stagingfrom
waleedlatif1/docs-sidebar-provider-icons
Open

feat(docs): add provider icons to tools sidebar#4807
waleedlatif1 wants to merge 1 commit into
stagingfrom
waleedlatif1/docs-sidebar-provider-icons

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

Summary

  • Show the provider's brand icon next to each tool entry in the docs sidebar (Tools section)
  • Reuse the existing blockTypeToIconMap so icons stay in sync with the auto-generated mapping; resolve the icon from the /tools/<slug> URL
  • Only tool pages get an icon — Triggers, Blocks, and the Tools overview are unaffected

Type of Change

  • New feature

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link
Copy Markdown

vercel Bot commented May 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs Ready Ready Preview, Comment May 30, 2026 2:22am

Request Review

@cursor
Copy link
Copy Markdown

cursor Bot commented May 30, 2026

PR Summary

Low Risk
Docs-only sidebar presentation; no auth, API, or data handling changes.

Overview
The docs sidebar now shows each Tools provider’s brand icon beside its link, using the same blockTypeToIconMap as elsewhere. Icons are resolved from /tools/<slug> (with locale prefixes stripped) and only appear for single-segment tool pages—not Triggers, Blocks, or nested tool routes.

SidebarItem layout is adjusted slightly (desktop item classes drop lg:block) so the icon and label align in a flex row.

Reviewed by Cursor Bugbot for commit 685165c. Configure here.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 30, 2026

Greptile Summary

This PR adds provider brand icons to the docs sidebar Tools section by introducing a getToolIcon helper that resolves an icon component from the existing blockTypeToIconMap based on the /tools/<slug> URL pattern.

  • Adds getToolIcon(url) which strips language prefixes, validates the path is a direct /tools/<slug> page (no sub-pages), and looks up the icon in the auto-generated blockTypeToIconMap.
  • Renders the resolved icon at size-[14px] inside SidebarItem when one is found; no icon is rendered for non-tool pages.
  • Removes lg:block from the shared ITEM_DESKTOP class constant so that the flex layout (needed for icon + text alignment) is preserved at large breakpoints for all sidebar items.

Confidence Score: 4/5

Safe to merge — the feature is correctly scoped and the icon lookup is sound; the only side effect is a display-mode change for all sidebar items on desktop, which is visually benign for text-only entries.

The icon resolution logic correctly matches URL slugs to block types (the docs generator writes files as ${blockType}.mdx, preserving underscores, so URLs stay consistent with the map keys). The one intentional side effect — removing lg:block from ITEM_DESKTOP — changes desktop display mode for all sidebar items, not just tool pages, which the PR description implies are unaffected. For text-only items this is likely harmless, but it is an unannounced scope widening worth a second look.

apps/docs/components/docs-layout/sidebar-components.tsx — specifically the ITEM_DESKTOP constant change and its downstream effect on Blocks/Triggers sidebar items at large breakpoints.

Important Files Changed

Filename Overview
apps/docs/components/docs-layout/sidebar-components.tsx Adds getToolIcon helper and renders provider icons for /tools/<slug> sidebar entries; removes lg:block from ITEM_DESKTOP (affects all sidebar items, not just tool pages).

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[SidebarItem renders] --> B[getToolIcon called with item.url]
    B --> C[stripLangPrefix strips /en, /fr, etc.]
    C --> D{path starts with /tools/?}
    D -- No --> E[return null no icon rendered]
    D -- Yes --> F[extract slug after /tools/]
    F --> G{slug empty or contains /?}
    G -- Yes --> E
    G -- No --> H[blockTypeToIconMap lookup]
    H --> I{key found in map?}
    I -- No --> E
    I -- Yes --> J[return IconComponent]
    J --> K[render ToolIcon at size-14px]
    E --> L[render item.name only]
    K --> L
Loading

Reviews (1): Last reviewed commit: "feat(docs): add provider icons to tools ..." | Re-trigger Greptile

Comment on lines 70 to +71
const ITEM_DESKTOP =
'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight'
'lg:mb-[0.0625rem] lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight'
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.

P2 Layout mode change affects all sidebar items, not just tool pages

Removing lg:block from ITEM_DESKTOP causes every SidebarItem and every folder-as-leaf item to keep flex display on desktop, where previously lg:block overrode it. The PR description says Triggers, Blocks, and the Tools overview are unaffected, but their items now use a different display mode too. In practice the visual delta for text-only items is minimal (flex with a single text child is effectively equivalent to block), but items that were relying on block-box overflow behavior (e.g., very long names truncated differently) may render slightly differently across all sections.

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.

1 participant