From d7ba1880dc8042484feb6c4ef77f691cb9965311 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Tue, 20 Jan 2026 13:25:21 +0100
Subject: [PATCH] Integrate status filters into event list

---
 resources/js/admin/mobile/EventsPage.tsx | 106 ++++++++++-------------
 1 file changed, 45 insertions(+), 61 deletions(-)

diff --git a/resources/js/admin/mobile/EventsPage.tsx b/resources/js/admin/mobile/EventsPage.tsx
index 0df958a..90a031f 100644
--- a/resources/js/admin/mobile/EventsPage.tsx
+++ b/resources/js/admin/mobile/EventsPage.tsx
@@ -264,66 +264,6 @@ function EventsList({
 
   return (
     <YStack space="$3">
-      <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.5">
-          <XStack
-            alignItems="center"
-            paddingHorizontal="$3"
-            paddingVertical="$1.5"
-            borderRadius={999}
-            borderWidth={1}
-            borderColor={border}
-            backgroundColor={surfaceMuted}
-          >
-            <Text fontSize="$xs" fontWeight="800" color={text}>
-              {t('events.workspace.fields.status')}
-            </Text>
-          </XStack>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <ToggleGroup
-              type="single"
-              value={statusFilter}
-              onValueChange={(value) => value && onStatusChange(value as EventStatusKey)}
-            >
-              <XStack space="$2" paddingVertical="$1">
-                {filters.map((filter) => {
-                  const active = filter.key === statusFilter;
-                  return (
-                    <ToggleGroup.Item
-                      key={filter.key}
-                      value={filter.key}
-                      borderRadius={999}
-                      borderWidth={1}
-                      borderColor={active ? activeBorder : border}
-                      backgroundColor={active ? activeBg : surface}
-                      paddingVertical="$2"
-                      paddingHorizontal="$3"
-                    >
-                      <XStack alignItems="center" space="$1.5">
-                        <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
-                          {filter.label}
-                        </Text>
-                        <PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge>
-                      </XStack>
-                    </ToggleGroup.Item>
-                  );
-                })}
-              </XStack>
-            </ToggleGroup>
-          </ScrollView>
-        </YStack>
-      </Card>
-
       {filteredEvents.length === 0 ? (
         <Card
           borderRadius={22}
@@ -357,12 +297,55 @@ function EventsList({
           borderWidth={2}
           borderColor={border}
           backgroundColor={surface}
-          padding="$2"
+          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
+                type="single"
+                value={statusFilter}
+                onValueChange={(value) => value && onStatusChange(value as EventStatusKey)}
+              >
+                <XStack space="$2" paddingVertical="$1">
+                  {filters.map((filter) => {
+                    const active = filter.key === statusFilter;
+                    return (
+                      <ToggleGroup.Item
+                        key={filter.key}
+                        value={filter.key}
+                        borderRadius={999}
+                        borderWidth={1}
+                        borderColor={active ? activeBorder : border}
+                        backgroundColor={active ? activeBg : surface}
+                        paddingVertical="$2"
+                        paddingHorizontal="$3"
+                      >
+                        <XStack alignItems="center" space="$1.5">
+                          <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
+                            {filter.label}
+                          </Text>
+                          <PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge>
+                        </XStack>
+                      </ToggleGroup.Item>
+                    );
+                  })}
+                </XStack>
+              </ToggleGroup>
+            </ScrollView>
+          </YStack>
+
           <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);