@gallop.software/studio 0.1.24 → 0.1.25

package/dist/{StudioUI-F2C4N66F.mjs → StudioUI-BPOKRRW7.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,101 @@ 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
+}) {
+  const isComplete = progress.status === "complete";
+  const isError = progress.status === "error";
+  const canClose = isComplete || isError;
+  return /* @__PURE__ */ jsx("div", { css: styles.overlay, onClick: canClose ? onClose : void 0, 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" }) : isComplete ? /* @__PURE__ */ jsxs("p", { css: styles.message, children: [
+      "Processed ",
+      progress.processed,
+      " image",
+      progress.processed !== 1 ? "s" : "",
+      ".",
+      progress.orphansRemoved && progress.orphansRemoved > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " Removed ",
+        progress.orphansRemoved,
+        " orphaned thumbnail",
+        progress.orphansRemoved !== 1 ? "s" : "",
+        "."
+      ] }),
+      progress.errors && progress.errors > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        progress.errors,
+        " error",
+        progress.errors !== 1 ? "s" : "",
+        " occurred."
+      ] })
+    ] }) : /* @__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 })
+      ] })
+    ] }) }),
+    canClose && /* @__PURE__ */ jsx("div", { css: styles.footer, children: /* @__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); }
@@ -351,6 +443,13 @@ function StudioToolbar() {
   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 +524,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 +537,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."
         });
       }
     }
@@ -451,28 +550,78 @@ function StudioToolbar() {
     setProcessing(true);
     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"
         });
-        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();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) 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 {
+            }
+          }
         }
       } 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);
@@ -484,29 +633,39 @@ function StudioToolbar() {
         });
         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",
+      setProgressState({
+        current: 0,
+        total: 0,
+        percent: 0,
+        status: "error",
         message: "Processing failed. Check console for details."
       });
     } finally {
       setProcessing(false);
     }
-  }, [processMode, selectedItems, clearSelection, triggerRefresh]);
+  }, [processMode, processCount, selectedItems, clearSelection, triggerRefresh]);
   const handleDeleteClick = useCallback(() => {
     if (selectedItems.size === 0) return;
     setShowDeleteConfirm(true);
@@ -547,7 +706,7 @@ function StudioToolbar() {
   if (focusedItem) {
     return null;
   }
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     showDeleteConfirm && /* @__PURE__ */ jsx2(
       ConfirmModal,
       {
@@ -563,12 +722,28 @@ 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,
+        onClose: () => {
+          setShowProgress(false);
+          setProgressState({
+            current: 0,
+            total: 0,
+            percent: 0,
+            status: "processing"
+          });
+        }
+      }
+    ),
     alertMessage && /* @__PURE__ */ jsx2(
       AlertModal,
       {
@@ -1434,7 +1609,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 +1850,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 +1932,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 +2116,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 +2397,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-F2C4N66F.mjs.map
+//# sourceMappingURL=StudioUI-BPOKRRW7.mjs.map