Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
waleedlatif1 wants to merge 1 commit into
base: staging
Choose a base branch
from
+16 −1
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion apps/docs/components/docs-layout/sidebar-components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { type ReactNode, useState } from 'react'
import type { Folder, Item, Separator } from 'fumadocs-core/page-tree'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { blockTypeToIconMap } from '@/components/ui/icon-mapping'
import { i18n } from '@/lib/i18n'
import { cn } from '@/lib/utils'

Expand Down Expand Up @@ -41,6 +42,18 @@ function stripLangPrefix(path: string): string {
return path
}

/**
* Resolves the provider icon for a tools sidebar item. Tool pages live under
* `/tools/<slug>`, where the slug matches a block type in the icon map.
*/
function getToolIcon(url: string) {
const path = stripLangPrefix(url)
if (!path.startsWith('/tools/')) return null
const slug = path.slice('/tools/'.length)
if (!slug || slug.includes('/')) return null
return blockTypeToIconMap[slug] ?? null
}

function isActive(url: string, pathname: string, nested = true): boolean {
const normalizedPathname = stripLangPrefix(pathname)
const normalizedUrl = stripLangPrefix(url)
Expand All @@ -55,7 +68,7 @@ const ITEM_BASE =
const ITEM_ACTIVE_MOBILE = 'bg-fd-primary/10 font-medium text-fd-primary'

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'
Comment on lines 70 to +71
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot May 30, 2026

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.

const ITEM_TEXT = 'lg:text-[#3b3b3b] lg:dark:text-[#cdcdcd]'
const ITEM_HOVER = 'lg:hover:bg-[#f2f2f2] lg:dark:hover:bg-[#262626]'
const ITEM_ACTIVE =
Expand All @@ -69,6 +82,7 @@ const FOLDER_ACTIVE =
export function SidebarItem({ item }: { item: Item }) {
const pathname = usePathname()
const active = isActive(item.url, pathname, false)
const ToolIcon = getToolIcon(item.url)

return (
<Link
Expand All @@ -83,6 +97,7 @@ export function SidebarItem({ item }: { item: Item }) {
active && ITEM_ACTIVE
)}
>
{ToolIcon && <ToolIcon className='size-[14px] flex-shrink-0' />}
{item.name}
</Link>
)
Expand Down
Loading