Skip to content

プリセット機能の不具合修正と関連UI改善#5569

Merged
TinyKitten merged 4 commits intodevfrom
codex/fix-preset-save-modal-ios
Mar 10, 2026
Merged

プリセット機能の不具合修正と関連UI改善#5569
TinyKitten merged 4 commits intodevfrom
codex/fix-preset-save-modal-ios

Conversation

@TinyKitten
Copy link
Member

@TinyKitten TinyKitten commented Mar 10, 2026

目的

プリセット保存まわりのモーダル不具合を修正し、関連する駅設定UIの操作性を改善します。

変更概要

  • プリセット名モーダルを親モーダルの外に出し、iPhone実機で保存時に白背景だけ消えてバックドロップが残る不具合を修正
  • RouteInfoModal のトグル行でラベル表示領域を広げ、文言の欠けを軽減
  • 終着駅設定を切り替えても駅一覧モーダル内では全駅表示を維持
  • 回帰テストを追加して、モーダル階層と駅一覧受け渡しを固定

リスクと軽減策

  • ToggleButton のレイアウト変更が他画面へ波及する可能性があります

ローカル実行コマンド

  • npm test -- --runInBand src/components/SelectBoundModal.render.test.tsx
  • npm test -- --runInBand src/components/ToggleButton.test.tsx
  • npx biome check --config-path ./biome.json src/components/SelectBoundModal.tsx src/components/SelectBoundModal.render.test.tsx
  • npx biome check --config-path ./biome.json src/components/ToggleButton.tsx src/components/ToggleButton.test.tsx src/components/RouteInfoModal.tsx
  • npm run typecheck

スクリーンショット

  • なし

Summary by CodeRabbit

リリースノート

  • Style

    • 展開可能なトグルパネルのスタイルを改善し、固定幅とパディングを追加しました
    • UI要素の間隔調整を実施しました
  • Bug Fixes

    • モーダルレイアウトを再構成し、ライフサイクル管理を最適化しました
  • Tests

    • UI動作検証のための包括的なテストを追加しました
    • ラベルレイアウト検証テストを追加しました

@github-actions github-actions bot added the react label Mar 10, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 10, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 80a4d585-600f-4e85-ae7e-09f518f784b8

📥 Commits

Reviewing files that changed from the base of the PR and between 6208632 and 188ce0f.

📒 Files selected for processing (1)
  • src/components/SelectBoundModal.render.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/SelectBoundModal.render.test.tsx

📝 Walkthrough

Walkthrough

SelectBoundModalのモーダル構造をフラグメントへ再編成し、stationsWithoutPassの導出元を変更。ToggleButtonに外部からStatePanelを制御する新propを追加し、RouteInfoModalに対するスタイル伝播とテスト追加を行った。

Changes

Cohort / File(s) Summary
SelectBoundModal 再構成
src/components/SelectBoundModal.tsx
CustomModalラッパーをフラグメントへ移行。モーダルの内部構造を外部(兄弟)コンポーネントに移動し、ボタンレンダリングと遷移/close処理を再編成。stationsWithoutPassのソースをstationsに変更。
SelectBoundModal テスト追加
src/components/SelectBoundModal.render.test.tsx
包括的なレンダリングテストを追加。ナビゲーション・アトム・子コンポーネントをモック化し、プリセット名モーダルの配置とRouteInfoModalへ渡されるstationsプロップを検証。
ToggleButton API/実装拡張
src/components/ToggleButton.tsx, src/components/ToggleButton.test.tsx
statePanelStyle?: StyleProp<ViewStyle>を公開プロップとして追加し、StatePanelが外部スタイルを受け取るように変更。テキストのfillスタイル追加、StateIndicatorのflex削除、およびラベル展開を検証するテストを追加。
RouteInfoModal スタイル調整
src/components/RouteInfoModal.tsx
expandableToggleStatePanelスタイル(min/maxWidth:56)とexpandableToggleの横パディング12pxを追加。ToggleButtonに新propで状態パネルスタイルを渡すよう変更。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SelectBoundModal
    participant RouteInfoModal
    participant SavePresetNameModal
    participant StateAtoms

    User->>SelectBoundModal: open modal / interact (select bounds)
    SelectBoundModal->>RouteInfoModal: prepare props (stationsWithoutPass from stations)
    SelectBoundModal->>SavePresetNameModal: render sibling modal (preset flow)
    User->>SelectBoundModal: press "saveCurrentRoute"
    SelectBoundModal->>RouteInfoModal: finalize route info
    SelectBoundModal->>StateAtoms: update atoms / commit changes
    StateAtoms-->>User: state updated (UI reflects changes)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

react

Poem

🐇💫 モーダルがひらり、構造がかわるよ
ボタンは整い、パネルは新しい服を着る
テストが見守り、駅たちが並ぶころ
うさぎは跳ねて、リリースを祝うよ 🎉

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed プリセット機能の不具合修正と関連UI改善は、変更内容の主要な点を正確に反映しており、プリセット保存時のモーダル不具合修正とUI改善という核となる変更を明確に要約している。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch codex/fix-preset-save-modal-ios

Comment @coderabbitai help to get the list of available commands and usage tips.

@TinyKitten TinyKitten self-assigned this Mar 10, 2026
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/SelectBoundModal.render.test.tsx (1)

131-179: jest.clearAllMocks()afterEach ブロックに移動してください。

コーディングガイドラインでは jest.clearAllMocks()afterEach ブロックで呼び出すよう指定されています。beforeEach でも動作しますが、テスト失敗時にモック状態が正しくリセットされることを保証するため、afterEach が推奨されます。

♻️ 推奨修正
 describe('SelectBoundModal', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
     (useAtomValue as jest.Mock).mockReturnValue(false);
     (useAtom as jest.Mock).mockImplementation((atom: string) => {
       // ... mock implementation
     });
   });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });

As per coding guidelines: "Call jest.clearAllMocks() in afterEach blocks"

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/SelectBoundModal.render.test.tsx` around lines 131 - 179, Move
the jest.clearAllMocks() call out of the SelectBoundModal test's beforeEach and
into an afterEach block so mocks are always cleared after each test;
specifically, remove jest.clearAllMocks() from the beforeEach shown and add an
afterEach that calls jest.clearAllMocks() to ensure mock state is reset
(touching the same test file where beforeEach sets useAtom/useAtomValue mocks).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/SelectBoundModal.render.test.tsx`:
- Around line 131-179: Move the jest.clearAllMocks() call out of the
SelectBoundModal test's beforeEach and into an afterEach block so mocks are
always cleared after each test; specifically, remove jest.clearAllMocks() from
the beforeEach shown and add an afterEach that calls jest.clearAllMocks() to
ensure mock state is reset (touching the same test file where beforeEach sets
useAtom/useAtomValue mocks).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 071f16ad-ac49-4fa0-a3e7-b5c8ced09c5f

📥 Commits

Reviewing files that changed from the base of the PR and between 0c93df1 and 6208632.

📒 Files selected for processing (5)
  • src/components/RouteInfoModal.tsx
  • src/components/SelectBoundModal.render.test.tsx
  • src/components/SelectBoundModal.tsx
  • src/components/ToggleButton.test.tsx
  • src/components/ToggleButton.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant