Fix auth translations and admin PWA UI

resources/js/admin/mobile/EventTasksPage.tsx

@@ -11,6 +11,7 @@ import { Pressable } from '@tamagui/react-native-web-lite';
 import { Button } from '@tamagui/button';
 import { AlertDialog } from '@tamagui/alert-dialog';
 import { ScrollView } from '@tamagui/scroll-view';
+import { ToggleGroup } from '@tamagui/toggle-group';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, SkeletonCard, FloatingActionButton } from './components/Primitives';
 import { MobileField, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
@@ -183,28 +184,34 @@ function SummaryLegendItem({
 }
 
 function QuickNavChip({
+  value,
   label,
   count,
   onPress,
+  isActive = false,
 }: {
+  value: TaskSectionKey;
   label: string;
   count: number;
   onPress: () => void;
+  isActive?: boolean;
 }) {
-  const { textStrong, border, surface, surfaceMuted } = useAdminTheme();
+  const { textStrong, border, surface, surfaceMuted, primary } = useAdminTheme();
+  const activeBorder = withAlpha(primary, 0.45);
+  const activeBackground = withAlpha(primary, 0.16);
   return (
-    <Pressable onPress={onPress}>
-      <XStack
-        alignItems="center"
-        space="$1.5"
-        paddingHorizontal="$3"
-        paddingVertical="$2"
-        borderRadius={999}
-        borderWidth={1}
-        borderColor={border}
-        backgroundColor={surface}
-        style={{ minHeight: 36 }}
-      >
+    <ToggleGroup.Item
+      value={value}
+      onPress={onPress}
+      borderRadius={999}
+      borderWidth={1}
+      borderColor={isActive ? activeBorder : border}
+      backgroundColor={isActive ? activeBackground : surface}
+      paddingHorizontal="$3"
+      paddingVertical="$2"
+      height={36}
+    >
+      <XStack alignItems="center" space="$1.5">
         <Text fontSize="$xs" fontWeight="700" color={textStrong}>
           {label}
         </Text>
@@ -213,7 +220,7 @@ function QuickNavChip({
           paddingVertical="$0.5"
           borderRadius={999}
           borderWidth={1}
-          borderColor={border}
+          borderColor={isActive ? activeBorder : border}
           backgroundColor={surfaceMuted}
         >
           <Text fontSize={10} fontWeight="800" color={textStrong}>
@@ -221,7 +228,7 @@ function QuickNavChip({
           </Text>
         </XStack>
       </XStack>
-    </Pressable>
+    </ToggleGroup.Item>
   );
 }
 
@@ -263,6 +270,7 @@ export default function MobileEventTasksPage() {
   const [emotionForm, setEmotionForm] = React.useState({ name: '', color: String(border) });
   const [savingEmotion, setSavingEmotion] = React.useState(false);
   const [showEmotionFilterSheet, setShowEmotionFilterSheet] = React.useState(false);
+  const [quickNavSelection, setQuickNavSelection] = React.useState<TaskSectionKey | ''>('');
   const text = textStrong;
   const assignedRef = React.useRef<HTMLDivElement>(null);
   const libraryRef = React.useRef<HTMLDivElement>(null);
@@ -623,16 +631,34 @@ export default function MobileEventTasksPage() {
             </XStack>
 
             <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <XStack space="$2" paddingVertical="$1">
-                {sectionCounts.map((section) => (
-                  <QuickNavChip
-                    key={section.key}
-                    label={t(`events.tasks.sections.${section.key}`, section.key)}
-                    count={section.count}
-                    onPress={() => handleQuickNav(section.key)}
-                  />
-                ))}
-              </XStack>
+              <ToggleGroup
+                type="single"
+                value={quickNavSelection}
+                onValueChange={(next) => {
+                  const key = next as TaskSectionKey | '';
+                  if (!key) {
+                    return;
+                  }
+                  setQuickNavSelection(key);
+                  handleQuickNav(key);
+                }}
+              >
+                <XStack space="$2" paddingVertical="$1">
+                  {sectionCounts.map((section) => (
+                    <QuickNavChip
+                      key={section.key}
+                      value={section.key}
+                      label={t(`events.tasks.sections.${section.key}`, section.key)}
+                      count={section.count}
+                      onPress={() => {
+                        setQuickNavSelection(section.key);
+                        handleQuickNav(section.key);
+                      }}
+                      isActive={quickNavSelection === section.key}
+                    />
+                  ))}
+                </XStack>
+              </ToggleGroup>
             </ScrollView>
 
             <XStack alignItems="center" space="$2">
@@ -770,7 +796,7 @@ export default function MobileEventTasksPage() {
         </YStack>
       ) : (
         <YStack space="$2">
-          <div ref={assignedRef} />
+          <YStack ref={assignedRef} />
           <Text fontSize="$sm" color={muted}>
             {t('events.tasks.count', '{{count}} Tasks', { count: filteredTasks.length })}
           </Text>
@@ -822,7 +848,7 @@ export default function MobileEventTasksPage() {
             ))}
           </YGroup>
           <XStack justifyContent="space-between" alignItems="center" marginTop="$2">
-            <div ref={libraryRef} />
+            <YStack ref={libraryRef} />
             <Text fontSize={12.5} fontWeight="600" color={text}>
               {t('events.tasks.library', 'Weitere Aufgaben')}
             </Text>