feat: improve preview screen workflow, persist edits, remove retake button

App.tsx

@@ -5,6 +5,7 @@ import CameraScreen from './src/screens/CameraScreen';
 import PreviewScreen from './src/screens/PreviewScreen';
 import AdminScreen from './src/screens/AdminScreen';
 import { loadSettings, saveSettings, AppSettings } from './src/services/settings';
+import { StickerData } from './src/components/DraggableSticker';
 import { logger, setLogsEnabled } from './src/services/logger';
 import * as FileSystem from 'expo-file-system/legacy';
 
@@ -29,6 +30,10 @@ export default function App() {
   const [settings, setSettings] = useState<AppSettings | null>(null);
   const [showEventModal, setShowEventModal] = useState(false);
   const [tempEventName, setTempEventName] = useState('');
+  
+  // Persist edits across camera switches for collages
+  const [stickers, setStickers] = useState<StickerData[]>([]);
+  const [selectedFrameId, setSelectedFrameId] = useState<string | null>(null);
 
   // 1. Load configuration settings on app start
   useEffect(() => {
@@ -45,6 +50,10 @@ export default function App() {
           console.warn('Failed to auto-start Kiosk mode:', e);
         }
       }
+      
+      if (savedSettings.frameMode === 'always') {
+        setSelectedFrameId(savedSettings.selectedFrameId);
+      }
     }
     initApp();
   }, []);
@@ -67,6 +76,8 @@ export default function App() {
     }
     setPhotoUris([]);
     setCaptureHistory([]);
+    setStickers([]);
+    setSelectedFrameId(settings?.frameMode === 'always' ? settings.selectedFrameId : null);
     setCurrentScreen('camera');
   };
 
@@ -81,6 +92,8 @@ export default function App() {
     // Resume start
     setPhotoUris([]);
     setCaptureHistory([]);
+    setStickers([]);
+    setSelectedFrameId(updated.frameMode === 'always' ? updated.selectedFrameId : null);
     setCurrentScreen('camera');
   };
 
@@ -110,26 +123,7 @@ export default function App() {
     setCurrentScreen('preview');
   };
 
-  const handleRetakeLast = async () => {
-    // Remove photos from the last capture event
-    const lastCaptureCount = captureHistory.length > 0 ? captureHistory[captureHistory.length - 1] : 1;
-    const updatedUris = [...photoUris];
-    const removedUris = updatedUris.splice(-lastCaptureCount, lastCaptureCount);
-    setPhotoUris(updatedUris);
-    setCaptureHistory((prev) => prev.slice(0, -1));
 
-    // Clean up temp files
-    for (const uri of removedUris) {
-      try {
-        await FileSystem.deleteAsync(uri, { idempotent: true });
-      } catch (e) {
-        console.warn('Failed to delete temp file:', e);
-      }
-    }
-
-    // Always let user retake
-    setCurrentScreen('camera');
-  };
 
   const handleAddAnother = () => {
     setCurrentScreen('camera');
@@ -146,6 +140,8 @@ export default function App() {
     }
     setPhotoUris([]);
     setCaptureHistory([]);
+    setStickers([]);
+    setSelectedFrameId(settings?.frameMode === 'always' ? settings.selectedFrameId : null);
     setCurrentScreen('home'); // Go to home when cancelled
   };
 
@@ -199,7 +195,6 @@ export default function App() {
             <PreviewScreen
               photoUris={photoUris}
               printerIp={settings.printerIp}
-              onRetakeLast={handleRetakeLast}
               onAddAnother={handleAddAnother}
               onReset={handleReset}
               frameMode={settings.frameMode}
@@ -208,6 +203,10 @@ export default function App() {
               dateOverlay={settings.dateOverlay}
               dateOverlayTransform={settings.dateOverlayTransform}
               eventText={settings.eventText}
+              stickers={stickers}
+              setStickers={setStickers}
+              selectedFrameId={selectedFrameId}
+              setSelectedFrameId={setSelectedFrameId}
             />
           </View>
         )}

src/screens/PreviewScreen.tsx

@@ -27,7 +27,6 @@ import { FRAMES } from '../data/frames';
 interface PreviewScreenProps {
   photoUris: string[];
   printerIp: string;
-  onRetakeLast: () => void;
   onAddAnother: () => void;
   onReset: () => void;
   // Frame settings
@@ -39,6 +38,11 @@ interface PreviewScreenProps {
   dateOverlayTransform: { x: number; y: number; rotation: number; scale: number };
   // Event text
   eventText: string;
+  // Hoisted state
+  stickers: StickerData[];
+  setStickers: React.Dispatch<React.SetStateAction<StickerData[]>>;
+  selectedFrameId: string | null;
+  setSelectedFrameId: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
 type CollageLayout = 'single' | 'strip' | 'grid' | 'duo';
@@ -46,7 +50,6 @@ type CollageLayout = 'single' | 'strip' | 'grid' | 'duo';
 export default function PreviewScreen({
   photoUris,
   printerIp,
-  onRetakeLast,
   onAddAnother,
   onReset,
   frameMode,
@@ -55,6 +58,10 @@ export default function PreviewScreen({
   dateOverlay,
   dateOverlayTransform,
   eventText,
+  stickers,
+  setStickers,
+  selectedFrameId,
+  setSelectedFrameId,
 }: PreviewScreenProps) {
   const [layout, setLayout] = useState<CollageLayout>('single');
   const [isProcessing, setIsProcessing] = useState<boolean>(false);
@@ -107,8 +114,6 @@ export default function PreviewScreen({
   
 
 
-  // Sticker state
-  const [stickers, setStickers] = useState<StickerData[]>([]);
   const [selectedStickerId, setSelectedStickerId] = useState<string | null>(null);
 
   const mountedRef = useRef(true);
@@ -147,10 +152,6 @@ export default function PreviewScreen({
     };
   }, [onReset]);
 
-  // Frame state
-  const [selectedFrameId, setSelectedFrameId] = useState<string | null>(
-    frameMode === 'always' ? initialFrameId : null
-  );
 
   const viewShotRef = useRef<any>(null);
 
@@ -372,26 +373,26 @@ export default function PreviewScreen({
     };
   }, [resetIdleTimer]);
 
-  const handleRetakeClick = async () => {
-    logger.log('Action: Clicked Retake button');
+  const handleAddAnotherClick = async () => {
+    logger.log('Action: Clicked Add Another button');
     if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
     if (!mountedRef.current) return;
     if (isProcessing) return;
-    if (stickers.length > 0 || layout !== 'single' || activeFrame || dateOverlay !== 'off') {
-      setIsProcessing(true);
-      try {
-        const capturedUri = await captureComposite(currentPhoto);
-        if (!mountedRef.current) return;
-        setStatusMessage('Wird vor dem Wiederholen gespeichert...');
-        await saveToGallery(capturedUri, 'Collage', eventText);
-        if (!mountedRef.current) return;
-      } catch (e) {
-        if (!mountedRef.current) return;
-        console.error('Failed to auto-save before retake:', e);
-      }
-      setIsProcessing(false);
+    
+    // Auto-save the intermediate collage before adding another photo
+    setIsProcessing(true);
+    try {
+      const capturedUri = await captureComposite(currentPhoto);
+      if (!mountedRef.current) return;
+      setStatusMessage('Wird zwischengespeichert...');
+      await saveToGallery(capturedUri, 'Collage', eventText);
+    } catch (e) {
+      if (!mountedRef.current) return;
+      console.error('Failed to auto-save before adding another:', e);
     }
-    onRetakeLast();
+    setIsProcessing(false);
+    
+    onAddAnother();
   };
 
   // ── Render the collage ──
@@ -652,19 +653,14 @@ export default function PreviewScreen({
 
 
           {photoUris.length < 4 && (
-            <TouchableOpacity style={[styles.actionBtn, styles.addBtn, isProcessing && styles.btnDisabled, isSmallDevice && { paddingVertical: THEME.spacing.sm, marginBottom: THEME.spacing.sm }]} onPress={onAddAnother} disabled={isProcessing}>
+            <TouchableOpacity style={[styles.actionBtn, styles.addBtn, isProcessing && styles.btnDisabled, isSmallDevice && { paddingVertical: THEME.spacing.sm, marginBottom: THEME.spacing.sm }]} onPress={handleAddAnotherClick} disabled={isProcessing}>
               <FontAwesomeIcon icon={faPlus} size={16} color={THEME.colors.text} style={{ marginRight: 8 }} />
-              <Text style={styles.actionBtnText}>Weiteres Foto aufnehmen</Text>
+              <Text style={styles.actionBtnText}>Foto zur Collage hinzufügen</Text>
             </TouchableOpacity>
           )}
 
           <View style={styles.rowActions}>
-            <TouchableOpacity style={[styles.smallBtn, styles.retakeBtn, isProcessing && styles.btnDisabled]} onPress={handleRetakeClick} disabled={isProcessing}>
-              <FontAwesomeIcon icon={faRotateLeft} size={14} color={THEME.colors.error} style={{ marginRight: 6 }} />
-              <Text style={[styles.smallBtnText, { color: THEME.colors.error }]}>Wiederholen</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity style={[styles.smallBtn, styles.resetBtn, isProcessing && styles.btnDisabled]} onPress={handleExit} disabled={isProcessing}>
+            <TouchableOpacity style={[styles.smallBtn, styles.resetBtn, isProcessing && styles.btnDisabled, { width: '100%' }]} onPress={handleExit} disabled={isProcessing}>
               <FontAwesomeIcon icon={faRightFromBracket} size={14} color={THEME.colors.textMuted} style={{ marginRight: 6 }} />
               <Text style={styles.smallBtnText}>Beenden</Text>
             </TouchableOpacity>