rita-workspace 0.5.11 → 0.5.13

package/dist/index.js

@@ -517,8 +517,11 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const id = activeDrawingIdRef.current;
       if (id) {
         getDrawing(id).then((fresh) => {
-          if (fresh && activeDrawingIdRef.current === id) {
-            setActiveDrawing2(fresh);
+          if (fresh && activeDrawingIdRef.current === id && !prevConflictRef.current) {
+            setActiveDrawing2((prev) => {
+              if (!prev || prev.id !== id) return prev;
+              return { ...prev, name: fresh.name, folderId: fresh.folderId };
+            });
           }
         });
       }
@@ -579,11 +582,33 @@ function WorkspaceProvider({ children, lang = "en" }) {
       }
     };
     window.addEventListener("storage", onStorage);
-    const intervalId = setInterval(recheckConflict, 5e3);
+    let intervalId = null;
+    const startPolling = () => {
+      if (!intervalId && drawingId) {
+        intervalId = setInterval(recheckConflict, 5e3);
+      }
+    };
+    const stopPolling = () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        stopPolling();
+      } else {
+        recheckConflict();
+        startPolling();
+      }
+    };
+    if (!document.hidden) startPolling();
+    document.addEventListener("visibilitychange", onVisibilityChange);
     return () => {
       channel?.close();
       window.removeEventListener("storage", onStorage);
-      clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      stopPolling();
     };
   }, [activeDrawing?.id]);
   (0, import_react.useEffect)(() => {
@@ -642,10 +667,12 @@ function WorkspaceProvider({ children, lang = "en" }) {
   const refreshDrawings = (0, import_react.useCallback)(async () => {
     if (!workspace) return;
     try {
-      const allDrawings = await getAllDrawings();
+      const [allDrawings, allFolders] = await Promise.all([
+        getAllDrawings(),
+        getAllFolders()
+      ]);
       const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
       setDrawings(wsDrawings);
-      const allFolders = await getAllFolders();
       setFolders(allFolders);
     } catch (err) {
     }
@@ -1525,10 +1552,11 @@ var DrawingsDialog = ({
   const { rootDrawings, drawingsByFolder, filteredFolders } = (0, import_react5.useMemo)(() => {
     const query = searchQuery.toLowerCase().trim();
     const filtered = query ? drawings.filter((d) => d.name.toLowerCase().includes(query)) : drawings;
-    const root = filtered.filter((d) => !d.folderId);
+    const sorted = [...filtered].sort((a, b) => a.createdAt - b.createdAt);
+    const root = sorted.filter((d) => !d.folderId);
     const byFolder = {};
     for (const folder of folders) {
-      byFolder[folder.id] = filtered.filter((d) => d.folderId === folder.id);
+      byFolder[folder.id] = sorted.filter((d) => d.folderId === folder.id);
     }
     const foldersFiltered = query ? folders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : folders;
     return { rootDrawings: root, drawingsByFolder: byFolder, filteredFolders: foldersFiltered };
@@ -1570,16 +1598,6 @@ var DrawingsDialog = ({
   const renderDrawingRow = (drawing) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
-      draggable: !editingId && !confirmDeleteId,
-      onDragStart: (e) => {
-        setDraggingDrawingId(drawing.id);
-        e.dataTransfer.effectAllowed = "move";
-        e.dataTransfer.setData("text/plain", drawing.id);
-      },
-      onDragEnd: () => {
-        setDraggingDrawingId(null);
-        setDropTargetFolderId(null);
-      },
       onMouseEnter: () => setHoveredId(drawing.id),
       onMouseLeave: () => setHoveredId(null),
       onClick: (e) => {
@@ -1594,13 +1612,40 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: draggingDrawingId ? "grabbing" : "pointer",
+        cursor: "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: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            draggable: !editingId && !confirmDeleteId,
+            onDragStart: (e) => {
+              setDraggingDrawingId(drawing.id);
+              e.dataTransfer.effectAllowed = "move";
+              e.dataTransfer.setData("text/plain", drawing.id);
+            },
+            onDragEnd: () => {
+              setDraggingDrawingId(null);
+              setDropTargetFolderId(null);
+            },
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              cursor: "grab",
+              fontSize: "14px",
+              color: "var(--text-secondary-color, #aaa)",
+              flexShrink: 0,
+              userSelect: "none",
+              padding: "4px 2px",
+              visibility: hoveredId === drawing.id || selectedId === drawing.id || draggingDrawingId === drawing.id ? "visible" : "hidden"
+            },
+            title: t.moveToFolder,
+            children: "\u283F"
+          }
+        ),
         renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
           width: "64px",
           height: "48px",

package/dist/index.mjs

@@ -449,8 +449,11 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const id = activeDrawingIdRef.current;
       if (id) {
         getDrawing(id).then((fresh) => {
-          if (fresh && activeDrawingIdRef.current === id) {
-            setActiveDrawing2(fresh);
+          if (fresh && activeDrawingIdRef.current === id && !prevConflictRef.current) {
+            setActiveDrawing2((prev) => {
+              if (!prev || prev.id !== id) return prev;
+              return { ...prev, name: fresh.name, folderId: fresh.folderId };
+            });
           }
         });
       }
@@ -511,11 +514,33 @@ function WorkspaceProvider({ children, lang = "en" }) {
       }
     };
     window.addEventListener("storage", onStorage);
-    const intervalId = setInterval(recheckConflict, 5e3);
+    let intervalId = null;
+    const startPolling = () => {
+      if (!intervalId && drawingId) {
+        intervalId = setInterval(recheckConflict, 5e3);
+      }
+    };
+    const stopPolling = () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        stopPolling();
+      } else {
+        recheckConflict();
+        startPolling();
+      }
+    };
+    if (!document.hidden) startPolling();
+    document.addEventListener("visibilitychange", onVisibilityChange);
     return () => {
       channel?.close();
       window.removeEventListener("storage", onStorage);
-      clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      stopPolling();
     };
   }, [activeDrawing?.id]);
   useEffect(() => {
@@ -574,10 +599,12 @@ function WorkspaceProvider({ children, lang = "en" }) {
   const refreshDrawings = useCallback(async () => {
     if (!workspace) return;
     try {
-      const allDrawings = await getAllDrawings();
+      const [allDrawings, allFolders] = await Promise.all([
+        getAllDrawings(),
+        getAllFolders()
+      ]);
       const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
       setDrawings(wsDrawings);
-      const allFolders = await getAllFolders();
       setFolders(allFolders);
     } catch (err) {
     }
@@ -1457,10 +1484,11 @@ var DrawingsDialog = ({
   const { rootDrawings, drawingsByFolder, filteredFolders } = useMemo(() => {
     const query = searchQuery.toLowerCase().trim();
     const filtered = query ? drawings.filter((d) => d.name.toLowerCase().includes(query)) : drawings;
-    const root = filtered.filter((d) => !d.folderId);
+    const sorted = [...filtered].sort((a, b) => a.createdAt - b.createdAt);
+    const root = sorted.filter((d) => !d.folderId);
     const byFolder = {};
     for (const folder of folders) {
-      byFolder[folder.id] = filtered.filter((d) => d.folderId === folder.id);
+      byFolder[folder.id] = sorted.filter((d) => d.folderId === folder.id);
     }
     const foldersFiltered = query ? folders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : folders;
     return { rootDrawings: root, drawingsByFolder: byFolder, filteredFolders: foldersFiltered };
@@ -1502,16 +1530,6 @@ var DrawingsDialog = ({
   const renderDrawingRow = (drawing) => /* @__PURE__ */ jsxs4(
     "div",
     {
-      draggable: !editingId && !confirmDeleteId,
-      onDragStart: (e) => {
-        setDraggingDrawingId(drawing.id);
-        e.dataTransfer.effectAllowed = "move";
-        e.dataTransfer.setData("text/plain", drawing.id);
-      },
-      onDragEnd: () => {
-        setDraggingDrawingId(null);
-        setDropTargetFolderId(null);
-      },
       onMouseEnter: () => setHoveredId(drawing.id),
       onMouseLeave: () => setHoveredId(null),
       onClick: (e) => {
@@ -1526,13 +1544,40 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: draggingDrawingId ? "grabbing" : "pointer",
+        cursor: "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: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            draggable: !editingId && !confirmDeleteId,
+            onDragStart: (e) => {
+              setDraggingDrawingId(drawing.id);
+              e.dataTransfer.effectAllowed = "move";
+              e.dataTransfer.setData("text/plain", drawing.id);
+            },
+            onDragEnd: () => {
+              setDraggingDrawingId(null);
+              setDropTargetFolderId(null);
+            },
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              cursor: "grab",
+              fontSize: "14px",
+              color: "var(--text-secondary-color, #aaa)",
+              flexShrink: 0,
+              userSelect: "none",
+              padding: "4px 2px",
+              visibility: hoveredId === drawing.id || selectedId === drawing.id || draggingDrawingId === drawing.id ? "visible" : "hidden"
+            },
+            title: t.moveToFolder,
+            children: "\u283F"
+          }
+        ),
         renderThumbnail && /* @__PURE__ */ jsx6("div", { style: {
           width: "64px",
           height: "48px",

package/package.json

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