fix(docs): fix salesforce docs & update styling (#2248)

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -7,8 +7,23 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/utils'
 
+const LANG_PREFIXES = ['/en', '/es', '/fr', '/de', '/ja', '/zh']
+
+function stripLangPrefix(path: string): string {
+  for (const prefix of LANG_PREFIXES) {
+    if (path === prefix) return '/'
+    if (path.startsWith(`${prefix}/`)) return path.slice(prefix.length)
+  }
+  return path
+}
+
 function isActive(url: string, pathname: string, nested = true): boolean {
-  return url === pathname || (nested && pathname.startsWith(`${url}/`))
+  const normalizedPathname = stripLangPrefix(pathname)
+  const normalizedUrl = stripLangPrefix(url)
+  return (
+    normalizedUrl === normalizedPathname ||
+    (nested && normalizedPathname.startsWith(`${normalizedUrl}/`))
+  )
 }
 
 export function SidebarItem({ item }: { item: Item }) {
@@ -16,97 +31,158 @@ export function SidebarItem({ item }: { item: Item }) {
   const active = isActive(item.url, pathname, false)
 
   return (
-    <li className='mb-[0.0625rem] list-none'>
-      <Link
-        href={item.url}
-        className={cn(
-          'block rounded-md px-2.5 py-1.5 font-normal text-[13px] leading-tight transition-colors',
-          'text-gray-600 dark:text-gray-400',
-          !active && 'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
-          active &&
-            'bg-purple-50/80 font-medium text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
-        )}
-      >
-        {item.name}
-      </Link>
-    </li>
+    <Link
+      href={item.url}
+      data-active={active}
+      className={cn(
+        // Mobile styles (default)
+        'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+        'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
+        active && 'bg-fd-primary/10 font-medium text-fd-primary',
+        // Desktop styles (lg+)
+        'lg:mb-[0.0625rem] lg:block lg:rounded-md lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight',
+        'lg:text-gray-600 lg:dark:text-gray-400',
+        !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
+        active &&
+          'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+      )}
+    >
+      {item.name}
+    </Link>
   )
 }
 
 export function SidebarFolder({ item, children }: { item: Folder; children: ReactNode }) {
   const pathname = usePathname()
   const hasActiveChild = checkHasActiveChild(item, pathname)
+  const hasChildren = item.children.length > 0
   const [open, setOpen] = useState(hasActiveChild)
 
   useEffect(() => {
     setOpen(hasActiveChild)
   }, [hasActiveChild])
 
+  const active = item.index ? isActive(item.index.url, pathname, false) : false
+
+  if (item.index && !hasChildren) {
+    return (
+      <Link
+        href={item.index.url}
+        data-active={active}
+        className={cn(
+          // Mobile styles (default)
+          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+          'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
+          active && 'bg-fd-primary/10 font-medium text-fd-primary',
+          // Desktop styles (lg+)
+          'lg:mb-[0.0625rem] lg:block lg:rounded-md lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight',
+          'lg:text-gray-600 lg:dark:text-gray-400',
+          !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
+          active &&
+            'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+        )}
+      >
+        {item.name}
+      </Link>
+    )
+  }
+
   return (
-    <li className='mb-[0.0625rem] list-none'>
-      {item.index ? (
-        <div className='flex items-center gap-0.5'>
+    <div className='flex flex-col lg:mb-[0.0625rem]'>
+      <div className='flex w-full items-center lg:gap-0.5'>
+        {item.index ? (
           <Link
             href={item.index.url}
+            data-active={active}
             className={cn(
-              'block flex-1 rounded-md px-2.5 py-1.5 font-medium text-[13px] leading-tight transition-colors',
-              'text-gray-800 dark:text-gray-200',
-              !isActive(item.index.url, pathname, false) &&
-                'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
-              isActive(item.index.url, pathname, false) &&
-                'bg-purple-50/80 text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
+              // Mobile styles (default)
+              'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+              'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
+              active && 'bg-fd-primary/10 font-medium text-fd-primary',
+              // Desktop styles (lg+)
+              'lg:block lg:flex-1 lg:rounded-md lg:px-2.5 lg:py-1.5 lg:font-medium lg:text-[13px] lg:leading-tight',
+              'lg:text-gray-800 lg:dark:text-gray-200',
+              !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
+              active &&
+                'lg:bg-purple-50/80 lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
             )}
           >
             {item.name}
           </Link>
+        ) : (
           <button
             onClick={() => setOpen(!open)}
-            className='cursor-pointer rounded p-1 transition-colors hover:bg-gray-100/60 dark:hover:bg-gray-800/40'
-            aria-label={open ? 'Collapse' : 'Expand'}
+            className={cn(
+              // Mobile styles (default)
+              'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+              'text-fd-muted-foreground hover:bg-fd-accent/50',
+              // Desktop styles (lg+)
+              'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-md lg:px-2.5 lg:py-1.5 lg:text-left lg:font-medium lg:text-[13px] lg:leading-tight',
+              'lg:text-gray-800 lg:hover:bg-gray-100/60 lg:dark:text-gray-200 lg:dark:hover:bg-gray-800/40'
+            )}
           >
+            <span>{item.name}</span>
+            {/* Desktop-only chevron for non-index folders */}
             <ChevronRight
               className={cn(
-                'h-3 w-3 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
+                'ml-auto hidden h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-200 ease-in-out lg:block dark:text-gray-500',
                 open && 'rotate-90'
               )}
             />
           </button>
-        </div>
-      ) : (
-        <button
-          onClick={() => setOpen(!open)}
+        )}
+        {hasChildren && (
+          <button
+            onClick={() => setOpen(!open)}
+            className={cn(
+              // Mobile styles
+              'rounded p-1 hover:bg-fd-accent/50',
+              // Desktop styles
+              'lg:cursor-pointer lg:rounded lg:p-1 lg:transition-colors lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40'
+            )}
+            aria-label={open ? 'Collapse' : 'Expand'}
+          >
+            <ChevronRight
+              className={cn(
+                // Mobile styles
+                'h-4 w-4 transition-transform',
+                // Desktop styles
+                'lg:h-3 lg:w-3 lg:text-gray-400 lg:duration-200 lg:ease-in-out lg:dark:text-gray-500',
+                open && 'rotate-90'
+              )}
+            />
+          </button>
+        )}
+      </div>
+      {hasChildren && (
+        <div
           className={cn(
-            'flex w-full cursor-pointer items-center justify-between rounded-md px-2.5 py-1.5 text-left font-medium text-[13px] leading-tight transition-colors',
-            'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
-            'text-gray-800 dark:text-gray-200'
+            'overflow-hidden transition-all duration-200 ease-in-out',
+            open ? 'max-h-[10000px] opacity-100' : 'max-h-0 opacity-0'
           )}
         >
-          <span>{item.name}</span>
-          <ChevronRight
-            className={cn(
-              'ml-auto h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
-              open && 'rotate-90'
-            )}
-          />
-        </button>
+          {/* Mobile: simple indent */}
+          <div className='ml-4 flex flex-col gap-0.5 lg:hidden'>{children}</div>
+          {/* Desktop: styled with border */}
+          <ul className='mt-0.5 ml-2 hidden space-y-[0.0625rem] border-gray-200/60 border-l pl-2.5 lg:block dark:border-gray-700/60'>
+            {children}
+          </ul>
+        </div>
       )}
-      <div
-        className={cn(
-          'overflow-hidden transition-all duration-200 ease-in-out',
-          open ? 'max-h-[10000px] opacity-100' : 'max-h-0 opacity-0'
-        )}
-      >
-        <ul className='mt-0.5 ml-2 space-y-[0.0625rem] border-gray-200/60 border-l pl-2.5 dark:border-gray-700/60'>
-          {children}
-        </ul>
-      </div>
-    </li>
+    </div>
   )
 }
 
 export function SidebarSeparator({ item }: { item: Separator }) {
   return (
-    <p className='mt-4 mb-1.5 px-2.5 font-semibold text-[10px] text-gray-500/80 uppercase tracking-wide dark:text-gray-500'>
+    <p
+      className={cn(
+        // Mobile styles
+        'mt-4 mb-2 px-2 font-medium text-fd-muted-foreground text-xs',
+        // Desktop styles
+        'lg:mt-4 lg:mb-1.5 lg:px-2.5 lg:font-semibold lg:text-[10px] lg:text-gray-500/80 lg:uppercase lg:tracking-wide lg:dark:text-gray-500'
+      )}
+    >
       {item.name}
     </p>
   )

apps/docs/components/navbar/navbar.tsx

@@ -20,7 +20,7 @@ export function Navbar() {
         <div
           className='relative flex w-full items-center justify-between'
           style={{
-            paddingLeft: 'calc(var(--sidebar-offset) + 20px)',
+            paddingLeft: 'calc(var(--sidebar-offset) + 32px)',
             paddingRight: 'calc(var(--toc-offset) + 60px)',
           }}
         >

apps/docs/components/ui/icon-mapping.ts

@@ -116,114 +116,114 @@ import {
 type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
 
 export const blockTypeToIconMap: Record<string, IconComponent> = {
-  calendly: CalendlyIcon,
-  mailchimp: MailchimpIcon,
-  postgresql: PostgresIcon,
-  twilio_voice: TwilioIcon,
-  elasticsearch: ElasticsearchIcon,
-  rds: RDSIcon,
-  translate: TranslateIcon,
-  dynamodb: DynamoDBIcon,
-  wordpress: WordpressIcon,
-  tavily: TavilyIcon,
-  zendesk: ZendeskIcon,
-  stagehand_agent: StagehandIcon,
-  youtube: YouTubeIcon,
-  supabase: SupabaseIcon,
-  vision: EyeIcon,
   zoom: ZoomIcon,
-  confluence: ConfluenceIcon,
-  arxiv: ArxivIcon,
-  webflow: WebflowIcon,
-  pinecone: PineconeIcon,
-  apollo: ApolloIcon,
-  whatsapp: WhatsAppIcon,
-  typeform: TypeformIcon,
-  qdrant: QdrantIcon,
-  shopify: ShopifyIcon,
-  asana: AsanaIcon,
-  apify: ApifyIcon,
-  memory: BrainIcon,
-  gitlab: GitLabIcon,
-  polymarket: PolymarketIcon,
-  serper: SerperIcon,
-  linear: LinearIcon,
-  exa: ExaAIIcon,
-  telegram: TelegramIcon,
-  salesforce: SalesforceIcon,
-  hubspot: HubspotIcon,
-  hunter: HunterIOIcon,
-  linkup: LinkupIcon,
-  mongodb: MongoDBIcon,
-  pylon: PylonIcon,
-  airtable: AirtableIcon,
-  discord: DiscordIcon,
-  ahrefs: AhrefsIcon,
-  neo4j: Neo4jIcon,
-  tts: TTSIcon,
-  jina: JinaAIIcon,
-  google_docs: GoogleDocsIcon,
-  perplexity: PerplexityIcon,
-  google_search: GoogleIcon,
-  x: xIcon,
-  kalshi: KalshiIcon,
-  google_calendar: GoogleCalendarIcon,
   zep: ZepIcon,
-  posthog: PosthogIcon,
-  grafana: GrafanaIcon,
-  google_slides: GoogleSlidesIcon,
-  microsoft_planner: MicrosoftPlannerIcon,
-  thinking: BrainIcon,
-  pipedrive: PipedriveIcon,
-  dropbox: DropboxIcon,
-  stagehand: StagehandIcon,
-  google_forms: GoogleFormsIcon,
-  file: DocumentIcon,
-  mistral_parse: MistralIcon,
-  gmail: GmailIcon,
-  openai: OpenAIIcon,
-  outlook: OutlookIcon,
-  incidentio: IncidentioIcon,
-  onedrive: MicrosoftOneDriveIcon,
-  resend: ResendIcon,
-  google_vault: GoogleVaultIcon,
-  sharepoint: MicrosoftSharepointIcon,
-  huggingface: HuggingFaceIcon,
-  sendgrid: SendgridIcon,
-  video_generator: VideoIcon,
-  smtp: SmtpIcon,
-  google_groups: GoogleGroupsIcon,
-  mailgun: MailgunIcon,
-  clay: ClayIcon,
-  jira: JiraIcon,
-  search: SearchIcon,
-  linkedin: LinkedInIcon,
-  wealthbox: WealthboxIcon,
-  notion: NotionIcon,
-  elevenlabs: ElevenLabsIcon,
-  microsoft_teams: MicrosoftTeamsIcon,
-  github: GithubIcon,
-  ssh: SshIcon,
-  google_drive: GoogleDriveIcon,
-  sentry: SentryIcon,
-  reddit: RedditIcon,
-  parallel_ai: ParallelIcon,
-  stripe: StripeIcon,
-  s3: S3Icon,
-  trello: TrelloIcon,
-  mem0: Mem0Icon,
-  knowledge: PackageSearchIcon,
-  intercom: IntercomIcon,
-  twilio_sms: TwilioIcon,
-  slack: SlackIcon,
-  datadog: DatadogIcon,
-  microsoft_excel: MicrosoftExcelIcon,
-  image_generator: ImageIcon,
-  google_sheets: GoogleSheetsIcon,
+  zendesk: ZendeskIcon,
+  youtube: YouTubeIcon,
+  x: xIcon,
+  wordpress: WordpressIcon,
   wikipedia: WikipediaIcon,
-  cursor: CursorIcon,
-  firecrawl: FirecrawlIcon,
-  mysql: MySQLIcon,
-  browser_use: BrowserUseIcon,
+  whatsapp: WhatsAppIcon,
+  webflow: WebflowIcon,
+  wealthbox: WealthboxIcon,
+  vision: EyeIcon,
+  video_generator: VideoIcon,
+  typeform: TypeformIcon,
+  twilio_voice: TwilioIcon,
+  twilio_sms: TwilioIcon,
+  tts: TTSIcon,
+  trello: TrelloIcon,
+  translate: TranslateIcon,
+  thinking: BrainIcon,
+  telegram: TelegramIcon,
+  tavily: TavilyIcon,
+  supabase: SupabaseIcon,
   stt: STTIcon,
+  stripe: StripeIcon,
+  stagehand_agent: StagehandIcon,
+  stagehand: StagehandIcon,
+  ssh: SshIcon,
+  smtp: SmtpIcon,
+  slack: SlackIcon,
+  shopify: ShopifyIcon,
+  sharepoint: MicrosoftSharepointIcon,
+  serper: SerperIcon,
+  sentry: SentryIcon,
+  sendgrid: SendgridIcon,
+  search: SearchIcon,
+  salesforce: SalesforceIcon,
+  s3: S3Icon,
+  resend: ResendIcon,
+  reddit: RedditIcon,
+  rds: RDSIcon,
+  qdrant: QdrantIcon,
+  pylon: PylonIcon,
+  posthog: PosthogIcon,
+  postgresql: PostgresIcon,
+  polymarket: PolymarketIcon,
+  pipedrive: PipedriveIcon,
+  pinecone: PineconeIcon,
+  perplexity: PerplexityIcon,
+  parallel_ai: ParallelIcon,
+  outlook: OutlookIcon,
+  openai: OpenAIIcon,
+  onedrive: MicrosoftOneDriveIcon,
+  notion: NotionIcon,
+  neo4j: Neo4jIcon,
+  mysql: MySQLIcon,
+  mongodb: MongoDBIcon,
+  mistral_parse: MistralIcon,
+  microsoft_teams: MicrosoftTeamsIcon,
+  microsoft_planner: MicrosoftPlannerIcon,
+  microsoft_excel: MicrosoftExcelIcon,
+  memory: BrainIcon,
+  mem0: Mem0Icon,
+  mailgun: MailgunIcon,
+  mailchimp: MailchimpIcon,
+  linkup: LinkupIcon,
+  linkedin: LinkedInIcon,
+  linear: LinearIcon,
+  knowledge: PackageSearchIcon,
+  kalshi: KalshiIcon,
+  jira: JiraIcon,
+  jina: JinaAIIcon,
+  intercom: IntercomIcon,
+  incidentio: IncidentioIcon,
+  image_generator: ImageIcon,
+  hunter: HunterIOIcon,
+  huggingface: HuggingFaceIcon,
+  hubspot: HubspotIcon,
+  grafana: GrafanaIcon,
+  google_vault: GoogleVaultIcon,
+  google_slides: GoogleSlidesIcon,
+  google_sheets: GoogleSheetsIcon,
+  google_groups: GoogleGroupsIcon,
+  google_forms: GoogleFormsIcon,
+  google_drive: GoogleDriveIcon,
+  google_docs: GoogleDocsIcon,
+  google_calendar: GoogleCalendarIcon,
+  google_search: GoogleIcon,
+  gmail: GmailIcon,
+  gitlab: GitLabIcon,
+  github: GithubIcon,
+  firecrawl: FirecrawlIcon,
+  file: DocumentIcon,
+  exa: ExaAIIcon,
+  elevenlabs: ElevenLabsIcon,
+  elasticsearch: ElasticsearchIcon,
+  dynamodb: DynamoDBIcon,
+  dropbox: DropboxIcon,
+  discord: DiscordIcon,
+  datadog: DatadogIcon,
+  cursor: CursorIcon,
+  confluence: ConfluenceIcon,
+  clay: ClayIcon,
+  calendly: CalendlyIcon,
+  browser_use: BrowserUseIcon,
+  asana: AsanaIcon,
+  arxiv: ArxivIcon,
+  apollo: ApolloIcon,
+  apify: ApifyIcon,
+  airtable: AirtableIcon,
+  ahrefs: AhrefsIcon,
 }