From 0a476da49698949ce09770e8d7c930c35bc62ed8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Mar 2026 02:32:49 +0000
Subject: [PATCH] =?UTF-8?q?fix(logs):=20=E3=83=95=E3=82=A3=E3=83=AB?=
 =?UTF-8?q?=E3=82=BF=E3=83=BC=E3=81=A8=E4=BB=B6=E6=95=B0=E3=82=92=E3=82=B9?=
 =?UTF-8?q?=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E8=BF=BD=E5=BE=93=E3=81=8B?=
 =?UTF-8?q?=E3=82=89=E9=99=A4=E5=A4=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

フィルターアコーディオンと件数表示をstickyHeaderからFlatListの
ListHeaderComponentに移動。タイトルと検索ボックスのみがスクロール
追従で固定表示され、フィルターと件数はリストと一緒にスクロールする。

https://claude.ai/code/session_01MPkqpw4PNwHcRH6Gb74HD9
---
 app/(tabs)/logs.tsx | 151 +++++++++++++++++++++++---------------------
 1 file changed, 79 insertions(+), 72 deletions(-)

diff --git a/app/(tabs)/logs.tsx b/app/(tabs)/logs.tsx
index 992d5eb..0f04de8 100644
--- a/app/(tabs)/logs.tsx
+++ b/app/(tabs)/logs.tsx
@@ -315,7 +315,7 @@ export default function LogsScreen() {
 
   return (
     <ScreenContainer>
-      {/* ヘッダー部分（スクロールに追従して固定表示） */}
+      {/* ヘッダー部分（タイトル・検索のみ固定表示） */}
       <View style={styles.stickyHeader}>
         {/* Header with status */}
         <View className="flex-row justify-between items-center mb-4">
@@ -344,55 +344,64 @@ export default function LogsScreen() {
           )}
         </View>
 
-        {/* Filter Accordion */}
-        <View className="mb-4 bg-surface rounded-xl border border-border overflow-hidden">
-          {/* Accordion Header */}
-          <TouchableOpacity
-            onPress={toggleFilter}
-            activeOpacity={0.7}
-            style={styles.accordionHeader}
-          >
-            <View className="flex-1 flex-row items-center justify-between px-4">
-              <View className="flex-row items-center">
-                <Text className="text-base font-medium text-foreground">
-                  フィルター
-                </Text>
-                {(selectedTypes.size > 0 || selectedLevels.size > 0 || selectedDevices.size > 0) && (
-                  <View className="ml-2 bg-primary px-2 py-0.5 rounded-full">
-                    <Text className="text-xs text-white font-medium">適用中</Text>
-                  </View>
-                )}
-              </View>
-              <Animated.Text style={[styles.arrowIcon, arrowStyle]}>
-                ▼
-              </Animated.Text>
-            </View>
-          </TouchableOpacity>
+      </View>
 
-          {/* Accordion Content with Animation */}
-          <Animated.View style={contentStyle}>
-            <View className="px-4 pb-4 border-t border-border">
-              {/* Type Filter */}
-              <View className="mt-3">
-                <Text className="text-sm text-muted mb-2">タイプ</Text>
-                <ScrollView
-                  horizontal
-                  showsHorizontalScrollIndicator={false}
-                  contentContainerStyle={styles.filterScrollContent}
-                >
-                  {/* すべてボタン */}
-                  <TouchableOpacity
-                    onPress={() => handleTypeSelect(null)}
-                    activeOpacity={0.7}
-                    style={styles.filterButton}
-                  >
-                    <View
-                      className={cn(
-                        "px-3 py-2 rounded-full border",
-                        selectedTypes.size === 0
-                          ? "bg-primary border-primary"
-                          : "bg-background border-border"
-                      )}
+      <FlatList
+        ref={isWeb ? listRef : undefined}
+        data={filteredLogs}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ListHeaderComponent={
+          <View style={styles.listHeaderContent}>
+            {/* Filter Accordion */}
+            <View className="mb-4 bg-surface rounded-xl border border-border overflow-hidden">
+              {/* Accordion Header */}
+              <TouchableOpacity
+                onPress={toggleFilter}
+                activeOpacity={0.7}
+                style={styles.accordionHeader}
+              >
+                <View className="flex-1 flex-row items-center justify-between px-4">
+                  <View className="flex-row items-center">
+                    <Text className="text-base font-medium text-foreground">
+                      フィルター
+                    </Text>
+                    {(selectedTypes.size > 0 || selectedLevels.size > 0 || selectedDevices.size > 0) && (
+                      <View className="ml-2 bg-primary px-2 py-0.5 rounded-full">
+                        <Text className="text-xs text-white font-medium">適用中</Text>
+                      </View>
+                    )}
+                  </View>
+                  <Animated.Text style={[styles.arrowIcon, arrowStyle]}>
+                    ▼
+                  </Animated.Text>
+                </View>
+              </TouchableOpacity>
+
+              {/* Accordion Content with Animation */}
+              <Animated.View style={contentStyle}>
+                <View className="px-4 pb-4 border-t border-border">
+                  {/* Type Filter */}
+                  <View className="mt-3">
+                    <Text className="text-sm text-muted mb-2">タイプ</Text>
+                    <ScrollView
+                      horizontal
+                      showsHorizontalScrollIndicator={false}
+                      contentContainerStyle={styles.filterScrollContent}
+                    >
+                      {/* すべてボタン */}
+                      <TouchableOpacity
+                        onPress={() => handleTypeSelect(null)}
+                        activeOpacity={0.7}
+                        style={styles.filterButton}
+                      >
+                        <View
+                          className={cn(
+                            "px-3 py-2 rounded-full border",
+                            selectedTypes.size === 0
+                              ? "bg-primary border-primary"
+                              : "bg-background border-border"
+                          )}
                     >
                       <Text
                         className={cn(
@@ -557,31 +566,26 @@ export default function LogsScreen() {
                   </ScrollView>
                 </View>
               )}
+                </View>
+              </Animated.View>
             </View>
-          </Animated.View>
-        </View>
 
-        {/* Count info */}
-        <View className="flex-row justify-between items-center">
-          <Text className="text-sm text-muted">
-            {filteredLogs.length} 件のログ
-            {hasActiveFilter && (
-              <Text className="text-muted"> (全{state.logs.length}件)</Text>
-            )}
-          </Text>
-          {state.logs.length > 0 && (
-            <TouchableOpacity onPress={handleClearData} activeOpacity={0.7}>
-              <Text className="text-sm text-error">クリア</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      </View>
-
-      <FlatList
-        ref={isWeb ? listRef : undefined}
-        data={filteredLogs}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
+            {/* Count info */}
+            <View className="flex-row justify-between items-center">
+              <Text className="text-sm text-muted">
+                {filteredLogs.length} 件のログ
+                {hasActiveFilter && (
+                  <Text className="text-muted"> (全{state.logs.length}件)</Text>
+                )}
+              </Text>
+              {state.logs.length > 0 && (
+                <TouchableOpacity onPress={handleClearData} activeOpacity={0.7}>
+                  <Text className="text-sm text-error">クリア</Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+        }
         ListEmptyComponent={ListEmpty}
         contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
@@ -617,6 +621,9 @@ const styles = StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 100,
   },
+  listHeaderContent: {
+    paddingBottom: 8,
+  },
   filterScrollContent: {
     gap: 8,
   },