From f57306b70177e7b97815eff9a9ae4d13b0519180 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 26 Feb 2026 06:47:08 +0000
Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=A9=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=81=AE=E8=B7=AF=E7=B7=9A=E3=83=95=E3=82=A3=E3=83=AB?=
 =?UTF-8?q?=E3=82=BF=E3=83=BC=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E3=83=9E?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E5=81=B4=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=81=AB=E7=B5=B1=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

路線カラーをAPIから取得してボタンに反映するよう変更。
選択時は路線カラー背景+白文字、未選択時は透明背景+路線カラーボーダー+路線カラー文字のデザインに統一。

https://claude.ai/code/session_01QJE4R16zQtshQtHkCCPRXb
---
 app/(tabs)/timeline.tsx | 59 ++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/app/(tabs)/timeline.tsx b/app/(tabs)/timeline.tsx
index f08fbf2..5d2fd47 100644
--- a/app/(tabs)/timeline.tsx
+++ b/app/(tabs)/timeline.tsx
@@ -25,7 +25,7 @@ import { useLocation } from "@/lib/location-store";
 import type { LocationUpdate, MovingState } from "@/lib/types/location";
 import { cn } from "@/lib/utils";
 import { useColors } from "@/hooks/use-colors";
-import { useLineNames } from "@/hooks/use-line-names";
+import { useLineNames, useLineColors } from "@/hooks/use-line-names";
 
 // 状態フィルターオプションの定義
 const MOVING_STATES: { value: MovingState; label: string }[] = [
@@ -50,6 +50,7 @@ export default function TimelineScreen() {
   const [selectedRoutes, setSelectedRoutes] = useState<Set<string>>(new Set());
   const [isFilterExpanded, setIsFilterExpanded] = useState(false);
   const lineNames = useLineNames(state.lineIds);
+  const lineColors = useLineColors(state.lineIds);
 
   // アニメーション用の共有値
   const rotateValue = useSharedValue(0);
@@ -451,33 +452,42 @@ export default function TimelineScreen() {
                         </Text>
                       </View>
                     </TouchableOpacity>
-                    {state.lineIds.map((lineId) => (
-                      <TouchableOpacity
-                        key={lineId}
-                        onPress={() => handleRouteSelect(lineId)}
-                        activeOpacity={0.7}
-                        style={styles.filterButton}
-                      >
-                        <View
-                          className={cn(
-                            "px-3 py-2 rounded-full border",
-                            selectedRoutes.has(lineId)
-                              ? "bg-primary border-primary"
-                              : "bg-background border-border"
-                          )}
+                    {state.lineIds.map((lineId) => {
+                      const lineColor = lineColors[lineId];
+                      const isSelected = selectedRoutes.has(lineId);
+                      return (
+                        <TouchableOpacity
+                          key={lineId}
+                          onPress={() => handleRouteSelect(lineId)}
+                          activeOpacity={0.7}
+                          style={styles.filterButton}
                         >
-                          <Text
+                          <View
                             className={cn(
-                              "text-sm font-medium",
-                              selectedRoutes.has(lineId) ? "text-white" : "text-foreground"
+                              "px-3 py-2 rounded-full",
+                              !lineColor && "border",
+                              !lineColor && (isSelected ? "bg-primary border-primary" : "bg-background border-border")
                             )}
-                            numberOfLines={1}
+                            style={lineColor ? {
+                              backgroundColor: isSelected ? lineColor : "transparent",
+                              borderWidth: 1,
+                              borderColor: lineColor,
+                            } : undefined}
                           >
-                            {lineNames[lineId] ? <><Text style={{ fontWeight: "bold" }}>{lineNames[lineId]}</Text>({lineId})</> : lineId}
-                          </Text>
-                        </View>
-                      </TouchableOpacity>
-                    ))}
+                            <Text
+                              className={cn(
+                                "text-sm font-medium",
+                                !lineColor && (isSelected ? "text-white" : "text-foreground")
+                              )}
+                              style={lineColor ? { color: isSelected ? "#FFFFFF" : lineColor } : undefined}
+                              numberOfLines={1}
+                            >
+                              {lineNames[lineId] ? <><Text style={{ fontWeight: "bold" }}>{lineNames[lineId]}</Text>({lineId})</> : lineId}
+                            </Text>
+                          </View>
+                        </TouchableOpacity>
+                      );
+                    })}
                   </ScrollView>
                 </View>
               )}
@@ -506,6 +516,7 @@ export default function TimelineScreen() {
       state.deviceIds,
       state.lineIds,
       lineNames,
+      lineColors,
       state.updates.length,
       searchQuery,
       selectedStates,