Integrate status filters into event list

resources/js/admin/mobile/EventsPage.tsx

@@ -264,6 +264,7 @@ function EventsList({
 
   return (
     <YStack space="$3">
+      {filteredEvents.length === 0 ? (
         <Card
           borderRadius={22}
           borderWidth={2}
@@ -275,19 +276,41 @@ function EventsList({
           shadowRadius={14}
           shadowOffset={{ width: 0, height: 8 }}
         >
-        <YStack space="$2.5">
+          <YStack space="$2" alignItems="center">
-          <XStack
+            <Text fontSize="$sm" fontWeight="700" color={text}>
-            alignItems="center"
+              {t('events.list.empty.filtered')}
-            paddingHorizontal="$3"
+            </Text>
-            paddingVertical="$1.5"
+            <Text fontSize="$xs" color={muted} textAlign="center">
-            borderRadius={999}
+              {t('events.list.empty.filteredHint')}
-            borderWidth={1}
+            </Text>
+            <CTAButton
+              label={t('events.list.filters.all')}
+              tone="ghost"
+              fullWidth={false}
+              onPress={() => onStatusChange('all')}
+            />
+          </YStack>
+        </Card>
+      ) : (
+        <Card
+          borderRadius={22}
+          borderWidth={2}
           borderColor={border}
-            backgroundColor={surfaceMuted}
+          backgroundColor={surface}
+          padding="$2.5"
+          shadowColor={shadow}
+          shadowOpacity={0.14}
+          shadowRadius={14}
+          shadowOffset={{ width: 0, height: 8 }}
         >
+          <YStack space="$2.5">
+            <XStack alignItems="center" justifyContent="space-between">
               <Text fontSize="$xs" fontWeight="800" color={text}>
                 {t('events.workspace.fields.status')}
               </Text>
+              <Text fontSize="$xs" color={muted}>
+                {t('events.list.subtitle')}
+              </Text>
             </XStack>
             <ScrollView horizontal showsHorizontalScrollIndicator={false}>
               <ToggleGroup
@@ -322,47 +345,7 @@ function EventsList({
               </ToggleGroup>
             </ScrollView>
           </YStack>
-      </Card>
 
-      {filteredEvents.length === 0 ? (
-        <Card
-          borderRadius={22}
-          borderWidth={2}
-          borderColor={border}
-          backgroundColor={surface}
-          padding="$3"
-          shadowColor={shadow}
-          shadowOpacity={0.14}
-          shadowRadius={14}
-          shadowOffset={{ width: 0, height: 8 }}
-        >
-          <YStack space="$2" alignItems="center">
-            <Text fontSize="$sm" fontWeight="700" color={text}>
-              {t('events.list.empty.filtered')}
-            </Text>
-            <Text fontSize="$xs" color={muted} textAlign="center">
-              {t('events.list.empty.filteredHint')}
-            </Text>
-            <CTAButton
-              label={t('events.list.filters.all')}
-              tone="ghost"
-              fullWidth={false}
-              onPress={() => onStatusChange('all')}
-            />
-          </YStack>
-        </Card>
-      ) : (
-        <Card
-          borderRadius={22}
-          borderWidth={2}
-          borderColor={border}
-          backgroundColor={surface}
-          padding="$2"
-          shadowColor={shadow}
-          shadowOpacity={0.14}
-          shadowRadius={14}
-          shadowOffset={{ width: 0, height: 8 }}
-        >
           <YGroup
             {...({
               borderRadius: 18,
@@ -371,6 +354,7 @@ function EventsList({
               overflow: 'hidden',
               backgroundColor: surface,
             } as any)}
+            marginTop="$2.5"
           >
             {filteredEvents.map((event) => {
               const statusKey = resolveEventStatusKey(event);