@gallop.software/studio 1.5.0 → 1.5.2

package/dist/{StudioUI-7QQIKNTF.mjs → StudioUI-74IZDKCP.mjs}

@@ -3120,6 +3120,34 @@ var styles6 = {
     color: #f59e0b;
     transform: translateY(1px);
   `,
+  folderStats: css6`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+    padding-left: 8px;
+  `,
+  folderStat: css6`
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 11px;
+    color: ${colors.textSecondary};
+  `,
+  folderStatIcon: css6`
+    width: 14px;
+    height: 14px;
+  `,
+  folderStatIconCloud: css6`
+    width: 14px;
+    height: 14px;
+    color: #f59e0b;
+  `,
+  folderStatIconLocal: css6`
+    width: 14px;
+    height: 14px;
+    color: ${colors.textSecondary};
+  `,
   globeIcon: css6`
     width: 18px;
     height: 18px;
@@ -3389,14 +3417,26 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
             }
           ) : /* @__PURE__ */ jsx6("svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
         ] }),
-        /* @__PURE__ */ jsx6("div", { css: styles6.label, children: /* @__PURE__ */ jsx6("div", { css: styles6.labelRow, children: /* @__PURE__ */ jsxs6("div", { css: styles6.labelText, children: [
-          /* @__PURE__ */ jsx6("p", { css: styles6.name, title: item.name, children: item.name }),
-          isFolder ? /* @__PURE__ */ jsxs6("p", { css: styles6.size, children: [
-            item.fileCount !== void 0 ? `${item.fileCount} files` : "",
-            item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
-            item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
-          ] }) : item.size !== void 0 && /* @__PURE__ */ jsx6("p", { css: styles6.size, children: formatFileSize(item.size) })
-        ] }) }) })
+        /* @__PURE__ */ jsx6("div", { css: styles6.label, children: /* @__PURE__ */ jsxs6("div", { css: styles6.labelRow, children: [
+          /* @__PURE__ */ jsxs6("div", { css: styles6.labelText, children: [
+            /* @__PURE__ */ jsx6("p", { css: styles6.name, title: item.name, children: item.name }),
+            isFolder ? /* @__PURE__ */ jsxs6("p", { css: styles6.size, children: [
+              item.fileCount !== void 0 ? `${item.fileCount} files` : "",
+              item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
+              item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
+            ] }) : item.size !== void 0 && /* @__PURE__ */ jsx6("p", { css: styles6.size, children: formatFileSize(item.size) })
+          ] }),
+          isFolder && (item.localCount || item.cloudCount) && /* @__PURE__ */ jsxs6("div", { css: styles6.folderStats, children: [
+            item.localCount !== void 0 && item.localCount > 0 && /* @__PURE__ */ jsxs6("span", { css: styles6.folderStat, title: `${item.localCount} local`, children: [
+              /* @__PURE__ */ jsx6("svg", { css: styles6.folderStatIconLocal, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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" }) }),
+              item.localCount
+            ] }),
+            item.cloudCount !== void 0 && item.cloudCount > 0 && /* @__PURE__ */ jsxs6("span", { css: styles6.folderStat, title: `${item.cloudCount} in cloud`, children: [
+              /* @__PURE__ */ jsx6("svg", { css: styles6.folderStatIconCloud, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }),
+              item.cloudCount
+            ] })
+          ] })
+        ] }) })
       ]
     }
   );
@@ -3597,6 +3637,28 @@ var styles7 = {
     color: #f59e0b;
     transform: translateY(1px);
   `,
+  folderStats: css7`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  folderStat: css7`
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 12px;
+    color: ${colors.textSecondary};
+  `,
+  folderStatIconCloud: css7`
+    width: 14px;
+    height: 14px;
+    color: #f59e0b;
+  `,
+  folderStatIconLocal: css7`
+    width: 14px;
+    height: 14px;
+    color: ${colors.textSecondary};
+  `,
   globeIcon: css7`
     width: 16px;
     height: 16px;
@@ -3937,7 +3999,21 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx7("td", { css: [styles7.td, styles7.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
+        /* @__PURE__ */ jsx7("td", { css: [styles7.td, styles7.meta], children: isFolder ? /* @__PURE__ */ jsxs7("div", { css: styles7.folderStats, children: [
+          item.localCount !== void 0 && item.localCount > 0 && /* @__PURE__ */ jsxs7("span", { css: styles7.folderStat, title: `${item.localCount} local`, children: [
+            /* @__PURE__ */ jsx7("svg", { css: styles7.folderStatIconLocal, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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" }) }),
+            item.localCount
+          ] }),
+          item.cloudCount !== void 0 && item.cloudCount > 0 && /* @__PURE__ */ jsxs7("span", { css: styles7.folderStat, title: `${item.cloudCount} in cloud`, children: [
+            /* @__PURE__ */ jsx7("svg", { css: styles7.folderStatIconCloud, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }),
+            item.cloudCount
+          ] }),
+          !item.localCount && !item.cloudCount && item.fileCount !== void 0 && /* @__PURE__ */ jsxs7("span", { children: [
+            item.fileCount,
+            " files"
+          ] }),
+          !item.localCount && !item.cloudCount && item.fileCount === void 0 && "--"
+        ] }) : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
         /* @__PURE__ */ jsx7("td", { css: [styles7.td, styles7.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
         /* @__PURE__ */ jsx7("td", { css: styles7.td, children: item.cdnPushed ? item.isRemote ? /* @__PURE__ */ jsx7("span", { css: styles7.cdnBadgeRemote, children: "Remote" }) : /* @__PURE__ */ jsxs7("span", { css: styles7.cdnBadge, children: [
           /* @__PURE__ */ jsx7("svg", { css: styles7.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx7("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
@@ -4282,7 +4358,14 @@ function StudioDetailView() {
   const [showR2SetupModal, setShowR2SetupModal] = useState8(false);
   const [alertMessage, setAlertMessage] = useState8(null);
   const [showCopied, setShowCopied] = useState8(false);
-  const [generatingFavicon, setGeneratingFavicon] = useState8(false);
+  const [showFaviconProgress, setShowFaviconProgress] = useState8(false);
+  const [faviconProgress, setFaviconProgress] = useState8({
+    current: 0,
+    total: 3,
+    percent: 0,
+    status: "processing",
+    message: "Generating favicons..."
+  });
   const isActionInProgress = actionState.showProgress;
   const isFaviconSource = focusedItem ? focusedItem.name.toLowerCase() === "favicon.png" || focusedItem.name.toLowerCase() === "favicon.jpg" : false;
   if (!focusedItem) return null;
@@ -4333,7 +4416,14 @@ function StudioDetailView() {
   };
   const handleGenerateFavicons = async () => {
     if (!focusedItem) return;
-    setGeneratingFavicon(true);
+    setShowFaviconProgress(true);
+    setFaviconProgress({
+      current: 0,
+      total: 3,
+      percent: 0,
+      status: "processing",
+      message: "Generating favicons..."
+    });
     try {
       const response = await fetch("/api/studio/generate-favicon", {
         method: "POST",
@@ -4342,26 +4432,74 @@ function StudioDetailView() {
           imagePath: "/" + focusedItem.path.replace(/^public\//, "")
         })
       });
-      const data = await response.json();
-      if (response.ok && data.success) {
-        setAlertMessage({
-          title: "Favicons Generated",
-          message: data.message + " Files saved to src/app/"
-        });
-      } else {
-        setAlertMessage({
-          title: "Generation Failed",
-          message: data.error || data.message || "Failed to generate favicons"
+      if (!response.ok) {
+        const error = await response.json();
+        setFaviconProgress({
+          current: 0,
+          total: 3,
+          percent: 0,
+          status: "error",
+          message: error.error || "Failed to generate favicons"
         });
+        return;
+      }
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (reader) {
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              try {
+                const data = JSON.parse(line.slice(6));
+                if (data.type === "start") {
+                  setFaviconProgress((prev) => ({
+                    ...prev,
+                    total: data.total
+                  }));
+                } else if (data.type === "progress") {
+                  setFaviconProgress({
+                    current: data.current,
+                    total: data.total,
+                    percent: data.percent,
+                    status: "processing",
+                    message: data.message
+                  });
+                } else if (data.type === "complete") {
+                  setFaviconProgress({
+                    current: data.processed,
+                    total: data.processed,
+                    percent: 100,
+                    status: data.errors > 0 ? "error" : "complete",
+                    message: data.message
+                  });
+                } else if (data.type === "error") {
+                  setFaviconProgress((prev) => ({
+                    ...prev,
+                    status: "error",
+                    message: data.message
+                  }));
+                }
+              } catch {
+              }
+            }
+          }
+        }
       }
     } catch (error) {
       console.error("Favicon generation error:", error);
-      setAlertMessage({
-        title: "Generation Failed",
+      setFaviconProgress({
+        current: 0,
+        total: 3,
+        percent: 0,
+        status: "error",
         message: "An error occurred while generating favicons"
       });
-    } finally {
-      setGeneratingFavicon(false);
     }
   };
   const renderMedia = () => {
@@ -4404,6 +4542,14 @@ function StudioDetailView() {
         onCancel: () => setShowRenameModal(false)
       }
     ),
+    showFaviconProgress && /* @__PURE__ */ jsx8(
+      ProgressModal,
+      {
+        title: "Generating Favicons",
+        progress: faviconProgress,
+        onClose: () => setShowFaviconProgress(false)
+      }
+    ),
     /* @__PURE__ */ jsx8("div", { css: styles8.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxs8("div", { css: styles8.container, onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs8("div", { css: styles8.main, children: [
         /* @__PURE__ */ jsxs8("div", { css: styles8.headerButtons, children: [
@@ -4515,10 +4661,10 @@ function StudioDetailView() {
               {
                 css: styles8.actionBtn,
                 onClick: handleGenerateFavicons,
-                disabled: generatingFavicon || focusedItem.isProtected,
+                disabled: showFaviconProgress || focusedItem.isProtected,
                 children: [
                   /* @__PURE__ */ jsx8("svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" }) }),
-                  generatingFavicon ? "Generating..." : "Generate Favicons"
+                  "Generate Favicons"
                 ]
               }
             ),
@@ -6151,4 +6297,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-7QQIKNTF.mjs.map
+//# sourceMappingURL=StudioUI-74IZDKCP.mjs.map