Repository navigation
Conversation
- web/mobile 加入明暗主題切換（ThemeProvider/ThemeContext/ThemeToggle），globals.css 與各元件配色跟著主題走 - mobile 人類圖 PDF 報告（個人／合圖／流日）內容修正，跟畫面（儲存前預覽／已儲存詳情頁）完全對齊： - 補齊類型策略/簽名/非自我主題等缺漏欄位、九大中心與定義通道改用中文標籤並標示啟用狀態 - 修正合圖行星表格配色語意、連結動力顏色改跟著明暗主題走、移除誤導性的原始整合代碼 - 修正流日 Body Graph 黑紅語意錯誤（改用「個人 vs 今日流日」而非 Personality/Design）、重建行星閘門對照表與流日影響分析卡片 - 三份報告共用的版面小工具（row/tags/section 等）合併成模組層級函式，避免各自維護造成內容drift - PDF 下載檔名改為「圖表種類-圖表名稱-下載時間.pdf」，透過 expo-file-system 複製成可讀檔名再分享 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: 22 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 (3)
📝 WalkthroughWalkthroughThis PR adds light/dark theme support across web and mobile, replaces hardcoded colors with theme tokens, updates composite and transit presentations, and passes theme state into personal, composite, and transit PDF generation. ChangesTheme initialization and shared styling
Chart, transit, and PDF presentation
Estimated code review effort: 5 (Critical) | ~120 minutes Sequence Diagram(s)sequenceDiagram
participant AppLayout
participant ThemeProvider
participant ThemeToggle
participant ChartScreen
participant ChartPdf
AppLayout->>ThemeProvider: initialize theme
ThemeToggle->>ThemeProvider: toggle theme
ThemeProvider->>ChartScreen: provide colors and mode
ChartScreen->>ChartPdf: download chart with mode
ChartPdf->>ChartPdf: build themed PDF HTML and SVG
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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: 6
🧹 Nitpick comments (3)
mobile/components/NotificationsView.tsx (1)
19-23: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winShare themed styles and configuration across notification rows.
NotificationCardrebuilds the sameStyleSheetand type configuration once perFlatListitem. Compute them once inNotificationsViewand pass them into the card to avoid redundant allocations as the notification list grows.Proposed refactor
-function NotificationCard({ item }: { item: AppNotification }) { - const Colors = useThemeColors() - const s = useMemo(() => createStyles(Colors), [Colors]) - const typeCfg = useMemo(() => createTypeCfg(Colors), [Colors]) +function NotificationCard({ + item, + s, + typeCfg, +}: { + item: AppNotification + s: ReturnType<typeof createStyles> + typeCfg: ReturnType<typeof createTypeCfg> +}) { const cfg = typeCfg[item.type] ?? typeCfg.announcementexport default function NotificationsView() { const Colors = useThemeColors() const s = useMemo(() => createStyles(Colors), [Colors]) + const typeCfg = useMemo(() => createTypeCfg(Colors), [Colors])- renderItem={({ item }) => <NotificationCard item={item} />} + renderItem={({ item }) => <NotificationCard item={item} s={s} typeCfg={typeCfg} />}🤖 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 `@mobile/components/NotificationsView.tsx` around lines 19 - 23, Move the useThemeColors, createStyles, and createTypeCfg computations from NotificationCard into NotificationsView so each list render creates them once. Pass the resulting styles and type configuration into NotificationCard, and use those props when selecting the notification config and rendering the row while preserving existing themed behavior.components/ThemeProvider.tsx (1)
17-24: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDocument the new theme-switching behavior.
components/ThemeProvider.tsx#L17-L24: add a complete comment covering the state transition, DOMdata-themeupdate, and cookie persistence contract.components/ThemeToggle.tsx#L5-L15: add a component-level comment covering the theme-state-to-icon, action-label, andaria-pressedmapping.As per coding guidelines: “Each functionality should be implemented as an independent, reusable function with complete comments including calculation principles.”
🤖 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 `@components/ThemeProvider.tsx` around lines 17 - 24, Document both theme-switching sites: in components/ThemeProvider.tsx lines 17-24, add a complete comment for toggleTheme covering the dark/light state transition, document.documentElement data-theme update, and one-year SameSite=Lax cookie persistence; in components/ThemeToggle.tsx lines 5-15, add a component-level comment describing how theme state maps to the displayed icon, action label, and aria-pressed value.Source: Coding guidelines
mobile/app/chart/[id].tsx (1)
55-84: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract a shared
ActionButtonintoChartPrimitives.tsx. Both chart screens independently define anActionButtoncomponent plus identicalactionBtn*style keys inside their owncreateStyles(Colors), right alongside the same PR's centralization ofSectionCard/Row/TagintoChartPrimitives.tsx.
mobile/app/chart/[id].tsx#L55-L84: move thisActionButton(and itsactionBtn*style keys) intoChartPrimitives.tsx, exporting a shared component parameterized by the existing props.mobile/app/chart/preview.tsx#L32-L65: replace this variant (which addsnotLoggedInLabel/isLoggedIn) with the shared component, extending its props to support the not-logged-in label case, and drop the duplicatedactionBtn*keys from its localcreateStyles.🤖 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 `@mobile/app/chart/`[id].tsx around lines 55 - 84, The duplicated ActionButton implementations should be centralized in ChartPrimitives.tsx. At mobile/app/chart/[id].tsx lines 55-84, move the component and its actionBtn* styles into the shared module and update the screen to use the exported component; at mobile/app/chart/preview.tsx lines 32-65, replace the local variant with that shared component, extending its props to preserve notLoggedInLabel/isLoggedIn behavior, and remove the duplicated actionBtn* styles from createStyles.
🤖 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 `@app/globals.css`:
- Around line 33-35: Update the font token declarations in the global styles to
avoid self-references: define separate --next-font-serif, --next-font-sans, and
--next-font-mono fallback variables, then map --font-serif, --font-sans, and
--font-mono to the corresponding --next-font-* variables. Preserve the existing
Georgia, system-ui, and ui-monospace fallbacks.
In `@components/ui/calendar.tsx`:
- Around line 154-159: Update the calendar class configuration around day_button
and selected so selected days retain the light paper text color on hover; ensure
the selected-state hover text utility takes precedence over day_button’s
hover:text-[var(--ink-on-tan)] without changing unselected-day hover styling.
In `@mobile/components/chart/CompositeInfo.tsx`:
- Around line 111-143: Update the 行星閘門對照 group-header row in the CompositeInfo
component so each planetGroupLabel for nameA and nameB spans or occupies the
combined width of its two underlying planetGateColSm columns, matching the
four-column data and sub-header rows. Preserve the leading empty planet column
and keep the two person groups centered over their respective 意識/潛意識 pairs.
In `@mobile/constants/tokens.ts`:
- Around line 2-4: Update the new semantic tokens transitWarmText, successText,
and successBg in the mobile color palette to use the matching hex values from
app/globals.css, or explicitly document them as mobile-only if no web
equivalents are intended; keep shared palette tokens synchronized across light
and dark themes.
In `@mobile/contexts/ThemeContext.tsx`:
- Around line 23-35: Update the initialization effect and toggleTheme callback
in ThemeContext so an asynchronously resolved stored theme cannot overwrite a
mode changed locally by toggleTheme. Track whether a local toggle has occurred,
and apply the restored value only if no toggle happened before the storage read
completed; preserve the existing light/dark validation and persistence behavior.
In `@mobile/lib/chartPdf.ts`:
- Around line 34-49: Update the dimBg assignment in pdfPalette to use c.gateBg
for both dark and light themes, replacing the mode-specific darkColors.altRowBg
fallback while preserving the existing palette structure.
---
Nitpick comments:
In `@components/ThemeProvider.tsx`:
- Around line 17-24: Document both theme-switching sites: in
components/ThemeProvider.tsx lines 17-24, add a complete comment for toggleTheme
covering the dark/light state transition, document.documentElement data-theme
update, and one-year SameSite=Lax cookie persistence; in
components/ThemeToggle.tsx lines 5-15, add a component-level comment describing
how theme state maps to the displayed icon, action label, and aria-pressed
value.
In `@mobile/app/chart/`[id].tsx:
- Around line 55-84: The duplicated ActionButton implementations should be
centralized in ChartPrimitives.tsx. At mobile/app/chart/[id].tsx lines 55-84,
move the component and its actionBtn* styles into the shared module and update
the screen to use the exported component; at mobile/app/chart/preview.tsx lines
32-65, replace the local variant with that shared component, extending its props
to preserve notLoggedInLabel/isLoggedIn behavior, and remove the duplicated
actionBtn* styles from createStyles.
In `@mobile/components/NotificationsView.tsx`:
- Around line 19-23: Move the useThemeColors, createStyles, and createTypeCfg
computations from NotificationCard into NotificationsView so each list render
creates them once. Pass the resulting styles and type configuration into
NotificationCard, and use those props when selecting the notification config and
rendering the row while preserving existing themed 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9ce4ca1e-81d3-48dd-b208-9696efa7fd39
⛔ Files ignored due to path filters (1)
mobile/assets/store/icon-512.pngis excluded by!**/*.png
📒 Files selected for processing (70)
app/account/AccountClient.tsxapp/aura-flow/page.tsxapp/globals.cssapp/layout.tsxcomponents/Navbar.tsxcomponents/SelfMap.tsxcomponents/ThemeProvider.tsxcomponents/ThemeToggle.tsxcomponents/humanDesign/BirthProfileManager.tsxcomponents/humanDesign/BodyGraph.tsxcomponents/humanDesign/ChartView.tsxcomponents/humanDesign/CompositeTab.tsxcomponents/humanDesign/CompositeView.tsxcomponents/humanDesign/DetailDrawer.tsxcomponents/humanDesign/LocationPicker.tsxcomponents/humanDesign/TimezonePickerModal.tsxcomponents/humanDesign/TransitView.tsxcomponents/ui/calendar.tsxcomponents/ui/select.tsxlib/clerkAppearance.tslib/downloadChart.tslib/theme.tsmobile/app/(auth)/sign-in.tsxmobile/app/(tabs)/_layout.tsxmobile/app/(tabs)/create.tsxmobile/app/(tabs)/index.tsxmobile/app/(tabs)/learn.tsxmobile/app/(tabs)/profile.tsxmobile/app/(tabs)/theme-toggle.tsxmobile/app/_layout.tsxmobile/app/chart/[id].tsxmobile/app/chart/preview.tsxmobile/app/learn/[topic].tsxmobile/components/AppliedProfileCard.tsxmobile/components/BirthDataForm.tsxmobile/components/BirthProfilePickerModal.tsxmobile/components/BirthProfileSheet.tsxmobile/components/ChartListView.tsxmobile/components/CitySearchField.tsxmobile/components/CompositeView.tsxmobile/components/DateTimePicker.tsxmobile/components/DetailBottomSheet.tsxmobile/components/ErrorBoundary.tsxmobile/components/InputModal.tsxmobile/components/NavBackHeader.tsxmobile/components/NotificationsView.tsxmobile/components/ScreenHeader.tsxmobile/components/StateViews.tsxmobile/components/SubTabBar.tsxmobile/components/TimezonePickerModal.tsxmobile/components/TransitView.tsxmobile/components/WheelPicker.tsxmobile/components/chart/ChartPrimitives.tsxmobile/components/chart/CompositeInfo.tsxmobile/components/chart/PersonalChartDetails.tsxmobile/components/chart/TransitAnalysis.tsxmobile/components/composite/compositeText.tsmobile/components/learn/CenterList.tsxmobile/components/learn/ChannelList.tsxmobile/components/learn/CompositeLearn.tsxmobile/components/learn/GateList.tsxmobile/components/learn/SummaryList.tsxmobile/components/learn/TransitLearn.tsxmobile/components/learn/learnStyles.tsmobile/components/transit/GateChip.tsxmobile/components/transit/ImpactCard.tsxmobile/components/transit/icons.tsxmobile/constants/tokens.tsmobile/contexts/ThemeContext.tsxmobile/lib/chartPdf.ts
💤 Files with no reviewable changes (1)
- mobile/components/ScreenHeader.tsx
- globals.css：字型變數改用獨立 fallback 變數，避免自我參照造成的循環失效 - calendar.tsx：選中日期 hover 時保留淺色文字，避免深字疊深底看不見 - CompositeInfo：行星閘門對照表頭姓名欄改為橫跨兩欄，對齊下方意識/潛意識欄位 - tokens.ts：標註 mobile 專屬色票，避免誤判成跟網頁版不同步 - ThemeContext：修正主題切換與 AsyncStorage 讀取的競態，避免快速切換被舊值蓋回 - chartPdf：PDF 淡底色統一改用 gateBg，跟 app 內其餘徽章/標籤底色一致 並將 mobile 端重複的 ActionButton 元件與樣式整併到 ChartPrimitives， NotificationsView 的樣式/型別設定改到父層算一次，補上主題切換相關註解。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- DetailDrawer 類型高亮區塊補上 active class，避免整區被當成未啟用狀態淡化顯示 - 帳號頁通知標籤新增 --olive-text/--tan-text 深色文字變數，修正淺色主題下標籤與背景對比過低的問題
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@mobile/components/chart/ChartPrimitives.tsx`:
- Around line 55-86: Add a complete documentation comment immediately above the
ActionButton function describing its reusable behavior: loading disables the
button and shows the processing label, logged-out users receive the login
prompt, variant selects primary or outline styling, and pressed state applies
disabled styling. Do not alter the implementation 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: ed527aae-b34a-42c7-ac12-9533eb4f900f
📒 Files selected for processing (12)
app/globals.csscomponents/ThemeProvider.tsxcomponents/ThemeToggle.tsxcomponents/ui/calendar.tsxmobile/app/chart/[id].tsxmobile/app/chart/preview.tsxmobile/components/NotificationsView.tsxmobile/components/chart/ChartPrimitives.tsxmobile/components/chart/CompositeInfo.tsxmobile/constants/tokens.tsmobile/contexts/ThemeContext.tsxmobile/lib/chartPdf.ts
🚧 Files skipped from review as they are similar to previous changes (10)
- components/ThemeToggle.tsx
- components/ui/calendar.tsx
- mobile/contexts/ThemeContext.tsx
- components/ThemeProvider.tsx
- mobile/constants/tokens.ts
- mobile/components/NotificationsView.tsx
- mobile/components/chart/CompositeInfo.tsx
- mobile/app/chart/[id].tsx
- app/globals.css
- mobile/lib/chartPdf.ts
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Bug Fixes