Conversation
透過 URL pathname 直接渲染，App 內無任何連結導向，並加入 Vercel SPA rewrite 確保直接訪問該路徑時不會 404。
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR adds a ChangesPrivacy Page and Routing
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant App
participant Privacy
Browser->>App: navigate to /private
App->>App: check window.location.pathname
App->>Privacy: render(darkMode, onToggleDark)
Privacy-->>Browser: display policy sections
Browser->>Privacy: click toggle button
Privacy->>App: onToggleDark()
App-->>Privacy: updated darkMode
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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.
Actionable comments posted: 1
🧹 Nitpick comments (1)
pwa/src/App.tsx (1)
16-24: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueWrapper markup duplicated with the main render path.
The
dark/min-h-screen bg-stone-50 dark:bg-gray-900wrapper here duplicates lines 71-72 in the main return. Minor, but could be extracted into a sharedAppShell-style wrapper to avoid drift if the theming classes change later.🤖 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 `@pwa/src/App.tsx` around lines 16 - 24, The wrapper markup in App is duplicated between the /private branch and the main render path, so extract the shared dark mode and min-h-screen theme container into a reusable AppShell-style wrapper. Update the App component to render Privacy and the main content through that shared wrapper, reusing the existing darkMode state and onToggleDark handler so the theming classes stay in one place and won’t drift.
🤖 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 `@pwa/src/page/Privacy.tsx`:
- Around line 97-146: The Privacy component uses inline style objects throughout
instead of the project’s Tailwind className convention. Update the `Privacy`
component to replace the computed color/style variables and all `style={{...}}`
usages with `className`-based styling, using existing `dark:` patterns like
other pages. Keep the layout and visual appearance by moving the header, toggle
button, card wrapper, headings, and paragraphs to Tailwind utilities or CSS
variables consumed via className. Focus on the `Privacy` component and its
section rendering loop so it aligns with the app-wide JSX styling guideline.
---
Nitpick comments:
In `@pwa/src/App.tsx`:
- Around line 16-24: The wrapper markup in App is duplicated between the
/private branch and the main render path, so extract the shared dark mode and
min-h-screen theme container into a reusable AppShell-style wrapper. Update the
App component to render Privacy and the main content through that shared
wrapper, reusing the existing darkMode state and onToggleDark handler so the
theming classes stay in one place and won’t drift.
🪄 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: c542296c-6524-44c1-ad53-99e6e838f1f5
📒 Files selected for processing (4)
pwa/src/App.tsxpwa/src/components/Library/icons.tsxpwa/src/page/Privacy.tsxpwa/vercel.json
| const Privacy = ({ darkMode, onToggleDark }: Props) => { | ||
| const paperBg = darkMode ? '#1a1816' : '#f9f7f2' | ||
| const paperBg2 = darkMode ? '#231f1c' : '#f1ede4' | ||
| const borderCol = darkMode ? '#3a3430' : '#e4ddd0' | ||
| const inkCol = darkMode ? '#e8e0d4' : '#2a2420' | ||
| const ink3Col = darkMode ? '#8a7f74' : '#9a8f80' | ||
|
|
||
| return ( | ||
| <div className="flex flex-col min-h-screen" style={{ background: paperBg, color: inkCol }}> | ||
| <div | ||
| className="flex items-center gap-2 px-4 py-3" | ||
| style={{ borderBottom: `1px solid ${borderCol}`, paddingTop: 'max(env(safe-area-inset-top), 12px)' }} | ||
| > | ||
| <span style={{ fontFamily: SERIF, fontSize: 16, fontWeight: 500 }}>隱私權政策</span> | ||
| <button className="p-2 rounded-full transition ml-auto" style={{ color: ink3Col }} onClick={onToggleDark}> | ||
| {darkMode ? <IconSun /> : <IconMoon />} | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="flex-1 flex items-center justify-center overflow-y-auto px-4 py-10"> | ||
| <div | ||
| style={{ | ||
| width: '100%', maxWidth: 640, | ||
| background: paperBg2, border: `1px solid ${borderCol}`, | ||
| borderRadius: 12, padding: '32px 28px', | ||
| }} | ||
| > | ||
| <h1 style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400, marginBottom: 6, textAlign: 'center' }}> | ||
| 隱私權政策 | ||
| </h1> | ||
| <p style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.08em', color: ink3Col, textAlign: 'center', marginBottom: 28 }}> | ||
| TRAVEL IN TIME · 生效日期 2026-07-07 | ||
| </p> | ||
|
|
||
| {SECTIONS.map((section) => ( | ||
| <div key={section.title} style={{ marginBottom: 22 }}> | ||
| <h2 style={{ fontFamily: SERIF, fontSize: 16, fontWeight: 500, marginBottom: 8 }}> | ||
| {section.title} | ||
| </h2> | ||
| {section.paragraphs.map((p, i) => ( | ||
| <p key={i} style={{ fontSize: 13, lineHeight: 1.75, color: inkCol, marginBottom: 8 }}> | ||
| {p} | ||
| </p> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Extensive inline styles violate the tsx className guideline.
Nearly every element in this component (header, toggle button, card wrapper, headings, paragraphs) uses style={{...}} instead of Tailwind className. The app already establishes a dark class + dark: utility pattern in App.tsx/other pages (e.g. bg-stone-50 dark:bg-gray-900); this component instead computes hex colors in JS and applies them via inline style, bypassing that convention entirely.
Consider replacing the computed color variables with Tailwind dark: variant classes (or CSS custom properties consumed via className) so the component matches the rest of the codebase and the coding guideline.
As per coding guidelines, **/*.tsx: "React JSX 頁面/元件中應使用 className 寫法，並避免使用 inline style".
🤖 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 `@pwa/src/page/Privacy.tsx` around lines 97 - 146, The Privacy component uses
inline style objects throughout instead of the project’s Tailwind className
convention. Update the `Privacy` component to replace the computed color/style
variables and all `style={{...}}` usages with `className`-based styling, using
existing `dark:` patterns like other pages. Keep the layout and visual
appearance by moving the header, toggle button, card wrapper, headings, and
paragraphs to Tailwind utilities or CSS variables consumed via className. Focus
on the `Privacy` component and its section rendering loop so it aligns with the
app-wide JSX styling guideline.
Source: Coding guidelines
1 participant
透過 URL pathname 直接渲染，App 內無任何連結導向，並加入 Vercel SPA rewrite 確保直接訪問該路徑時不會 404。
Summary by CodeRabbit
New Features
Bug Fixes