Refine control room upload settings UI defaults

resources/js/admin/i18n/locales/de/management.json

@@ -2484,6 +2484,7 @@
     },
     "automation": {
       "title": "Automatik",
+      "sectionTitle": "Einstellungen für Uploads",
       "autoApproveHighlights": {
         "label": "Highlights automatisch freigeben",
         "help": "Wenn du ein ausstehendes Foto highlightest, wird es automatisch freigegeben."

resources/js/admin/i18n/locales/en/management.json

@@ -2486,6 +2486,7 @@
     },
     "automation": {
       "title": "Automation",
+      "sectionTitle": "Einstellungen für Uploads",
       "autoApproveHighlights": {
         "label": "Auto-approve highlights",
         "help": "When you highlight a pending photo it will be approved automatically."

resources/js/admin/mobile/EventControlRoomPage.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Check, Eye, EyeOff, Image as ImageIcon, RefreshCcw, Settings, Sparkles } from 'lucide-react';
+import { Check, ChevronDown, Eye, EyeOff, Image as ImageIcon, RefreshCcw, Settings, Sparkles } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { Switch } from '@tamagui/switch';
+import { Accordion } from '@tamagui/accordion';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
 import { MobileField, MobileSelect } from './components/FormControls';
@@ -302,9 +303,9 @@ export default function MobileEventControlRoomPage() {
   const [liveBusyId, setLiveBusyId] = React.useState<number | null>(null);
 
   const [controlRoomSettings, setControlRoomSettings] = React.useState<ControlRoomSettings>({
-    auto_approve_highlights: false,
-    auto_add_approved_to_live: false,
-    auto_remove_live_on_hide: false,
+    auto_approve_highlights: true,
+    auto_add_approved_to_live: true,
+    auto_remove_live_on_hide: true,
     trusted_uploaders: [],
     force_review_uploaders: [],
   });
@@ -463,10 +464,11 @@ export default function MobileEventControlRoomPage() {
 
   React.useEffect(() => {
     const settings = (activeEvent?.settings?.control_room ?? {}) as ControlRoomSettings;
+    const resolveFlag = (value: boolean | undefined) => (typeof value === 'boolean' ? value : true);
     setControlRoomSettings({
-      auto_approve_highlights: Boolean(settings.auto_approve_highlights),
-      auto_add_approved_to_live: Boolean(settings.auto_add_approved_to_live),
-      auto_remove_live_on_hide: Boolean(settings.auto_remove_live_on_hide),
+      auto_approve_highlights: resolveFlag(settings.auto_approve_highlights),
+      auto_add_approved_to_live: resolveFlag(settings.auto_add_approved_to_live),
+      auto_remove_live_on_hide: resolveFlag(settings.auto_remove_live_on_hide),
       trusted_uploaders: Array.isArray(settings.trusted_uploaders) ? settings.trusted_uploaders : [],
       force_review_uploaders: Array.isArray(settings.force_review_uploaders) ? settings.force_review_uploaders : [],
     });
@@ -1018,251 +1020,267 @@ export default function MobileEventControlRoomPage() {
       </XStack>
 
       <MobileCard>
-        <YStack space="$2">
-          <Text fontSize="$sm" fontWeight="800" color={text}>
-            {t('controlRoom.automation.title', 'Automation')}
-          </Text>
-          <MobileField
-            label={t('controlRoom.automation.autoApproveHighlights.label', 'Auto-approve highlights')}
-            hint={t(
-              'controlRoom.automation.autoApproveHighlights.help',
-              'When you highlight a pending photo it will be approved automatically.',
-            )}
-          >
-            <Switch
-              size="$3"
-              checked={autoApproveHighlights}
-              disabled={controlRoomSaving}
-              onCheckedChange={(checked) =>
-                saveControlRoomSettings({
-                  ...controlRoomSettings,
-                  auto_approve_highlights: Boolean(checked),
-                })
-              }
-              aria-label={t('controlRoom.automation.autoApproveHighlights.label', 'Auto-approve highlights')}
+        <Accordion type="single" collapsible defaultValue="upload-settings">
+          <Accordion.Item value="upload-settings">
+            <Accordion.Trigger
+              {...({
+                padding: '$2',
+                borderWidth: 1,
+                borderColor: border,
+                borderRadius: 14,
+                backgroundColor: surfaceMuted,
+              } as any)}
             >
-              <Switch.Thumb />
-            </Switch>
-          </MobileField>
-          <MobileField
-            label={t('controlRoom.automation.autoAddApproved.label', 'Auto-add approved to Live Show')}
-            hint={
-              isImmediateUploads
-                ? t(
-                    'controlRoom.automation.autoAddApproved.locked',
-                    'Enabled because uploads are visible immediately.',
-                  )
-                : t(
-                    'controlRoom.automation.autoAddApproved.help',
-                    'Approved or highlighted photos go straight to the Live Show.',
-                  )
-            }
-          >
-            <Switch
-              size="$3"
-              checked={autoAddApprovedToLive}
-              disabled={controlRoomSaving || isImmediateUploads}
-              onCheckedChange={(checked) => {
-                if (isImmediateUploads) {
-                  return;
-                }
-                saveControlRoomSettings({
-                  ...controlRoomSettings,
-                  auto_add_approved_to_live: Boolean(checked),
-                });
-              }}
-              aria-label={t('controlRoom.automation.autoAddApproved.label', 'Auto-add approved to Live Show')}
-            >
-              <Switch.Thumb />
-            </Switch>
-          </MobileField>
-          <MobileField
-            label={t('controlRoom.automation.autoRemoveLive.label', 'Auto-remove from Live Show')}
-            hint={t(
-              'controlRoom.automation.autoRemoveLive.help',
-              'Hidden or rejected photos are removed from the Live Show automatically.',
-            )}
-          >
-            <Switch
-              size="$3"
-              checked={autoRemoveLiveOnHide}
-              disabled={controlRoomSaving}
-              onCheckedChange={(checked) =>
-                saveControlRoomSettings({
-                  ...controlRoomSettings,
-                  auto_remove_live_on_hide: Boolean(checked),
-                })
-              }
-              aria-label={t('controlRoom.automation.autoRemoveLive.label', 'Auto-remove from Live Show')}
-            >
-              <Switch.Thumb />
-            </Switch>
-          </MobileField>
-        </YStack>
-      </MobileCard>
-
-      <MobileCard>
-        <YStack space="$2">
-          <Text fontSize="$sm" fontWeight="800" color={text}>
-            {t('controlRoom.automation.uploaders.title', 'Uploader overrides')}
-          </Text>
-          <Text fontSize="$xs" color={muted}>
-            {t(
-              'controlRoom.automation.uploaders.subtitle',
-              'Pick devices from recent uploads to always approve or always review their photos.',
-            )}
-          </Text>
-
-          <MobileField
-            label={t('controlRoom.automation.uploaders.trustedLabel', 'Always approve')}
-            hint={t(
-              'controlRoom.automation.uploaders.trustedHelp',
-              'Uploads from these devices skip the approval queue.',
-            )}
-          >
-            <XStack alignItems="center" space="$2">
-              <MobileSelect
-                value={trustedUploaderSelection}
-                onChange={(event) => setTrustedUploaderSelection(event.target.value)}
-                style={{ flex: 1 }}
-              >
-                <option value="">{t('common.select', 'Select')}</option>
-                {uploaderOptions.map((option) => (
-                  <option key={option.deviceId} value={option.deviceId}>
-                    {option.display}
-                  </option>
-                ))}
-              </MobileSelect>
-              <CTAButton
-                label={t('controlRoom.automation.uploaders.add', 'Add')}
-                onPress={() => addUploaderRule('trusted')}
-                tone="ghost"
-                fullWidth={false}
-                disabled={controlRoomSaving || !trustedUploaderSelection}
-                style={{ width: 100 }}
-              />
-            </XStack>
-            {trustedUploaders.length ? (
-              <YStack space="$2">
-                {trustedUploaders.map((rule) => (
-                  <XStack
-                    key={`trusted-${rule.device_id}`}
-                    alignItems="center"
-                    justifyContent="space-between"
-                    padding="$2"
-                    borderRadius={14}
-                    borderWidth={1}
-                    borderColor={border}
-                    backgroundColor={surfaceMuted}
+              <XStack justifyContent="space-between" alignItems="center" flex={1}>
+                <Text fontSize="$sm" fontWeight="800" color={text}>
+                  {t('controlRoom.automation.sectionTitle', 'Einstellungen für Uploads')}
+                </Text>
+                <ChevronDown size={16} color={muted} />
+              </XStack>
+            </Accordion.Trigger>
+            <Accordion.Content {...({ paddingTop: '$2' } as any)}>
+              <YStack space="$3">
+                <YStack space="$2">
+                  <Text fontSize="$sm" fontWeight="800" color={text}>
+                    {t('controlRoom.automation.title', 'Automation')}
+                  </Text>
+                  <MobileField
+                    label={t('controlRoom.automation.autoApproveHighlights.label', 'Auto-approve highlights')}
+                    hint={t(
+                      'controlRoom.automation.autoApproveHighlights.help',
+                      'When you highlight a pending photo it will be approved automatically.',
+                    )}
                   >
-                    <YStack space="$0.5">
-                      <Text fontSize="$sm" fontWeight="700" color={text}>
-                        {rule.label ?? t('common.anonymous', 'Anonymous')}
-                      </Text>
-                      <Text fontSize="$xs" color={muted}>
-                        {formatDeviceId(rule.device_id)}
-                      </Text>
-                    </YStack>
-                    <Pressable
-                      onPress={() => removeUploaderRule('trusted', rule.device_id)}
+                    <Switch
+                      size="$3"
+                      checked={autoApproveHighlights}
                       disabled={controlRoomSaving}
-                      aria-label={t('controlRoom.automation.uploaders.remove', 'Remove')}
-                      style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 999,
-                        backgroundColor: withAlpha(danger, 0.12),
-                      }}
+                      onCheckedChange={(checked) =>
+                        saveControlRoomSettings({
+                          ...controlRoomSettings,
+                          auto_approve_highlights: Boolean(checked),
+                        })
+                      }
+                      aria-label={t('controlRoom.automation.autoApproveHighlights.label', 'Auto-approve highlights')}
                     >
-                      <Text fontSize="$xs" fontWeight="700" color={danger}>
-                        {t('controlRoom.automation.uploaders.remove', 'Remove')}
-                      </Text>
-                    </Pressable>
-                  </XStack>
-                ))}
-              </YStack>
-            ) : (
-              <Text fontSize="$xs" color={muted}>
-                {t('controlRoom.automation.uploaders.empty', 'No overrides yet.')}
-              </Text>
-            )}
-          </MobileField>
-
-          <MobileField
-            label={t('controlRoom.automation.uploaders.forceLabel', 'Always review')}
-            hint={t(
-              'controlRoom.automation.uploaders.forceHelp',
-              'Uploads from these devices always need approval.',
-            )}
-          >
-            <XStack alignItems="center" space="$2">
-              <MobileSelect
-                value={forceReviewSelection}
-                onChange={(event) => setForceReviewSelection(event.target.value)}
-                style={{ flex: 1 }}
-              >
-                <option value="">{t('common.select', 'Select')}</option>
-                {uploaderOptions.map((option) => (
-                  <option key={option.deviceId} value={option.deviceId}>
-                    {option.display}
-                  </option>
-                ))}
-              </MobileSelect>
-              <CTAButton
-                label={t('controlRoom.automation.uploaders.add', 'Add')}
-                onPress={() => addUploaderRule('force')}
-                tone="ghost"
-                fullWidth={false}
-                disabled={controlRoomSaving || !forceReviewSelection}
-                style={{ width: 100 }}
-              />
-            </XStack>
-            {forceReviewUploaders.length ? (
-              <YStack space="$2">
-                {forceReviewUploaders.map((rule) => (
-                  <XStack
-                    key={`force-${rule.device_id}`}
-                    alignItems="center"
-                    justifyContent="space-between"
-                    padding="$2"
-                    borderRadius={14}
-                    borderWidth={1}
-                    borderColor={border}
-                    backgroundColor={surfaceMuted}
+                      <Switch.Thumb />
+                    </Switch>
+                  </MobileField>
+                  <MobileField
+                    label={t('controlRoom.automation.autoAddApproved.label', 'Auto-add approved to Live Show')}
+                    hint={
+                      isImmediateUploads
+                        ? t(
+                            'controlRoom.automation.autoAddApproved.locked',
+                            'Enabled because uploads are visible immediately.',
+                          )
+                        : t(
+                            'controlRoom.automation.autoAddApproved.help',
+                            'Approved or highlighted photos go straight to the Live Show.',
+                          )
+                    }
                   >
-                    <YStack space="$0.5">
-                      <Text fontSize="$sm" fontWeight="700" color={text}>
-                        {rule.label ?? t('common.anonymous', 'Anonymous')}
-                      </Text>
-                      <Text fontSize="$xs" color={muted}>
-                        {formatDeviceId(rule.device_id)}
-                      </Text>
-                    </YStack>
-                    <Pressable
-                      onPress={() => removeUploaderRule('force', rule.device_id)}
-                      disabled={controlRoomSaving}
-                      aria-label={t('controlRoom.automation.uploaders.remove', 'Remove')}
-                      style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 999,
-                        backgroundColor: withAlpha(danger, 0.12),
+                    <Switch
+                      size="$3"
+                      checked={autoAddApprovedToLive}
+                      disabled={controlRoomSaving || isImmediateUploads}
+                      onCheckedChange={(checked) => {
+                        if (isImmediateUploads) {
+                          return;
+                        }
+                        saveControlRoomSettings({
+                          ...controlRoomSettings,
+                          auto_add_approved_to_live: Boolean(checked),
+                        });
                       }}
+                      aria-label={t('controlRoom.automation.autoAddApproved.label', 'Auto-add approved to Live Show')}
                     >
-                      <Text fontSize="$xs" fontWeight="700" color={danger}>
-                        {t('controlRoom.automation.uploaders.remove', 'Remove')}
+                      <Switch.Thumb />
+                    </Switch>
+                  </MobileField>
+                  <MobileField
+                    label={t('controlRoom.automation.autoRemoveLive.label', 'Auto-remove from Live Show')}
+                    hint={t(
+                      'controlRoom.automation.autoRemoveLive.help',
+                      'Hidden or rejected photos are removed from the Live Show automatically.',
+                    )}
+                  >
+                    <Switch
+                      size="$3"
+                      checked={autoRemoveLiveOnHide}
+                      disabled={controlRoomSaving}
+                      onCheckedChange={(checked) =>
+                        saveControlRoomSettings({
+                          ...controlRoomSettings,
+                          auto_remove_live_on_hide: Boolean(checked),
+                        })
+                      }
+                      aria-label={t('controlRoom.automation.autoRemoveLive.label', 'Auto-remove from Live Show')}
+                    >
+                      <Switch.Thumb />
+                    </Switch>
+                  </MobileField>
+                </YStack>
+
+                <YStack space="$2">
+                  <Text fontSize="$sm" fontWeight="800" color={text}>
+                    {t('controlRoom.automation.uploaders.title', 'Uploader overrides')}
+                  </Text>
+                  <Text fontSize="$xs" color={muted}>
+                    {t(
+                      'controlRoom.automation.uploaders.subtitle',
+                      'Pick devices from recent uploads to always approve or always review their photos.',
+                    )}
+                  </Text>
+
+                  <MobileField
+                    label={t('controlRoom.automation.uploaders.trustedLabel', 'Always approve')}
+                    hint={t(
+                      'controlRoom.automation.uploaders.trustedHelp',
+                      'Uploads from these devices skip the approval queue.',
+                    )}
+                  >
+                    <YStack space="$2">
+                      <MobileSelect
+                        value={trustedUploaderSelection}
+                        onChange={(event) => setTrustedUploaderSelection(event.target.value)}
+                      >
+                        <option value="">{t('common.select', 'Select')}</option>
+                        {uploaderOptions.map((option) => (
+                          <option key={option.deviceId} value={option.deviceId}>
+                            {option.display}
+                          </option>
+                        ))}
+                      </MobileSelect>
+                      <CTAButton
+                        label={t('controlRoom.automation.uploaders.add', 'Add')}
+                        onPress={() => addUploaderRule('trusted')}
+                        tone="ghost"
+                        disabled={controlRoomSaving || !trustedUploaderSelection}
+                      />
+                    </YStack>
+                    {trustedUploaders.length ? (
+                      <YStack space="$2">
+                        {trustedUploaders.map((rule) => (
+                          <XStack
+                            key={`trusted-${rule.device_id}`}
+                            alignItems="center"
+                            justifyContent="space-between"
+                            padding="$2"
+                            borderRadius={14}
+                            borderWidth={1}
+                            borderColor={border}
+                            backgroundColor={surfaceMuted}
+                          >
+                            <YStack space="$0.5">
+                              <Text fontSize="$sm" fontWeight="700" color={text}>
+                                {rule.label ?? t('common.anonymous', 'Anonymous')}
+                              </Text>
+                              <Text fontSize="$xs" color={muted}>
+                                {formatDeviceId(rule.device_id)}
+                              </Text>
+                            </YStack>
+                            <Pressable
+                              onPress={() => removeUploaderRule('trusted', rule.device_id)}
+                              disabled={controlRoomSaving}
+                              aria-label={t('controlRoom.automation.uploaders.remove', 'Remove')}
+                              style={{
+                                paddingHorizontal: 12,
+                                paddingVertical: 6,
+                                borderRadius: 999,
+                                backgroundColor: withAlpha(danger, 0.12),
+                              }}
+                            >
+                              <Text fontSize="$xs" fontWeight="700" color={danger}>
+                                {t('controlRoom.automation.uploaders.remove', 'Remove')}
+                              </Text>
+                            </Pressable>
+                          </XStack>
+                        ))}
+                      </YStack>
+                    ) : (
+                      <Text fontSize="$xs" color={muted}>
+                        {t('controlRoom.automation.uploaders.empty', 'No overrides yet.')}
                       </Text>
-                    </Pressable>
-                  </XStack>
-                ))}
+                    )}
+                  </MobileField>
+
+                  <MobileField
+                    label={t('controlRoom.automation.uploaders.forceLabel', 'Always review')}
+                    hint={t(
+                      'controlRoom.automation.uploaders.forceHelp',
+                      'Uploads from these devices always need approval.',
+                    )}
+                  >
+                    <YStack space="$2">
+                      <MobileSelect
+                        value={forceReviewSelection}
+                        onChange={(event) => setForceReviewSelection(event.target.value)}
+                      >
+                        <option value="">{t('common.select', 'Select')}</option>
+                        {uploaderOptions.map((option) => (
+                          <option key={option.deviceId} value={option.deviceId}>
+                            {option.display}
+                          </option>
+                        ))}
+                      </MobileSelect>
+                      <CTAButton
+                        label={t('controlRoom.automation.uploaders.add', 'Add')}
+                        onPress={() => addUploaderRule('force')}
+                        tone="ghost"
+                        disabled={controlRoomSaving || !forceReviewSelection}
+                      />
+                    </YStack>
+                    {forceReviewUploaders.length ? (
+                      <YStack space="$2">
+                        {forceReviewUploaders.map((rule) => (
+                          <XStack
+                            key={`force-${rule.device_id}`}
+                            alignItems="center"
+                            justifyContent="space-between"
+                            padding="$2"
+                            borderRadius={14}
+                            borderWidth={1}
+                            borderColor={border}
+                            backgroundColor={surfaceMuted}
+                          >
+                            <YStack space="$0.5">
+                              <Text fontSize="$sm" fontWeight="700" color={text}>
+                                {rule.label ?? t('common.anonymous', 'Anonymous')}
+                              </Text>
+                              <Text fontSize="$xs" color={muted}>
+                                {formatDeviceId(rule.device_id)}
+                              </Text>
+                            </YStack>
+                            <Pressable
+                              onPress={() => removeUploaderRule('force', rule.device_id)}
+                              disabled={controlRoomSaving}
+                              aria-label={t('controlRoom.automation.uploaders.remove', 'Remove')}
+                              style={{
+                                paddingHorizontal: 12,
+                                paddingVertical: 6,
+                                borderRadius: 999,
+                                backgroundColor: withAlpha(danger, 0.12),
+                              }}
+                            >
+                              <Text fontSize="$xs" fontWeight="700" color={danger}>
+                                {t('controlRoom.automation.uploaders.remove', 'Remove')}
+                              </Text>
+                            </Pressable>
+                          </XStack>
+                        ))}
+                      </YStack>
+                    ) : (
+                      <Text fontSize="$xs" color={muted}>
+                        {t('controlRoom.automation.uploaders.empty', 'No overrides yet.')}
+                      </Text>
+                    )}
+                  </MobileField>
+                </YStack>
               </YStack>
-            ) : (
-              <Text fontSize="$xs" color={muted}>
-                {t('controlRoom.automation.uploaders.empty', 'No overrides yet.')}
-              </Text>
-            )}
-          </MobileField>
-        </YStack>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
       </MobileCard>
 
       {activeTab === 'moderation' ? (

resources/js/admin/mobile/__tests__/EventControlRoomPage.test.tsx

@@ -108,6 +108,17 @@ vi.mock('@tamagui/switch', () => ({
   ),
 }));
 
+vi.mock('@tamagui/accordion', () => ({
+  Accordion: Object.assign(
+    ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    {
+      Item: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+      Trigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+      Content: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    },
+  ),
+}));
+
 vi.mock('@tamagui/react-native-web-lite', () => ({
   Pressable: ({
     children,