feat(a2ui-playground): add logo for playground#2670
Conversation
|
📝 WalkthroughWalkthroughThe PR adds a themed logo image to the A2UI playground header. A light/dark logo variant is conditionally rendered based on the current theme, styled to 26×26 px, and accompanied by updated layout spacing and favicon configuration. ChangesPlayground Branding and Logo
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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.
🧹 Nitpick comments (2)
packages/genui/a2ui-playground/src/App.tsx (1)
22-25: ⚡ Quick winConsider renaming constants for clarity.
The constant names are counterintuitive:
LYNX_LIGHT_LOGOpoints tolynx-dark-logo.svgandLYNX_DARK_LOGOpoints tolynx-light-logo.svg. While the logic is correct (dark logo on light background, light logo on dark background), the naming creates confusion. Consider either:
- Renaming to reflect the logo appearance and inverting usage:
const LYNX_DARK_LOGO_URL = 'https://.../lynx-dark-logo.svg'; const LYNX_LIGHT_LOGO_URL = 'https://.../lynx-light-logo.svg'; // Then use: theme === 'dark' ? LYNX_LIGHT_LOGO_URL : LYNX_DARK_LOGO_URL
- Or making the purpose explicit:
const LYNX_LOGO_FOR_LIGHT_THEME = 'https://.../lynx-dark-logo.svg'; const LYNX_LOGO_FOR_DARK_THEME = 'https://.../lynx-light-logo.svg';🤖 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 `@packages/genui/a2ui-playground/src/App.tsx` around lines 22 - 25, The current constants LYNX_LIGHT_LOGO and LYNX_DARK_LOGO are misnamed (their URLs point to the opposite color variants); rename them to clear, unambiguous names (e.g. LYNX_DARK_LOGO_URL and LYNX_LIGHT_LOGO_URL) and update the selection logic where the theme is checked (the ternary that currently uses LYNX_LIGHT_LOGO / LYNX_DARK_LOGO) so the names match the actual SVG they reference (or alternatively rename to LYNX_LOGO_FOR_LIGHT_THEME and LYNX_LOGO_FOR_DARK_THEME if you prefer explicit-purpose names and adjust the theme-based usage accordingly).packages/genui/a2ui-playground/rsbuild.config.ts (1)
176-186: 💤 Low valueConsider making the favicon theme-aware.
The favicon currently uses the dark logo variant regardless of the user's system theme preference. Modern browsers support theme-aware favicons via multiple
<link>tags with media queries:💡 Optional enhancement for theme-aware favicon
html: { title: 'Lynx A2UI Playground', tags: [ { tag: 'link', attrs: { rel: 'icon', type: 'image/svg+xml', href: 'https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/lynx-dark-logo.svg', + media: '(prefers-color-scheme: light)', }, }, + { + tag: 'link', + attrs: { + rel: 'icon', + type: 'image/svg+xml', + href: + 'https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/lynx-light-logo.svg', + media: '(prefers-color-scheme: dark)', + }, + }, ], },This is purely cosmetic and can be deferred if out of scope.
🤖 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 `@packages/genui/a2ui-playground/rsbuild.config.ts` around lines 176 - 186, The current tags array contains a single link favicon pointing to the dark logo; make the favicon theme-aware by replacing or augmenting that single link entry (the object with tag: 'link' in the tags array) with two link entries using media attributes for prefers-color-scheme (e.g., media: '(prefers-color-scheme: dark)' with the dark SVG href and media: '(prefers-color-scheme: light)' with a light SVG href) and keep a neutral fallback link (no media) to ensure older browsers still get a favicon; update the attrs for these link objects accordingly within the same tags configuration.
🤖 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.
Nitpick comments:
In `@packages/genui/a2ui-playground/rsbuild.config.ts`:
- Around line 176-186: The current tags array contains a single link favicon
pointing to the dark logo; make the favicon theme-aware by replacing or
augmenting that single link entry (the object with tag: 'link' in the tags
array) with two link entries using media attributes for prefers-color-scheme
(e.g., media: '(prefers-color-scheme: dark)' with the dark SVG href and media:
'(prefers-color-scheme: light)' with a light SVG href) and keep a neutral
fallback link (no media) to ensure older browsers still get a favicon; update
the attrs for these link objects accordingly within the same tags configuration.
In `@packages/genui/a2ui-playground/src/App.tsx`:
- Around line 22-25: The current constants LYNX_LIGHT_LOGO and LYNX_DARK_LOGO
are misnamed (their URLs point to the opposite color variants); rename them to
clear, unambiguous names (e.g. LYNX_DARK_LOGO_URL and LYNX_LIGHT_LOGO_URL) and
update the selection logic where the theme is checked (the ternary that
currently uses LYNX_LIGHT_LOGO / LYNX_DARK_LOGO) so the names match the actual
SVG they reference (or alternatively rename to LYNX_LOGO_FOR_LIGHT_THEME and
LYNX_LOGO_FOR_DARK_THEME if you prefer explicit-purpose names and adjust the
theme-based usage accordingly).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4b5efce8-95eb-432a-8d22-0658d82d17f4
📒 Files selected for processing (3)
packages/genui/a2ui-playground/rsbuild.config.tspackages/genui/a2ui-playground/src/App.tsxpackages/genui/a2ui-playground/src/styles.css
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Merging this PR will improve performance by 28.95%
Performance Changes
Tip Curious why this is faster? Comment Comparing 
Footnotes
|
React External#1592 Bundle Size — 695.71KiB (0%).430e25d(current) vs 3161422 main#1588(baseline) Bundle metrics
|
| Current #1592 |
Baseline #1588 |
|
|---|---|---|
 Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
 Cache Invalidation |
0% |
41.03% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
17 |
17 |
| Duplicate Modules |
5 |
5 |
| Duplicate Code |
8.59% |
8.59% |
| Packages |
0 |
0 |
| Duplicate Packages |
0 |
0 |
Bundle analysis report Branch p/a2ui-icon Project dashboard
Generated by RelativeCI Documentation Report issue
React MTF Example#1610 Bundle Size — 208.25KiB (0%).430e25d(current) vs 3161422 main#1606(baseline) Bundle metrics
|
| Current #1610 |
Baseline #1606 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
46.57% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
193 |
193 |
| Duplicate Modules |
77 |
77 |
| Duplicate Code |
44.24% |
44.24% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #1610 |
Baseline #1606 |
|
|---|---|---|
| IMG |
111.23KiB |
111.23KiB |
| Other |
97.02KiB |
97.02KiB |
Bundle analysis report Branch p/a2ui-icon Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#8477 Bundle Size — 237.3KiB (0%).430e25d(current) vs 3161422 main#8473(baseline) Bundle metrics
|
| Current #8477 |
Baseline #8473 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
38.56% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
198 |
198 |
| Duplicate Modules |
80 |
80 |
| Duplicate Code |
44.74% |
44.74% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #8477 |
Baseline #8473 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
91.55KiB |
91.55KiB |
Bundle analysis report Branch p/a2ui-icon Project dashboard
Generated by RelativeCI Documentation Report issue
React Example with Element Template#746 Bundle Size — 200.14KiB (0%).430e25d(current) vs 3161422 main#742(baseline) Bundle metrics
|
| Current #746 |
Baseline #742 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
27.15% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
92(+1.1%) |
91 |
| Duplicate Modules |
27 |
27 |
| Duplicate Code |
39.76%(-0.03%) |
39.77% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #746 |
Baseline #742 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
54.39KiB |
54.39KiB |
Bundle analysis report Branch p/a2ui-icon Project dashboard
Generated by RelativeCI Documentation Report issue
Web Explorer#10051 Bundle Size — 903.53KiB (0%).430e25d(current) vs 3161422 main#10047(baseline) Bundle metrics
|
| Current #10051 |
Baseline #10047 |
|
|---|---|---|
| Initial JS |
45.06KiB |
45.06KiB |
| Initial CSS |
2.22KiB |
2.22KiB |
| Cache Invalidation |
0% |
0% |
| Chunks |
9 |
9 |
| Assets |
11 |
11 |
| Modules |
230(-0.86%) |
232 |
| Duplicate Modules |
11 |
11 |
| Duplicate Code |
27.12% |
27.12% |
| Packages |
10 |
10 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #10051 |
Baseline #10047 |
|
|---|---|---|
| JS |
499.15KiB |
499.15KiB |
| Other |
402.16KiB |
402.16KiB |
| CSS |
2.22KiB |
2.22KiB |
Bundle analysis report Branch p/a2ui-icon Project dashboard
Generated by RelativeCI Documentation Report issue
2 participants
Summary by CodeRabbit
New Features
Style
Checklist