Add line color support to timeline route filters

[TinyKitten]

Summary

Enhanced the timeline route filter buttons to display line-specific colors when available, improving visual distinction between different transit lines.

Key Changes

• Imported useLineColors hook from use-line-names module
• Added lineColors state by calling useLineColors(state.lineIds)
• Refactored route filter button rendering to:
  • Extract line color and selection state into variables for clarity
  • Apply dynamic styling based on line color availability
  • Use line color for button background when selected and border color always
  • Adjust text color to white when button is selected with a line color, otherwise use the line color itself
  • Maintain fallback styling for routes without assigned colors (primary/background theme colors)
• Updated dependency array in useEffect to include lineColors

Implementation Details

The filter buttons now support two styling modes:

1. With line color: Colored border, transparent/colored background on selection, dynamic text color
2. Without line color: Original theme-based styling with primary/background colors

This provides better visual feedback and makes it easier for users to identify and filter by specific transit lines.

https://claude.ai/code/session_01QJE4R16zQtshQtHkCCPRXb

Summary by CodeRabbit

• 新機能
  • タイムラインの行フィルターにカラーコーディング機能を追加しました。各線路に対応する色がフィルターボタンに表示されるようになり、より視覚的で直感的な操作が可能になりました。色の変更にも動的に対応しています。

[coderabbitai]

📝 Walkthrough

Walkthrough

タイムラインコンポーネントにuseLineColorsフックをインポートし、路線フィルターUIをスレッド化して路線ごとのカラー情報を統合しました。選択状態に基づいて条件付きスタイルを適用し、色を意識したレンダリングを実装しています。

Changes

Cohort / File(s)	Summary
Timeline Color Integration app/(tabs)/timeline.tsx	useLineColorsフックを導入し、路線フィルターUIに路線ごとの色を適用。背景色とテキスト色を選択状態と色情報に基づいて条件付きで調整し、ListHeaderの依存関係にlineColorsを追加して再レンダリングを制御。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Add retry logic and improve test timing for fetchLineNames #22: useLineColorsフックの実装と色キャッシュの変更に直接依存しており、タイムラインコンポーネントでそのフックを活用している関連PR。
• feat: マップのストローク色にGraphQLのラインカラーを使用 #21: 同じ路線色機能を修正。取得元PRがuseLineColorsを追加・エクスポートし、本PRがそのフックをタイムラインUIで色対応レンダリングに使用している関連。
• feat: タイムラインとマップに路線ID(line_id)フィルターを追加 #15: app/(tabs)/timeline.tsxの路線/ルートフィルターUI処理に関わる両方のPRで、同じUIおよびフィルタリングコードに変更を加えている関連。

Poem

🐰 色彩を加えて路線映ゆ
青も赤も取り揃えたり
タイムラインの装い整い
フックの力で華やかに
ピョンと進まん新しき彩り ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	タイトルは、プルリクエストの主な変更点である「タイムラインルートフィルタに路線色サポートを追加する」を正確に説明しており、簡潔で明確です。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/unify-route-button-design-FCdx3

---

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

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bad8623 and f57306b.

📒 Files selected for processing (1)

• app/(tabs)/timeline.tsx