Repository navigation
デザイン刷新: 案「ふたり」を全画面に適用 - #21
Conversation
メンバー2色(自分=青緑/相手=菫)を情報設計の軸にしたデザインへ刷新する。 - globals.css にデザイントークンを定義(ライト/ダーク両対応)、 フォントを Zen Maru Gothic に変更 - 共通の見た目クラスを lib/ui.ts に集約 - ホームの差額カードに天秤バー(支払い比率をメンバー色で表示)を追加。 比率算出のため settlements.currentBalance に paidBySelf / paidByPartner を追加 - 支出一覧の行に支払者色の左縁、負担区分チップ・仕分け内訳にも メンバー色を適用(折半は2色グラデーション) - 全画面のカード・ボタン・バッジ・リンクを新トークンに置き換え Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
aro guard: policies 違反を検出しました
検証ルールは base 側の |
|
Warning Review limit reached
Next review available in: 21 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: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (12)
Walkthroughデザイントークンと共通UIクラスを追加し、画面全体の配色、フォント、レイアウトを更新しました。確定済み支出の支払者別集計を追加し、ホーム画面に未精算額の天秤表示を追加しました。開発サーバーの起動構成も追加しました。 Changesテーマ基盤と共通UI
支払額集計とホーム表示
支出画面と入力UI
設定・セットアップ・精算画面
ログイン画面レイアウト
開発サーバー起動構成
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant 利用者
participant HomeClient
participant ConvexSettlements
利用者->>HomeClient: ホーム画面を表示
HomeClient->>ConvexSettlements: currentBalance または pending を取得
ConvexSettlements-->>HomeClient: paidBySelf、paidByPartner、currentBalance
HomeClient-->>利用者: 未精算額と天秤バーを表示
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 2📝 Generate docstrings 💡
🛠️ Fix failing CI checks 💡
🧪 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 |
フロントが先に新しくなり、Convex側がまだ旧関数(paidBySelf / paidByPartner を返さない)の間、formatYen(undefined) で ホームが落ちていた。?? 0 で防御する(デプロイ順に依存しない)。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
aro guard: policies 違反を検出しました
検証ルールは base 側の |
![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 (3)
convex/settlements.ts (1)
89-121: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win支払者別合計の期待値をテストしてください。
currentBalanceの既存テストはamountと方向を検証しますが、paidBySelfとpaidByPartnerを検証しません。支払い比率バーはこの 2 値に依存します。最初の 5,000 円と 2,000 円のケースで、
paidBySelf: 5000とpaidByPartner: 2000をtoMatchObjectに追加してください。🤖 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 `@convex/settlements.ts` around lines 89 - 121, Update the existing currentBalance test for the initial 5,000-yen and 2,000-yen expense case to include paidBySelf and paidByPartner in its toMatchObject expectations, verifying values of 5000 and 2000 respectively.app/(app)/expenses/[id]/expense-detail-client.tsx (1)
17-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win共有クラスを
lib/ui.tsから利用してください。Line [18] の
badgeClassはlib/ui.tsの Line [32-33] と同一です。Line [187] と Line [216] の金額スタイルも、lib/ui.tsのamountClassと重複します。ローカル定義を削除し、
@/lib/uiからbadgeClassとamountClassを import してください。テーマ変更時の表示分岐を防止できます。Also applies to: 187-188, 216-217
🤖 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 `@app/`(app)/expenses/[id]/expense-detail-client.tsx around lines 17 - 18, Remove the local badgeClass and amount-style definitions in the expense detail component, and import the shared badgeClass and amountClass from "`@/lib/ui`" instead. Update the usages near the expense detail styling, including the amount styles around lines 187 and 216, while preserving the existing rendered behavior.app/(app)/settings/settings-client.tsx (1)
12-13: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
lib/ui.tsの共通クラスを各画面で再利用してください。各画面が
inputClassまたはlinkClassの文字列を複製しています。共通定数をimportし、画面固有のクラスだけを追加してください。
app/(app)/settings/settings-client.tsx#L12-L13:inputClassのローカル定義を共通定数に置き換えてください。app/(app)/settings/settings-client.tsx#L96-L96: ホームリンクでlinkClassを使用してください。app/(app)/setup/setup-client.tsx#L18-L19:inputClassのローカル定義を共通定数に置き換えてください。app/(app)/settlement/settlement-client.tsx#L104-L106: ホームリンクでlinkClassを使用してください。app/(app)/settlement/settlement-client.tsx#L189-L190: メモ入力欄でinputClassを使用し、追加クラスだけを連結してください。app/(app)/settlements/settlements-client.tsx#L111-L113: ホームリンクでlinkClassを使用してください。🤖 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 `@app/`(app)/settings/settings-client.tsx around lines 12 - 13, 各画面で重複している入力欄・リンク用クラスをlib/ui.tsの共通定数から再利用する。app/(app)/settings/settings-client.tsxの12-13行ではローカルinputClassを共通定数に置き換え、96行ではホームリンクにlinkClassを適用する。app/(app)/setup/setup-client.tsxの18-19行でもinputClassを共通定数へ置き換える。app/(app)/settlement/settlement-client.tsxの104-106行ではlinkClassを、189-190行ではinputClassに画面固有の追加クラスだけを連結して使用する。app/(app)/settlements/settlements-client.tsxの111-113行ではホームリンクにlinkClassを使用する。
🤖 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 8-22: ライトテーマのCSS変数 --muted を、--background
に対して通常サイズの文字でもコントラスト比4.5:1以上になる、より濃い色へ更新してください。その他のテーマ変数や利用箇所は変更せず、既存の muted
テキスト用途を維持してください。
In `@lib/ui.ts`:
- Around line 12-13: Update primaryButtonClass to use dedicated theme-aware
action color tokens instead of fixed bg-me and text-white classes. Add or
reference --me-action for the button background and --on-me-action for its
foreground, while preserving --me as the member-identification color.
---
Nitpick comments:
In `@app/`(app)/expenses/[id]/expense-detail-client.tsx:
- Around line 17-18: Remove the local badgeClass and amount-style definitions in
the expense detail component, and import the shared badgeClass and amountClass
from "`@/lib/ui`" instead. Update the usages near the expense detail styling,
including the amount styles around lines 187 and 216, while preserving the
existing rendered behavior.
In `@app/`(app)/settings/settings-client.tsx:
- Around line 12-13:
各画面で重複している入力欄・リンク用クラスをlib/ui.tsの共通定数から再利用する。app/(app)/settings/settings-client.tsxの12-13行ではローカルinputClassを共通定数に置き換え、96行ではホームリンクにlinkClassを適用する。app/(app)/setup/setup-client.tsxの18-19行でもinputClassを共通定数へ置き換える。app/(app)/settlement/settlement-client.tsxの104-106行ではlinkClassを、189-190行ではinputClassに画面固有の追加クラスだけを連結して使用する。app/(app)/settlements/settlements-client.tsxの111-113行ではホームリンクにlinkClassを使用する。
In `@convex/settlements.ts`:
- Around line 89-121: Update the existing currentBalance test for the initial
5,000-yen and 2,000-yen expense case to include paidBySelf and paidByPartner in
its toMatchObject expectations, verifying values of 5000 and 2000 respectively.
🪄 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 Plus
Run ID: ab7eb021-0ac6-46ea-9a31-c33129ae7487
📒 Files selected for processing (17)
.claude/launch.jsonapp/(app)/expenses/[id]/edit/expense-edit-client.tsxapp/(app)/expenses/[id]/expense-detail-client.tsxapp/(app)/expenses/new/manual/manual-client.tsxapp/(app)/expenses/new/receipt/receipt-client.tsxapp/(app)/home-client.tsxapp/(app)/settings/settings-client.tsxapp/(app)/settlement/settlement-client.tsxapp/(app)/settlements/settlements-client.tsxapp/(app)/setup/setup-client.tsxapp/globals.cssapp/layout.tsxapp/login/[[...rest]]/page.tsxcomponents/ExpenseEditor.tsxcomponents/InviteCodeCard.tsxconvex/settlements.tslib/ui.ts
| export const primaryButtonClass = | ||
| "rounded-full bg-me px-4 py-3 text-center text-sm font-bold text-white disabled:opacity-50"; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
主要ボタンの前景色と背景色をテーマごとに定義してください。
Line 13 は bg-me text-white を固定しています。ライトテーマでは約 3.8:1、ダークテーマでは約 2.5:1 です。通常サイズのボタン文字に必要な 4.5:1 を満たしません。
--me はメンバー識別色として維持してください。主要操作には --me-action と --on-me-action のような専用トークンを追加してください。
修正例
--- app/globals.css
:root {
+ --me-action: `#0b6e63`;
+ --on-me-action: `#ffffff`;
}
`@media` (prefers-color-scheme: dark) {
:root {
+ --me-action: `#6fd3c6`;
+ --on-me-action: `#1c1a17`;
}
}
`@theme` inline {
+ --color-me-action: var(--me-action);
+ --color-on-me-action: var(--on-me-action);
}
--- lib/ui.ts
export const primaryButtonClass =
- "rounded-full bg-me px-4 py-3 text-center text-sm font-bold text-white disabled:opacity-50";
+ "rounded-full bg-me-action px-4 py-3 text-center text-sm font-bold text-on-me-action disabled:opacity-50";🤖 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 `@lib/ui.ts` around lines 12 - 13, Update primaryButtonClass to use dedicated
theme-aware action color tokens instead of fixed bg-me and text-white classes.
Add or reference --me-action for the button background and --on-me-action for
its foreground, while preserving --me as the member-identification color.
- 色トークンをWCAG AA基準(文字4.5:1・UI輪郭3:1)まで再調整。 ダークモードのメンバー色ボタンは白文字だと2.5:1しかないため、 --on-accent(ライト=白/ダーク=濃色)を導入して文字色を切り替える - 区切り線(--line)と入力欄・ボタン輪郭(--edge)のトークンを分離。 輪郭が1.2:1でほぼ見えなかった問題を修正 - lib/ui.ts の未使用クラスを削除し、重複していたローカル定義を 共通クラスのimportへ置き換え。cardClassのpadding重複も解消 - currentBalance の paidBySelf / paidByPartner にテストを追加 (視点の反転・ドラフト除外・精算後のリセット) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
aro guard: policies 違反を検出しました
検証ルールは base 側の |
1 participant
概要
ワイヤーフレーム状態だったUIを、デザイン案「ふたり」(メンバー2色で貸し借りを描く)で全画面刷新する。
globals.cssに色・影のトークンを定義(ライト/ダーク両対応)。自分=青緑(--me)、パートナー=菫(--partner)をアプリ全体で固定next/fontで導入。金額はtabular-numsで桁を揃えるsettlements.currentBalanceにpaidBySelf/paidByPartnerを追加(既存の member スコープ内での集計のみ)lib/ui.tsに集約確認
tsc --noEmit(編集ごとのhookで実施)npm run lint: エラーなし(既存warningのみ)npm test: 214件パス🤖 Generated with Claude Code
Summary by CodeRabbit
新機能
スタイル