@gallop.software/studio 0.1.23 → 0.1.25

package/dist/{StudioUI-QPAHJJ64.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); }
@@ -348,7 +440,18 @@ function StudioToolbar() {
   const fileInputRef = 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);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = useCallback(() => {
@@ -402,9 +505,167 @@ function StudioToolbar() {
       }
     }
   }, [currentPath, triggerRefresh]);
-  const handleReprocess = useCallback(() => {
-    console.log("Reprocess clicked", selectedItems);
+  const handleProcessImages = useCallback(async () => {
+    const hasSelection2 = selectedItems.size > 0;
+    if (hasSelection2) {
+      const selectedImagePaths = Array.from(selectedItems).filter((p) => {
+        const ext = p.split(".").pop()?.toLowerCase() || "";
+        return ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"].includes(ext);
+      });
+      if (selectedImagePaths.length === 0) {
+        setAlertMessage({
+          title: "No Images Selected",
+          message: "Please select image files to process."
+        });
+        return;
+      }
+      setProcessCount(selectedImagePaths.length);
+      setProcessMode("selected");
+      setShowProcessConfirm(true);
+    } else {
+      try {
+        const response = await fetch("/api/studio/count-images");
+        const data = await response.json();
+        if (data.count === 0) {
+          setAlertMessage({
+            title: "No Images Found",
+            message: "No images found in the public folder to process."
+          });
+          return;
+        }
+        setProcessCount(data.count);
+        setProcessMode("all");
+        setShowProcessConfirm(true);
+      } catch (error) {
+        console.error("Failed to count images:", error);
+        setAlertMessage({
+          title: "Error",
+          message: "Failed to count images."
+        });
+      }
+    }
   }, [selectedItems]);
+  const handleProcessConfirm = useCallback(async () => {
+    setShowProcessConfirm(false);
+    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"
+        });
+        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);
+        }).map((p) => p.replace(/^public\//, ""));
+        const response = await fetch("/api/studio/reprocess", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ imageKeys: selectedImageKeys })
+        });
+        const data = await response.json();
+        if (response.ok) {
+          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 {
+          setProgressState({
+            current: 0,
+            total: 0,
+            percent: 0,
+            status: "error",
+            message: data.error || "Unknown error"
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Processing error:", error);
+      setProgressState({
+        current: 0,
+        total: 0,
+        percent: 0,
+        status: "error",
+        message: "Processing failed. Check console for details."
+      });
+    } finally {
+      setProcessing(false);
+    }
+  }, [processMode, processCount, selectedItems, clearSelection, triggerRefresh]);
   const handleDeleteClick = useCallback(() => {
     if (selectedItems.size === 0) return;
     setShowDeleteConfirm(true);
@@ -445,7 +706,7 @@ function StudioToolbar() {
   if (focusedItem) {
     return null;
   }
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     showDeleteConfirm && /* @__PURE__ */ jsx2(
       ConfirmModal,
       {
@@ -457,6 +718,32 @@ function StudioToolbar() {
         onCancel: () => setShowDeleteConfirm(false)
       }
     ),
+    showProcessConfirm && /* @__PURE__ */ jsx2(
+      ConfirmModal,
+      {
+        title: "Process Images",
+        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,
       {
@@ -495,11 +782,11 @@ function StudioToolbar() {
           "button",
           {
             css: styles2.btn,
-            onClick: handleReprocess,
-            disabled: !hasSelection,
+            onClick: handleProcessImages,
+            disabled: processing,
             children: [
-              /* @__PURE__ */ jsx2(RefreshIcon, {}),
-              "Reprocess"
+              /* @__PURE__ */ jsx2(ImageStackIcon, {}),
+              processing ? "Processing..." : "Process Images"
             ]
           }
         ),
@@ -591,6 +878,9 @@ function GridIcon() {
 function ListIcon() {
   return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
 }
+function ImageStackIcon() {
+  return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+}
 
 // src/components/StudioFileGrid.tsx
 import { useEffect, useState as useState2 } from "react";
@@ -1319,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) {
@@ -1560,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,
       {
@@ -1642,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`
@@ -1826,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",
       {
@@ -2107,4 +2397,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-QPAHJJ64.mjs.map
+//# sourceMappingURL=StudioUI-BPOKRRW7.mjs.map