Adopt Tamagui defaults for tabs and filters

resources/js/admin/mobile/NotificationsPage.tsx

@@ -5,6 +5,7 @@ import { Bell, Check, ChevronRight, RefreshCcw } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
+import { ToggleGroup } from '@tamagui/toggle-group';
 import { motion, useAnimationControls, type PanInfo } from 'framer-motion';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, PillBadge, SkeletonCard, CTAButton } from './components/Primitives';
@@ -326,7 +327,7 @@ export default function MobileNotificationsPage() {
   const [events, setEvents] = React.useState<TenantEvent[]>([]);
   const [showEventPicker, setShowEventPicker] = React.useState(false);
   const back = useBackNavigation(adminPath('/mobile/dashboard'));
-  const { text, muted, border, warningBg, warningText, infoBg, primary, danger, accentSoft, subtle } = useAdminTheme();
+  const { text, muted, border, warningBg, warningText, infoBg, primary, danger, subtle } = useAdminTheme();
   const warningIcon = warningText;
   const infoIcon = primary;
   const errorText = danger;
@@ -552,7 +553,22 @@ export default function MobileNotificationsPage() {
         ) : null}
       </XStack>
 
-      <XStack gap="$2" flexWrap="wrap" marginBottom="$2">
+      <ToggleGroup
+        type="single"
+        value={scopeParam ?? 'all'}
+        onValueChange={(value: string) => value && updateFilters({ scope: value as NotificationScope | 'all' })}
+        disableDeactivation
+        orientation="horizontal"
+        flexDirection="row"
+        flexWrap="wrap"
+        gap="$2"
+        padding="$1"
+        borderRadius="$pill"
+        borderWidth={1}
+        borderColor={border}
+        backgroundColor="$background"
+        marginBottom="$2"
+      >
         {([
           { key: 'all', label: t('notificationLogs.scope.all', 'All scopes') },
           { key: 'photos', label: t('notificationLogs.scope.photos', 'Photos') },
@@ -561,28 +577,22 @@ export default function MobileNotificationsPage() {
           { key: 'events', label: t('notificationLogs.scope.events', 'Events') },
           { key: 'package', label: t('notificationLogs.scope.package', 'Package') },
           { key: 'general', label: t('notificationLogs.scope.general', 'General') },
-        ] as Array<{ key: NotificationScope | 'all'; label: string }>).map((filter) => {
-          const active = scopeParam === filter.key;
-          return (
-            <Pressable key={filter.key} onPress={() => updateFilters({ scope: filter.key })} style={{ flexGrow: 1 }}>
-              <XStack
-                alignItems="center"
-                justifyContent="center"
-                paddingVertical="$2"
-                paddingHorizontal="$3"
-                borderRadius={14}
-                borderWidth={1}
-                borderColor={active ? primary : border}
-                backgroundColor={active ? accentSoft : 'transparent'}
-              >
-                <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
-                  {filter.label}
-                </Text>
-              </XStack>
-            </Pressable>
-          );
-        })}
-      </XStack>
+        ] as Array<{ key: NotificationScope | 'all'; label: string }>).map((filter) => (
+          <ToggleGroup.Item
+            key={filter.key}
+            value={filter.key}
+            borderRadius="$pill"
+            paddingVertical="$2"
+            paddingHorizontal="$3"
+            flexGrow={1}
+            justifyContent="center"
+          >
+            <Text fontSize="$xs" fontWeight="600" textAlign="center">
+              {filter.label}
+            </Text>
+          </ToggleGroup.Item>
+        ))}
+      </ToggleGroup>
 
       {loading ? (
         <YStack gap="$2">