Conversation
- index.css/Navbar 全面改成星際 HUD 視覺（星點背景、掃描線、青橘配色、JetBrains Mono） - 個人資料頁改成合併式 hero 面板，帳號設定改清單樣式 - 修正頭像拖曳/縮放的座標計算 bug，改用實際圖片尺寸算可拖曳範圍 - 修正 favicon 未跳脫 XML 特殊字元、置中偏移的問題 - 改用 Claude Design 提供的正式圖示套件取代暫用版本，補回被誤刪的 manifest.webmanifest Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR refreshes the application theme and responsive navigation, updates metadata and fonts, adds intrinsic-size avatar positioning, redesigns learning surfaces, and introduces stage-based profile progress with revised account actions. ChangesApplication UI refresh
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/index.css (1)
29-29: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winQuote unquoted font family names to satisfy Stylelint
value-keyword-case.Stylelint flags
MenloandConsolasas violatingvalue-keyword-case. Font family names are case-sensitive, so lowercasing them would break font resolution. The correct fix is to quote them.🔧 Proposed fix
- --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; + --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;🤖 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 `@src/index.css` at line 29, Update the --font-mono declaration to quote the Menlo and Consolas font family names, preserving their original casing and the existing fallback order.Source: Linters/SAST tools
src/app/layout.tsx (1)
33-39: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winPrefer
next/fontover manual Google Fonts<link>tags.Next.js provides
next/font/googlewhich self-hosts fonts, eliminates the network round-trip tofonts.googleapis.com, prevents layout shift, and automatically injectspreconnect. The current approach adds render-blocking external requests and a third-party dependency on Google's CDN.♻️ Proposed refactor using next/font
+import { JetBrains_Mono, Noto_Sans_TC } from 'next/font/google' + +const jetBrainsMono = JetBrains_Mono({ + subsets: ['latin'], + weight: ['400', '500', '700', '800'], + variable: '--font-mono', +}) + +const notoSansTC = Noto_Sans_TC({ + subsets: ['latin'], + weight: ['400', '500', '700', '900'], + variable: '--font-sans', +}) + const RootLayout = ({ children }: { children: React.ReactNode }) => { return ( <ClerkProvider afterSignOutUrl="/"> - <html lang="zh-TW"> - <head> - <link rel="preconnect" href="https://fonts.googleapis.com" /> - <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> - <link - href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap" - rel="stylesheet" - /> - </head> + <html lang="zh-TW" className={`${jetBrainsMono.variable} ${notoSansTC.variable}`}> <body>{children}</body> </html> </ClerkProvider> ) }Then update
src/index.cssto reference the CSS variables set bynext/font:- --font-sans: 'Noto Sans TC', system-ui, -apple-system, sans-serif; - --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; + --font-sans: var(--font-sans), 'Noto Sans TC', system-ui, -apple-system, sans-serif; + --font-mono: var(--font-mono), 'SF Mono', Menlo, Consolas, monospace;As per coding guidelines from Next.js 15+ documentation,
next/fontis the recommended approach for font loading, providing automatic optimization and self-hosting.🤖 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 `@src/app/layout.tsx` around lines 33 - 39, Replace the manual Google Fonts links and preconnect tags in the layout head with Next.js `next/font/google` font definitions for JetBrains Mono and Noto Sans TC. Configure the fonts to expose CSS variables, apply those variables through the layout, and update the global styles in `src/index.css` to use the generated variables while preserving the existing font weights and typography.
🤖 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 `@src/components/AccountHeader.tsx`:
- Around line 25-29: Update readAvatarPosition to validate and clamp persisted
x, y, and scale values before returning them, rejecting non-finite values such
as NaN and Infinity and enforcing the component’s existing allowed ranges.
Preserve the default scale of 1 when scale is invalid or absent, and ensure
unsafeMetadata cannot produce out-of-range avatar positioning or sizing.
- Around line 88-93: In the successful upload path of AccountHeader, update
posBeforeEdit to DEFAULT_POS immediately after setPos(DEFAULT_POS) and before
setIsRepositioning(true). Preserve the existing pre-upload baseline capture and
repositioning flow.
---
Nitpick comments:
In `@src/app/layout.tsx`:
- Around line 33-39: Replace the manual Google Fonts links and preconnect tags
in the layout head with Next.js `next/font/google` font definitions for
JetBrains Mono and Noto Sans TC. Configure the fonts to expose CSS variables,
apply those variables through the layout, and update the global styles in
`src/index.css` to use the generated variables while preserving the existing
font weights and typography.
In `@src/index.css`:
- Line 29: Update the --font-mono declaration to quote the Menlo and Consolas
font family names, preserving their original casing and the existing fallback
order.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: e5bee709-cb32-436f-8ab2-1c65ccd6ad5e
⛔ Files ignored due to path filters (12)
public/apple-touch-icon.pngis excluded by!**/*.pngpublic/favicon.svgis excluded by!**/*.svgpublic/icon-1024.pngis excluded by!**/*.pngpublic/icon-120.pngis excluded by!**/*.pngpublic/icon-180.pngis excluded by!**/*.pngpublic/icon-192.pngis excluded by!**/*.pngpublic/icon-29.pngis excluded by!**/*.pngpublic/icon-40.pngis excluded by!**/*.pngpublic/icon-512.pngis excluded by!**/*.pngpublic/icon-540.pngis excluded by!**/*.pngpublic/icon-60.pngis excluded by!**/*.pngpublic/icon-87.pngis excluded by!**/*.png
📒 Files selected for processing (7)
public/manifest.webmanifestsrc/app/layout.tsxsrc/components/AccountHeader.tsxsrc/components/Icons.tsxsrc/components/Navbar.tsxsrc/index.csssrc/screens/Profile.tsx
💤 Files with no reviewable changes (1)
- src/components/Icons.tsx
readAvatarPosition 補上有限數值檢查與範圍限制，避免 unsafeMetadata 遭竄改（NaN/Infinity/超出範圍）導致頭像版位跑版；上傳新照片成功後同步重設 posBeforeEdit，避免取消調整時誤用舊照片的位置設定。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1 participant
Summary by CodeRabbit
New Features
Improvements