Refactor: replace CodeLangToggle with CodeExampleClient for improved (#430)#431
Refactor: replace CodeLangToggle with CodeExampleClient for improved (#430)#431vaibhav0725 wants to merge 1 commit into
Conversation
…language toggling in CodeExample component
|
@vaibhav0725 is attempting to deploy a commit to the kmkoushik's projects Team on Vercel. A member of the Team first needs to authorize it. |
Walkthrough
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/marketing/src/components/CodeExampleClient.tsx (1)
6-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate
LangItemtype — consolidate into one shared definition.
LangItemis independently redefined here;CodeLangToggle.tsxalready declares a structurally similar (but not identical)LangItem. Keeping two copies risks silent drift as fields change.♻️ Proposed fix
-type LangItem = { - key: string; - label: string; - kind: string; -}; +import type { LangItem } from "./CodeLangToggle";(requires exporting
LangItemfromCodeLangToggle.tsx)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/marketing/src/components/CodeExampleClient.tsx` around lines 6 - 10, Remove the local LangItem definition from CodeExampleClient.tsx and reuse the exported LangItem type from CodeLangToggle.tsx. Export the existing shared definition, then update the import and any usages in CodeExampleClient to reference it without changing behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/marketing/src/components/CodeExample.tsx`:
- Around line 117-129: Remove the `as any` cast from the `lang` prop in the
`CodeBlock` usage within the `panels` mapping, passing `l.shiki` directly.
Preserve the existing language values and rendering behavior while relying on
`CodeBlock`’s `BundledLanguage | "text"` type validation.
In `@apps/marketing/src/components/CodeExampleClient.tsx`:
- Around line 63-65: Update the language-toggle announcement in
CodeExampleClient so the aria-live region’s text changes whenever the selected
language changes, rather than rendering the static “Language example toggled”
text. Reuse the existing language state or toggle handler to include the current
language in the announcement while preserving the sr-only and polite live-region
behavior.
---
Nitpick comments:
In `@apps/marketing/src/components/CodeExampleClient.tsx`:
- Around line 6-10: Remove the local LangItem definition from
CodeExampleClient.tsx and reuse the exported LangItem type from
CodeLangToggle.tsx. Export the existing shared definition, then update the
import and any usages in CodeExampleClient to reference it without changing
behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: aa3c1595-8c1d-49a2-aba5-8ad458242382
📒 Files selected for processing (3)
apps/marketing/src/components/CodeExample.tsxapps/marketing/src/components/CodeExampleClient.tsxapps/marketing/src/components/CodeLangToggle.tsx
| const panels = Object.fromEntries( | ||
| await Promise.all( | ||
| languages.map(async (l) => [ | ||
| l.key, | ||
| <CodeBlockWithCopy key={l.key} code={l.code}> | ||
| <CodeBlock lang={l.shiki as any} className="p-4 rounded-[10px]"> | ||
| {l.code} | ||
| </CodeBlock> | ||
| </CodeBlockWithCopy>, | ||
| ]) | ||
| ) | ||
| ); | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
fd code-block.tsx packages/ui --exec cat -n {} \; 2>/dev/null | sed -n '1,20p'
rg -n "type Props" packages/ui/src/code-block.tsx -A 8Repository: usesend/useSend
Length of output: 828
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== apps/marketing/src/components/CodeExample.tsx ==\n'
cat -n apps/marketing/src/components/CodeExample.tsx | sed -n '1,180p'
printf '\n== shiki language references in repo ==\n'
rg -n '"typescript"|"python"|"go"|"php"|BundledLanguage' . -g '!**/node_modules/**' -g '!**/.next/**' -g '!**/dist/**' -g '!**/build/**' | sed -n '1,120p'Repository: usesend/useSend
Length of output: 7623
Remove the as any cast on lang. CodeBlock already accepts BundledLanguage | "text", so this only weakens type safety and can hide future language mismatches.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/marketing/src/components/CodeExample.tsx` around lines 117 - 129, Remove
the `as any` cast from the `lang` prop in the `CodeBlock` usage within the
`panels` mapping, passing `l.shiki` directly. Preserve the existing language
values and rendering behavior while relying on `CodeBlock`’s `BundledLanguage |
"text"` type validation.
| <div className="sr-only" aria-live="polite"> | ||
| Language example toggled | ||
| </div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Static aria-live text never triggers a screen-reader announcement.
Screen readers announce live regions only when their content changes. This text is hardcoded and identical on every render, so switching languages never actually announces anything to assistive tech, despite that being the intent of this region.
🔊 Proposed fix
+ const activeLabel =
+ languages.find((l) => l.key === activeLang)?.label ?? activeLang;
+
return (
<>
...
<div className="sr-only" aria-live="polite">
- Language example toggled
+ Showing {activeLabel} example
</div>
</>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="sr-only" aria-live="polite"> | |
| Language example toggled | |
| </div> | |
| const activeLabel = | |
| languages.find((l) => l.key === activeLang)?.label ?? activeLang; | |
| return ( | |
| <> | |
| <div className="sr-only" aria-live="polite"> | |
| Showing {activeLabel} example | |
| </div> | |
| </> | |
| ); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/marketing/src/components/CodeExampleClient.tsx` around lines 63 - 65,
Update the language-toggle announcement in CodeExampleClient so the aria-live
region’s text changes whenever the selected language changes, rather than
rendering the static “Language example toggled” text. Reuse the existing
language state or toggle handler to include the current language in the
announcement while preserving the sr-only and polite live-region behavior.
1 participant
Closes #430
Summary:
Adds a smooth height animation when switching languages in the homepage Developers code example. The block no longer snaps between sizes.
Test plan
Screen.Recording.2026-07-19.at.8.31.26.PM.mov
Summary by cubic
Replace
CodeLangTogglewithCodeExampleClientto add a smooth height animation when switching languages in the homepage Developers code example. The code block now resizes smoothly (~300ms) without snapping or flicker.CodeExampleClientto control active language and measure panel height for a 300ms transition.CodeBlock/CodeBlockWithCopy; pass pre-rendered panels into the client.LangToggleto controlledactive/onActiveChange; removed DOM classList manipulation.Written for commit b58d353. Summary will update on new commits.
Summary by CodeRabbit
Enhancements
Refactor