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

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>