From 7f36865b5af1376325583650e92859cc4609139a Mon Sep 17 00:00:00 2001
From: jtrzupek <jtrzupek@gmail.com>
Date: Tue, 9 Jun 2026 09:25:02 +0200
Subject: [PATCH] =?UTF-8?q?fix(performer):=20tag=20chips=20=E2=86=92=20in-?=
 =?UTF-8?q?place=20horizontal=20filter=20selector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to 1a4bf258 feedback (a627637b + 0264a3ff): the flexWrap chip list ate
too much vertical space and tapping navigated away to TagScenes. Rework: single-row
horizontal scroll of toggle-chips that filter the performer's scenes IN-PLACE
(performer_ids + tags in one listScenes query, no navigation). Selected chip is
highlighted with a ✕ affordance; tap again clears. One line tall instead of N rows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 mobile/src/screens/PerformerScenesScreen.tsx | 58 +++++++++++++-------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/mobile/src/screens/PerformerScenesScreen.tsx b/mobile/src/screens/PerformerScenesScreen.tsx
index 4a07a5e..032f0ef 100644
--- a/mobile/src/screens/PerformerScenesScreen.tsx
+++ b/mobile/src/screens/PerformerScenesScreen.tsx
@@ -13,6 +13,7 @@ import {
   Alert,
   FlatList,
   Pressable,
+  ScrollView,
   StyleSheet,
   Text,
   View,
@@ -135,11 +136,16 @@ export function PerformerScenesScreen() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navigation, name, isFavorite, addMutation.isPending, removeMutation.isPending]);
 
+  // Filtr tagu IN-PLACE (bug-report 0264a3ff: wybór tagu ma filtrować sceny tej
+  // aktorki w tym widoku, nie nawigować do osobnego ekranu). null = bez filtra.
+  const [selectedTag, setSelectedTag] = React.useState<{ slug: string; name: string } | null>(null);
+
   const scenesQuery = useQuery({
-    queryKey: ['performer-scenes', id],
+    queryKey: ['performer-scenes', id, selectedTag?.slug ?? null],
     queryFn: () =>
       client.listScenes({
         performer_ids: [id],
+        tags: selectedTag ? [selectedTag.slug] : undefined,
         sort: 'release_date',
         per_page: 200,
         // Sceny TPDB/StashDB bez tube-linków nie są usable — zawsze filtrujemy.
@@ -270,21 +276,31 @@ export function PerformerScenesScreen() {
                   </Pressable>
                 </View>
                 {tab === 'scenes' && !!tagsQuery.data?.items.length && (
-                  <View style={styles.tagRow}>
-                    {tagsQuery.data.items.map((t) => (
-                      <Pressable
-                        key={t.id}
-                        style={styles.tagChip}
-                        onPress={() =>
-                          navigation.push('TagScenes', { slug: t.slug, name: t.name })
-                        }
-                      >
-                        <Text style={styles.tagChipText} numberOfLines={1}>
-                          {t.name}
-                        </Text>
-                      </Pressable>
-                    ))}
-                  </View>
+                  <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={styles.tagRow}
+                  >
+                    {tagsQuery.data.items.map((t) => {
+                      const active = selectedTag?.slug === t.slug;
+                      return (
+                        <Pressable
+                          key={t.id}
+                          style={[styles.tagChip, active && styles.tagChipActive]}
+                          onPress={() =>
+                            setSelectedTag(active ? null : { slug: t.slug, name: t.name })
+                          }
+                        >
+                          <Text
+                            style={[styles.tagChipText, active && styles.tagChipTextActive]}
+                            numberOfLines={1}
+                          >
+                            {active ? `${t.name}  ✕` : t.name}
+                          </Text>
+                        </Pressable>
+                      );
+                    })}
+                  </ScrollView>
                 )}
               </View>
             }
@@ -418,10 +434,10 @@ const styles = StyleSheet.create({
   actionBtnTextPrimary: { color: theme.accent, fontWeight: '700', fontSize: 12 },
   tagRow: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
     gap: 6,
-    marginHorizontal: 4,
-    marginBottom: 10,
+    paddingHorizontal: 4,
+    paddingBottom: 10,
+    alignItems: 'center',
   },
   tagChip: {
     backgroundColor: theme.card,
@@ -430,9 +446,11 @@ const styles = StyleSheet.create({
     borderRadius: 14,
     paddingVertical: 4,
     paddingHorizontal: 10,
-    maxWidth: 160,
+    maxWidth: 200,
   },
+  tagChipActive: { backgroundColor: theme.accent, borderColor: theme.accent },
   tagChipText: { color: theme.muted, fontSize: 12, fontWeight: '600' },
+  tagChipTextActive: { color: theme.fg, fontWeight: '700' },
   tabRow: { flexDirection: 'row', gap: 8, marginBottom: 8 },
   tabBtn: {
     flex: 1,