weitere perfektionierung der neuen mobile app

resources/js/admin/mobile/BrandingPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Image as ImageIcon, RefreshCcw, Save } from 'lucide-react';
+import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
@@ -9,14 +9,16 @@ import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton } from './components/Primitives';
 import { TenantEvent, getEvent, updateEvent, getTenantFonts, TenantFont } from '../api';
 import { isAuthError } from '../auth/tokens';
-import { getApiErrorMessage } from '../lib/apiError';
+import { ApiError, getApiErrorMessage } from '../lib/apiError';
 import { MobileSheet } from './components/Sheet';
+import toast from 'react-hot-toast';
 
 type BrandingForm = {
   primary: string;
   accent: string;
   headingFont: string;
   bodyFont: string;
+  logoDataUrl: string;
 };
 
 export default function MobileBrandingPage() {
@@ -31,13 +33,16 @@ export default function MobileBrandingPage() {
     accent: '#5AD2F4',
     headingFont: '',
     bodyFont: '',
+    logoDataUrl: '',
   });
   const [loading, setLoading] = React.useState(true);
   const [saving, setSaving] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [showFontsSheet, setShowFontsSheet] = React.useState(false);
+  const [fontField, setFontField] = React.useState<'heading' | 'body'>('heading');
   const [fonts, setFonts] = React.useState<TenantFont[]>([]);
   const [fontsLoading, setFontsLoading] = React.useState(false);
+  const [fontsLoaded, setFontsLoaded] = React.useState(false);
 
   React.useEffect(() => {
     if (!slug) return;
@@ -59,26 +64,41 @@ export default function MobileBrandingPage() {
   }, [slug, t]);
 
   React.useEffect(() => {
-    (async () => {
-      setFontsLoading(true);
-      try {
-        const data = await getTenantFonts();
-        setFonts(data ?? []);
-      } catch {
-        // non-fatal
-      } finally {
+    if (!showFontsSheet || fontsLoaded) return;
+    setFontsLoading(true);
+    getTenantFonts()
+      .then((data) => setFonts(data ?? []))
+      .catch(() => undefined)
+      .finally(() => {
         setFontsLoading(false);
-      }
-    })();
-  }, []);
+        setFontsLoaded(true);
+      });
+  }, [showFontsSheet, fontsLoaded]);
 
   const previewTitle = event ? renderName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event');
+  const previewHeadingFont = form.headingFont || 'Montserrat';
+  const previewBodyFont = form.bodyFont || 'Montserrat';
 
   async function handleSave() {
     if (!event?.slug) return;
+    const eventTypeId = event.event_type_id ?? event.event_type?.id ?? null;
+    if (!eventTypeId) {
+      const msg = t('events.errors.missingType', 'Event type fehlt. Speichere das Event erneut im Admin.');
+      setError(msg);
+      toast.error(msg);
+      return;
+    }
     setSaving(true);
     setError(null);
     try {
+      const payload = {
+        name: typeof event.name === 'string' ? event.name : renderName(event.name),
+        slug: event.slug,
+        event_type_id: eventTypeId,
+        event_date: event.event_date ?? undefined,
+        status: event.status ?? 'draft',
+        is_active: event.is_active ?? undefined,
+      };
       const settings = { ...(event.settings ?? {}) };
       settings.branding = {
         ...(typeof settings.branding === 'object' ? (settings.branding as Record<string, unknown>) : {}),
@@ -86,12 +106,49 @@ export default function MobileBrandingPage() {
         accent_color: form.accent,
         heading_font: form.headingFont,
         body_font: form.bodyFont,
+        typography: {
+          ...(typeof (settings.branding as Record<string, unknown> | undefined)?.typography === 'object'
+            ? ((settings.branding as Record<string, unknown>).typography as Record<string, unknown>)
+            : {}),
+          heading: form.headingFont,
+          body: form.bodyFont,
+        },
+        palette: {
+          ...(typeof (settings.branding as Record<string, unknown> | undefined)?.palette === 'object'
+            ? ((settings.branding as Record<string, unknown>).palette as Record<string, unknown>)
+            : {}),
+          primary: form.primary,
+          secondary: form.accent,
+        },
+        logo_data_url: form.logoDataUrl || null,
+        logo: form.logoDataUrl
+          ? {
+              mode: 'upload',
+              value: form.logoDataUrl,
+              position: 'center',
+              size: 'm',
+            }
+          : null,
       };
-      const updated = await updateEvent(event.slug, { settings });
+      const updated = await updateEvent(event.slug, {
+        ...payload,
+        settings,
+      });
       setEvent(updated);
+      toast.success(t('events.branding.saveSuccess', 'Branding gespeichert'));
     } catch (err) {
       if (!isAuthError(err)) {
-        setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Branding konnte nicht gespeichert werden.')));
+        let message = getApiErrorMessage(err, t('events.errors.saveFailed', 'Branding konnte nicht gespeichert werden.'));
+        if (err instanceof ApiError && err.meta?.errors && typeof err.meta.errors === 'object') {
+          const allErrors = Object.values(err.meta.errors as Record<string, unknown>)
+            .flat()
+            .filter((val): val is string => typeof val === 'string');
+          if (allErrors.length) {
+            message = allErrors.join('\n');
+          }
+        }
+        setError(message);
+        toast.error(message, { duration: 5000 });
       }
     } finally {
       setSaving(false);
@@ -107,7 +164,7 @@ export default function MobileBrandingPage() {
   return (
     <MobileShell
       activeTab="home"
-      title={t('events.branding.title', 'Branding & Customization')}
+      title={t('events.branding.titleShort', 'Branding')}
       onBack={() => navigate(-1)}
       headerActions={
         <Pressable disabled={saving} onPress={() => handleSave()}>
@@ -131,10 +188,10 @@ export default function MobileBrandingPage() {
           <YStack width="100%" borderRadius={12} backgroundColor="white" borderWidth={1} borderColor="#e5e7eb" overflow="hidden">
             <YStack backgroundColor={form.primary} height={64} />
             <YStack padding="$3" space="$1.5">
-              <Text fontSize="$md" fontWeight="800" color="#111827">
+              <Text fontSize="$md" fontWeight="800" color="#111827" style={{ fontFamily: previewHeadingFont }}>
                 {previewTitle}
               </Text>
-              <Text fontSize="$sm" color="#4b5563">
+              <Text fontSize="$sm" color="#4b5563" style={{ fontFamily: previewBodyFont }}>
                 {t('events.branding.previewSubtitle', 'Aktuelle Farben & Schriften')}
               </Text>
               <XStack space="$2" marginTop="$1">
@@ -171,21 +228,21 @@ export default function MobileBrandingPage() {
           value={form.headingFont}
           placeholder="SF Pro Display"
           onChange={(value) => setForm((prev) => ({ ...prev, headingFont: value }))}
+          onPicker={() => {
+            setFontField('heading');
+            setShowFontsSheet(true);
+          }}
         />
         <InputField
           label={t('events.branding.bodyFont', 'Body Font')}
           value={form.bodyFont}
           placeholder="SF Pro Text"
           onChange={(value) => setForm((prev) => ({ ...prev, bodyFont: value }))}
+          onPicker={() => {
+            setFontField('body');
+            setShowFontsSheet(true);
+          }}
         />
-        <Pressable onPress={() => setShowFontsSheet(true)}>
-          <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
-            <Text fontSize="$sm" color="#007AFF" fontWeight="700">
-              {t('events.branding.chooseFont', 'Choose from installed fonts')}
-            </Text>
-            <Save size={16} color="#007AFF" />
-          </XStack>
-        </Pressable>
       </MobileCard>
 
       <MobileCard space="$3">
@@ -202,10 +259,83 @@ export default function MobileBrandingPage() {
           justifyContent="center"
           space="$2"
         >
-          <ImageIcon size={28} color="#94a3b8" />
-          <Text fontSize="$sm" color="#4b5563">
-            {t('events.branding.logoHint', 'Logo Upload folgt – nutze Farben/Schriften.')}
-          </Text>
+          {form.logoDataUrl ? (
+            <>
+              <img src={form.logoDataUrl} alt="Logo" style={{ maxHeight: 80, maxWidth: '100%', objectFit: 'contain' }} />
+              <XStack space="$2">
+                <CTAButton
+                  label={t('events.branding.replaceLogo', 'Replace logo')}
+                  onPress={() => document.getElementById('branding-logo-input')?.click()}
+                />
+                <Pressable onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}>
+                  <XStack
+                    alignItems="center"
+                    space="$1.5"
+                    paddingHorizontal="$3"
+                    paddingVertical="$2"
+                    borderRadius={12}
+                    borderWidth={1}
+                    borderColor="#e5e7eb"
+                  >
+                    <Trash2 size={16} color="#b91c1c" />
+                    <Text fontSize="$sm" color="#b91c1c" fontWeight="700">
+                      {t('events.branding.removeLogo', 'Remove')}
+                    </Text>
+                  </XStack>
+                </Pressable>
+              </XStack>
+            </>
+          ) : (
+            <>
+              <ImageIcon size={28} color="#94a3b8" />
+              <Text fontSize="$sm" color="#4b5563" textAlign="center">
+                {t('events.branding.logoHint', 'Upload a logo to brand guest invites and QR posters.')}
+              </Text>
+              <Pressable onPress={() => document.getElementById('branding-logo-input')?.click()}>
+                <XStack
+                  alignItems="center"
+                  space="$2"
+                  paddingHorizontal="$3.5"
+                  paddingVertical="$2.5"
+                  borderRadius={12}
+                  borderWidth={1}
+                  borderColor="#e5e7eb"
+                  backgroundColor="white"
+                >
+                  <UploadCloud size={18} color="#007AFF" />
+                  <Text fontSize="$sm" color="#007AFF" fontWeight="700">
+                    {t('events.branding.uploadLogo', 'Upload logo (max. 1 MB)')}
+                  </Text>
+                </XStack>
+              </Pressable>
+            </>
+          )}
+          <input
+            id="branding-logo-input"
+            type="file"
+            accept="image/*"
+            style={{ display: 'none' }}
+            onChange={(event) => {
+              const file = event.target.files?.[0];
+              if (!file) return;
+              if (file.size > 1024 * 1024) {
+                setError(t('events.branding.logoTooLarge', 'Logo must be under 1 MB.'));
+                return;
+              }
+              const reader = new FileReader();
+              reader.onload = () => {
+                const nextLogo =
+                  typeof reader.result === 'string'
+                    ? reader.result
+                    : typeof reader.result === 'object' && reader.result !== null
+                      ? String(reader.result)
+                      : '';
+                setForm((prev) => ({ ...prev, logoDataUrl: nextLogo }));
+                setError(null);
+              };
+              reader.readAsDataURL(file);
+            }}
+          />
         </YStack>
       </MobileCard>
 
@@ -249,22 +379,25 @@ export default function MobileBrandingPage() {
               <Pressable
                 key={font.family}
                 onPress={() => {
-                  setForm((prev) => ({ ...prev, headingFont: font.family, bodyFont: font.family }));
+                  setForm((prev) => ({
+                    ...prev,
+                    [fontField === 'heading' ? 'headingFont' : 'bodyFont']: font.family,
+                  }));
                   setShowFontsSheet(false);
                 }}
               >
                 <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
                   <YStack>
-                    <Text fontSize="$sm" color="#111827">
+                    <Text fontSize="$sm" color="#111827" style={{ fontFamily: font.family }}>
                       {font.family}
                     </Text>
                     {font.variants?.length ? (
-                      <Text fontSize="$xs" color="#6b7280">
+                      <Text fontSize="$xs" color="#6b7280" style={{ fontFamily: font.family }}>
                         {font.variants.map((v) => v.style ?? v.weight ?? '').filter(Boolean).join(', ')}
                       </Text>
                     ) : null}
                   </YStack>
-                  {form.headingFont === font.family || form.bodyFont === font.family ? (
+                  {form[fontField === 'heading' ? 'headingFont' : 'bodyFont'] === font.family ? (
                     <Text fontSize="$xs" color="#007AFF">
                       {t('common.active', 'Active')}
                     </Text>
@@ -295,6 +428,7 @@ function extractBranding(event: TenantEvent): BrandingForm {
     accent: readColor('accent_color', '#5AD2F4'),
     headingFont: readText('heading_font'),
     bodyFont: readText('body_font'),
+    logoDataUrl: readText('logo_data_url'),
   };
 }
 
@@ -312,17 +446,17 @@ function ColorField({ label, value, onChange }: { label: string; value: string;
       <Text fontSize="$sm" fontWeight="700" color="#111827">
         {label}
       </Text>
-      <XStack alignItems="center" space="$2">
-        <input
-          type="color"
-          value={value}
-          onChange={(event) => onChange(event.target.value)}
-          style={{ width: 52, height: 52, borderRadius: 12, border: '1px solid #e5e7eb', background: 'white' }}
-        />
-        <Text fontSize="$sm" color="#4b5563">
-          {value}
-        </Text>
-      </XStack>
+        <XStack alignItems="center" space="$2">
+          <input
+            type="color"
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+            style={{ width: 52, height: 52, borderRadius: 12, border: '1px solid #e5e7eb', background: 'white' }}
+          />
+          <Text fontSize="$sm" color="#4b5563">
+            {value}
+          </Text>
+        </XStack>
     </YStack>
   );
 }
@@ -343,31 +477,51 @@ function InputField({
   value,
   placeholder,
   onChange,
+  onPicker,
 }: {
   label: string;
   value: string;
   placeholder?: string;
   onChange: (next: string) => void;
+  onPicker?: () => void;
 }) {
   return (
     <YStack space="$2">
       <Text fontSize="$sm" fontWeight="700" color="#111827">
         {label}
       </Text>
-      <input
-        type="text"
-        value={value}
-        placeholder={placeholder}
-        onChange={(event) => onChange(event.target.value)}
-        style={{
-          width: '100%',
-          height: 48,
-          borderRadius: 12,
-          border: '1px solid #e5e7eb',
-          padding: '0 12px',
-          fontSize: 14,
-        }}
-      />
+      <XStack
+        alignItems="center"
+        borderRadius={12}
+        borderWidth={1}
+        borderColor="#e5e7eb"
+        paddingLeft="$3"
+        paddingRight="$2"
+        height={48}
+        backgroundColor="white"
+        space="$2"
+      >
+        <input
+          type="text"
+          value={value}
+          placeholder={placeholder}
+          onChange={(event) => onChange(event.target.value)}
+          style={{
+            flex: 1,
+            height: '100%',
+            border: 'none',
+            outline: 'none',
+            fontSize: 14,
+            background: 'transparent',
+          }}
+          onFocus={onPicker}
+        />
+        {onPicker ? (
+          <Pressable onPress={onPicker}>
+            <ChevronDown size={16} color="#007AFF" />
+          </Pressable>
+        ) : null}
+      </XStack>
     </YStack>
   );
 }