rita-workspace 0.5.14 → 0.5.16

package/dist/index.d.mts

@@ -116,6 +116,8 @@ interface Translations {
     moveToFolder: string;
     moveToRoot: string;
     newFolderName: string;
+    backupReminder: string;
+    days: string;
     shortcutNewDrawing: string;
 }
 declare function getTranslations(langCode?: string): Translations;

package/dist/index.d.ts

@@ -116,6 +116,8 @@ interface Translations {
     moveToFolder: string;
     moveToRoot: string;
     newFolderName: string;
+    backupReminder: string;
+    days: string;
     shortcutNewDrawing: string;
 }
 declare function getTranslations(langCode?: string): Translations;

package/dist/index.js

@@ -318,6 +318,9 @@ var sv = {
   moveToFolder: "Flytta till mapp",
   moveToRoot: "Ingen mapp",
   newFolderName: "Ny mapp",
+  // Backup reminder
+  backupReminder: "Senaste backup:",
+  days: "dagar sedan",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -365,6 +368,9 @@ var en = {
   moveToFolder: "Move to folder",
   moveToRoot: "No folder",
   newFolderName: "New folder",
+  // Backup reminder
+  backupReminder: "Last backup:",
+  days: "days ago",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -1430,14 +1436,18 @@ var DrawingsDialog = ({
   foldersRef.current = folders;
   (0, import_react5.useEffect)(() => {
     if (open) {
-      setIsRefreshing(true);
-      refreshDrawings().finally(() => setIsRefreshing(false));
-      if (!prevOpenRef.current) {
+      const isFirstOpen = !prevOpenRef.current;
+      if (isFirstOpen) {
         setPosition(null);
         setSearchQuery("");
         setSelectedId(null);
-        setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
       }
+      setIsRefreshing(true);
+      refreshDrawings().then(() => {
+        if (isFirstOpen) {
+          setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
+        }
+      }).finally(() => setIsRefreshing(false));
     }
     prevOpenRef.current = open;
   }, [open, refreshDrawings]);
@@ -1549,6 +1559,11 @@ var DrawingsDialog = ({
       minute: "2-digit"
     });
   };
+  const daysSinceBackup = (0, import_react5.useMemo)(() => {
+    const lastBackup = localStorage.getItem("rita-workspace-last-backup");
+    if (!lastBackup) return drawings.length > 0 ? 999 : null;
+    return Math.floor((Date.now() - parseInt(lastBackup, 10)) / (1e3 * 60 * 60 * 24));
+  }, [drawings.length, open]);
   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;
@@ -1598,6 +1613,16 @@ 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) => {
@@ -1612,40 +1637,13 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: "pointer",
+        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: [
-        /* @__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",
@@ -2135,8 +2133,7 @@ var DrawingsDialog = ({
                     icon: "\u{1F4C4}",
                     label: t.createNewDrawing,
                     description: t.createNewDrawingDesc,
-                    onClick: () => handleCreate(),
-                    primary: true
+                    onClick: () => handleCreate()
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2204,6 +2201,7 @@ var DrawingsDialog = ({
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
+              daysSinceBackup !== null && daysSinceBackup >= 7 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "0 20px 8px", fontSize: "12px", color: "var(--text-secondary-color, #888)" }, children: daysSinceBackup >= 30 ? `\u26A0\uFE0F ${t.backupReminder || "Ingen backup p\xE5"} ${daysSinceBackup} ${t.days || "dagar"}` : `${t.backupReminder || "Senaste backup:"} ${daysSinceBackup} ${t.days || "dagar sedan"}` }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   ActionButton,
@@ -2211,7 +2209,10 @@ var DrawingsDialog = ({
                     icon: "\u{1F4BE}",
                     label: t.saveAllBackup,
                     description: t.saveAllBackupDesc,
-                    onClick: exportWorkspace
+                    onClick: () => {
+                      localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
+                      exportWorkspace();
+                    }
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(

package/dist/index.mjs

@@ -250,6 +250,9 @@ var sv = {
   moveToFolder: "Flytta till mapp",
   moveToRoot: "Ingen mapp",
   newFolderName: "Ny mapp",
+  // Backup reminder
+  backupReminder: "Senaste backup:",
+  days: "dagar sedan",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -297,6 +300,9 @@ var en = {
   moveToFolder: "Move to folder",
   moveToRoot: "No folder",
   newFolderName: "New folder",
+  // Backup reminder
+  backupReminder: "Last backup:",
+  days: "days ago",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -1362,14 +1368,18 @@ var DrawingsDialog = ({
   foldersRef.current = folders;
   useEffect3(() => {
     if (open) {
-      setIsRefreshing(true);
-      refreshDrawings().finally(() => setIsRefreshing(false));
-      if (!prevOpenRef.current) {
+      const isFirstOpen = !prevOpenRef.current;
+      if (isFirstOpen) {
         setPosition(null);
         setSearchQuery("");
         setSelectedId(null);
-        setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
       }
+      setIsRefreshing(true);
+      refreshDrawings().then(() => {
+        if (isFirstOpen) {
+          setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
+        }
+      }).finally(() => setIsRefreshing(false));
     }
     prevOpenRef.current = open;
   }, [open, refreshDrawings]);
@@ -1481,6 +1491,11 @@ var DrawingsDialog = ({
       minute: "2-digit"
     });
   };
+  const daysSinceBackup = useMemo(() => {
+    const lastBackup = localStorage.getItem("rita-workspace-last-backup");
+    if (!lastBackup) return drawings.length > 0 ? 999 : null;
+    return Math.floor((Date.now() - parseInt(lastBackup, 10)) / (1e3 * 60 * 60 * 24));
+  }, [drawings.length, open]);
   const { rootDrawings, drawingsByFolder, filteredFolders } = useMemo(() => {
     const query = searchQuery.toLowerCase().trim();
     const filtered = query ? drawings.filter((d) => d.name.toLowerCase().includes(query)) : drawings;
@@ -1530,6 +1545,16 @@ 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) => {
@@ -1544,40 +1569,13 @@ var DrawingsDialog = ({
         gap: "12px",
         borderRadius: "8px",
         marginBottom: "4px",
-        cursor: "pointer",
+        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: [
-        /* @__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",
@@ -2067,8 +2065,7 @@ var DrawingsDialog = ({
                     icon: "\u{1F4C4}",
                     label: t.createNewDrawing,
                     description: t.createNewDrawingDesc,
-                    onClick: () => handleCreate(),
-                    primary: true
+                    onClick: () => handleCreate()
                   }
                 ),
                 /* @__PURE__ */ jsx6(
@@ -2136,6 +2133,7 @@ var DrawingsDialog = ({
                 )
               ] }),
               /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
+              daysSinceBackup !== null && daysSinceBackup >= 7 && /* @__PURE__ */ jsx6("div", { style: { padding: "0 20px 8px", fontSize: "12px", color: "var(--text-secondary-color, #888)" }, children: daysSinceBackup >= 30 ? `\u26A0\uFE0F ${t.backupReminder || "Ingen backup p\xE5"} ${daysSinceBackup} ${t.days || "dagar"}` : `${t.backupReminder || "Senaste backup:"} ${daysSinceBackup} ${t.days || "dagar sedan"}` }),
               /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
                 /* @__PURE__ */ jsx6(
                   ActionButton,
@@ -2143,7 +2141,10 @@ var DrawingsDialog = ({
                     icon: "\u{1F4BE}",
                     label: t.saveAllBackup,
                     description: t.saveAllBackupDesc,
-                    onClick: exportWorkspace
+                    onClick: () => {
+                      localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
+                      exportWorkspace();
+                    }
                   }
                 ),
                 /* @__PURE__ */ jsx6(

package/package.json

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