rita-workspace 0.5.2 → 0.5.4

package/dist/index.js

@@ -453,6 +453,54 @@ function isDrawingOpenedEarlierInOtherTab(drawingId) {
     ([tabId, entry]) => tabId !== TAB_ID && entry.drawingId === drawingId && entry.openedAt <= myOpenedAt
   );
 }
+function cleanupStaleTabs() {
+  const tabs = getTabsMap();
+  const otherTabIds = Object.keys(tabs).filter((id) => id !== TAB_ID);
+  if (otherTabIds.length === 0) return;
+  const alive = /* @__PURE__ */ new Set();
+  try {
+    const channel = new BroadcastChannel(TAB_CHANNEL);
+    channel.onmessage = (event) => {
+      if (event.data?.type === "pong" && event.data?.tabId) {
+        alive.add(event.data.tabId);
+      }
+    };
+    channel.postMessage({ type: "ping", tabId: TAB_ID });
+    setTimeout(() => {
+      const currentTabs = getTabsMap();
+      let changed = false;
+      for (const tabId of otherTabIds) {
+        if (!alive.has(tabId) && tabId in currentTabs) {
+          delete currentTabs[tabId];
+          changed = true;
+        }
+      }
+      if (changed) {
+        const json = JSON.stringify(currentTabs);
+        localStorage.setItem(TABS_KEY, json);
+        tabsMapCache = currentTabs;
+        tabsMapRaw = json;
+      }
+      channel.close();
+    }, 500);
+  } catch {
+    const now = Date.now();
+    const maxAge = 24 * 60 * 60 * 1e3;
+    let changed = false;
+    for (const [tabId, entry] of Object.entries(tabs)) {
+      if (tabId !== TAB_ID && entry.openedAt < now - maxAge) {
+        delete tabs[tabId];
+        changed = true;
+      }
+    }
+    if (changed) {
+      const json = JSON.stringify(tabs);
+      localStorage.setItem(TABS_KEY, json);
+      tabsMapCache = tabs;
+      tabsMapRaw = json;
+    }
+  }
+}
 function WorkspaceProvider({ children, lang = "en" }) {
   const [workspace, setWorkspace] = (0, import_react.useState)(null);
   const [drawings, setDrawings] = (0, import_react.useState)([]);
@@ -472,6 +520,16 @@ function WorkspaceProvider({ children, lang = "en" }) {
     }
     prevConflictRef.current = isDrawingConflict;
   }, [isDrawingConflict, activeDrawing?.id]);
+  (0, import_react.useEffect)(() => {
+    cleanupStaleTabs();
+    const timer = setTimeout(() => {
+      const drawingId = activeDrawing?.id;
+      if (drawingId) {
+        setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+      }
+    }, 600);
+    return () => clearTimeout(timer);
+  }, []);
   (0, import_react.useEffect)(() => {
     const drawingId = activeDrawing?.id || null;
     setTabDrawing(drawingId);
@@ -491,6 +549,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
       channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
       channel.onmessage = (event) => {
         if (event.data?.tabId !== TAB_ID) {
+          if (event.data?.type === "ping") {
+            channel?.postMessage({ type: "pong", tabId: TAB_ID });
+          }
           recheckConflict();
         }
       };
@@ -1390,7 +1451,6 @@ var DrawingsDialog = ({
       minute: "2-digit"
     });
   };
-  if (!open) return null;
   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;
@@ -1402,6 +1462,7 @@ var DrawingsDialog = ({
     const foldersFiltered = query ? folders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : folders;
     return { rootDrawings: root, drawingsByFolder: byFolder, filteredFolders: foldersFiltered };
   }, [drawings, folders, searchQuery]);
+  if (!open) return null;
   const dialogStyle = position ? {
     position: "fixed",
     left: position.x,
@@ -1449,10 +1510,6 @@ var DrawingsDialog = ({
         setDropTargetFolderId("__none__");
         setTimeout(() => setDropTargetFolderId(null), 0);
       },
-      onClick: () => {
-        if (editingId || confirmDeleteId || switchingId || movingDrawingId) return;
-        if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
-      },
       style: {
         padding: "10px 12px",
         display: "flex",
@@ -1460,7 +1517,7 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: draggingDrawingId ? "grabbing" : editingId || confirmDeleteId || switchingId ? "default" : "pointer",
+        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",
         opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
@@ -1619,6 +1676,19 @@ var DrawingsDialog = ({
             }
           )
         ] }) : editingId !== drawing.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          activeDrawing?.id !== drawing.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSelect(drawing);
+              },
+              disabled: !!switchingId,
+              style: { padding: "3px 8px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer", opacity: switchingId ? 0.6 : 1 },
+              title: t.open,
+              children: switchingId === drawing.id ? "\u23F3" : t.open
+            }
+          ),
           folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {

package/dist/index.mjs

@@ -385,6 +385,54 @@ function isDrawingOpenedEarlierInOtherTab(drawingId) {
     ([tabId, entry]) => tabId !== TAB_ID && entry.drawingId === drawingId && entry.openedAt <= myOpenedAt
   );
 }
+function cleanupStaleTabs() {
+  const tabs = getTabsMap();
+  const otherTabIds = Object.keys(tabs).filter((id) => id !== TAB_ID);
+  if (otherTabIds.length === 0) return;
+  const alive = /* @__PURE__ */ new Set();
+  try {
+    const channel = new BroadcastChannel(TAB_CHANNEL);
+    channel.onmessage = (event) => {
+      if (event.data?.type === "pong" && event.data?.tabId) {
+        alive.add(event.data.tabId);
+      }
+    };
+    channel.postMessage({ type: "ping", tabId: TAB_ID });
+    setTimeout(() => {
+      const currentTabs = getTabsMap();
+      let changed = false;
+      for (const tabId of otherTabIds) {
+        if (!alive.has(tabId) && tabId in currentTabs) {
+          delete currentTabs[tabId];
+          changed = true;
+        }
+      }
+      if (changed) {
+        const json = JSON.stringify(currentTabs);
+        localStorage.setItem(TABS_KEY, json);
+        tabsMapCache = currentTabs;
+        tabsMapRaw = json;
+      }
+      channel.close();
+    }, 500);
+  } catch {
+    const now = Date.now();
+    const maxAge = 24 * 60 * 60 * 1e3;
+    let changed = false;
+    for (const [tabId, entry] of Object.entries(tabs)) {
+      if (tabId !== TAB_ID && entry.openedAt < now - maxAge) {
+        delete tabs[tabId];
+        changed = true;
+      }
+    }
+    if (changed) {
+      const json = JSON.stringify(tabs);
+      localStorage.setItem(TABS_KEY, json);
+      tabsMapCache = tabs;
+      tabsMapRaw = json;
+    }
+  }
+}
 function WorkspaceProvider({ children, lang = "en" }) {
   const [workspace, setWorkspace] = useState(null);
   const [drawings, setDrawings] = useState([]);
@@ -404,6 +452,16 @@ function WorkspaceProvider({ children, lang = "en" }) {
     }
     prevConflictRef.current = isDrawingConflict;
   }, [isDrawingConflict, activeDrawing?.id]);
+  useEffect(() => {
+    cleanupStaleTabs();
+    const timer = setTimeout(() => {
+      const drawingId = activeDrawing?.id;
+      if (drawingId) {
+        setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+      }
+    }, 600);
+    return () => clearTimeout(timer);
+  }, []);
   useEffect(() => {
     const drawingId = activeDrawing?.id || null;
     setTabDrawing(drawingId);
@@ -423,6 +481,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
       channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
       channel.onmessage = (event) => {
         if (event.data?.tabId !== TAB_ID) {
+          if (event.data?.type === "ping") {
+            channel?.postMessage({ type: "pong", tabId: TAB_ID });
+          }
           recheckConflict();
         }
       };
@@ -1322,7 +1383,6 @@ var DrawingsDialog = ({
       minute: "2-digit"
     });
   };
-  if (!open) return null;
   const { rootDrawings, drawingsByFolder, filteredFolders } = useMemo(() => {
     const query = searchQuery.toLowerCase().trim();
     const filtered = query ? drawings.filter((d) => d.name.toLowerCase().includes(query)) : drawings;
@@ -1334,6 +1394,7 @@ var DrawingsDialog = ({
     const foldersFiltered = query ? folders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : folders;
     return { rootDrawings: root, drawingsByFolder: byFolder, filteredFolders: foldersFiltered };
   }, [drawings, folders, searchQuery]);
+  if (!open) return null;
   const dialogStyle = position ? {
     position: "fixed",
     left: position.x,
@@ -1381,10 +1442,6 @@ var DrawingsDialog = ({
         setDropTargetFolderId("__none__");
         setTimeout(() => setDropTargetFolderId(null), 0);
       },
-      onClick: () => {
-        if (editingId || confirmDeleteId || switchingId || movingDrawingId) return;
-        if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
-      },
       style: {
         padding: "10px 12px",
         display: "flex",
@@ -1392,7 +1449,7 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: draggingDrawingId ? "grabbing" : editingId || confirmDeleteId || switchingId ? "default" : "pointer",
+        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",
         opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
@@ -1551,6 +1608,19 @@ var DrawingsDialog = ({
             }
           )
         ] }) : editingId !== drawing.id && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+          activeDrawing?.id !== drawing.id && /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSelect(drawing);
+              },
+              disabled: !!switchingId,
+              style: { padding: "3px 8px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer", opacity: switchingId ? 0.6 : 1 },
+              title: t.open,
+              children: switchingId === drawing.id ? "\u23F3" : t.open
+            }
+          ),
           folders.length > 0 && /* @__PURE__ */ jsx6(
             "button",
             {

package/package.json

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