KI-AGENT: Ungelesene Chat Badges in Mobile App anzeigen

mobile/app/(tabs)/_layout.tsx

@@ -1,14 +1,49 @@
+import * as Notifications from 'expo-notifications';
 import { Redirect, Tabs } from 'expo-router';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { HapticTab } from '@/components/haptic-tab';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Colors } from '@/constants/theme';
 import { useColorScheme } from '@/hooks/use-color-scheme';
+import { fetchMatrixUnreadCounts } from '@/src/lib/api';
 import { useAuth } from '@/src/providers/auth-provider';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
-  const { isBootstrapping, token, requiresTenantSelection } = useAuth();
+  const { activeTenantId, isBootstrapping, token, requiresTenantSelection } = useAuth();
+  const [communicationUnread, setCommunicationUnread] = useState(0);
+
+  const refreshCommunicationUnread = useCallback(async () => {
+    if (!token || requiresTenantSelection) {
+      setCommunicationUnread(0);
+      await Notifications.setBadgeCountAsync(0);
+      return;
+    }
+
+    try {
+      const unread = await fetchMatrixUnreadCounts(token);
+      const total = Object.values(unread).reduce((sum, room) => sum + (room.count || 0), 0);
+      setCommunicationUnread(total);
+      await Notifications.setBadgeCountAsync(total);
+    } catch {
+      // Badge loading must not block tab navigation.
+    }
+  }, [requiresTenantSelection, token]);
+
+  useEffect(() => {
+    void refreshCommunicationUnread();
+
+    if (!token || requiresTenantSelection) return undefined;
+
+    const id = setInterval(() => void refreshCommunicationUnread(), 30000);
+    return () => clearInterval(id);
+  }, [activeTenantId, refreshCommunicationUnread, requiresTenantSelection, token]);
+
+  const communicationBadge = useMemo(() => {
+    if (!communicationUnread) return undefined;
+    return communicationUnread > 99 ? '99+' : communicationUnread;
+  }, [communicationUnread]);
 
   if (isBootstrapping) {
     return null;
@@ -54,6 +89,13 @@ export default function TabLayout() {
         name="communication"
         options={{
           title: 'Kommunikation',
+          tabBarBadge: communicationBadge,
+          tabBarBadgeStyle: {
+            backgroundColor: '#ef4444',
+            color: '#ffffff',
+            fontSize: 11,
+            fontWeight: '800',
+          },
           tabBarIcon: ({ color }) => <IconSymbol size={24} name="message.fill" color={color} />,
         }}
       />