rita-workspace 0.5.5 → 0.5.7

package/dist/index.js

@@ -1359,6 +1359,7 @@ var DrawingsDialog = ({
   const [editName, setEditName] = (0, import_react5.useState)("");
   const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
   const [switchingId, setSwitchingId] = (0, import_react5.useState)(null);
+  const [selectedId, setSelectedId] = (0, import_react5.useState)(null);
   const [expandedFolders, setExpandedFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
   const [creatingFolder, setCreatingFolder] = (0, import_react5.useState)(false);
   const [newFolderName, setNewFolderName] = (0, import_react5.useState)("");
@@ -1367,7 +1368,6 @@ var DrawingsDialog = ({
   const [confirmDeleteFolderId, setConfirmDeleteFolderId] = (0, import_react5.useState)(null);
   const [movingDrawingId, setMovingDrawingId] = (0, import_react5.useState)(null);
   const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
-  const [busyFolderId, setBusyFolderId] = (0, import_react5.useState)(null);
   const [isRefreshing, setIsRefreshing] = (0, import_react5.useState)(false);
   const [draggingDrawingId, setDraggingDrawingId] = (0, import_react5.useState)(null);
   const [dropTargetFolderId, setDropTargetFolderId] = (0, import_react5.useState)(null);
@@ -1376,6 +1376,8 @@ var DrawingsDialog = ({
   const dialogRef = (0, import_react5.useRef)(null);
   const newFolderInputRef = (0, import_react5.useRef)(null);
   const prevOpenRef = (0, import_react5.useRef)(false);
+  const foldersRef = (0, import_react5.useRef)(folders);
+  foldersRef.current = folders;
   (0, import_react5.useEffect)(() => {
     if (open) {
       setIsRefreshing(true);
@@ -1383,11 +1385,12 @@ var DrawingsDialog = ({
       if (!prevOpenRef.current) {
         setPosition(null);
         setSearchQuery("");
-        setExpandedFolders(new Set(folders.map((f) => f.id)));
+        setSelectedId(null);
+        setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
       }
     }
     prevOpenRef.current = open;
-  }, [open, refreshDrawings, folders]);
+  }, [open, refreshDrawings]);
   (0, import_react5.useEffect)(() => {
     if (creatingFolder && newFolderInputRef.current) {
       newFolderInputRef.current.focus();
@@ -1417,6 +1420,7 @@ var DrawingsDialog = ({
   }, [position]);
   const handleSelect = (0, import_react5.useCallback)(async (drawing) => {
     setSwitchingId(drawing.id);
+    setSelectedId(null);
     await switchDrawing(drawing.id);
     onDrawingSelect?.(drawing);
     setSwitchingId(null);
@@ -1429,9 +1433,9 @@ var DrawingsDialog = ({
     setEditingId(drawing.id);
     setEditName(drawing.name);
   }, []);
-  const handleSaveEdit = (0, import_react5.useCallback)(async () => {
+  const handleSaveEdit = (0, import_react5.useCallback)(() => {
     if (editingId && editName.trim()) {
-      await renameDrawing(editingId, editName.trim());
+      renameDrawing(editingId, editName.trim());
       setEditingId(null);
       setEditName("");
     }
@@ -1440,40 +1444,35 @@ var DrawingsDialog = ({
     setEditingId(null);
     setEditName("");
   }, []);
-  const handleDelete = (0, import_react5.useCallback)(async (id) => {
-    await removeDrawing(id);
+  const handleDelete = (0, import_react5.useCallback)((id) => {
+    removeDrawing(id);
     setConfirmDeleteId(null);
   }, [removeDrawing]);
-  const handleCreateFolder = (0, import_react5.useCallback)(async () => {
+  const handleCreateFolder = (0, import_react5.useCallback)(() => {
     if (newFolderName.trim()) {
-      setBusyFolderId("__creating__");
-      const folder = await createFolder2(newFolderName.trim());
-      if (folder) {
-        setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
-      }
-      setBusyFolderId(null);
+      createFolder2(newFolderName.trim()).then((folder) => {
+        if (folder) {
+          setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
+        }
+      });
     }
     setCreatingFolder(false);
     setNewFolderName("");
   }, [newFolderName, createFolder2]);
-  const handleSaveFolderEdit = (0, import_react5.useCallback)(async () => {
+  const handleSaveFolderEdit = (0, import_react5.useCallback)(() => {
     if (editingFolderId && editFolderName.trim()) {
-      setBusyFolderId(editingFolderId);
-      await renameFolder2(editingFolderId, editFolderName.trim());
-      setBusyFolderId(null);
+      renameFolder2(editingFolderId, editFolderName.trim());
     }
     setEditingFolderId(null);
     setEditFolderName("");
   }, [editingFolderId, editFolderName, renameFolder2]);
-  const handleDeleteFolder = (0, import_react5.useCallback)(async (id) => {
-    setBusyFolderId(id);
-    await deleteFolder2(id);
-    setBusyFolderId(null);
+  const handleDeleteFolder = (0, import_react5.useCallback)((id) => {
+    deleteFolder2(id);
     setConfirmDeleteFolderId(null);
   }, [deleteFolder2]);
-  const handleMoveToFolder = (0, import_react5.useCallback)(async (drawingId, folderId) => {
-    await moveDrawingToFolder2(drawingId, folderId);
+  const handleMoveToFolder = (0, import_react5.useCallback)((drawingId, folderId) => {
     setMovingDrawingId(null);
+    moveDrawingToFolder2(drawingId, folderId);
   }, [moveDrawingToFolder2]);
   const toggleFolder = (0, import_react5.useCallback)((folderId) => {
     setExpandedFolders((prev) => {
@@ -1558,6 +1557,10 @@ var DrawingsDialog = ({
         setDropTargetFolderId("__none__");
         setTimeout(() => setDropTargetFolderId(null), 0);
       },
+      onClick: () => {
+        if (editingId || confirmDeleteId || movingDrawingId) return;
+        setSelectedId(drawing.id);
+      },
       style: {
         padding: "10px 12px",
         display: "flex",
@@ -1565,9 +1568,10 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: draggingDrawingId ? "grabbing" : "default",
-        backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent",
-        transition: "background-color 0.15s",
+        cursor: draggingDrawingId ? "grabbing" : "pointer",
+        backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : selectedId === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.06))" : "transparent",
+        border: selectedId === drawing.id && activeDrawing?.id !== drawing.id ? "1px solid var(--color-primary, #6c63ff)" : "1px solid transparent",
+        transition: "background-color 0.15s, border-color 0.15s",
         opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
       },
       children: [
@@ -1818,7 +1822,7 @@ var DrawingsDialog = ({
           },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "12px", width: "16px", textAlign: "center", flexShrink: 0 }, children: isExpanded ? "\u25BC" : "\u25B6" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: busyFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "inline-block", animation: "spin 1s linear infinite" }, children: "\u23F3" }) : "\u{1F4C1}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F4C1}" }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, onClick: (e) => e.stopPropagation(), children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "input",
@@ -2070,9 +2074,8 @@ var DrawingsDialog = ({
                 "button",
                 {
                   onClick: handleCreateFolder,
-                  disabled: busyFolderId === "__creating__",
-                  style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer", opacity: busyFolderId === "__creating__" ? 0.6 : 1 },
-                  children: busyFolderId === "__creating__" ? "\u23F3" : t.save
+                  style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
+                  children: t.save
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(

package/dist/index.mjs

@@ -1291,6 +1291,7 @@ var DrawingsDialog = ({
   const [editName, setEditName] = useState4("");
   const [confirmDeleteId, setConfirmDeleteId] = useState4(null);
   const [switchingId, setSwitchingId] = useState4(null);
+  const [selectedId, setSelectedId] = useState4(null);
   const [expandedFolders, setExpandedFolders] = useState4(/* @__PURE__ */ new Set());
   const [creatingFolder, setCreatingFolder] = useState4(false);
   const [newFolderName, setNewFolderName] = useState4("");
@@ -1299,7 +1300,6 @@ var DrawingsDialog = ({
   const [confirmDeleteFolderId, setConfirmDeleteFolderId] = useState4(null);
   const [movingDrawingId, setMovingDrawingId] = useState4(null);
   const [searchQuery, setSearchQuery] = useState4("");
-  const [busyFolderId, setBusyFolderId] = useState4(null);
   const [isRefreshing, setIsRefreshing] = useState4(false);
   const [draggingDrawingId, setDraggingDrawingId] = useState4(null);
   const [dropTargetFolderId, setDropTargetFolderId] = useState4(null);
@@ -1308,6 +1308,8 @@ var DrawingsDialog = ({
   const dialogRef = useRef3(null);
   const newFolderInputRef = useRef3(null);
   const prevOpenRef = useRef3(false);
+  const foldersRef = useRef3(folders);
+  foldersRef.current = folders;
   useEffect3(() => {
     if (open) {
       setIsRefreshing(true);
@@ -1315,11 +1317,12 @@ var DrawingsDialog = ({
       if (!prevOpenRef.current) {
         setPosition(null);
         setSearchQuery("");
-        setExpandedFolders(new Set(folders.map((f) => f.id)));
+        setSelectedId(null);
+        setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
       }
     }
     prevOpenRef.current = open;
-  }, [open, refreshDrawings, folders]);
+  }, [open, refreshDrawings]);
   useEffect3(() => {
     if (creatingFolder && newFolderInputRef.current) {
       newFolderInputRef.current.focus();
@@ -1349,6 +1352,7 @@ var DrawingsDialog = ({
   }, [position]);
   const handleSelect = useCallback2(async (drawing) => {
     setSwitchingId(drawing.id);
+    setSelectedId(null);
     await switchDrawing(drawing.id);
     onDrawingSelect?.(drawing);
     setSwitchingId(null);
@@ -1361,9 +1365,9 @@ var DrawingsDialog = ({
     setEditingId(drawing.id);
     setEditName(drawing.name);
   }, []);
-  const handleSaveEdit = useCallback2(async () => {
+  const handleSaveEdit = useCallback2(() => {
     if (editingId && editName.trim()) {
-      await renameDrawing(editingId, editName.trim());
+      renameDrawing(editingId, editName.trim());
       setEditingId(null);
       setEditName("");
     }
@@ -1372,40 +1376,35 @@ var DrawingsDialog = ({
     setEditingId(null);
     setEditName("");
   }, []);
-  const handleDelete = useCallback2(async (id) => {
-    await removeDrawing(id);
+  const handleDelete = useCallback2((id) => {
+    removeDrawing(id);
     setConfirmDeleteId(null);
   }, [removeDrawing]);
-  const handleCreateFolder = useCallback2(async () => {
+  const handleCreateFolder = useCallback2(() => {
     if (newFolderName.trim()) {
-      setBusyFolderId("__creating__");
-      const folder = await createFolder2(newFolderName.trim());
-      if (folder) {
-        setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
-      }
-      setBusyFolderId(null);
+      createFolder2(newFolderName.trim()).then((folder) => {
+        if (folder) {
+          setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
+        }
+      });
     }
     setCreatingFolder(false);
     setNewFolderName("");
   }, [newFolderName, createFolder2]);
-  const handleSaveFolderEdit = useCallback2(async () => {
+  const handleSaveFolderEdit = useCallback2(() => {
     if (editingFolderId && editFolderName.trim()) {
-      setBusyFolderId(editingFolderId);
-      await renameFolder2(editingFolderId, editFolderName.trim());
-      setBusyFolderId(null);
+      renameFolder2(editingFolderId, editFolderName.trim());
     }
     setEditingFolderId(null);
     setEditFolderName("");
   }, [editingFolderId, editFolderName, renameFolder2]);
-  const handleDeleteFolder = useCallback2(async (id) => {
-    setBusyFolderId(id);
-    await deleteFolder2(id);
-    setBusyFolderId(null);
+  const handleDeleteFolder = useCallback2((id) => {
+    deleteFolder2(id);
     setConfirmDeleteFolderId(null);
   }, [deleteFolder2]);
-  const handleMoveToFolder = useCallback2(async (drawingId, folderId) => {
-    await moveDrawingToFolder2(drawingId, folderId);
+  const handleMoveToFolder = useCallback2((drawingId, folderId) => {
     setMovingDrawingId(null);
+    moveDrawingToFolder2(drawingId, folderId);
   }, [moveDrawingToFolder2]);
   const toggleFolder = useCallback2((folderId) => {
     setExpandedFolders((prev) => {
@@ -1490,6 +1489,10 @@ var DrawingsDialog = ({
         setDropTargetFolderId("__none__");
         setTimeout(() => setDropTargetFolderId(null), 0);
       },
+      onClick: () => {
+        if (editingId || confirmDeleteId || movingDrawingId) return;
+        setSelectedId(drawing.id);
+      },
       style: {
         padding: "10px 12px",
         display: "flex",
@@ -1497,9 +1500,10 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: draggingDrawingId ? "grabbing" : "default",
-        backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent",
-        transition: "background-color 0.15s",
+        cursor: draggingDrawingId ? "grabbing" : "pointer",
+        backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : selectedId === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.06))" : "transparent",
+        border: selectedId === drawing.id && activeDrawing?.id !== drawing.id ? "1px solid var(--color-primary, #6c63ff)" : "1px solid transparent",
+        transition: "background-color 0.15s, border-color 0.15s",
         opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
       },
       children: [
@@ -1750,7 +1754,7 @@ var DrawingsDialog = ({
           },
           children: [
             /* @__PURE__ */ jsx6("span", { style: { fontSize: "12px", width: "16px", textAlign: "center", flexShrink: 0 }, children: isExpanded ? "\u25BC" : "\u25B6" }),
-            /* @__PURE__ */ jsx6("span", { style: { fontSize: "16px", flexShrink: 0 }, children: busyFolderId === folder.id ? /* @__PURE__ */ jsx6("span", { style: { display: "inline-block", animation: "spin 1s linear infinite" }, children: "\u23F3" }) : "\u{1F4C1}" }),
+            /* @__PURE__ */ jsx6("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F4C1}" }),
             /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingFolderId === folder.id ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, onClick: (e) => e.stopPropagation(), children: [
               /* @__PURE__ */ jsx6(
                 "input",
@@ -2002,9 +2006,8 @@ var DrawingsDialog = ({
                 "button",
                 {
                   onClick: handleCreateFolder,
-                  disabled: busyFolderId === "__creating__",
-                  style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer", opacity: busyFolderId === "__creating__" ? 0.6 : 1 },
-                  children: busyFolderId === "__creating__" ? "\u23F3" : t.save
+                  style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
+                  children: t.save
                 }
               ),
               /* @__PURE__ */ jsx6(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rita-workspace",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",