@gallop.software/studio 0.1.24 → 0.1.26

package/dist/{StudioUI-F2C4N66F.mjs → StudioUI-VH2C7QCI.mjs}

@@ -62,7 +62,7 @@ import { css as css2, keyframes as keyframes2 } from "@emotion/react";
 
 // src/components/StudioModal.tsx
 import { css, keyframes } from "@emotion/react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 var fadeIn = keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
@@ -204,9 +204,113 @@ function AlertModal({
     /* @__PURE__ */ jsx("div", { css: styles.footer, children: /* @__PURE__ */ jsx("button", { css: [styles.btn, styles.btnConfirm], onClick: onClose, children: buttonLabel }) })
   ] }) });
 }
+var progressStyles = {
+  progressContainer: css`
+    margin-top: 16px;
+  `,
+  progressBar: css`
+    width: 100%;
+    height: 8px;
+    background-color: ${colors.background};
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 12px;
+  `,
+  progressFill: css`
+    height: 100%;
+    background: linear-gradient(90deg, ${colors.primary}, ${colors.primaryHover});
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  `,
+  progressText: css`
+    font-size: ${fontSize.sm};
+    color: ${colors.textSecondary};
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  `,
+  currentFile: css`
+    font-size: ${fontSize.xs};
+    color: ${colors.textMuted};
+    margin: 8px 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `
+};
+function ProgressModal({
+  title,
+  progress,
+  onClose,
+  onStop
+}) {
+  const isComplete = progress.status === "complete";
+  const isError = progress.status === "error";
+  const isStopped = progress.status === "stopped";
+  const canClose = isComplete || isError || isStopped;
+  const isRunning = !canClose;
+  return /* @__PURE__ */ jsx("div", { css: styles.overlay, children: /* @__PURE__ */ jsxs("div", { css: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("div", { css: styles.header, children: /* @__PURE__ */ jsx("h3", { css: styles.title, children: title }) }),
+    /* @__PURE__ */ jsx("div", { css: styles.body, children: isError ? /* @__PURE__ */ jsx("p", { css: styles.message, children: progress.message || "An error occurred" }) : isStopped ? /* @__PURE__ */ jsxs("p", { css: styles.message, children: [
+      "Processing stopped. Processed ",
+      progress.processed ?? progress.current,
+      " image",
+      (progress.processed ?? progress.current) !== 1 ? "s" : "",
+      " before stopping."
+    ] }) : isComplete ? /* @__PURE__ */ jsxs("p", { css: styles.message, children: [
+      "Processed ",
+      progress.processed,
+      " image",
+      progress.processed !== 1 ? "s" : "",
+      ".",
+      progress.orphansRemoved !== void 0 && progress.orphansRemoved > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " Removed ",
+        progress.orphansRemoved,
+        " orphaned thumbnail",
+        progress.orphansRemoved !== 1 ? "s" : "",
+        "."
+      ] }) : null,
+      progress.errors !== void 0 && progress.errors > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        progress.errors,
+        " error",
+        progress.errors !== 1 ? "s" : "",
+        " occurred."
+      ] }) : null
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { css: styles.message, children: progress.status === "cleanup" ? "Cleaning up orphaned files..." : `Processing images...` }),
+      /* @__PURE__ */ jsxs("div", { css: progressStyles.progressContainer, children: [
+        /* @__PURE__ */ jsx("div", { css: progressStyles.progressBar, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            css: progressStyles.progressFill,
+            style: { width: `${progress.percent}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { css: progressStyles.progressText, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            progress.current,
+            " of ",
+            progress.total
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            progress.percent,
+            "%"
+          ] })
+        ] }),
+        progress.currentFile && /* @__PURE__ */ jsx("p", { css: progressStyles.currentFile, title: progress.currentFile, children: progress.currentFile })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { css: styles.footer, children: [
+      isRunning && onStop && /* @__PURE__ */ jsx("button", { css: [styles.btn, styles.btnDanger], onClick: onStop, children: "Stop" }),
+      canClose && /* @__PURE__ */ jsx("button", { css: [styles.btn, styles.btnConfirm], onClick: onClose, children: "Done" })
+    ] })
+  ] }) });
+}
 
 // src/components/StudioToolbar.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
 var btnHeight = "36px";
 var spin = keyframes2`
   to { transform: rotate(360deg); }
@@ -346,11 +450,19 @@ var styles2 = {
 function StudioToolbar() {
   const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem } = useStudio();
   const fileInputRef = useRef(null);
+  const abortControllerRef = useRef(null);
   const [uploading, setUploading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
   const [processing, setProcessing] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [showProcessConfirm, setShowProcessConfirm] = useState(false);
+  const [showProgress, setShowProgress] = useState(false);
+  const [progressState, setProgressState] = useState({
+    current: 0,
+    total: 0,
+    percent: 0,
+    status: "processing"
+  });
   const [processCount, setProcessCount] = useState(0);
   const [processMode, setProcessMode] = useState("all");
   const [alertMessage, setAlertMessage] = useState(null);
@@ -425,12 +537,12 @@ function StudioToolbar() {
       setShowProcessConfirm(true);
     } else {
       try {
-        const response = await fetch("/api/studio/count-unprocessed");
+        const response = await fetch("/api/studio/count-images");
         const data = await response.json();
         if (data.count === 0) {
           setAlertMessage({
-            title: "All Images Processed",
-            message: "All images in the public folder have already been processed."
+            title: "No Images Found",
+            message: "No images found in the public folder to process."
           });
           return;
         }
@@ -438,10 +550,10 @@ function StudioToolbar() {
         setProcessMode("all");
         setShowProcessConfirm(true);
       } catch (error) {
-        console.error("Failed to count unprocessed images:", error);
+        console.error("Failed to count images:", error);
         setAlertMessage({
           title: "Error",
-          message: "Failed to count unprocessed images."
+          message: "Failed to count images."
         });
       }
     }
@@ -449,30 +561,100 @@ function StudioToolbar() {
   const handleProcessConfirm = useCallback(async () => {
     setShowProcessConfirm(false);
     setProcessing(true);
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
     try {
       if (processMode === "all") {
+        setShowProgress(true);
+        setProgressState({
+          current: 0,
+          total: processCount,
+          percent: 0,
+          status: "processing"
+        });
         const response = await fetch("/api/studio/process-all", {
-          method: "POST"
+          method: "POST",
+          signal
         });
-        const data = await response.json();
-        if (response.ok) {
-          const message = [
-            `Processed ${data.processed?.length || 0} images.`,
-            data.orphansRemoved?.length > 0 ? `Removed ${data.orphansRemoved.length} orphaned thumbnails.` : "",
-            data.errors?.length > 0 ? `${data.errors.length} errors occurred.` : ""
-          ].filter(Boolean).join(" ");
-          setAlertMessage({
-            title: "Processing Complete",
-            message
-          });
-          triggerRefresh();
-        } else {
-          setAlertMessage({
-            title: "Processing Failed",
-            message: data.error || "Unknown error"
-          });
+        if (!response.body) {
+          throw new Error("No response body");
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            if (signal.aborted) {
+              reader.cancel();
+              break;
+            }
+            const text = decoder.decode(value);
+            const lines = text.split("\n\n").filter((line) => line.startsWith("data: "));
+            for (const line of lines) {
+              try {
+                const data = JSON.parse(line.replace("data: ", ""));
+                if (data.type === "start") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    total: data.total
+                  }));
+                } else if (data.type === "progress") {
+                  setProgressState({
+                    current: data.current,
+                    total: data.total,
+                    percent: data.percent,
+                    currentFile: data.currentFile,
+                    status: "processing"
+                  });
+                } else if (data.type === "cleanup") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    status: "cleanup",
+                    currentFile: void 0
+                  }));
+                } else if (data.type === "complete") {
+                  setProgressState({
+                    current: data.processed,
+                    total: data.processed,
+                    percent: 100,
+                    status: "complete",
+                    processed: data.processed,
+                    orphansRemoved: data.orphansRemoved,
+                    errors: data.errors
+                  });
+                  triggerRefresh();
+                } else if (data.type === "error") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    status: "error",
+                    message: data.message
+                  }));
+                }
+              } catch {
+              }
+            }
+          }
+        } catch (err) {
+          if (signal.aborted) {
+            setProgressState((prev) => ({
+              ...prev,
+              status: "stopped",
+              processed: prev.current
+            }));
+            triggerRefresh();
+          } else {
+            throw err;
+          }
         }
       } else {
+        setShowProgress(true);
+        setProgressState({
+          current: 0,
+          total: processCount,
+          percent: 0,
+          status: "processing"
+        });
         const selectedImageKeys = Array.from(selectedItems).filter((p) => {
           const ext = p.split(".").pop()?.toLowerCase() || "";
           return ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"].includes(ext);
@@ -480,33 +662,59 @@ function StudioToolbar() {
         const response = await fetch("/api/studio/reprocess", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ imageKeys: selectedImageKeys })
+          body: JSON.stringify({ imageKeys: selectedImageKeys }),
+          signal
         });
         const data = await response.json();
         if (response.ok) {
-          setAlertMessage({
-            title: "Processing Complete",
-            message: `Processed ${data.processed?.length || 0} images.${data.errors?.length > 0 ? ` ${data.errors.length} errors occurred.` : ""}`
+          setProgressState({
+            current: data.processed?.length || 0,
+            total: data.processed?.length || 0,
+            percent: 100,
+            status: "complete",
+            processed: data.processed?.length || 0,
+            errors: data.errors?.length || 0
           });
           clearSelection();
           triggerRefresh();
         } else {
-          setAlertMessage({
-            title: "Processing Failed",
+          setProgressState({
+            current: 0,
+            total: 0,
+            percent: 0,
+            status: "error",
             message: data.error || "Unknown error"
           });
         }
       }
     } catch (error) {
-      console.error("Processing error:", error);
-      setAlertMessage({
-        title: "Processing Failed",
-        message: "Processing failed. Check console for details."
-      });
+      if (signal.aborted) {
+        setProgressState((prev) => ({
+          ...prev,
+          status: "stopped",
+          processed: prev.current
+        }));
+        triggerRefresh();
+      } else {
+        console.error("Processing error:", error);
+        setProgressState({
+          current: 0,
+          total: 0,
+          percent: 0,
+          status: "error",
+          message: "Processing failed. Check console for details."
+        });
+      }
     } finally {
       setProcessing(false);
+      abortControllerRef.current = null;
+    }
+  }, [processMode, processCount, selectedItems, clearSelection, triggerRefresh]);
+  const handleStopProcessing = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
     }
-  }, [processMode, selectedItems, clearSelection, triggerRefresh]);
+  }, []);
   const handleDeleteClick = useCallback(() => {
     if (selectedItems.size === 0) return;
     setShowDeleteConfirm(true);
@@ -547,7 +755,7 @@ function StudioToolbar() {
   if (focusedItem) {
     return null;
   }
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     showDeleteConfirm && /* @__PURE__ */ jsx2(
       ConfirmModal,
       {
@@ -563,12 +771,29 @@ function StudioToolbar() {
       ConfirmModal,
       {
         title: "Process Images",
-        message: processMode === "all" ? `Found ${processCount} unprocessed image${processCount !== 1 ? "s" : ""} in the public folder. This will generate thumbnails and remove any orphaned files from the images folder.` : `Process ${processCount} selected image${processCount !== 1 ? "s" : ""}? This will regenerate thumbnails for these files.`,
+        message: processMode === "all" ? `Found ${processCount} image${processCount !== 1 ? "s" : ""} in the public folder. This will regenerate all thumbnails and remove any orphaned files from the images folder.` : `Process ${processCount} selected image${processCount !== 1 ? "s" : ""}? This will regenerate thumbnails for these files.`,
         confirmLabel: processing ? "Processing..." : "Process",
         onConfirm: handleProcessConfirm,
         onCancel: () => setShowProcessConfirm(false)
       }
     ),
+    showProgress && /* @__PURE__ */ jsx2(
+      ProgressModal,
+      {
+        title: "Processing Images",
+        progress: progressState,
+        onStop: handleStopProcessing,
+        onClose: () => {
+          setShowProgress(false);
+          setProgressState({
+            current: 0,
+            total: 0,
+            percent: 0,
+            status: "processing"
+          });
+        }
+      }
+    ),
     alertMessage && /* @__PURE__ */ jsx2(
       AlertModal,
       {
@@ -1434,7 +1659,7 @@ function formatFileSize2(bytes) {
 // src/components/StudioDetailView.tsx
 import { useState as useState4 } from "react";
 import { css as css5 } from "@emotion/react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico", ".bmp", ".tiff", ".tif"];
 var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".avi", ".mkv", ".m4v"];
 function isImageFile(filename) {
@@ -1675,7 +1900,7 @@ function StudioDetailView() {
       /* @__PURE__ */ jsx5("p", { css: styles5.fileName, children: focusedItem.name })
     ] });
   };
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     showDeleteConfirm && /* @__PURE__ */ jsx5(
       ConfirmModal,
       {
@@ -1757,7 +1982,7 @@ function formatFileSize3(bytes) {
 // src/components/StudioSettings.tsx
 import { useState as useState5 } from "react";
 import { css as css6 } from "@emotion/react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var btnHeight2 = "36px";
 var styles6 = {
   btn: css6`
@@ -1941,7 +2166,7 @@ var styles6 = {
 };
 function StudioSettings() {
   const [isOpen, setIsOpen] = useState5(false);
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsx6("button", { css: styles6.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs6(
       "svg",
       {
@@ -2222,4 +2447,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-F2C4N66F.mjs.map
+//# sourceMappingURL=StudioUI-VH2C7QCI.mjs.map