Fix auth translations and admin PWA UI

resources/js/admin/mobile/UploadsTabPage.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Card } from '@tamagui/card';
 import { YStack, XStack } from '@tamagui/stacks';
+import { YGroup } from '@tamagui/group';
+import { ListItem } from '@tamagui/list-item';
 import { SizableText as Text } from '@tamagui/text';
-import { Pressable } from '@tamagui/react-native-web-lite';
 import { MobileShell } from './components/MobileShell';
-import { MobileCard, CTAButton } from './components/Primitives';
+import { CTAButton } from './components/Primitives';
 import { useEventContext } from '../context/EventContext';
 import { formatEventDate, resolveEventDisplayName } from '../lib/events';
 import { adminPath } from '../constants';
@@ -15,7 +17,7 @@ export default function MobileUploadsTabPage() {
   const { events, activeEvent, hasEvents, selectEvent } = useEventContext();
   const { t, i18n } = useTranslation('management');
   const navigate = useNavigate();
-  const { text, muted, border, primary } = useAdminTheme();
+  const { text, muted, border, primary, surface, surfaceMuted, shadow } = useAdminTheme();
 
   if (activeEvent?.slug) {
     return <Navigate to={adminPath(`/mobile/events/${activeEvent.slug}/control-room`)} replace />;
@@ -24,18 +26,43 @@ export default function MobileUploadsTabPage() {
   if (!hasEvents) {
     return (
       <MobileShell activeTab="uploads" title={t('mobileUploads.title', 'Uploads')}>
-        <MobileCard alignItems="flex-start" space="$3">
-          <Text fontSize="$lg" fontWeight="800" color={text}>
-            {t('mobileUploads.emptyTitle', 'Create an event first')}
-          </Text>
-          <Text fontSize="$sm" color={muted}>
-            {t('mobileUploads.emptyBody', 'Add your first event to review uploads and manage QR sharing.')}
-          </Text>
-          <CTAButton
-            label={t('mobileDashboard.ctaCreate', 'Create event')}
-            onPress={() => navigate(adminPath('/mobile/events/new'))}
-          />
-        </MobileCard>
+        <Card
+          borderRadius={22}
+          borderWidth={2}
+          borderColor={border}
+          backgroundColor={surface}
+          padding="$3"
+          shadowColor={shadow}
+          shadowOpacity={0.16}
+          shadowRadius={16}
+          shadowOffset={{ width: 0, height: 10 }}
+        >
+          <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('mobileUploads.emptyBadge', 'No uploads yet')}
+              </Text>
+            </XStack>
+            <Text fontSize="$lg" fontWeight="800" color={text}>
+              {t('mobileUploads.emptyTitle', 'Create an event first')}
+            </Text>
+            <Text fontSize="$sm" color={muted}>
+              {t('mobileUploads.emptyBody', 'Add your first event to review uploads and manage QR sharing.')}
+            </Text>
+            <CTAButton
+              label={t('mobileDashboard.ctaCreate', 'Create event')}
+              onPress={() => navigate(adminPath('/mobile/events/new'))}
+            />
+          </YStack>
+        </Card>
       </MobileShell>
     );
   }
@@ -44,38 +71,66 @@ export default function MobileUploadsTabPage() {
 
   return (
     <MobileShell activeTab="uploads" title={t('mobileUploads.title', 'Uploads')}>
-      <YStack space="$2">
-        <Text fontSize="$sm" color={text} fontWeight="700">
-          {t('mobileUploads.pickEvent', 'Pick an event to manage uploads')}
-        </Text>
-        {events.map((event) => (
-          <Pressable
-            key={event.slug}
-            onPress={() => {
-              selectEvent(event.slug ?? null);
-              if (event.slug) {
-                navigate(adminPath(`/mobile/events/${event.slug}/control-room`));
-              }
-            }}
+      <Card
+        borderRadius={22}
+        borderWidth={2}
+        borderColor={border}
+        backgroundColor={surface}
+        padding="$3"
+        shadowColor={shadow}
+        shadowOpacity={0.16}
+        shadowRadius={16}
+        shadowOffset={{ width: 0, height: 10 }}
+      >
+        <YStack space="$2.5">
+          <XStack
+            alignItems="center"
+            paddingHorizontal="$3"
+            paddingVertical="$1.5"
+            borderRadius={999}
+            borderWidth={1}
+            borderColor={border}
+            backgroundColor={surfaceMuted}
           >
-            <MobileCard borderColor={border} space="$2">
-              <XStack alignItems="center" justifyContent="space-between">
-                <YStack space="$1">
-                  <Text fontSize="$md" fontWeight="800" color={text}>
-                    {resolveEventDisplayName(event)}
-                  </Text>
-                  <Text fontSize="$xs" color={muted}>
-                    {formatEventDate(event.event_date, locale) ?? t('mobileDashboard.status.draft', 'Draft')}
-                  </Text>
-                </YStack>
-                <Text fontSize="$sm" color={primary} fontWeight="700">
-                  {t('mobileUploads.open', 'Open')}
-                </Text>
-              </XStack>
-            </MobileCard>
-          </Pressable>
-        ))}
-      </YStack>
+            <Text fontSize="$xs" fontWeight="800" color={text}>
+              {t('mobileUploads.pickEvent', 'Pick an event to manage uploads')}
+            </Text>
+          </XStack>
+          <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: border, overflow: "hidden" } as any)}>
+            {events.map((event) => (
+              <YGroup.Item key={event.slug}>
+                <ListItem
+                  hoverTheme
+                  pressTheme
+                  paddingVertical="$2"
+                  paddingHorizontal="$3"
+                  title={
+                    <YStack space="$1">
+                      <Text fontSize="$md" fontWeight="800" color={text}>
+                        {resolveEventDisplayName(event)}
+                      </Text>
+                      <Text fontSize="$xs" color={muted}>
+                        {formatEventDate(event.event_date, locale) ?? t('mobileDashboard.status.draft', 'Draft')}
+                      </Text>
+                    </YStack>
+                  }
+                  iconAfter={
+                    <Text fontSize="$sm" color={primary} fontWeight="700">
+                      {t('mobileUploads.open', 'Open')}
+                    </Text>
+                  }
+                  onPress={() => {
+                    selectEvent(event.slug ?? null);
+                    if (event.slug) {
+                      navigate(adminPath(`/mobile/events/${event.slug}/control-room`));
+                    }
+                  }}
+                />
+              </YGroup.Item>
+            ))}
+          </YGroup>
+        </YStack>
+      </Card>
     </MobileShell>
   );
 }