@gallop.software/studio 0.1.78 → 0.1.79

package/dist/{StudioUI-PMJDMXUP.mjs → StudioUI-DRDR7N4T.mjs}

@@ -1719,11 +1719,15 @@ var styles4 = {
     flex: 1;
     min-width: 0;
   `,
-  copyBtn: css4`
+  actionBtns: css4`
     position: absolute;
     top: 4px;
     right: 4px;
     z-index: 10;
+    display: flex;
+    gap: 2px;
+  `,
+  copyBtn: css4`
     height: 28px;
     width: 28px;
     color: ${colors.textMuted};
@@ -1736,6 +1740,7 @@ var styles4 = {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
     
     &:hover {
       color: ${colors.text};
@@ -1841,6 +1846,7 @@ function StudioFileGrid() {
   const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
   const [items, setItems] = useState3([]);
   const [loading, setLoading] = useState3(true);
+  const [renameItem, setRenameItem] = useState3(null);
   const isInitialLoad = useRef2(true);
   const lastPath = useRef2(currentPath);
   useEffect2(() => {
@@ -1909,6 +1915,22 @@ function StudioFileGrid() {
       console.error("Failed to generate thumbnail:", error);
     }
   };
+  const handleRename = async (newName) => {
+    if (!renameItem) return;
+    setRenameItem(null);
+    try {
+      const response = await fetch("/api/studio/rename", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ oldPath: renameItem.path, newName })
+      });
+      if (response.ok) {
+        triggerRefresh();
+      }
+    } catch (error) {
+      console.error("Failed to rename:", error);
+    }
+  };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
   const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
   const handleSelectAll = () => {
@@ -1919,6 +1941,18 @@ function StudioFileGrid() {
     }
   };
   return /* @__PURE__ */ jsxs4("div", { children: [
+    renameItem && /* @__PURE__ */ jsx4(
+      InputModal,
+      {
+        title: renameItem.type === "folder" ? "Rename Folder" : "Rename File",
+        message: "Enter a new name:",
+        placeholder: renameItem.name,
+        defaultValue: renameItem.name,
+        confirmLabel: "Rename",
+        onConfirm: handleRename,
+        onCancel: () => setRenameItem(null)
+      }
+    ),
     sortedItems.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
       /* @__PURE__ */ jsx4(
         "input",
@@ -1958,14 +1992,15 @@ function StudioFileGrid() {
           isSelected: selectedItems.has(item.path),
           onClick: (e) => handleItemClick(item, e),
           onOpen: () => handleOpen(item),
-          onGenerateThumbnail: () => handleGenerateThumbnail(item)
+          onGenerateThumbnail: () => handleGenerateThumbnail(item),
+          onRename: () => setRenameItem(item)
         },
         item.path
       ))
     ] })
   ] });
 }
-function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
+function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
   const [showCopied, setShowCopied] = useState3(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
@@ -2001,18 +2036,32 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
         ),
         item.cdnSynced && /* @__PURE__ */ jsx4("span", { css: styles4.cdnBadge, children: "CDN" }),
         /* @__PURE__ */ jsxs4("div", { css: styles4.content, children: [
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              css: styles4.copyBtn,
-              onClick: handleCopyPath,
-              title: "Copy file path",
-              children: [
-                showCopied && /* @__PURE__ */ jsx4("span", { css: styles4.tooltip, children: "Copied!" }),
-                /* @__PURE__ */ jsx4("svg", { css: styles4.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxs4("div", { css: styles4.actionBtns, children: [
+            /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                css: styles4.copyBtn,
+                onClick: handleCopyPath,
+                title: "Copy file path",
+                children: [
+                  showCopied && /* @__PURE__ */ jsx4("span", { css: styles4.tooltip, children: "Copied!" }),
+                  /* @__PURE__ */ jsx4("svg", { css: styles4.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                css: styles4.copyBtn,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRename();
+                },
+                title: "Rename",
+                children: /* @__PURE__ */ jsx4("svg", { css: styles4.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx4(
             "button",
             {
@@ -2398,6 +2447,7 @@ function StudioFileList() {
   const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
   const [items, setItems] = useState4([]);
   const [loading, setLoading] = useState4(true);
+  const [renameItem, setRenameItem] = useState4(null);
   const isInitialLoad = useRef3(true);
   const lastPath = useRef3(currentPath);
   useEffect3(() => {
@@ -2462,6 +2512,22 @@ function StudioFileList() {
       console.error("Failed to generate thumbnail:", error);
     }
   };
+  const handleRename = async (newName) => {
+    if (!renameItem) return;
+    setRenameItem(null);
+    try {
+      const response = await fetch("/api/studio/rename", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ oldPath: renameItem.path, newName })
+      });
+      if (response.ok) {
+        triggerRefresh();
+      }
+    } catch (error) {
+      console.error("Failed to rename:", error);
+    }
+  };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
   const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
   const handleSelectAll = () => {
@@ -2471,51 +2537,66 @@ function StudioFileList() {
       selectAll(sortedItems);
     }
   };
-  return /* @__PURE__ */ jsx5("div", { css: styles5.tableWrapper, children: /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
-    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
-        "input",
-        {
-          type: "checkbox",
-          css: styles5.checkbox,
-          checked: allItemsSelected,
-          ref: (el) => {
-            if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
+  return /* @__PURE__ */ jsxs5("div", { css: styles5.tableWrapper, children: [
+    renameItem && /* @__PURE__ */ jsx5(
+      InputModal,
+      {
+        title: renameItem.type === "folder" ? "Rename Folder" : "Rename File",
+        message: "Enter a new name:",
+        placeholder: renameItem.name,
+        defaultValue: renameItem.name,
+        confirmLabel: "Rename",
+        onConfirm: handleRename,
+        onCancel: () => setRenameItem(null)
+      }
+    ),
+    /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "checkbox",
+            css: styles5.checkbox,
+            checked: allItemsSelected,
+            ref: (el) => {
+              if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
+            },
+            onChange: handleSelectAll
+          }
+        ) }),
+        /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
+        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
+        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
+        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
+      ] }) }),
+      /* @__PURE__ */ jsxs5("tbody", { css: styles5.tbody, children: [
+        !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5("tr", { css: styles5.parentRow, onClick: navigateUp, children: [
+          /* @__PURE__ */ jsx5("td", { css: styles5.td }),
+          /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
+            /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
+            /* @__PURE__ */ jsx5("span", { css: styles5.name, children: ".." })
+          ] }) }),
+          /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "--" }),
+          /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "Parent folder" }),
+          /* @__PURE__ */ jsx5("td", { css: styles5.td, children: "--" })
+        ] }),
+        sortedItems.map((item) => /* @__PURE__ */ jsx5(
+          ListRow,
+          {
+            item,
+            isSelected: selectedItems.has(item.path),
+            onClick: (e) => handleItemClick(item, e),
+            onOpen: () => handleOpen(item),
+            onGenerateThumbnail: () => handleGenerateThumbnail(item),
+            onRename: () => setRenameItem(item)
           },
-          onChange: handleSelectAll
-        }
-      ) }),
-      /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
-    ] }) }),
-    /* @__PURE__ */ jsxs5("tbody", { css: styles5.tbody, children: [
-      !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5("tr", { css: styles5.parentRow, onClick: navigateUp, children: [
-        /* @__PURE__ */ jsx5("td", { css: styles5.td }),
-        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
-          /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
-          /* @__PURE__ */ jsx5("span", { css: styles5.name, children: ".." })
-        ] }) }),
-        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "--" }),
-        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "Parent folder" }),
-        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: "--" })
-      ] }),
-      sortedItems.map((item) => /* @__PURE__ */ jsx5(
-        ListRow,
-        {
-          item,
-          isSelected: selectedItems.has(item.path),
-          onClick: (e) => handleItemClick(item, e),
-          onOpen: () => handleOpen(item),
-          onGenerateThumbnail: () => handleGenerateThumbnail(item)
-        },
-        item.path
-      ))
+          item.path
+        ))
+      ] })
     ] })
-  ] }) });
+  ] });
 }
-function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
+function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
   const [showCopied, setShowCopied] = useState4(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
@@ -2579,6 +2660,18 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
                 ]
               }
             ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                css: styles5.copyBtn,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRename();
+                },
+                title: "Rename",
+                children: /* @__PURE__ */ jsx5("svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) })
+              }
+            ),
             /* @__PURE__ */ jsx5(
               "button",
               {
@@ -3837,4 +3930,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-PMJDMXUP.mjs.map
+//# sourceMappingURL=StudioUI-DRDR7N4T.mjs.map