Add Image Generation Settings Endpoint and Update Frontend Modal: Implement a new API endpoint to fetch image generation settings, enhance the ImageQueueModal to display progress and status, and integrate the settings into the image generation workflow.

frontend/src/components/common/ImageQueueModal.tsx

@@ -1,131 +1,81 @@
 /**
- * Image Queue Modal - Shows per-image progress for image generation
- * Similar to WordPress plugin's image queue processor
+ * ImageQueueModal - Displays image generation queue with individual progress bars
+ * Similar to WP plugin's image-queue-processor.js modal
+ * Stage 1: Shows all progress bars immediately when Generate button is clicked
  */
-import React, { useState, useEffect, useRef } from 'react';
-import { Modal } from '../ui/modal';
+
+import React, { useEffect, useState } from 'react';
+import { CloseIcon as XIcon } from '../../icons';
 
 export interface ImageQueueItem {
-  image_id: number;
+  imageId: number | null;
   index: number;
   label: string;
-  content_title: string;
+  type: 'featured' | 'in_article';
+  position?: number;
+  contentTitle: string;
   status: 'pending' | 'processing' | 'completed' | 'failed';
   progress: number;
-  image_url: string | null;
+  imageUrl: string | null;
   error: string | null;
 }
 
 interface ImageQueueModalProps {
   isOpen: boolean;
-  queue: ImageQueueItem[];
   onClose: () => void;
+  queue: ImageQueueItem[];
+  totalImages: number;
+  onUpdateQueue?: (queue: ImageQueueItem[]) => void;
 }
 
 export default function ImageQueueModal({
   isOpen,
-  queue,
   onClose,
+  queue,
+  totalImages,
+  onUpdateQueue,
 }: ImageQueueModalProps) {
   const [localQueue, setLocalQueue] = useState<ImageQueueItem[]>(queue);
-  const progressIntervalsRef = useRef<Map<number, NodeJS.Timeout>>(new Map());
 
-  // Update local queue when prop changes
   useEffect(() => {
     setLocalQueue(queue);
   }, [queue]);
 
-  // Simulate smooth progress for processing images (like WP plugin)
   useEffect(() => {
-    if (!isOpen) return;
+    if (onUpdateQueue) {
+      onUpdateQueue(localQueue);
+    }
+  }, [localQueue, onUpdateQueue]);
 
-    localQueue.forEach((item) => {
-      if (item.status === 'processing' && item.progress < 95) {
-        // Clear existing interval for this item
-        const existing = progressIntervalsRef.current.get(item.image_id);
-        if (existing) {
-          clearInterval(existing);
-        }
+  if (!isOpen) return null;
 
-        // Progressive loading: 50% in 7s, 75% in next 5s, then 5% every second until 95%
-        let currentProgress = item.progress;
-        let phase = 1;
-        let phaseStartTime = Date.now();
-
-        const interval = setInterval(() => {
-          const elapsed = Date.now() - phaseStartTime;
-
-          if (phase === 1 && currentProgress < 50) {
-            // Phase 1: 0% to 50% in 7 seconds (7.14% per second)
-            currentProgress += 0.714;
-            if (currentProgress >= 50 || elapsed >= 7000) {
-              currentProgress = 50;
-              phase = 2;
-              phaseStartTime = Date.now();
-            }
-          } else if (phase === 2 && currentProgress < 75) {
-            // Phase 2: 50% to 75% in 5 seconds (5% per second)
-            currentProgress += 0.5;
-            if (currentProgress >= 75 || elapsed >= 5000) {
-              currentProgress = 75;
-              phase = 3;
-              phaseStartTime = Date.now();
-            }
-          } else if (phase === 3 && currentProgress < 95) {
-            // Phase 3: 75% to 95% - 5% every second
-            if (elapsed >= 1000) {
-              currentProgress = Math.min(95, currentProgress + 5);
-              phaseStartTime = Date.now();
-            }
-          }
-
-          // Update local state
-          setLocalQueue((prev) =>
-            prev.map((q) =>
-              q.image_id === item.image_id
-                ? { ...q, progress: Math.min(95, currentProgress) }
-                : q
-            )
-          );
-        }, 100);
-
-        progressIntervalsRef.current.set(item.image_id, interval);
-      } else {
-        // Clear interval if not processing
-        const existing = progressIntervalsRef.current.get(item.image_id);
-        if (existing) {
-          clearInterval(existing);
-          progressIntervalsRef.current.delete(item.image_id);
-        }
-      }
-    });
-
-    return () => {
-      // Cleanup intervals on unmount
-      progressIntervalsRef.current.forEach((interval) => clearInterval(interval));
-      progressIntervalsRef.current.clear();
-    };
-  }, [isOpen, localQueue]);
-
-  // Check if all images are completed
-  const allCompleted = localQueue.every(
-    (item) => item.status === 'completed' || item.status === 'failed'
-  );
-  const completedCount = localQueue.filter(
-    (item) => item.status === 'completed'
-  ).length;
-  const failedCount = localQueue.filter((item) => item.status === 'failed').length;
-
-  const getStatusColor = (status: string) => {
+  const getStatusIcon = (status: string) => {
     switch (status) {
-      case 'completed':
-        return 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800';
-      case 'failed':
-        return 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800';
+      case 'pending':
+        return '⏳';
       case 'processing':
-        return 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800';
+        return '🔄';
+      case 'completed':
+        return '✅';
+      case 'failed':
+        return '❌';
       default:
-        return 'bg-gray-50 border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+        return '⏳';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return 'Pending';
+      case 'processing':
+        return 'Generating...';
+      case 'completed':
+        return 'Complete';
+      case 'failed':
+        return 'Failed';
+      default:
+        return 'Pending';
     }
   };
 
@@ -142,140 +92,127 @@ export default function ImageQueueModal({
     }
   };
 
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case 'completed':
-        return '✅';
-      case 'failed':
-        return '❌';
-      case 'processing':
-        return '⏳';
-      default:
-        return '⏸️';
-    }
-  };
-
-  const getStatusText = (status: string) => {
-    switch (status) {
-      case 'completed':
-        return 'Complete';
-      case 'failed':
-        return 'Failed';
-      case 'processing':
-        return 'Generating...';
-      default:
-        return 'Pending';
-    }
-  };
+  const isProcessing = localQueue.some(item => item.status === 'processing');
+  const completedCount = localQueue.filter(item => item.status === 'completed').length;
+  const failedCount = localQueue.filter(item => item.status === 'failed').length;
+  const allDone = localQueue.every(item => item.status === 'completed' || item.status === 'failed');
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      className="max-w-4xl"
-      showCloseButton={!allCompleted}
-    >
-      <div className="p-6">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-hidden flex flex-col">
         {/* Header */}
-        <div className="mb-6">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1 text-center">
-            🎨 Generating Images
-          </h3>
-          <p className="text-sm text-gray-500 dark:text-gray-400 text-center">
-            Total: {localQueue.length} image{localQueue.length !== 1 ? 's' : ''} in queue
-            {allCompleted && (
-              <span className="ml-2">
-                ({completedCount} completed{failedCount > 0 ? `, ${failedCount} failed` : ''})
-              </span>
-            )}
-          </p>
-        </div>
-
-        {/* Image Queue */}
-        <div className="space-y-3 max-h-[60vh] overflow-y-auto">
-          {localQueue.map((item) => (
-            <div
-              key={item.image_id}
-              className={`p-4 rounded-lg border-2 transition-colors ${getStatusColor(
-                item.status
-              )}`}
-            >
-              <div className="flex items-center gap-4">
-                {/* Left side: Info and progress */}
-                <div className="flex-1">
-                  <div className="flex items-center gap-3 mb-2">
-                    <div className="w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold flex items-center justify-center flex-shrink-0">
-                      {item.index}
-                    </div>
-                    <span className="font-semibold text-sm text-gray-900 dark:text-white">
-                      {item.label}
-                    </span>
-                    <span className="text-xs text-gray-500 dark:text-gray-400 flex-1 truncate">
-                      {item.content_title}
-                    </span>
-                    <span className="text-xs font-semibold text-gray-700 dark:text-gray-300">
-                      {getStatusIcon(item.status)} {getStatusText(item.status)}
-                    </span>
-                  </div>
-
-                  {/* Progress bar */}
-                  <div className="relative h-5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-                    <div
-                      className={`h-full ${getProgressColor(
-                        item.status
-                      )} transition-all duration-300 ease-out`}
-                      style={{ width: `${item.progress}%` }}
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <span className="text-xs font-bold text-gray-900 dark:text-white">
-                        {item.status === 'processing'
-                          ? `${Math.round(item.progress)}%`
-                          : item.status === 'completed'
-                          ? '100%'
-                          : item.status === 'failed'
-                          ? 'Failed'
-                          : '0%'}
-                      </span>
-                    </div>
-                  </div>
-
-                  {/* Error message */}
-                  {item.status === 'failed' && item.error && (
-                    <div className="mt-2 p-2 bg-red-100 dark:bg-red-900/30 border-l-3 border-red-500 rounded text-xs text-red-700 dark:text-red-300">
-                      {item.error}
-                    </div>
-                  )}
-                </div>
-
-                {/* Right side: Thumbnail */}
-                <div className="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center overflow-hidden flex-shrink-0">
-                  {item.image_url ? (
-                    <img
-                      src={item.image_url}
-                      alt={item.label}
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <span className="text-xs text-gray-400">No image</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Success message when all done */}
-        {allCompleted && (
-          <div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
-            <p className="text-sm text-green-800 dark:text-green-200 text-center font-medium">
-              Image generation complete! {completedCount} image
-              {completedCount !== 1 ? 's' : ''} generated successfully
-              {failedCount > 0 && `, ${failedCount} failed`}.
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              🎨 Generating Images
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Total: {totalImages} image{totalImages !== 1 ? 's' : ''} in queue
             </p>
           </div>
-        )}
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+            disabled={isProcessing}
+            title={isProcessing ? 'Please wait for generation to complete' : 'Close'}
+          >
+            <XIcon className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Queue List */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          <div className="space-y-3">
+            {localQueue.map((item) => (
+              <div
+                key={item.index}
+                className={`p-4 rounded-lg border-2 transition-colors ${
+                  item.status === 'processing'
+                    ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
+                    : item.status === 'completed'
+                    ? 'bg-green-50 dark:bg-green-900/20 border-green-500'
+                    : item.status === 'failed'
+                    ? 'bg-red-50 dark:bg-red-900/20 border-red-500'
+                    : 'bg-gray-50 dark:bg-gray-700/50 border-gray-300 dark:border-gray-600'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  {/* Left: Queue Info */}
+                  <div className="flex-1">
+                    {/* Header Row */}
+                    <div className="flex items-center gap-3 mb-2">
+                      <span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold">
+                        {item.index}
+                      </span>
+                      <span className="font-semibold text-sm text-gray-900 dark:text-white">
+                        {item.label}
+                      </span>
+                      <span className="flex-1 text-xs text-gray-500 dark:text-gray-400 truncate">
+                        {item.contentTitle}
+                      </span>
+                      <span className="text-xs font-semibold text-gray-600 dark:text-gray-300 whitespace-nowrap">
+                        {getStatusIcon(item.status)} {getStatusText(item.status)}
+                      </span>
+                    </div>
+
+                    {/* Progress Bar */}
+                    <div className="relative h-5 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
+                      <div
+                        className={`h-full ${getProgressColor(item.status)} transition-all duration-300 ease-out`}
+                        style={{ width: `${item.progress}%` }}
+                      />
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <span className="text-xs font-bold text-gray-700 dark:text-gray-200">
+                          {item.progress}%
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Error Message */}
+                    {item.error && (
+                      <div className="mt-2 p-2 bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 rounded text-xs text-red-700 dark:text-red-300">
+                        {item.error}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Right: Thumbnail */}
+                  <div className="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
+                    {item.imageUrl ? (
+                      <img
+                        src={item.imageUrl}
+                        alt={item.label}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <span className="text-xs text-gray-400 dark:text-gray-500">
+                        No image
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              {completedCount} completed{failedCount > 0 ? `, ${failedCount} failed` : ''} of {totalImages} total
+            </div>
+            {allDone && (
+              <button
+                onClick={onClose}
+                className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+              >
+                Close
+              </button>
+            )}
+          </div>
+        </div>
       </div>
-    </Modal>
+    </div>
   );
 }
-