Conversation
📝 WalkthroughWalkthroughウォークスルー機能を追加しました。翻訳キー追加、WalkthroughOverlay コンポーネント、useWalkthroughCompleted フック、AsyncStorage キー追加、NowHeader／FooterTabBar のレイアウト測定、SelectLineScreen への統合とユニットテストを含みます。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SelectLineScreen
participant NowHeader
participant FooterTabBar
participant useWalkthroughCompleted
participant AsyncStorage
participant WalkthroughOverlay
User->>SelectLineScreen: 画面表示
SelectLineScreen->>useWalkthroughCompleted: フック初期化
useWalkthroughCompleted->>AsyncStorage: READ WALKTHROUGH_COMPLETED
AsyncStorage-->>useWalkthroughCompleted: 完了状態返却
alt ウォークスルー未完了
SelectLineScreen->>NowHeader: onHeaderLayout を渡す
SelectLineScreen->>FooterTabBar: onSettingsButtonLayout を渡す
NowHeader-->>SelectLineScreen: ヘッダ座標報告
FooterTabBar-->>SelectLineScreen: 設定ボタン座標報告
useWalkthroughCompleted-->>SelectLineScreen: currentStep を返す
SelectLineScreen->>WalkthroughOverlay: currentStep とハンドラを渡す
WalkthroughOverlay->>User: スポットライトとツールチップを表示
User->>WalkthroughOverlay: 次へ/スキップ/ステップ選択
WalkthroughOverlay->>useWalkthroughCompleted: nextStep()/goToStep()/skipWalkthrough()
useWalkthroughCompleted->>AsyncStorage: WRITE WALKTHROUGH_COMPLETED（必要時）
AsyncStorage-->>useWalkthroughCompleted: 保存完了
useWalkthroughCompleted-->>SelectLineScreen: currentStep 更新
else 完了
useWalkthroughCompleted-->>SelectLineScreen: currentStep = null
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
詩
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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
🤖 Fix all issues with AI agents
In @src/hooks/useWalkthroughCompleted.ts:
- Around line 43-51: The effect's async helper checkWalkthroughCompleted calls
AsyncStorage.getItem without error handling, so wrap the await
AsyncStorage.getItem(...) in a try/catch inside checkWalkthroughCompleted, log
or handle the error (e.g., console.error or a logger) and ensure
setIsWalkthroughCompleted is called with a safe default (false) when an
exception occurs; keep references to ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED,
AsyncStorage.getItem, checkWalkthroughCompleted, and setIsWalkthroughCompleted
so the change is made in the same useEffect helper.
- Around line 53-59: Wrap the AsyncStorage.setItem call inside
completeWalkthrough in a try/catch so storage failures are handled; catch any
error from AsyncStorage.setItem(ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED,
'true'), log the error (e.g., console.error or existing logger) with context,
and still call setIsWalkthroughCompleted(true) so the app won't crash and the
walkthrough state is updated even if persistence fails.
🧹 Nitpick comments (3)
src/screens/SelectLineScreen.tsx (1)
38-40: インポートは動作しますが、パターンの統一も検討できますWalkthroughOverlayとuseWalkthroughCompletedのインポートは正しく動作します。
既存のコードベースでは、フックを
'~/hooks'からインポートするパターンも見られます（index.tsで再エクスポートされているため）。統一性を高めたい場合は、以下のように変更できます：オプション: インポートパターンの統一
-import { useWalkthroughCompleted } from '~/hooks/useWalkthroughCompleted'; +import { useWalkthroughCompleted } from '~/hooks';Based on learnings, hooks are properly exported in src/hooks/index.ts.
src/components/WalkthroughOverlay.tsx (2)
16-16: 画面サイズの動的取得を検討してください。
Dimensions.get('window')がモジュールレベルで一度だけ取得されるため、画面回転やウィンドウサイズ変更時に追従しません。♻️ 修正案：useDimensionsやuseWindowDimensionsを使用
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window'); +import { useWindowDimensions } from 'react-native'; // コンポーネント内で: +const { width: screenWidth, height: screenHeight } = useWindowDimensions();
42-121: スタイル定義は適切ですが、ハードコードされた色の定数化を検討してください。仮実装としては問題ありませんが、将来的にテーマ対応する場合は色定数の外部化を検討してください。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
assets/translations/en.jsonassets/translations/ja.jsonsrc/components/WalkthroughOverlay.tsxsrc/constants/asyncStorage.tssrc/hooks/index.tssrc/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
assets/translations/en.jsonsrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxassets/translations/ja.jsonsrc/constants/asyncStorage.ts
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
assets/translations/en.jsonsrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxassets/translations/ja.jsonsrc/constants/asyncStorage.ts
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
assets/translations/en.jsonsrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxassets/translations/ja.jsonsrc/constants/asyncStorage.ts
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/screens/SelectLineScreen.tsxsrc/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxsrc/constants/asyncStorage.ts
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxsrc/constants/asyncStorage.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxsrc/constants/asyncStorage.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxsrc/constants/asyncStorage.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsxsrc/constants/asyncStorage.ts
src/hooks/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Custom hooks should use
useprefix (e.g.,useStationFeed.ts)
Files:
src/hooks/useWalkthroughCompleted.tssrc/hooks/index.ts
🧠 Learnings (6)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4448
File: functions/src/funcs/tts.ts:214-232
Timestamp: 2025-08-11T20:23:23.071Z
Learning: PR #4448 in TrainLCD/MobileApp is specifically about AI feedback summarization and labeling functionality, not about TTS (Text-to-Speech) improvements. The TTS code changes appear to be part of a modularization refactoring but are not the focus of this PR.
📚 Learning: 2024-12-18T00:29:05.817Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
Applied to files:
assets/translations/en.jsonassets/translations/ja.json
📚 Learning: 2025-12-14T10:03:53.498Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4741
File: assets/translations/en.json:203-203
Timestamp: 2025-12-14T10:03:53.498Z
Learning: Ensure developer-facing translation keys (e.g., forDevelopers) are not exposed in production/public builds. Audit all translation files under assets/translations (e.g., en.json and other locales) and remove or guard such keys before releasing.
Applied to files:
assets/translations/en.jsonassets/translations/ja.json
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.tssrc/hooks/index.tssrc/components/WalkthroughOverlay.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.{ts,tsx} : Name hooks with `use*` prefix (e.g., `useStationFeed.ts`).
Applied to files:
src/hooks/useWalkthroughCompleted.tssrc/hooks/index.ts
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to src/hooks/**/*.ts : Custom hooks should use `use` prefix (e.g., `useStationFeed.ts`)
Applied to files:
src/hooks/useWalkthroughCompleted.tssrc/hooks/index.ts
🧬 Code graph analysis (3)
src/screens/SelectLineScreen.tsx (2)
src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(35-102)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)
src/hooks/useWalkthroughCompleted.ts (3)
src/components/WalkthroughOverlay.tsx (1)
WalkthroughStep(26-31)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
🔇 Additional comments (15)
assets/translations/ja.json (1)
242-251: ウォークスルー用の翻訳キーが適切に追加されています追加された翻訳キーは全てユーザー向けで、プロダクションビルドでも問題ありません。命名規則も統一されており、内容も適切です。
src/constants/asyncStorage.ts (1)
20-20: AsyncStorageキーが適切に追加されています既存のパターンに従っており、型安全性も維持されています。
assets/translations/en.json (1)
241-250: 英語翻訳が適切に追加されています日本語版と整合性が取れており、内容も明瞭です。
src/screens/SelectLineScreen.tsx (2)
135-142: ウォークスルーフックの使用が適切ですuseWalkthroughCompletedフックから必要な値が正しく取得されており、実装が明瞭です。
838-848: WalkthroughOverlayの統合が適切です条件付きレンダリングとプロップの受け渡しが正しく実装されています。currentStepの存在チェックにより、ウォークスルーが完了した後は不要なレンダリングが防止されます。
src/hooks/index.ts (1)
75-75: フックのエクスポートが適切に追加されています命名規則に従っており、アルファベット順にも正しく配置されています。
src/components/WalkthroughOverlay.tsx (5)
1-14: LGTM!インポートと依存関係は適切に構成されています。Portal、react-native-svg、safe-area-contextの使用は正しいです。
18-40: LGTM!型定義は明確で、Propsインターフェースは必要な情報を適切にカバーしています。
134-136: LGTM!
useCallbackでonNextをラップしているのは適切です。
250-250: LGTM!
React.memoでのメモ化は不要な再レンダリングを防ぐため適切です。
241-243:tapToCloseキーは翻訳ファイルに存在しています。assets/translations/ja.jsonとassets/translations/en.jsonの両方にこのキーが定義されているため、コードは正常に動作します。AI生成サマリーに記載されていなかったことは要約の不完全さによるもので、実装には問題ありません。Likely an incorrect or invalid review comment.
src/hooks/useWalkthroughCompleted.ts (4)
1-22: LGTM!インポートと
WALKTHROUGH_STEPSの定義は適切です。フック命名規則（use*プレフィックス）にも従っています。
61-68:nextStep内の非同期呼び出しが fire-and-forget になっています。
completeWalkthrough()は非同期関数ですが、nextStepは同期関数のためawaitされていません。エラーが発生しても捕捉されません。上記のエラーハンドリング追加で緩和されますが、意図的な設計であれば問題ありません。
81-90: LGTM!
isWalkthroughActiveとcurrentStepの計算ロジックは正しいです。ローディング中（isWalkthroughCompleted === null）はウォークスルーを表示しない設計も適切です。
92-101: LGTM!返り値の構造は型定義と一致しており、必要な情報がすべて公開されています。
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/hooks/useWalkthroughCompleted.ts:
- Around line 44-52: Wrap the AsyncStorage.getItem call inside
checkWalkthroughCompleted with a try/catch so read errors are handled: call
AsyncStorage.getItem(ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED) inside try,
setIsWalkthroughCompleted(completed === 'true') on success, and in catch log the
error (or report it) and setIsWalkthroughCompleted(false) as a safe default;
keep the useEffect and function names (useEffect, checkWalkthroughCompleted,
setIsWalkthroughCompleted, ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED) to locate
the change.
- Around line 54-60: Wrap the AsyncStorage.setItem call inside
completeWalkthrough in a try/catch: attempt await
AsyncStorage.setItem(ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED, 'true') and only
call setIsWalkthroughCompleted(true) after the await succeeds; in the catch
block log the error (e.g., console.error or existing logger) and surface a
user-facing message (e.g., Alert) so the user knows persistence failed and you
can retry, referencing completeWalkthrough, AsyncStorage.setItem,
ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED and setIsWalkthroughCompleted.
🧹 Nitpick comments (1)
src/components/WalkthroughOverlay.tsx (1)
23-23: 画面回転時の寸法更新を検討してください。
Dimensions.get('window')がモジュールロード時に一度だけ評価されるため、画面回転時に寸法が更新されません。初回起動のウォークスルーでは問題になりにくいですが、必要に応じてuseStateやuseWindowDimensionsフックの使用を検討してください。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
assets/translations/en.jsonassets/translations/ja.jsonsrc/components/WalkthroughOverlay.tsxsrc/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- assets/translations/ja.json
- src/screens/SelectLineScreen.tsx
🧰 Additional context used
📓 Path-based instructions (10)
src/hooks/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Custom hooks should use
useprefix (e.g.,useStationFeed.ts)
Files:
src/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/hooks/useWalkthroughCompleted.tsassets/translations/en.jsonsrc/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/hooks/useWalkthroughCompleted.tsassets/translations/en.jsonsrc/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/hooks/useWalkthroughCompleted.tsassets/translations/en.jsonsrc/components/WalkthroughOverlay.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsx
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/components/WalkthroughOverlay.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4448
File: functions/src/funcs/tts.ts:214-232
Timestamp: 2025-08-11T20:23:23.071Z
Learning: PR #4448 in TrainLCD/MobileApp is specifically about AI feedback summarization and labeling functionality, not about TTS (Text-to-Speech) improvements. The TTS code changes appear to be part of a modularization refactoring but are not the focus of this PR.
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.{ts,tsx} : Name hooks with `use*` prefix (e.g., `useStationFeed.ts`).
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to src/hooks/**/*.ts : Custom hooks should use `use` prefix (e.g., `useStationFeed.ts`)
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-27T22:48:28.461Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-27T22:48:28.461Z
Learning: Applies to **/*.{ts,tsx,js,jsx,py,java,go,cs} : Implement error handling and graceful degradation in agents to improve system resilience
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2024-12-18T00:29:05.817Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
Applied to files:
assets/translations/en.json
📚 Learning: 2025-12-14T10:03:53.498Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4741
File: assets/translations/en.json:203-203
Timestamp: 2025-12-14T10:03:53.498Z
Learning: Ensure developer-facing translation keys (e.g., forDevelopers) are not exposed in production/public builds. Audit all translation files under assets/translations (e.g., en.json and other locales) and remove or guard such keys before releasing.
Applied to files:
assets/translations/en.json
🧬 Code graph analysis (2)
src/hooks/useWalkthroughCompleted.ts (3)
src/components/WalkthroughOverlay.tsx (1)
WalkthroughStep(35-40)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
🔇 Additional comments (3)
assets/translations/en.json (1)
241-251: 翻訳キーの追加を確認しました。ウォークスルー機能に必要な翻訳キーが適切に追加されています。キー名も明確で、コード内での使用方法と一致しています。
src/components/WalkthroughOverlay.tsx (2)
192-192: オーバーレイタップの動作意図を確認してください。オーバーレイ全体が
onPress={onNext}でタップ可能になっています。ユーザーがスポットライト領域をタップした場合も次のステップに進むため、UIとのインタラクションを試みているユーザーが混乱する可能性があります。この動作が意図したものか確認してください。
154-165: ジェスチャー実装を確認しました。パンジェスチャーによるスワイプナビゲーションの実装は適切で、閾値とスプリングアニメーションも適用されています。
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/WalkthroughOverlay.tsx:
- Line 16: The module-level call const { width: SCREEN_WIDTH, height:
SCREEN_HEIGHT } = Dimensions.get('window') doesn't update on rotation; replace
it by using the useWindowDimensions hook inside the WalkthroughOverlay
component: import useWindowDimensions from 'react-native' and inside the
component get const { width, height } = useWindowDimensions() (and then replace
uses of SCREEN_WIDTH/SCREEN_HEIGHT with width/height). Remove the module-level
Dimensions.get call so layout updates when the device orientation changes.
🧹 Nitpick comments (1)
src/components/WalkthroughOverlay.tsx (1)
136-146: ツールチップが画面外に配置される可能性を確認小さなデバイスや特定のspotlightArea設定で、ツールチップが画面の上下境界を超える可能性があります。境界チェックを追加することを検討してください。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/WalkthroughOverlay.tsxsrc/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/hooks/useWalkthroughCompleted.ts
- src/screens/SelectLineScreen.tsx
🧰 Additional context used
📓 Path-based instructions (9)
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/components/WalkthroughOverlay.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/components/WalkthroughOverlay.tsx
🧠 Learnings (1)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
🧬 Code graph analysis (1)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
🔇 Additional comments (1)
src/components/WalkthroughOverlay.tsx (1)
128-128: SVG マスク ID としてuseId()を直接使用しないでくださいReact 19 の
useId()はコロンを含む ID（例::R1:）を生成し、これをurl(#${maskId})で使用すると SVG マスク参照が機能しません。ID をサニタイズするか、安全な ID ジェネレータを使用してください。修正案
- const maskId = useId(); + const maskId = useId().replace(/:/g, '-');または、より確実な方法：
+ import { useRef } from 'react'; + + let maskIdCounter = 0; const WalkthroughOverlay: React.FC<Props> = ({ - const maskId = useId(); + const maskId = useRef(`walkthrough-mask-${maskIdCounter++}`).current;Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/FooterTabBar.tsxsrc/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/hooks/useWalkthroughCompleted.ts
🧰 Additional context used
📓 Path-based instructions (9)
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/components/FooterTabBar.tsxsrc/screens/SelectLineScreen.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
📚 Learning: 2025-12-20T09:29:40.164Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4758
File: src/components/TypeChangeNotify.tsx:663-672
Timestamp: 2025-12-20T09:29:40.164Z
Learning: In TrainLCD/MobileApp TypeChangeNotify component (src/components/TypeChangeNotify.tsx), the centerCircle size differences across themes (MetroBars, SaikyoBars, JOBars) are intentional design decisions. JOBars uses larger non-tablet dimensions (32x32, borderRadius 16) compared to the base style (24x24, borderRadius 15) to maintain theme-specific visual identity.
Applied to files:
src/components/FooterTabBar.tsx
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/screens/SelectLineScreen.tsx
🧬 Code graph analysis (2)
src/components/FooterTabBar.tsx (1)
src/store/atoms/theme.ts (1)
isLEDThemeAtom(7-7)
src/screens/SelectLineScreen.tsx (3)
src/components/FooterTabBar.tsx (1)
ButtonLayout(20-25)src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(36-111)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)
🔇 Additional comments (5)
src/components/FooterTabBar.tsx (2)
20-25: LGTM: ButtonLayout型定義レイアウト情報を適切に型定義しています。ウォークスルーのスポットライト配置に必要な座標とサイズ情報が含まれています。
78-87: measureInWindowの使用は適切です
measureInWindowを使用してウィンドウ座標を取得することで、オーバーレイ配置に必要な絶対座標を正しく取得しています。useCallbackによる最適化も適切です。src/screens/SelectLineScreen.tsx (3)
138-150: LGTM: ウォークスルー状態管理の統合
useWalkthroughCompletedフックから必要な値を適切に取得し、設定ボタンのレイアウト情報を管理する状態を追加しています。実装は明確で理解しやすいです。
840-843: LGTM: FooterTabBarとの連携
onSettingsButtonLayoutコールバックを適切に接続し、設定ボタンのレイアウト情報をキャプチャしています。
862-873: LGTM: WalkthroughOverlayの条件付きレンダリング
currentStepが存在する場合のみオーバーレイをレンダリングし、必要なすべてのプロップスを正しく渡しています。ウォークスルーフローの制御ロジックが明確です。
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/WalkthroughOverlay.tsx:
- Around line 148-152: The expression assigning tooltipBottom reads
spotlightArea.y when useBottomPositioning is true but doesn't guarantee
spotlightArea is defined; update the condition to guard access (e.g., require
both useBottomPositioning && spotlightArea before using spotlightArea.y or use
optional chaining) so tooltipBottom only computes screenHeight - spotlightArea.y
+ 20 when spotlightArea is non-null, leaving the other branches (tooltipPosition
and insets) unchanged; adjust the tooltipBottom expression in the
WalkthroughOverlay component to perform this null check to satisfy TypeScript
safety.
🧹 Nitpick comments (2)
src/components/WalkthroughOverlay.tsx (2)
41-114: ハードコードされた色の使用について検討してください。色が直接ハードコードされているため、テーマの切り替えやダークモードのサポートが困難になります。将来的にデザイントークンやテーマシステムへの移行を検討することをお勧めします。
208-240: アクセシビリティラベルの追加を検討してください。インタラクティブな要素（スキップボタン、ページネーションドット、次へボタン）に
accessibilityLabelやaccessibilityRoleが設定されていません。スクリーンリーダーユーザーのために、これらの追加を検討してください。♿ アクセシビリティの改善例
- <Pressable onPress={onSkip}> + <Pressable + onPress={onSkip} + accessibilityRole="button" + accessibilityLabel={translate('walkthroughSkip')} + > <Typography style={styles.skipText}> {translate('walkthroughSkip')} </Typography> </Pressable>同様に、ページネーションドットと次へボタンにも適用できます。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/WalkthroughOverlay.tsx
🧰 Additional context used
📓 Path-based instructions (9)
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/components/WalkthroughOverlay.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/components/WalkthroughOverlay.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4448
File: functions/src/funcs/tts.ts:214-232
Timestamp: 2025-08-11T20:23:23.071Z
Learning: PR #4448 in TrainLCD/MobileApp is specifically about AI feedback summarization and labeling functionality, not about TTS (Text-to-Speech) improvements. The TTS code changes appear to be part of a modularization refactoring but are not the focus of this PR.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
📚 Learning: 2025-01-27T15:26:44.564Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4034
File: src/components/Marquee.tsx:25-25
Timestamp: 2025-01-27T15:26:44.564Z
Learning: The TrainLCD mobile app is implemented to be fullscreen on all devices, meaning there's no interference from navigation bars or other system UI elements. In this context, using `Dimensions.get('screen')` is appropriate as it will return the same dimensions as `window`.
Applied to files:
src/components/WalkthroughOverlay.tsx
🧬 Code graph analysis (1)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
🔇 Additional comments (3)
src/components/WalkthroughOverlay.tsx (3)
1-39: 型定義とインポートが適切に実装されています。React 19の
useIdフックを使用しており、Portal、SVG、セーフエリアとの統合も正しく行われています。型定義も明確で適切です。
154-190: SVGマスクの実装が正しく行われています。
useIdを使用した安定したマスクIDの生成、適切なマスクパターン、タップで進むUXが実装されています。
248-248: メモ化の使用が適切です。
React.memoを使用することで、不要な再レンダリングを防ぎ、パフォーマンスが向上します。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/components/NowHeader.tsx (1)
78-83: 型の重複を検討してください。
HeaderLayoutはsrc/components/FooterTabBar.tsxのButtonLayoutと完全に同一です。共通の型として抽出し、再利用することを検討してください。♻️ 共通型の抽出案
// src/types/layout.ts などに共通型を定義 export type LayoutRect = { x: number; y: number; width: number; height: number; };src/hooks/useWalkthroughCompleted.ts (2)
49-57: AsyncStorage操作にエラーハンドリングを追加してください。
AsyncStorage.getItemは失敗する可能性があります。エラー時のフォールバック処理を追加することで、アプリの回復力が向上します。♻️ エラーハンドリングの追加案
useEffect(() => { const checkWalkthroughCompleted = async () => { + try { const completed = await AsyncStorage.getItem( ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED ); setIsWalkthroughCompleted(completed === 'true'); + } catch (error) { + console.error('Failed to read walkthrough state:', error); + setIsWalkthroughCompleted(false); + } }; checkWalkthroughCompleted(); }, []);
59-65: 書き込み操作にもエラーハンドリングを追加してください。
AsyncStorage.setItemの失敗時、状態だけが更新され永続化されない状態になる可能性があります。♻️ エラーハンドリングの追加案
const completeWalkthrough = useCallback(async () => { + try { await AsyncStorage.setItem( ASYNC_STORAGE_KEYS.WALKTHROUGH_COMPLETED, 'true' ); setIsWalkthroughCompleted(true); + } catch (error) { + console.error('Failed to save walkthrough state:', error); + } }, []);src/screens/SelectLineScreen.tsx (1)
879-890: 条件の冗長性を確認してください。
currentStepが存在する場合、isWalkthroughActiveは必ずtrueになります（useWalkthroughCompletedの実装より）。visibleプロップは冗長な可能性があります。♻️ 簡略化案
{/* ウォークスルー */} {currentStep && ( <WalkthroughOverlay - visible={isWalkthroughActive} + visible step={currentStep} currentStepIndex={currentStepIndex} totalSteps={totalSteps} onNext={nextStep} onGoToStep={goToStep} onSkip={skipWalkthrough} /> )}
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
assets/translations/en.jsonassets/translations/ja.jsonsrc/components/NowHeader.tsxsrc/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- assets/translations/en.json
- assets/translations/ja.json
🧰 Additional context used
📓 Path-based instructions (10)
src/hooks/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Custom hooks should use
useprefix (e.g.,useStationFeed.ts)
Files:
src/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4448
File: functions/src/funcs/tts.ts:214-232
Timestamp: 2025-08-11T20:23:23.071Z
Learning: PR #4448 in TrainLCD/MobileApp is specifically about AI feedback summarization and labeling functionality, not about TTS (Text-to-Speech) improvements. The TTS code changes appear to be part of a modularization refactoring but are not the focus of this PR.
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/components/NowHeader.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.{ts,tsx} : Name hooks with `use*` prefix (e.g., `useStationFeed.ts`).
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to src/hooks/**/*.ts : Custom hooks should use `use` prefix (e.g., `useStationFeed.ts`)
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-09-22T09:25:40.289Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: src/hooks/useTTS.ts:197-202
Timestamp: 2025-09-22T09:25:40.289Z
Learning: Expo FileSystemの新しいFile APIにおいて、File.write()メソッドは同期的に動作し、Promiseを返さない。src/hooks/useTTS.tsにおける pathJaFile.write() と pathEnFile.write() の呼び出しはawaitする必要がない。
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-27T22:48:28.461Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-27T22:48:28.461Z
Learning: Applies to **/*.{ts,tsx,js,jsx,py,java,go,cs} : Implement error handling and graceful degradation in agents to improve system resilience
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-20T09:29:40.164Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4758
File: src/components/TypeChangeNotify.tsx:663-672
Timestamp: 2025-12-20T09:29:40.164Z
Learning: In TrainLCD/MobileApp TypeChangeNotify component (src/components/TypeChangeNotify.tsx), the centerCircle size differences across themes (MetroBars, SaikyoBars, JOBars) are intentional design decisions. JOBars uses larger non-tablet dimensions (32x32, borderRadius 16) compared to the base style (24x24, borderRadius 15) to maintain theme-specific visual identity.
Applied to files:
src/screens/SelectLineScreen.tsx
🧬 Code graph analysis (2)
src/hooks/useWalkthroughCompleted.ts (3)
src/components/WalkthroughOverlay.tsx (1)
WalkthroughStep(24-29)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
src/screens/SelectLineScreen.tsx (3)
src/components/FooterTabBar.tsx (1)
ButtonLayout(20-25)src/components/NowHeader.tsx (1)
HeaderLayout(78-83)src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(41-116)
🔇 Additional comments (4)
src/components/NowHeader.tsx (1)
155-165: LGTM!
handleHeaderLayoutの実装は適切です。元のonLayoutコールバックを保持しつつ、measureInWindowで正確なウィンドウ座標を取得しています。src/hooks/useWalkthroughCompleted.ts (1)
6-27: LGTM!フック全体の構造は適切です。
use*命名規則に従い、状態管理とコールバックの実装が明確に分離されています。Also applies to: 41-115
src/screens/SelectLineScreen.tsx (2)
413-437: LGTM!ステップごとにスポットライトエリアを設定する2つのエフェクトは、関心の分離が明確で可読性が高いです。依存配列も正しく設定されています。
144-153: LGTM!
useWalkthroughCompletedフックの統合が適切に行われています。必要な値とコールバックのみを分割代入しています。
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/components/WalkthroughOverlay.tsx:
- Around line 139-153: The tooltip positioning logic creates both tooltipTop and
tooltipBottom when tooltipPosition === 'bottom' and spotlightArea is undefined;
update the ternary conditions so they are mutually exclusive: ensure tooltipTop
becomes undefined whenever tooltipPosition === 'bottom' (unless you explicitly
want a centered top fallback), and compute tooltipBottom only for the bottom
cases (either useBottomPositioning with spotlightArea OR tooltipPosition ===
'bottom' && !spotlightArea). Modify the expressions referencing tooltipTop,
tooltipBottom, tooltipPosition, spotlightArea, useBottomPositioning, insets and
screenHeight so that the bottom branch short-circuits the top branch and vice
versa, leaving only one of tooltipTop/tooltipBottom defined in any given state.
- Around line 209-241: Add accessibility props to the interactive Pressable
elements: for the skip button (onSkip / styles.skipText) add accessibilityLabel,
accessibilityRole="button" and an accessibilityHint describing the action; for
each pagination dot (onGoToStep inside the pagination View) set
accessibilityLabel to indicate the page number (e.g., "Step X of Y"),
accessibilityRole="button", and an accessibilityHint like "Go to step X"; and
for the next button (styles.nextButton / styles.nextButtonText, onNext) add
accessibilityLabel that reflects current label (Next or Start),
accessibilityRole="button", and an accessibilityHint describing what tapping
does. Ensure labels use currentStepIndex and totalSteps where appropriate so
they remain descriptive and localized via translate when needed.
🧹 Nitpick comments (2)
src/components/WalkthroughOverlay.tsx (2)
133-153: ツールチップ位置の計算ロジックを簡素化することを検討してくださいネストされた三項演算子による位置計算が複雑で、保守性が低下しています。より明示的な
if-elseまたはヘルパー関数への抽出を検討してください。♻️ 簡素化の例
const calculateTooltipPosition = () => { if (tooltipPosition === 'top') { if (spotlightArea) { // スポットライトの上に配置する場合は下から計算 return { bottom: screenHeight - spotlightArea.y + 20 }; } return { top: insets.top + 60 }; } // tooltipPosition === 'bottom' if (spotlightArea) { return { top: spotlightArea.y + spotlightArea.height + 20 }; } return { bottom: insets.bottom + 100 }; }; const tooltipStyle = calculateTooltipPosition();
41-114: 将来的にテーマ対応を検討してくださいスタイル内にハードコードされた色が複数あります（
#03a9f4、#fff、#333など）。現在は問題ありませんが、将来的なテーマ対応のために定数またはテーマシステムへの移行を検討してください。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/WalkthroughOverlay.tsx
🧰 Additional context used
📓 Path-based instructions (9)
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/components/WalkthroughOverlay.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/components/WalkthroughOverlay.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/components/WalkthroughOverlay.tsx
📚 Learning: 2025-01-27T15:26:44.564Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4034
File: src/components/Marquee.tsx:25-25
Timestamp: 2025-01-27T15:26:44.564Z
Learning: The TrainLCD mobile app is implemented to be fullscreen on all devices, meaning there's no interference from navigation bars or other system UI elements. In this context, using `Dimensions.get('screen')` is appropriate as it will return the same dimensions as `window`.
Applied to files:
src/components/WalkthroughOverlay.tsx
🧬 Code graph analysis (1)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
🔇 Additional comments (2)
src/components/WalkthroughOverlay.tsx (2)
1-14: 実装が適切ですReact 19 の
useIdフックの使用、React.memoによる最適化、Portal を使用したオーバーレイレンダリングが正しく実装されています。全体的な構造とアーキテクチャは良好です。Also applies to: 116-131, 155-246, 249-249
216-233: biome-ignore の使用が適切です配列の長さが安定しており、要素の並び替えがないため、インデックスをキーとして使用することは妥当です。理由が明記されているため、問題ありません。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/WalkthroughOverlay.tsx (1)
157-190: アクセシビリティ: オーバーレイPressableにアクセシビリティ属性を追加することを検討してください。タップで次のステップに進む動作がありますが、スクリーンリーダーユーザーにはこの操作が伝わりません。
♻️ 提案
- <Pressable style={styles.pressableOverlay} onPress={onNext}> + <Pressable + style={styles.pressableOverlay} + onPress={onNext} + accessibilityRole="button" + accessibilityLabel={translate('walkthroughTapToContinue')} + >
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
assets/translations/en.jsonassets/translations/ja.jsonsrc/components/WalkthroughOverlay.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- assets/translations/en.json
- assets/translations/ja.json
🧰 Additional context used
📓 Path-based instructions (9)
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/components/WalkthroughOverlay.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/components/WalkthroughOverlay.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/components/WalkthroughOverlay.tsx
🧠 Learnings (4)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/components/WalkthroughOverlay.tsx
📚 Learning: 2025-01-27T15:26:44.564Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4034
File: src/components/Marquee.tsx:25-25
Timestamp: 2025-01-27T15:26:44.564Z
Learning: The TrainLCD mobile app is implemented to be fullscreen on all devices, meaning there's no interference from navigation bars or other system UI elements. In this context, using `Dimensions.get('screen')` is appropriate as it will return the same dimensions as `window`.
Applied to files:
src/components/WalkthroughOverlay.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : When modifying behavior, update or add tests in the same change set; document skipped tests with TODOs and owner rationale.
Applied to files:
src/components/WalkthroughOverlay.tsx
🧬 Code graph analysis (1)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
🔇 Additional comments (4)
src/components/WalkthroughOverlay.tsx (4)
1-14: LGTM!インポートは適切で、オーバーレイ機能に必要なモジュールがすべて含まれています。
16-39: LGTM!型定義が明確で、再利用可能なエクスポートと内部Propsの分離が適切です。
41-114: LGTM!
RFValueを使用したレスポンシブなフォントサイズ設定と、適切なスタイル定義です。
219-240: LGTM!ページネーションドットの
biome-ignoreは適切に文書化されており、安定した配列に対するindexキーの使用は妥当です。アクセシビリティ属性も適切に設定されています。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/hooks/useWalkthroughCompleted.test.tsx (1)
11-14:clearAllMocksはafterEachで呼び出すことが推奨されています。コーディングガイドラインによると、
jest.clearAllMocks()はafterEachフックで呼び出すべきです。♻️ 修正案
describe('useWalkthroughCompleted', () => { - beforeEach(() => { + afterEach(() => { jest.clearAllMocks(); });src/hooks/useWalkthroughCompleted.ts (1)
3-7: 型定義を別ファイルに分離することを検討してください。
WalkthroughStepとWalkthroughStepIdをコンポーネントファイルからインポートしていますが、これは潜在的な循環依存を引き起こす可能性があります。型定義をsrc/types/walkthrough.tsのような別ファイルに移動することで、依存関係がより明確になります。src/screens/SelectLineScreen.tsx (1)
460-468: handleLineListLayoutでのnull/undefinedチェックを追加してください。
measureInWindowのコールバックで、測定結果が有効な値かどうかを確認することで、より堅牢な実装になります。♻️ 修正案
const handleLineListLayout = useCallback(() => { if (lineListRef.current) { lineListRef.current.measureInWindow( (x: number, y: number, width: number, height: number) => { + if (width > 0 && height > 0) { setLineListLayout({ x, y, width, height }); + } } ); } }, []);src/components/WalkthroughOverlay.tsx (2)
48-121: スタイル定義は適切ですが、ハードコードされた色について検討してください。
#03a9f4や#333などの色がハードコードされています。現在は仮実装とのことですが、将来的にはテーマシステムとの統合を検討してください。
142-159: ツールチップの位置決定ロジックが複雑です。
tooltipTopとtooltipBottomの計算ロジックが複雑なネストされた三項演算子になっています。可読性向上のため、ヘルパー関数への抽出を検討してください。♻️ リファクタリング案
const getTooltipPosition = ( tooltipPosition: 'top' | 'bottom', spotlightArea: SpotlightArea | undefined, insets: { top: number; bottom: number }, screenHeight: number ): { top?: number; bottom?: number } => { if (tooltipPosition === 'top' && !spotlightArea) { return { top: insets.top + 60 }; } if (tooltipPosition === 'bottom' && spotlightArea) { return { top: spotlightArea.y + spotlightArea.height + 20 }; } if (tooltipPosition === 'top' && spotlightArea) { return { bottom: screenHeight - spotlightArea.y + 20 }; } return { bottom: insets.bottom + 100 }; };
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/WalkthroughOverlay.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🧰 Additional context used
📓 Path-based instructions (12)
src/hooks/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Custom hooks should use
useprefix (e.g.,useStationFeed.ts)
Files:
src/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/screens/SelectLineScreen.tsxsrc/components/WalkthroughOverlay.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.test.{ts,tsx}: Place test files in the same hierarchy as the target module with.test.tsor.test.tsxextension
Mock network and Firebase layers usingjest.mock
Calljest.clearAllMocks()inafterEachhook
Include TODO comments with reason and assignee for skipped tests
**/*.test.{ts,tsx}: Co-locate unit tests as.test.tsor.test.tsxsiblings to the module.
Reuse helper utilities fromsrc/utils/test/to avoid duplicate setup code in tests.
Mock network and Firebase layers withjest.mock, and calljest.clearAllMocks()inafterEach.
When modifying behavior, update or add tests in the same change set; document skipped tests with TODOs and owner rationale.
Update or add tests relevant to code changes before submitting.
Files:
src/hooks/useWalkthroughCompleted.test.tsx
**/*.{test,spec}.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
Test agents in isolation and with integration tests to ensure correctness and compatibility
Files:
src/hooks/useWalkthroughCompleted.test.tsx
🧠 Learnings (16)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4448
File: functions/src/funcs/tts.ts:214-232
Timestamp: 2025-08-11T20:23:23.071Z
Learning: PR #4448 in TrainLCD/MobileApp is specifically about AI feedback summarization and labeling functionality, not about TTS (Text-to-Speech) improvements. The TTS code changes appear to be part of a modularization refactoring but are not the focus of this PR.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.{ts,tsx} : Name hooks with `use*` prefix (e.g., `useStationFeed.ts`).
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to src/hooks/**/*.ts : Custom hooks should use `use` prefix (e.g., `useStationFeed.ts`)
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-27T22:48:28.461Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-27T22:48:28.461Z
Learning: Applies to **/*.{ts,tsx,js,jsx,py,java,go,cs} : Implement error handling and graceful degradation in agents to improve system resilience
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-20T09:29:40.164Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4758
File: src/components/TypeChangeNotify.tsx:663-672
Timestamp: 2025-12-20T09:29:40.164Z
Learning: In TrainLCD/MobileApp TypeChangeNotify component (src/components/TypeChangeNotify.tsx), the centerCircle size differences across themes (MetroBars, SaikyoBars, JOBars) are intentional design decisions. JOBars uses larger non-tablet dimensions (32x32, borderRadius 16) compared to the base style (24x24, borderRadius 15) to maintain theme-specific visual identity.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2026-01-03T22:02:54.949Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4902
File: src/screens/SelectLineScreen.tsx:757-793
Timestamp: 2026-01-03T22:02:54.949Z
Learning: In TrainLCD/MobileApp, the `station.lines` array returned from the API is guaranteed to be ordered with all rail lines (TransportType.Rail) first, followed by all bus lines (TransportType.Bus). This ordering allows the `stationsCache` index calculations to use `stationLines.length` as a valid offset when accessing bus line data.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2026-01-02T09:13:15.829Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4890
File: src/components/LineBoard.tsx:41-50
Timestamp: 2026-01-02T09:13:15.829Z
Learning: In LineBoard.tsx for bus lines (TransportType.Bus), only the `nameRoman` field requires parentheses removal via `parenthesisRegexp.replace()`. Other language fields (name, nameKatakana, nameChinese, nameKorean) should remain unchanged in the slicedLeftStations mapping.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2025-11-03T12:13:46.409Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4595
File: src/components/LineBoardEast.tsx:497-504
Timestamp: 2025-11-03T12:13:46.409Z
Learning: In TrainLCD/MobileApp LineBoard components (LineBoardEast, LineBoardWest, LineBoardSaikyo, LineBoardToei, LineBoardJRKyushu), the correct implementation pattern is to apply the dynamic width (dim.width / 9) to the outer stationNameContainer View, as implemented in LineBoardEast, not to the inner wrapper View.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : Update or add tests relevant to code changes before submitting.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : When modifying behavior, update or add tests in the same change set; document skipped tests with TODOs and owner rationale.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/components/WalkthroughOverlay.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : Reuse helper utilities from `src/utils/test/` to avoid duplicate setup code in tests.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-27T22:48:28.461Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-27T22:48:28.461Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx,py,java,go,cs} : Test agents in isolation and with integration tests to ensure correctness and compatibility
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Extend `src/test/e2e.ts` for integration flow tests
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to src/test/**/*.{ts,tsx} : For integration flows, extend `src/test/e2e.ts` and prefer fixtures from `src/__fixtures__/`.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-01-27T15:26:44.564Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4034
File: src/components/Marquee.tsx:25-25
Timestamp: 2025-01-27T15:26:44.564Z
Learning: The TrainLCD mobile app is implemented to be fullscreen on all devices, meaning there's no interference from navigation bars or other system UI elements. In this context, using `Dimensions.get('screen')` is appropriate as it will return the same dimensions as `window`.
Applied to files:
src/components/WalkthroughOverlay.tsx
🧬 Code graph analysis (4)
src/hooks/useWalkthroughCompleted.ts (3)
src/components/WalkthroughOverlay.tsx (2)
WalkthroughStep(30-36)WalkthroughStepId(24-28)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
src/screens/SelectLineScreen.tsx (4)
src/components/FooterTabBar.tsx (1)
ButtonLayout(20-25)src/components/NowHeader.tsx (1)
HeaderLayout(78-83)src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(49-136)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)
src/hooks/useWalkthroughCompleted.test.tsx (2)
src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(49-136)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
🔇 Additional comments (14)
src/hooks/useWalkthroughCompleted.test.tsx (3)
1-65: テストの構造と初期状態のテストは適切に実装されています。AsyncStorageのモック、初期状態のテスト、エラーハンドリングのテストが網羅的に書かれています。コンソールスパイの復元も適切に行われています。
67-174: ステップナビゲーションのテストは包括的で正確です。
nextStep、goToStep、無効なインデックスの処理、最後のステップでの完了処理が適切にテストされています。
176-338: skipWalkthrough、spotlightArea、currentStep、エラーハンドリングのテストは適切です。各機能が正しくテストされており、エッジケースも考慮されています。
src/hooks/useWalkthroughCompleted.ts (3)
49-70: 初期化ロジックとエラーハンドリングは適切に実装されています。AsyncStorageからの読み込み、エラー時のフォールバック（
falseを設定してウォークスルーを表示）が適切に処理されています。
72-82: completeWalkthroughでエラー発生時に状態が更新されない点について確認してください。現在の実装では、AsyncStorage書き込みエラー時に
setIsWalkthroughCompleted(true)が呼ばれません。これは意図的な設計かもしれませんが、ユーザーが完了ボタンを押したにもかかわらずウォークスルーが再表示される可能性があります。
84-135: LGTM!
nextStep、goToStep、skipWalkthrough、setSpotlightAreaの実装は正確で、useCallbackによる適切なメモ化が行われています。派生値の計算も正しいです。src/screens/SelectLineScreen.tsx (4)
138-161: ウォークスルー関連のステートとフックの統合は適切です。レイアウト測定用のステートとフックの使用が正しく実装されています。
421-458: スポットライトエリアのuseEffectは正しく実装されています。各ステップIDに対応するレイアウト情報を使用してスポットライトエリアを設定するロジックは適切です。依存配列も正しく設定されています。
830-850: 路線リストのView構造とonLayoutの統合は適切です。
lineListRefとhandleLineListLayoutを使用した測定パターンは正しく実装されています。
912-923: WalkthroughOverlayのレンダリングは正しく条件付けされています。
currentStepが存在する場合のみオーバーレイを表示し、必要なプロップスが適切に渡されています。src/components/WalkthroughOverlay.tsx (4)
16-36: 型定義のエクスポートは適切です。
SpotlightArea、WalkthroughStepId、WalkthroughStepの型定義が明確で、他のファイルから使用可能です。
161-197: SVGマスクを使用したスポットライト効果は適切に実装されています。
useIdを使用したユニークなマスクIDの生成、Portalを使用したオーバーレイのレンダリングが正しく行われています。
214-266: アクセシビリティの実装は優れています。
accessibilityRole、accessibilityLabel、accessibilityHintが適切に設定されており、スクリーンリーダーユーザーにとって使いやすい実装になっています。
273-273: LGTM!
React.memoを使用したコンポーネントの最適化は適切です。
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/hooks/useWalkthroughCompleted.ts:
- Around line 78-88: Set the local completed state before attempting
AsyncStorage persistence so UI closes even if storage fails: in
completeWalkthrough() call setIsWalkthroughCompleted(true) immediately, then
await AsyncStorage.setItem(...) inside try/catch and only log errors on failure;
do the same pattern for the other walkthrough persistence helpers referenced
(the similar functions around lines 90-97 and 106-109) so they optimistically
update state first and treat storage errors as non-blocking.
🧹 Nitpick comments (3)
src/components/WalkthroughOverlay.tsx (2)
141-160: Tooltip の top/bottom は画面外に出ないよう clamp したいspotlight が上端/下端に寄ると、
top/bottomがそのまま画面外に出る可能性があります（特にtooltipPosition: 'top'+ 上寄り）。最小/最大を insets ベースで clamp するのが無難です。Also applies to: 200-206
228-247: ドット key の index 利用は「ステップ定義が固定」前提なら OK（前提をコメントで明確化したい）
totalStepsが固定で順序が変わらない前提なら現状でも問題は出にくいです。// biome-ignore ... stable arrayの理由を「steps は固定配列」など、より具体にするとレビューしやすいです。src/screens/SelectLineScreen.tsx (1)
428-479: stepId ごとのuseEffectはマップ化すると読みやすい（任意）現状でも十分読めますが、ステップが増えると増殖するので
{ stepId: layout -> area }の辞書に寄せると保守が楽になります。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
assets/translations/en.jsonassets/translations/ja.jsonsrc/components/WalkthroughOverlay.tsxsrc/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/hooks/useWalkthroughCompleted.test.tsx
🧰 Additional context used
📓 Path-based instructions (10)
src/hooks/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Custom hooks should use
useprefix (e.g.,useStationFeed.ts)
Files:
src/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsxassets/translations/en.jsonassets/translations/ja.json
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsxassets/translations/en.jsonassets/translations/ja.json
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsxassets/translations/en.jsonassets/translations/ja.json
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsx
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsx
🧠 Learnings (12)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/hooks/useWalkthroughCompleted.tssrc/components/WalkthroughOverlay.tsxsrc/screens/SelectLineScreen.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.{ts,tsx} : Name hooks with `use*` prefix (e.g., `useStationFeed.ts`).
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to src/hooks/**/*.ts : Custom hooks should use `use` prefix (e.g., `useStationFeed.ts`)
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-27T22:48:28.461Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-27T22:48:28.461Z
Learning: Applies to **/*.{ts,tsx,js,jsx,py,java,go,cs} : Implement error handling and graceful degradation in agents to improve system resilience
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-01-27T15:26:44.564Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4034
File: src/components/Marquee.tsx:25-25
Timestamp: 2025-01-27T15:26:44.564Z
Learning: The TrainLCD mobile app is implemented to be fullscreen on all devices, meaning there's no interference from navigation bars or other system UI elements. In this context, using `Dimensions.get('screen')` is appropriate as it will return the same dimensions as `window`.
Applied to files:
src/components/WalkthroughOverlay.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : When modifying behavior, update or add tests in the same change set; document skipped tests with TODOs and owner rationale.
Applied to files:
src/components/WalkthroughOverlay.tsx
📚 Learning: 2025-12-20T09:29:40.164Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4758
File: src/components/TypeChangeNotify.tsx:663-672
Timestamp: 2025-12-20T09:29:40.164Z
Learning: In TrainLCD/MobileApp TypeChangeNotify component (src/components/TypeChangeNotify.tsx), the centerCircle size differences across themes (MetroBars, SaikyoBars, JOBars) are intentional design decisions. JOBars uses larger non-tablet dimensions (32x32, borderRadius 16) compared to the base style (24x24, borderRadius 15) to maintain theme-specific visual identity.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2026-01-03T22:02:54.949Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4902
File: src/screens/SelectLineScreen.tsx:757-793
Timestamp: 2026-01-03T22:02:54.949Z
Learning: In TrainLCD/MobileApp, the `station.lines` array returned from the API is guaranteed to be ordered with all rail lines (TransportType.Rail) first, followed by all bus lines (TransportType.Bus). This ordering allows the `stationsCache` index calculations to use `stationLines.length` as a valid offset when accessing bus line data.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2025-11-03T12:13:46.409Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4595
File: src/components/LineBoardEast.tsx:497-504
Timestamp: 2025-11-03T12:13:46.409Z
Learning: In TrainLCD/MobileApp LineBoard components (LineBoardEast, LineBoardWest, LineBoardSaikyo, LineBoardToei, LineBoardJRKyushu), the correct implementation pattern is to apply the dynamic width (dim.width / 9) to the outer stationNameContainer View, as implemented in LineBoardEast, not to the inner wrapper View.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2024-12-18T00:29:05.817Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
Applied to files:
assets/translations/en.jsonassets/translations/ja.json
📚 Learning: 2025-12-14T10:03:53.498Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4741
File: assets/translations/en.json:203-203
Timestamp: 2025-12-14T10:03:53.498Z
Learning: Ensure developer-facing translation keys (e.g., forDevelopers) are not exposed in production/public builds. Audit all translation files under assets/translations (e.g., en.json and other locales) and remove or guard such keys before releasing.
Applied to files:
assets/translations/en.jsonassets/translations/ja.json
🧬 Code graph analysis (3)
src/hooks/useWalkthroughCompleted.ts (2)
src/components/WalkthroughOverlay.tsx (2)
WalkthroughStep(31-37)WalkthroughStepId(24-29)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
src/components/WalkthroughOverlay.tsx (1)
src/utils/rfValue.ts (1)
RFValue(3-18)
src/screens/SelectLineScreen.tsx (4)
src/components/FooterTabBar.tsx (1)
ButtonLayout(20-25)src/components/NowHeader.tsx (1)
HeaderLayout(78-83)src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(55-142)src/screens/SelectLineScreenPresets.tsx (1)
SelectLineScreenPresets(45-183)
🔇 Additional comments (5)
src/components/WalkthroughOverlay.tsx (1)
1-2: Mask のidは sanitize してプラットフォーム差分を潰したい（useId()文字列互換）
useId()が返す文字列がreact-native-svgのMask id/url(#...)で問題なく動くかは環境依存になりがちなので、maskIdを「英数字 + ハイフン」程度に正規化しておくのが安全です。
また@gorhom/portalを使う前提として、アプリルートにPortalProviderがあることも要確認です。修正案
- const maskId = useId(); + const maskId = `walkthrough-mask-${useId().replaceAll(':', '-')}`;Also applies to: 135-196
assets/translations/en.json (1)
241-258: ウォークスルー用キー追加は整合していて良い
walkthroughTitle*/walkthroughDescription*と CTA/hint 系が揃っていて、WalkthroughOverlay側の参照（walkthroughSkip,walkthroughSkipHint, etc.）とも噛み合っています。src/screens/SelectLineScreen.tsx (2)
36-53: レイアウト計測の連携は良いが、座標が “画面座標” で揃っているか要確認
measureInWindow（プリセット/路線一覧）と、NowHeader/FooterTabBarから渡される layout が同じ座標系（window 기준）で揃っていないと spotlight がズレます。onHeaderLayout/onSettingsButtonLayoutの実装側がmeasureInWindowベースになっているかを確認したいです。Also applies to: 138-168, 914-925
480-498: onLayout → measureInWindow は “データ後” にも再計測されるか確認したいプリセット/路線リストが後から伸びる（ロード完了）場合、Wrapper View の onLayout が再発火して最新高さが取れる前提になっています。端末/OS差でズレが出ないかだけ確認をお願いします。
Also applies to: 855-883
assets/translations/ja.json (1)
242-259: 日本語側もキーセットが揃っていて良い英語側と同じキー（Title1-5/Description1-5、Next/Start/Skip、各 Hint）が揃っていて i18n 的に安全です。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/hooks/useWalkthroughCompleted.ts (1)
28-39: 翻訳キーの番号付けがステップ順序と一致していません。
savedRoutesがwalkthroughTitle5を使用し、customizeがwalkthroughTitle4を使用しています。意図的な可能性がありますが、メンテナンス時の混乱を避けるため、番号を順序に合わせるか、コメントで理由を明記することを検討してください。src/hooks/useWalkthroughCompleted.test.tsx (1)
12-14:jest.clearAllMocks()はafterEachで呼び出すべきです。コーディングガイドラインに従い、
beforeEachではなくafterEachでjest.clearAllMocks()を呼び出すことを推奨します。♻️ 修正案
- beforeEach(() => { + afterEach(() => { jest.clearAllMocks(); });
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.test.{ts,tsx}: Place test files in the same hierarchy as the target module with.test.tsor.test.tsxextension
Mock network and Firebase layers usingjest.mock
Calljest.clearAllMocks()inafterEachhook
Include TODO comments with reason and assignee for skipped tests
**/*.test.{ts,tsx}: Co-locate unit tests as.test.tsor.test.tsxsiblings to the module.
Reuse helper utilities fromsrc/utils/test/to avoid duplicate setup code in tests.
Mock network and Firebase layers withjest.mock, and calljest.clearAllMocks()inafterEach.
When modifying behavior, update or add tests in the same change set; document skipped tests with TODOs and owner rationale.
Update or add tests relevant to code changes before submitting.
Files:
src/hooks/useWalkthroughCompleted.test.tsx
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{test,spec}.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
Test agents in isolation and with integration tests to ensure correctness and compatibility
Files:
src/hooks/useWalkthroughCompleted.test.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
src/hooks/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Custom hooks should use
useprefix (e.g.,useStationFeed.ts)
Files:
src/hooks/useWalkthroughCompleted.ts
🧠 Learnings (12)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : Update or add tests relevant to code changes before submitting.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : When modifying behavior, update or add tests in the same change set; document skipped tests with TODOs and owner rationale.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsxsrc/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : Reuse helper utilities from `src/utils/test/` to avoid duplicate setup code in tests.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-27T22:48:28.461Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-27T22:48:28.461Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx,py,java,go,cs} : Test agents in isolation and with integration tests to ensure correctness and compatibility
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to src/test/**/*.{ts,tsx} : For integration flows, extend `src/test/e2e.ts` and prefer fixtures from `src/__fixtures__/`.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Extend `src/test/e2e.ts` for integration flow tests
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to {jest.setup.js,src/setupTests.ts} : Jest global setup is managed in `jest.setup.js` and `src/setupTests.ts`
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.test.{ts,tsx} : Mock network and Firebase layers with `jest.mock`, and call `jest.clearAllMocks()` in `afterEach`.
Applied to files:
src/hooks/useWalkthroughCompleted.test.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.{ts,tsx} : Name hooks with `use*` prefix (e.g., `useStationFeed.ts`).
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to src/hooks/**/*.ts : Custom hooks should use `use` prefix (e.g., `useStationFeed.ts`)
Applied to files:
src/hooks/useWalkthroughCompleted.ts
🧬 Code graph analysis (2)
src/hooks/useWalkthroughCompleted.test.tsx (2)
src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(55-144)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
src/hooks/useWalkthroughCompleted.ts (3)
src/components/WalkthroughOverlay.tsx (2)
WalkthroughStep(31-37)WalkthroughStepId(24-29)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
🔇 Additional comments (9)
src/hooks/useWalkthroughCompleted.ts (3)
1-7: インポートと型定義が適切です。フックの命名規則（
use*プレフィックス）に従っており、必要な依存関係が正しくインポートされています。コーディングガイドラインに準拠しています。
42-53: 型定義が明確で適切です。
UseWalkthroughResult型は、フックのパブリックAPIを明確に定義しており、null状態を使用したローディング状態の表現も適切です。
55-144: 実装が適切です。楽観的更新パターンによるUI即時反映、AsyncStorageエラーの非ブロッキング処理、境界値チェック付きのステップ移動など、堅牢な実装になっています。
useCallbackの依存配列も正しく設定されています。src/hooks/useWalkthroughCompleted.test.tsx (6)
16-65: 初期状態のテストが包括的です。完了していない場合、完了済みの場合、AsyncStorageエラー発生時の3パターンを適切にテストしており、
console.errorのモックとリストアも正しく行われています。
67-181: ステップナビゲーションのテストが充実しています。全ステップの順次進行、最終ステップでの完了処理、任意ステップへのジャンプ、無効なインデックスの境界値テストが適切に実装されています。
183-205: skipWalkthroughのテストが適切です。ストレージへの保存と状態更新の両方を検証しています。
207-258: spotlightArea管理のテストが適切です。設定とステップ移動時のリセット動作を正しく検証しています。
260-317: ステップメタデータの検証テストが適切です。各ステップの
titleKeyとdescriptionKey、およびtotalStepsの値を正しく検証しています。
319-352: エラーハンドリングのテストが適切です。楽観的更新により、ストレージエラーが発生してもUIが正常に動作することを検証しています。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/screens/SelectLineScreen.tsx (2)
138-156: レイアウト状態の型定義を共通化することを検討してください。
lineListLayoutとpresetsLayoutは同じ構造（{ x, y, width, height }）を持っています。ButtonLayoutやHeaderLayoutと同様に共通の型を使用するか、これらの型を再利用することで一貫性が向上します。♻️ 提案
+ type LayoutRect = { + x: number; + y: number; + width: number; + height: number; + }; + const [settingsButtonLayout, setSettingsButtonLayout] = useState<ButtonLayout | null>(null); const [nowHeaderLayout, setNowHeaderLayout] = useState<HeaderLayout | null>( null ); - const [lineListLayout, setLineListLayout] = useState<{ - x: number; - y: number; - width: number; - height: number; - } | null>(null); - const [presetsLayout, setPresetsLayout] = useState<{ - x: number; - y: number; - width: number; - height: number; - } | null>(null); + const [lineListLayout, setLineListLayout] = useState<LayoutRect | null>(null); + const [presetsLayout, setPresetsLayout] = useState<LayoutRect | null>(null);
428-479: スポットライト設定のuseEffectは機能的ですが、統合を検討できます。4つの類似した
useEffectフックがありますが、現在の実装は各ステップの意図が明確で読みやすいです。ただし、将来ステップが増える場合は、マッピングオブジェクトを使った統合を検討してください。Line 460の
-16マジックナンバーについては、コメントで説明されていますが、SelectLineScreenPresetsのスタイル変更時に同期が必要になる点に注意してください。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/hooks/useWalkthroughCompleted.tssrc/screens/SelectLineScreen.tsx
🧰 Additional context used
📓 Path-based instructions (10)
src/{components,screens}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Component files should use PascalCase naming (e.g.,
StationBanner.tsx)
Files:
src/screens/SelectLineScreen.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Biome as the formatter for all code files
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx}: Use Biome as the linter for all code files
Use// biome-ignoreonly for true compatibility issues and include an inline reason
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx,js,jsx,py,java,go,cs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx,py,java,go,cs}: Use descriptive names for agents that clearly indicate their purpose and domain
Implement agents with well-defined input/output contracts to ensure clear communication
Document agent responsibilities and expected behaviors in comments or docstrings
Use composition and dependency injection for agent collaboration rather than tight coupling
Implement error handling and graceful degradation in agents to improve system resilience
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Use UTF-8 encoding, two-space indentation, single quotes, and ES5 trailing commas as enforced by
.editorconfig.
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{js,ts,tsx,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome is authoritative for linting; avoid
// biome-ignoreunless a rule is truly incompatible and document the rationale inline.
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Name components with PascalCase (e.g.,
StationBanner.tsx).
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name hooks with
use*prefix (e.g.,useStationFeed.ts).
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep comments purposeful: explain intent or non-obvious constraints, not obvious mechanics.
Files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
src/hooks/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Custom hooks should use
useprefix (e.g.,useStationFeed.ts)
Files:
src/hooks/useWalkthroughCompleted.ts
🧠 Learnings (7)
📓 Common learnings
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2025-08-11T21:13:39.083Z
Learning: TinyKitten prefers concise code reviews for the TrainLCD/MobileApp repository. Keep review comments brief and to the point.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4249
File: __tests__/hooks/useTelemetrySender.enabled.test.tsx:54-68
Timestamp: 2025-05-07T23:04:31.413Z
Learning: TinyKitten is working on implementing a queue for movement logs in the TrainLCD mobile app, but realized the implementation differed from their original intention.
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4511
File: package.json:43-66
Timestamp: 2025-09-22T09:21:21.741Z
Learning: TinyKittenはExpo SDK 54アップグレードにおいて、babel.config.js、RCTNewArchEnabled設定、Podfile設定を適切に処理している。App ClipのiOS deployment targetの調整のみが必要な状況。
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 0
File: :0-0
Timestamp: 2024-12-18T00:29:05.817Z
Learning: 翻訳ファイル（`assets/translations/en.json` と `assets/translations/ja.json`）の変更を要約する際、`backgroundPermissionDenied` のようなキーが追加されているのか削除されているのかを正確に確認する。
📚 Learning: 2025-05-19T10:59:37.813Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4286
File: src/components/HeaderLED.tsx:5-10
Timestamp: 2025-05-19T10:59:37.813Z
Learning: The hooks useCurrentStation, useNextStation, useIsNextLastStop, and useNumbering are properly exported in src/hooks/index.ts, allowing them to be imported from '../hooks' in src/components/HeaderLED.tsx as implemented in PR #4286.
Applied to files:
src/screens/SelectLineScreen.tsxsrc/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-12-20T09:29:40.164Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4758
File: src/components/TypeChangeNotify.tsx:663-672
Timestamp: 2025-12-20T09:29:40.164Z
Learning: In TrainLCD/MobileApp TypeChangeNotify component (src/components/TypeChangeNotify.tsx), the centerCircle size differences across themes (MetroBars, SaikyoBars, JOBars) are intentional design decisions. JOBars uses larger non-tablet dimensions (32x32, borderRadius 16) compared to the base style (24x24, borderRadius 15) to maintain theme-specific visual identity.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2026-01-03T22:02:54.949Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4902
File: src/screens/SelectLineScreen.tsx:757-793
Timestamp: 2026-01-03T22:02:54.949Z
Learning: In TrainLCD/MobileApp, the `station.lines` array returned from the API is guaranteed to be ordered with all rail lines (TransportType.Rail) first, followed by all bus lines (TransportType.Bus). This ordering allows the `stationsCache` index calculations to use `stationLines.length` as a valid offset when accessing bus line data.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2025-11-03T12:13:46.409Z
Learnt from: TinyKitten
Repo: TrainLCD/MobileApp PR: 4595
File: src/components/LineBoardEast.tsx:497-504
Timestamp: 2025-11-03T12:13:46.409Z
Learning: In TrainLCD/MobileApp LineBoard components (LineBoardEast, LineBoardWest, LineBoardSaikyo, LineBoardToei, LineBoardJRKyushu), the correct implementation pattern is to apply the dynamic width (dim.width / 9) to the outer stationNameContainer View, as implemented in LineBoardEast, not to the inner wrapper View.
Applied to files:
src/screens/SelectLineScreen.tsx
📚 Learning: 2025-12-31T12:21:36.200Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T12:21:36.200Z
Learning: Applies to **/*.{ts,tsx} : Name hooks with `use*` prefix (e.g., `useStationFeed.ts`).
Applied to files:
src/hooks/useWalkthroughCompleted.ts
📚 Learning: 2025-11-25T03:10:26.328Z
Learnt from: CR
Repo: TrainLCD/MobileApp PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T03:10:26.328Z
Learning: Applies to src/hooks/**/*.ts : Custom hooks should use `use` prefix (e.g., `useStationFeed.ts`)
Applied to files:
src/hooks/useWalkthroughCompleted.ts
🧬 Code graph analysis (2)
src/screens/SelectLineScreen.tsx (5)
src/components/FooterTabBar.tsx (1)
ButtonLayout(20-25)src/components/NowHeader.tsx (1)
HeaderLayout(78-83)src/hooks/useWalkthroughCompleted.ts (1)
useWalkthroughCompleted(55-144)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)src/screens/SelectLineScreenPresets.tsx (1)
SelectLineScreenPresets(45-183)
src/hooks/useWalkthroughCompleted.ts (3)
src/components/WalkthroughOverlay.tsx (2)
WalkthroughStep(31-37)WalkthroughStepId(24-29)src/hooks/index.ts (1)
useWalkthroughCompleted(75-75)src/constants/asyncStorage.ts (1)
ASYNC_STORAGE_KEYS(1-21)
🔇 Additional comments (11)
src/hooks/useWalkthroughCompleted.ts (6)
1-7: LGTM!インポートと型定義は適切です。
WalkthroughStepとWalkthroughStepIdをWalkthroughOverlayから再利用しているのは良いアプローチです。
9-40: titleKey/descriptionKeyの番号が不連続です。ステップの順序は
welcome → changeLocation → selectLine → savedRoutes → customizeですが、titleKeyは1, 2, 3, 5, 4の順になっています。これは意図的でしょうか？将来のメンテナンス時に混乱を招く可能性があります。また、
WalkthroughStepId型の定義順序（savedRoutesがselectLineより前）と配列の順序が異なっていますが、実際のUXフローに合わせた順序であれば問題ありません。
63-76: LGTM!AsyncStorageからの初期値読み込みは適切に実装されています。エラー時に
falseをセットして新規ユーザーとして扱うフォールバックも妥当です。
78-90: LGTM!楽観的更新パターンの実装は適切です。UIの即座な反映とストレージエラーの非ブロッキング処理により、良好なUXを実現しています。
92-99: LGTM!
nextStepのロジックは正しく、最後のステップでcompleteWalkthroughを呼び出す実装も適切です。
119-143: LGTM!
isWalkthroughActiveの計算ロジックとcurrentStepへのspotlightAreaマージは適切です。公開APIも明確に定義されています。src/screens/SelectLineScreen.tsx (5)
158-168: LGTM!
useWalkthroughCompletedフックの使用は適切で、必要なプロパティが正しく分割代入されています。
481-499: measureInWindowのタイミングに注意が必要です。
onLayoutコールバック内でmeasureInWindowを呼び出していますが、コンポーネントの初回レンダリング時やスクロール中にレイアウトが確定していない場合、不正確な値が取得される可能性があります。ウォークスルーがアクティブな場合のみ測定を行うことで、不要な測定を減らせます。
♻️ 提案
const handlePresetsLayout = useCallback(() => { - if (presetsRef.current) { + if (presetsRef.current && isWalkthroughActive) { presetsRef.current.measureInWindow( (x: number, y: number, width: number, height: number) => { setPresetsLayout({ x, y, width, height }); } ); } - }, []); + }, [isWalkthroughActive]); const handleLineListLayout = useCallback(() => { - if (lineListRef.current) { + if (lineListRef.current && isWalkthroughActive) { lineListRef.current.measureInWindow( (x: number, y: number, width: number, height: number) => { setLineListLayout({ x, y, width, height }); } ); } - }, []); + }, [isWalkthroughActive]);
856-883: LGTM!プリセットと路線リストをViewでラップしてレイアウト測定を行う実装は適切です。既存のレンダリングロジックを維持しながらウォークスルー機能を追加しています。
915-926: LGTM!
NowHeaderとFooterTabBarへの新しいレイアウトコールバックの追加は適切です。
945-956: LGTM!
WalkthroughOverlayの条件付きレンダリングは適切です。currentStepが存在する場合のみ表示され、すべての必要なコールバックが正しく接続されています。
2 participants
fixes #4604
Summary by CodeRabbit
新機能
変更
テスト
✏️ Tip: You can customize this high-level summary in your review settings.