@gallop.software/studio 0.1.85 → 0.1.87

package/dist/{StudioUI-P4TLZNF7.js → StudioUI-ZBSTYTUV.js}

@@ -1266,6 +1266,8 @@ function StudioToolbar() {
   const [processing, setProcessing] = _react.useState.call(void 0, false);
   const [showDeleteConfirm, setShowDeleteConfirm] = _react.useState.call(void 0, false);
   const [showProcessConfirm, setShowProcessConfirm] = _react.useState.call(void 0, false);
+  const [showSyncConfirm, setShowSyncConfirm] = _react.useState.call(void 0, false);
+  const [syncImageCount, setSyncImageCount] = _react.useState.call(void 0, 0);
   const [showProgress, setShowProgress] = _react.useState.call(void 0, false);
   const [progressState, setProgressState] = _react.useState.call(void 0, {
     current: 0,
@@ -1294,39 +1296,92 @@ function StudioToolbar() {
   const handleFileChange = _react.useCallback.call(void 0, async (e) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
-    setUploading(true);
+    const fileList = Array.from(files);
+    if (fileList.length > 1) {
+      setProgressState({
+        current: 0,
+        total: fileList.length,
+        percent: 0,
+        status: "processing",
+        message: "Uploading files..."
+      });
+      setShowProgress(true);
+    } else {
+      setUploading(true);
+    }
+    let uploaded = 0;
+    let errors = 0;
     try {
-      for (const file of Array.from(files)) {
+      for (let i = 0; i < fileList.length; i++) {
+        const file = fileList[i];
+        if (fileList.length > 1) {
+          setProgressState({
+            current: i + 1,
+            total: fileList.length,
+            percent: Math.round((i + 1) / fileList.length * 100),
+            status: "processing",
+            currentFile: file.name
+          });
+        }
         const formData = new FormData();
         formData.append("file", file);
         formData.append("path", currentPath);
-        const response = await fetch("/api/studio/upload", {
-          method: "POST",
-          body: formData
-        });
-        if (!response.ok) {
-          const error = await response.json();
-          if (response.status >= 500) {
-            console.error("Upload error:", error);
-            setAlertMessage({
-              title: "Upload Failed",
-              message: `Failed to upload ${file.name}: ${error.error || "Unknown error"}`
-            });
+        try {
+          const response = await fetch("/api/studio/upload", {
+            method: "POST",
+            body: formData
+          });
+          if (!response.ok) {
+            const error = await response.json();
+            errors++;
+            if (fileList.length === 1) {
+              if (response.status >= 500) {
+                console.error("Upload error:", error);
+                setAlertMessage({
+                  title: "Upload Failed",
+                  message: `Failed to upload ${file.name}: ${error.error || "Unknown error"}`
+                });
+              } else {
+                setAlertMessage({
+                  title: "Cannot Upload Here",
+                  message: error.error || "Upload not allowed in this location."
+                });
+              }
+            }
           } else {
-            setAlertMessage({
-              title: "Cannot Upload Here",
-              message: error.error || "Upload not allowed in this location."
-            });
+            uploaded++;
           }
+        } catch (e2) {
+          errors++;
         }
       }
+      if (fileList.length > 1) {
+        setProgressState({
+          current: fileList.length,
+          total: fileList.length,
+          percent: 100,
+          status: "complete",
+          processed: uploaded,
+          errors
+        });
+      }
       triggerRefresh();
     } catch (error) {
       console.error("Upload error:", error);
-      setAlertMessage({
-        title: "Upload Failed",
-        message: "Upload failed. Check console for details."
-      });
+      if (fileList.length > 1) {
+        setProgressState({
+          current: 0,
+          total: 0,
+          percent: 0,
+          status: "error",
+          message: "Upload failed."
+        });
+      } else {
+        setAlertMessage({
+          title: "Upload Failed",
+          message: "Upload failed. Check console for details."
+        });
+      }
     } finally {
       setUploading(false);
       if (fileInputRef.current) {
@@ -1467,7 +1522,7 @@ function StudioToolbar() {
                     message: data.message
                   }));
                 }
-              } catch (e2) {
+              } catch (e3) {
               }
             }
           }
@@ -1578,58 +1633,129 @@ function StudioToolbar() {
       });
     }
   }, [selectedItems, clearSelection, triggerRefresh]);
-  const handleSyncCdn = _react.useCallback.call(void 0, async () => {
+  const handleSyncClick = _react.useCallback.call(void 0, async () => {
     if (selectedItems.size === 0) return;
-    const imageKeys = Array.from(selectedItems).filter((p) => !p.endsWith("/")).map((p) => "/" + p.replace(/^public\//, ""));
-    if (imageKeys.length === 0) {
+    const selectedPaths2 = Array.from(selectedItems);
+    const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
+    const selectedImagePaths = selectedPaths2.filter((p) => {
+      const ext = _optionalChain([p, 'access', _19 => _19.split, 'call', _20 => _20("."), 'access', _21 => _21.pop, 'call', _22 => _22(), 'optionalAccess', _23 => _23.toLowerCase, 'call', _24 => _24()]) || "";
+      return imageExtensions.includes(ext);
+    });
+    const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
+    if (selectedFolders.length > 0) {
+      try {
+        const response = await fetch(`/api/studio/folder-images?folders=${encodeURIComponent(selectedFolders.join(","))}`);
+        const data = await response.json();
+        if (data.images) {
+          for (const img of data.images) {
+            const fullPath = `public/${img}`;
+            if (!selectedImagePaths.includes(fullPath)) {
+              selectedImagePaths.push(fullPath);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Failed to get folder images:", error);
+      }
+    }
+    if (selectedImagePaths.length === 0) {
       setAlertMessage({
-        title: "No Images Selected",
-        message: "Please select image files to sync to CDN."
+        title: "No Images Found",
+        message: "No images found in the selected items."
       });
       return;
     }
-    setSyncing(true);
-    try {
-      const response = await fetch("/api/studio/sync", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ imageKeys })
-      });
-      const data = await response.json();
-      if (response.ok) {
-        const syncedCount = _optionalChain([data, 'access', _19 => _19.synced, 'optionalAccess', _20 => _20.length]) || 0;
-        const errorCount = _optionalChain([data, 'access', _21 => _21.errors, 'optionalAccess', _22 => _22.length]) || 0;
-        if (errorCount > 0) {
-          setAlertMessage({
-            title: "Sync Partially Complete",
-            message: `Synced ${syncedCount} images. ${errorCount} failed.`
-          });
-        } else {
-          setAlertMessage({
-            title: "Sync Complete",
-            message: `Successfully synced ${syncedCount} images to CDN.`
-          });
+    setSyncImageCount(selectedImagePaths.length);
+    setShowSyncConfirm(true);
+  }, [selectedItems]);
+  const handleSyncConfirm = _react.useCallback.call(void 0, async () => {
+    setShowSyncConfirm(false);
+    const selectedPaths2 = Array.from(selectedItems);
+    const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
+    const selectedImagePaths = selectedPaths2.filter((p) => {
+      const ext = _optionalChain([p, 'access', _25 => _25.split, 'call', _26 => _26("."), 'access', _27 => _27.pop, 'call', _28 => _28(), 'optionalAccess', _29 => _29.toLowerCase, 'call', _30 => _30()]) || "";
+      return imageExtensions.includes(ext);
+    });
+    const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
+    if (selectedFolders.length > 0) {
+      try {
+        const response = await fetch(`/api/studio/folder-images?folders=${encodeURIComponent(selectedFolders.join(","))}`);
+        const data = await response.json();
+        if (data.images) {
+          for (const img of data.images) {
+            const fullPath = `public/${img}`;
+            if (!selectedImagePaths.includes(fullPath)) {
+              selectedImagePaths.push(fullPath);
+            }
+          }
         }
-        clearSelection();
-        triggerRefresh();
-      } else {
-        if (_optionalChain([data, 'access', _23 => _23.error, 'optionalAccess', _24 => _24.includes, 'call', _25 => _25("R2 not configured")]) || _optionalChain([data, 'access', _26 => _26.error, 'optionalAccess', _27 => _27.includes, 'call', _28 => _28("CLOUDFLARE_R2")])) {
-          setShowR2SetupModal(true);
-        } else {
-          setAlertMessage({
-            title: "Sync Failed",
-            message: data.error || "Failed to sync to CDN."
+      } catch (error) {
+        console.error("Failed to get folder images:", error);
+      }
+    }
+    const imageKeys = selectedImagePaths.map((p) => "/" + p.replace(/^public\//, ""));
+    setProgressState({
+      current: 0,
+      total: imageKeys.length,
+      percent: 0,
+      status: "processing",
+      message: "Syncing to CDN..."
+    });
+    setShowProgress(true);
+    let synced = 0;
+    let errors = 0;
+    try {
+      for (let i = 0; i < imageKeys.length; i++) {
+        const imageKey = imageKeys[i];
+        setProgressState({
+          current: i + 1,
+          total: imageKeys.length,
+          percent: Math.round((i + 1) / imageKeys.length * 100),
+          status: "processing",
+          currentFile: imageKey.replace(/^\//, "")
+        });
+        try {
+          const response = await fetch("/api/studio/sync", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ imageKeys: [imageKey] })
           });
+          const data = await response.json();
+          if (!response.ok) {
+            if (_optionalChain([data, 'access', _31 => _31.error, 'optionalAccess', _32 => _32.includes, 'call', _33 => _33("R2 not configured")]) || _optionalChain([data, 'access', _34 => _34.error, 'optionalAccess', _35 => _35.includes, 'call', _36 => _36("CLOUDFLARE_R2")])) {
+              setShowProgress(false);
+              setShowR2SetupModal(true);
+              return;
+            }
+            errors++;
+          } else if (_optionalChain([data, 'access', _37 => _37.synced, 'optionalAccess', _38 => _38.length]) > 0) {
+            synced++;
+          } else if (_optionalChain([data, 'access', _39 => _39.errors, 'optionalAccess', _40 => _40.length]) > 0) {
+            errors++;
+          }
+        } catch (e4) {
+          errors++;
         }
       }
+      setProgressState({
+        current: imageKeys.length,
+        total: imageKeys.length,
+        percent: 100,
+        status: "complete",
+        processed: synced,
+        errors
+      });
+      clearSelection();
+      triggerRefresh();
     } catch (error) {
       console.error("Sync error:", error);
-      setAlertMessage({
-        title: "Sync Failed",
-        message: "Failed to sync to CDN. Check console for details."
+      setProgressState({
+        current: 0,
+        total: 0,
+        percent: 0,
+        status: "error",
+        message: "Failed to sync to CDN."
       });
-    } finally {
-      setSyncing(false);
     }
   }, [selectedItems, clearSelection, triggerRefresh]);
   const handleCreateFolder = _react.useCallback.call(void 0, async (folderName) => {
@@ -1740,6 +1866,16 @@ function StudioToolbar() {
         onCancel: () => setShowDeleteConfirm(false)
       }
     ),
+    showSyncConfirm && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ConfirmModal,
+      {
+        title: "Sync to CDN",
+        message: `Sync ${syncImageCount} image${syncImageCount !== 1 ? "s" : ""} to Cloudflare R2? Images must be processed first. After syncing, local thumbnails will be deleted.`,
+        confirmLabel: "Sync",
+        onConfirm: handleSyncConfirm,
+        onCancel: () => setShowSyncConfirm(false)
+      }
+    ),
     showProcessConfirm && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ConfirmModal,
       {
@@ -1897,11 +2033,11 @@ function StudioToolbar() {
           "button",
           {
             css: styles4.btn,
-            onClick: handleSyncCdn,
-            disabled: !hasSelection || syncing,
+            onClick: handleSyncClick,
+            disabled: !hasSelection,
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloudIcon, {}),
-              syncing ? "Syncing..." : "Sync CDN"
+              "Sync CDN"
             ]
           }
         ),
@@ -3539,7 +3675,7 @@ function StudioDetailView() {
         });
         triggerRefresh();
       } else {
-        if (_optionalChain([data, 'access', _29 => _29.error, 'optionalAccess', _30 => _30.includes, 'call', _31 => _31("R2 not configured")]) || _optionalChain([data, 'access', _32 => _32.error, 'optionalAccess', _33 => _33.includes, 'call', _34 => _34("CLOUDFLARE_R2")])) {
+        if (_optionalChain([data, 'access', _41 => _41.error, 'optionalAccess', _42 => _42.includes, 'call', _43 => _43("R2 not configured")]) || _optionalChain([data, 'access', _44 => _44.error, 'optionalAccess', _45 => _45.includes, 'call', _46 => _46("CLOUDFLARE_R2")])) {
           setShowR2SetupModal(true);
         } else {
           setAlertMessage({
@@ -3578,7 +3714,7 @@ function StudioDetailView() {
       if (!response.ok) {
         throw new Error("Processing failed");
       }
-      const reader = _optionalChain([response, 'access', _35 => _35.body, 'optionalAccess', _36 => _36.getReader, 'call', _37 => _37()]);
+      const reader = _optionalChain([response, 'access', _47 => _47.body, 'optionalAccess', _48 => _48.getReader, 'call', _49 => _49()]);
       if (!reader) {
         throw new Error("No response body");
       }
@@ -3595,7 +3731,7 @@ function StudioDetailView() {
             try {
               const data = JSON.parse(line.slice(6));
               setProcessProgress(data);
-            } catch (e3) {
+            } catch (e5) {
             }
           }
         }
@@ -4525,4 +4661,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-P4TLZNF7.js.map
+//# sourceMappingURL=StudioUI-ZBSTYTUV.js.map