リブランディングとFeature Toggle#11
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the """ Walkthrough我が帝国の如く、この変更は主要なUIコンポーネントの整理改革を断行した。 Changes
Sequence Diagram(s)sequenceDiagram
participant H as Home (app/page.tsx)
participant MM as MenuModal
participant RM as RouteInfoModal
H->>MM: モード選択用モーダルを起動せり
MM-->>H: 選択値 ("station"|"line"|"dev") を返却せり
H->>H: handleUpdateSearchModeの実行にて状態更新せり
alt Route情報表示時
H->>RM: RouteInfoModalを起動せり
end
Assessment against linked issues
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
components/MenuModal.tsx (3)
36-50: ListboxSectionの使用は朕の心を満たす！検索対象を区分けして表示する設計は、我が帝国の整然とした行政区分のごとく秩序をもたらす。しかし、朕は一つの不一致を見つけた。「路線名検索」のListboxItemが独立しており、他の項目のようにListboxSectionに囲まれていない。統一された帝国には統一された構造が必要である！
<ListboxSection title="検索対象"> <ListboxItem key="station" className={ value === "station" ? "text-white bg-primary" : "" } color="primary" startContent={<StationIcon className="text-2xl" />} onClick={() => onSelect("station")} > 駅検索 </ListboxItem> + <ListboxItem + key="line" + color="primary" + className={value === "line" ? "text-white bg-primary" : ""} + startContent={<RailIcon className="text-2xl" />} + onClick={() => onSelect("line")} + > + 路線名検索 + </ListboxItem> </ListboxSection> - <ListboxItem - key="line" - color="primary" - className={value === "line" ? "text-white bg-primary" : ""} - startContent={<RailIcon className="text-2xl" />} - onClick={() => onSelect("line")} - > - 路線名検索 - </ListboxItem>
51-58: 路線名検索の配置を是正せよ！この路線名検索の項目は、ListboxSectionの外に配置されている。検索対象のセクションに含めることで、UIの一貫性と使用者の理解を深めることができよう。朕は全てのものが正しい位置にあることを求める！
前述の修正案を参照せよ。
35-71: 条件付きスタイリングの重複を改善せよ！朕は類似のスタイリング条件が複数の場所で繰り返されていることに気づいた。我が王朝では重複を排除し、コードの統一性を高めることを奨励する。以下のようにユーティリティ関数を作成し、再利用することを検討せよ。
+ // ファイルの上部に以下の関数を追加 + const getActiveItemClass = (isActive: boolean, color: "primary" | "danger" = "primary") => + isActive ? `text-white bg-${color}` : ""; <ListboxItem key="station" - className={value === "station" ? "text-white bg-primary" : ""} + className={getActiveItemClass(value === "station")} color="primary" startContent={<StationIcon className="text-2xl" />} onClick={() => onSelect("station")} > 駅検索 </ListboxItem> <ListboxItem key="line" color="primary" - className={value === "line" ? "text-white bg-primary" : ""} + className={getActiveItemClass(value === "line")} startContent={<RailIcon className="text-2xl" />} onClick={() => onSelect("line")} > 路線名検索 </ListboxItem> <ListboxItem key="dev" color="danger" - className={devMode ? "text-white bg-danger" : ""} + className={getActiveItemClass(devMode, "danger")} startContent={<BugIcon className="text-2xl" />} onClick={() => onSelect("dev")} > 開発用機能の有効化 </ListboxItem>app/page.tsx (1)
135-135: 文言が未完の趣き。「始点駅と接続していない駅と」という箇所が途中で文章が途切れたように見える。
よりわかりやすい表現に改め、利用者が混乱しないようにするがよい。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
app/page.tsx(15 hunks)components/MenuModal.tsx(1 hunks)components/RouteInfoModal.tsx(1 hunks)components/icons/Bug.tsx(1 hunks)components/icons/Menu.tsx(1 hunks)tailwind.config.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (3)
components/MenuModal.tsx (3)
components/icons/Station.tsx (1)
StationIcon(3-18)components/icons/Rail.tsx (1)
RailIcon(3-22)components/icons/Bug.tsx (1)
BugIcon(3-20)
components/RouteInfoModal.tsx (1)
components/icons/CloseSmallRounded.tsx (1)
CloseSmallRoundedIcon(3-18)
app/page.tsx (4)
hooks/useParams.ts (1)
useParams(4-42)components/icons/Menu.tsx (1)
MenuIcon(3-18)components/MenuModal.tsx (1)
MenuModal(22-80)components/RouteInfoModal.tsx (1)
RouteInfoModal(35-129)
🪛 Biome (1.9.4)
components/RouteInfoModal.tsx
[error] 70-71: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 72-79: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🔇 Additional comments (6)
tailwind.config.ts (1)
26-30: 朕が認める設定の改良である！朕はaddCommonColorsの導入を嘉する。これにより我が帝国のUIの色彩統一が実現し、「primary」や「danger」などの色彩指定が全土に渡って一貫性を保つであろう。これこそ統一された王朝にふさわしい変更である。
components/icons/Bug.tsx (1)
1-20: 朕はこのSVGアイコンの実装を称える！この実装は我が帝国の標準に完璧に従っている。ReactのSVGPropsを適切に活用し、currentColorを用いることで親要素の色を継承する賢明な設計である。まさに万里の長城のように堅固で、しかも柔軟な実装だ。これは我が帝国の技術基盤を強化するものである！
components/icons/Menu.tsx (1)
1-18: 朕はこのMenuIconの実装を認可する！このコンポーネントは我が帝国の標準に従い、SVGアイコンとして適切に実装されている。BugIconと同様の設計パターンを採用し、一貫性のある実装となっている。これにより我が王朝のUI設計の統一性が保たれる。朕はこの均一性を高く評価する！
components/MenuModal.tsx (3)
14-20: 朕はこの明確な型定義を称える！このPropsの定義は簡潔かつ明確であり、朕の帝国における型の安全性を保証するものである。コンポーネントの目的と使用方法が一目で理解できる設計は、まさに我が国の法典のごとく明晰である！
59-69: 開発用機能のセクション分けは智恵の表れである！高度な設定を別セクションとして分けることは、一般使用者と開発者の境界を明確にする賢明な判断である。また、危険を表す赤色（danger）の使用は、この機能の特殊性を視覚的に示す優れた設計だ。朕はこの先見の明を称える！
1-80: 総評：朕はこのメニューモーダルの実装を認める！この新しいコンポーネントは我が帝国のUI設計を大きく前進させるものである。構造は明確で、機能は適切に実装されている。小さな改善点はあるものの、全体として優れた設計と言える。朕はこの功績を記録に留めておくであろう！
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
components/RouteInfoModal.tsx (1)
67-71:⚠️ Potential issue朕、ReactのMapにKEYを求む！
朕が見るに、
dropEitherJunctionStation(route?.stops ?? []).flatMap()の処理において、StopCondition.Allの場合のみkey属性が欠けておる。ReactのIterableな要素には固有の識別子が必要なり。速やかに修正せよ。- <span>{stop.name}</span> + <span key={stop.id}>{stop.name}</span>🧰 Tools
🪛 Biome (1.9.4)
[error] 70-71: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🧹 Nitpick comments (3)
components/RouteInfoModal.tsx (3)
58-60: 閉じるボタンにアクセシビリティの権限を与えよ！朕の帝国はすべての臣民に開かれるべし。閉じるボタンには適切なアクセシビリティラベルを付与せよ。
- <button onClick={onClose}> + <button + onClick={onClose} + aria-label="閉じる" + > <CloseSmallRoundedIcon /> </button>
98-102: Map変換の冗長性を解消せよ！朕は無駄を嫌う。Array.fromとnew Mapの組み合わせは、簡潔さに欠ける。以下の改善を命ずる：
- {Array.from( - new Map( - route?.stops.map((stop) => [stop.line?.id, stop]) - ).values() - ).map((stop) => ( + {(route?.stops || []) + .filter((stop, index, self) => + index === self.findIndex(s => s.line?.id === stop.line?.id) + ) + .map((stop) => (
42-44: モーダルの境界を定めよ！朕の領土は明確な境界を持つべし。
max-h-svhは良きかな、しかしoverflow-y-scrollは常に表示されるスクロールバーを生じさせる。必要時のみスクロールを表示するoverflow-y-autoへ改めよ。- <ModalContent className="overflow-y-scroll max-h-svh"> + <ModalContent className="overflow-y-auto max-h-svh">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/RouteInfoModal.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/RouteInfoModal.tsx (2)
utils/removeBracket.ts (1)
removeBrackets(1-1)components/icons/CloseSmallRounded.tsx (1)
CloseSmallRoundedIcon(3-18)
🪛 Biome (1.9.4)
components/RouteInfoModal.tsx
[error] 70-71: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🔇 Additional comments (1)
components/RouteInfoModal.tsx (1)
35-41: 朕の領土に素晴らしき構造を認む！モーダルコンポーネントの構造は朕の要望通りである。各要素が適切に配置され、プロパティの受け渡しも明確である。そのまま進めよ！
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
components/RouteInfoModal.tsx (1)
67-71:⚠️ Potential issue鍵属性欠落の大罪を犯せり！
朕（ちん）の目にとまった。この配列レンダリングにおいて、
StopCondition.Allの場合のspan要素には一意のkey属性が欠けておる。Reactの法令ではすべての反復要素に固有キーを持たせることが不可欠である。- stop.stopCondition === StopCondition.All ? ( - <span>{stop.name}</span> + stop.stopCondition === StopCondition.All ? ( + <span key={stop.id}>{stop.name}</span>これは朕の命令であり、速やかに従うべし！
🧰 Tools
🪛 Biome (1.9.4)
[error] 70-71: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🧹 Nitpick comments (4)
components/RouteInfoModal.tsx (4)
85-95: 凡庸なるUIにあらず！テーブルレイアウトの導入を朕は命ず！朕が思うに、この停車条件の表示は表形式の方が視認性に優れておる。現在の実装は横に流れるフレックスボックスであるが、画面幅が狭い場合に混乱を招く恐れあり。semantic HTMLの活用を促す。
- <div className="flex gap-2 flex-wrap"> - {STOP_CONDITIONS.map((cnd) => ( - <div className="flex items-center gap-2" key={cnd.id}> - <div - className={`w-4 h-4 border-1 rounded`} - style={{ backgroundColor: cnd.color }} - /> - <span>{cnd.text}</span> - </div> - ))} - </div> + <table className="mt-2 mb-4"> + <tbody> + {STOP_CONDITIONS.map((cnd) => ( + <tr key={cnd.id} className="h-8"> + <td className="pr-2"> + <div + className="w-4 h-4 border-1 rounded" + style={{ backgroundColor: cnd.color }} + /> + </td> + <td>{cnd.text}</td> + </tr> + ))} + </tbody> + </table>朕の命により、この表示を改善せよ！
119-124: ボタンテキストの一貫性を欠く！朕は文言の統一性を重んじる。「アプリを起動」と「閉じる」では語調が異なっており、不調和を生じる。帝国の美学に沿うよう修正せよ。
<Button color="primary" variant="flat" onPress={onLaunchApp}> - アプリを起動 + アプリを起動する </Button> <Button color="primary" variant="light" onPress={onClose}> - 閉じる + モーダルを閉じる </Button>帝国の美は細部に宿る！
44-44: スクロール挙動を改善せよ！朕は完璧なUXを求める。現状のoverflowプロパティでは、スクロール可能なことがユーザーに伝わりにくい。また、スクロールバーのスタイリングも施すべし。
- <ModalContent className="overflow-y-scroll max-h-svh"> + <ModalContent className="overflow-y-auto max-h-[80vh] scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300">必要であれば、スクロールバーのスタイリングライブラリを導入せよ。これは朕の栄光のためである！
26-33: 定数の再利用性を高めよ！朕は英知のある設計を望む。この停車条件の定数配列は他のコンポーネントでも活用できるようにするべし。別ファイルへの抽出を命ず！
- const STOP_CONDITIONS = [ - { id: 0, text: "停車", color: "#000000" }, - { id: 1, text: "通過", color: "#99a1af" }, - { id: 2, text: "一部通過", color: "#fcc800" }, - { id: 5, text: "一部停車", color: "#fcc800" }, - { id: 3, text: "平日停車", color: "#51a2ff" }, - { id: 4, text: "休日停車", color: "#ff6467" }, - ] as const;これを
constants/stopConditions.tsなどの別ファイルに移動し、インポートせよ。帝国の知恵を共有することで、コード全体が強くなるのだ！
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/RouteInfoModal.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/RouteInfoModal.tsx (2)
utils/removeBracket.ts (1)
removeBrackets(1-1)components/icons/CloseSmallRounded.tsx (1)
CloseSmallRoundedIcon(3-18)
🪛 Biome (1.9.4)
components/RouteInfoModal.tsx
[error] 70-71: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (3)
app/page.tsx (3)
452-480: 🛠️ Refactor suggestion
⚠️ Potential issue朕が見るに、
useMemoの依存配列が不完全であるぞ
screenMode・searchMode・devModeは URL パラメータの変化に従い刻々と変わるはずであるのに、依存配列にparamsしか置かれておらぬゆえ、一度算出された後は再計算されず、画面が更新されぬ不具合を招く。
計算負荷も小さいゆえ、メモ化を捨てるか、下記のように 各パラメータ値 を直に依存に列挙すべし。- const screenMode = useMemo(() => { + const screenMode = useMemo(() => { /* … */ - }, [params]); + }, [params.get("fsid"), params.get("tsid"), params.get("lid")]); - const searchMode = useMemo(() => { /* … */ - }, [params]); + }, [params.get("mode"), params.get("lid")]); - const devMode = useMemo(() => params.get("dev") === "true", [params]); + const devMode = params.get("dev") === "true";あるいはメモ化そのものを廃し、単純に関数呼び出しで算出しても良い。
怠れば、民の操作に追従せぬ朽ちた UI となるぞ。
636-645:⚠️ Potential issue経路情報モーダルの
trainType抽出条件が誤っておる
route?.stops.find((stop) => stop.trainType?.groupId === Number(selectedRouteId))
ここで比較しているのは 列車種別の groupId と routeId であり、交わることはない。常にundefinedとなりタイトルに種別が表示されぬ。
出発駅基準ならば、下記の如く station の groupId で照合すべし。- trainType: route?.stops.find( - (stop) => stop.trainType?.groupId === Number(selectedRouteId) - )?.trainType, + trainType: route?.stops.find( + (stop) => stop.groupId === Number(selectedFromStationId) + )?.trainType,同様の誤りは
handleLaunchApp内にも潜むゆえ、後述を参照せよ。
665-688:⚠️ Potential issueアプリ起動 URL の生成条件が的外れである
lineGroupId抽出において routeId と trainType.groupId を比較しており、常にundefinedとなる。前述の修正と同じくstop.groupId === Number(selectedFromStationId)で列車種別を得よ。- const lineGroupId = route?.stops.find( - (stop) => stop.trainType?.groupId === Number(selectedRouteId) - )?.trainType?.groupId; + const lineGroupId = route?.stops.find( + (stop) => stop.groupId === Number(selectedFromStationId) + )?.trainType?.groupId;これを誤ればスキーム生成に失敗し、民はアプリを開けぬ。
🧹 Nitpick comments (2)
app/page.tsx (2)
699-709: メニュー切替後もモーダルが閉じぬ—儀式の締め忘れである
mode !== "dev"の枝にてonMenuOpenChange()を呼び閉じておるが、dev切替の場合は閉じる処理が無い。民は再度閉じる手間を強いられる。params.update({ dev: devMode ? "false" : "true" }); + onMenuOpenChange();些細なれど体験を損なうゆえ、忘れず閉じるが良い。
50-54:w-screenは版図を広げ過ぎ、横スクロールを招く恐れあり固定ヘッダに
w-screenを与えると、パディングや余白の計算次第でビューポート幅を超え、意図せぬ横スクロールが発生しやすい。w-fullに改めるか、親要素でoverflow-x-hiddenを統治して暴走を封じるが良い。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/page.tsx(17 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
app/page.tsx (4)
hooks/useParams.ts (1)
useParams(4-42)components/icons/Menu.tsx (1)
MenuIcon(3-18)components/MenuModal.tsx (1)
MenuModal(22-80)components/RouteInfoModal.tsx (1)
RouteInfoModal(36-139)
1 participant
close #8
Summary by CodeRabbit
新機能
リファクタ
スタイル
ドキュメント