Update task mode UI details

resources/js/admin/mobile/EventTasksPage.tsx

@@ -206,11 +206,15 @@ export default function MobileEventTasksPage() {
     return typeof limit === 'number' && Number.isFinite(limit) ? limit : null;
   }, [eventRecord?.limits?.tasks?.limit]);
   const remainingTasks = React.useMemo(() => {
+    const remaining = eventRecord?.limits?.tasks?.remaining;
+    if (typeof remaining === 'number' && Number.isFinite(remaining)) {
+      return Math.max(0, remaining);
+    }
     if (maxTasks === null) {
       return null;
     }
     return Math.max(0, maxTasks - assignedTasks.length);
-  }, [assignedTasks.length, maxTasks]);
+  }, [assignedTasks.length, eventRecord?.limits?.tasks?.remaining, maxTasks]);
   const canAddTasks = maxTasks === null || (remainingTasks ?? 0) > 0;
   const limitReachedMessage = t('events.tasks.limitReached', 'Photo task limit reached.');
   const limitReachedHint =
@@ -781,9 +785,19 @@ export default function MobileEventTasksPage() {
   ) : (
     <YStack space="$2">
       <YStack ref={assignedRef} />
-      <Text fontSize="$sm" color={muted}>
-        {t('events.tasks.count', '{{count}} photo tasks', { count: filteredTasks.length })}
-      </Text>
+      <XStack alignItems="center" flexWrap="wrap" space="$2">
+        <Text fontSize="$sm" color={muted}>
+          {t('events.tasks.count', '{{count}} photo tasks', { count: filteredTasks.length })}
+        </Text>
+        {typeof remainingTasks === 'number' && typeof maxTasks === 'number' ? (
+          <Tag
+            label={t('events.tasks.remainingIndicator', '{{count}} / {{total}} tasks remaining', {
+              count: remainingTasks,
+              total: maxTasks,
+            })}
+          />
+        ) : null}
+      </XStack>
       {selectionMode ? (
         <MobileCard padding="$2.5" space="$2">
           <Text fontSize={12} fontWeight="700" color={text}>
@@ -977,7 +991,7 @@ export default function MobileEventTasksPage() {
             <YStack space="$1" flex={1} minWidth={180}>
               <XStack alignItems="center" space="$2" flexWrap="wrap">
                 <Text fontSize="$sm" fontWeight="800" color={text}>
-                  {t('events.tasks.toggle.title', 'Photo tasks for this event')}
+                  {t('events.tasks.toggle.title', 'Photo task mode')}
                 </Text>
                 <PillBadge tone={tasksEnabled ? 'success' : 'warning'}>
                   {tasksEnabled
@@ -985,21 +999,13 @@ export default function MobileEventTasksPage() {
                     : t('events.tasks.toggle.inactive', 'INACTIVE')}
                 </PillBadge>
               </XStack>
-              {showTaskDetails ? (
-                <Text fontSize="$xs" color={muted}>
-                  {t(
-                    'events.tasks.toggle.description',
-                    'Give guests optional photo tasks and prompts.'
-                  )}
-                </Text>
-              ) : null}
             </YStack>
             <XStack alignItems="center" space="$2">
               <Pressable
                 onPress={() => setShowTaskDetails((prev) => !prev)}
                 aria-label={t(
                   'events.tasks.toggle.description',
-                  'Give guests optional photo tasks and prompts.'
+                  'Control whether guests see mission cards and prompts.'
                 )}
               >
                 <XStack
@@ -1015,23 +1021,36 @@ export default function MobileEventTasksPage() {
                   <Info size={14} color={showTaskDetails ? primary : muted} />
                 </XStack>
               </Pressable>
-              <Switch
-                size="$4"
-                checked={tasksEnabled}
-                onCheckedChange={handleTasksToggle}
-                aria-label={t('events.tasks.toggle.switchLabel', 'Photo tasks enabled')}
-                disabled={!canManageTasks || tasksToggleBusy}
-              >
-                <Switch.Thumb />
-              </Switch>
             </XStack>
           </XStack>
           {showTaskDetails ? (
-            <Text fontSize="$xs" color={muted}>
-              {tasksEnabled
-                ? t('events.tasks.toggle.onLabel', 'Guests see photo tasks')
-                : t('events.tasks.toggle.offLabel', 'Guest app shows photos only')}
-            </Text>
+            <YStack space="$2">
+              <Text fontSize="$xs" color={muted}>
+                {t(
+                  'events.tasks.toggle.description',
+                  'Control whether guests see mission cards and prompts.'
+                )}
+              </Text>
+              <XStack alignItems="center" justifyContent="space-between" space="$2">
+                <Text fontSize="$sm" fontWeight="700" color={text}>
+                  {t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
+                </Text>
+                <Switch
+                  size="$4"
+                  checked={tasksEnabled}
+                  onCheckedChange={handleTasksToggle}
+                  aria-label={t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
+                  disabled={!canManageTasks || tasksToggleBusy}
+                >
+                  <Switch.Thumb />
+                </Switch>
+              </XStack>
+              <Text fontSize="$xs" color={muted}>
+                {tasksEnabled
+                  ? t('events.tasks.toggle.onLabel', 'Mission cards active')
+                  : t('events.tasks.toggle.offLabel', 'Photo feed only')}
+              </Text>
+            </YStack>
           ) : null}
           {isMember && !canManageTasks ? (
             <Text fontSize="$xs" color={muted}>