From 2bd4b2d973d1ec02592b647e7beeb29d7bf4e2c2 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Sun, 4 Oct 2026 15:01:51 +0200
Subject: [PATCH] feat(mobile): Badge fuer ungelesene Nachrichten an der
 Sprechblase

found.md (iOS-Feedback): Push kam an, aber die Sprechblase zeigte nichts.
MessagesHeaderButton zeigt jetzt conversations.unreadCount im selben Badge
wie die Glocke (gemeinsame UnreadBadge-Komponente), aktualisiert alle 30 s;
Lesen eines Chats invalidiert den Zaehler bereits.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 mobile/app/(app)/(tabs)/_layout.tsx | 33 +++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/mobile/app/(app)/(tabs)/_layout.tsx b/mobile/app/(app)/(tabs)/_layout.tsx
index 8e70fe5..5318c99 100644
--- a/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/mobile/app/(app)/(tabs)/_layout.tsx
@@ -152,13 +152,28 @@ function SettingsHeaderButton() {
   );
 }
 
+// found.md: a push for a new message arrived but the speech bubble showed
+// nothing. Polling keeps the badge current while the app stays open; reading
+// a conversation invalidates conversations.* (see messages/[conversationId]).
+const UNREAD_MESSAGES_POLL_MS = 30 * 1000;
+
 function MessagesHeaderButton() {
   const router = useRouter();
+  const trpc = useTRPC();
+  const { activePetId } = useActivePet();
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const { data } = useQuery({
+    ...trpc.conversations.unreadCount.queryOptions({ petId: activePetId ?? "" }),
+    enabled: !!activePetId,
+    refetchInterval: UNREAD_MESSAGES_POLL_MS,
+  });
   return (
     <Pressable onPress={() => router.push("/messages")} hitSlop={8} style={styles.headerButton}>
-      <MessageCircle color={colors.ink} size={22} />
+      <View>
+        <MessageCircle color={colors.ink} size={22} />
+        <UnreadBadge count={data?.count ?? 0} styles={styles} />
+      </View>
     </Pressable>
   );
 }
@@ -172,16 +187,20 @@ function NotificationsTabIcon({ color, size }: { color: ColorValue; size: number
     ...trpc.notifications.unreadCount.queryOptions({ petId: activePetId ?? "" }),
     enabled: !!activePetId,
   });
-  const count = data?.count ?? 0;
 
   return (
     <View>
       <Bell color={color} size={size} />
-      {count > 0 && (
-        <View style={styles.badge}>
-          <Text style={styles.badgeText}>{count > 9 ? "9+" : count}</Text>
-        </View>
-      )}
+      <UnreadBadge count={data?.count ?? 0} styles={styles} />
+    </View>
+  );
+}
+
+function UnreadBadge({ count, styles }: { count: number; styles: ReturnType<typeof makeStyles> }) {
+  if (count <= 0) return null;
+  return (
+    <View style={styles.badge}>
+      <Text style={styles.badgeText}>{count > 9 ? "9+" : count}</Text>
     </View>
   );
 }