rita-workspace 0.5.0 → 0.5.1

package/dist/index.js

@@ -41,16 +41,22 @@ __export(index_exports, {
   addDrawingToWorkspace: () => addDrawingToWorkspace,
   closeDB: () => closeDB,
   createDrawing: () => createDrawing,
+  createFolder: () => createFolder,
   deleteDrawing: () => deleteDrawing,
+  deleteFolder: () => deleteFolder,
   duplicateDrawing: () => duplicateDrawing,
   getAllDrawings: () => getAllDrawings,
+  getAllFolders: () => getAllFolders,
   getDB: () => getDB,
   getDrawing: () => getDrawing,
+  getFolder: () => getFolder,
   getOrCreateDefaultWorkspace: () => getOrCreateDefaultWorkspace,
   getTranslations: () => getTranslations,
   getWorkspace: () => getWorkspace,
   isLanguageSupported: () => isLanguageSupported,
+  moveDrawingToFolder: () => moveDrawingToFolder,
   removeDrawingFromWorkspace: () => removeDrawingFromWorkspace,
+  renameFolder: () => renameFolder,
   setActiveDrawing: () => setActiveDrawing,
   updateDrawing: () => updateDrawing,
   updateWorkspace: () => updateWorkspace,
@@ -63,12 +69,12 @@ module.exports = __toCommonJS(index_exports);
 // src/storage/db.ts
 var import_idb = require("idb");
 var DB_NAME = "rita-workspace";
-var DB_VERSION = 1;
+var DB_VERSION = 2;
 var dbInstance = null;
 async function getDB() {
   if (dbInstance) return dbInstance;
   dbInstance = await (0, import_idb.openDB)(DB_NAME, DB_VERSION, {
-    upgrade(db) {
+    upgrade(db, oldVersion) {
       if (!db.objectStoreNames.contains("workspaces")) {
         const workspaceStore = db.createObjectStore("workspaces", { keyPath: "id" });
         workspaceStore.createIndex("by-updated", "updatedAt");
@@ -77,6 +83,10 @@ async function getDB() {
         const drawingStore = db.createObjectStore("drawings", { keyPath: "id" });
         drawingStore.createIndex("by-updated", "updatedAt");
       }
+      if (oldVersion < 2) {
+        const folderStore = db.createObjectStore("folders", { keyPath: "id" });
+        folderStore.createIndex("by-name", "name");
+      }
     }
   });
   return dbInstance;
@@ -90,12 +100,13 @@ async function closeDB() {
 
 // src/storage/drawingStore.ts
 var import_nanoid = require("nanoid");
-async function createDrawing(name = "Untitled", elements = [], appState = {}) {
+async function createDrawing(name = "Untitled", elements = [], appState = {}, folderId) {
   const db = await getDB();
   const now = Date.now();
   const drawing = {
     id: (0, import_nanoid.nanoid)(),
     name,
+    folderId: folderId || null,
     elements,
     appState,
     files: {},
@@ -138,9 +149,62 @@ async function duplicateDrawing(id, newName) {
   return createDrawing(
     newName || `${existing.name} (copy)`,
     existing.elements,
-    existing.appState
+    existing.appState,
+    existing.folderId
   );
 }
+async function moveDrawingToFolder(drawingId, folderId) {
+  return updateDrawing(drawingId, { folderId });
+}
+
+// src/storage/folderStore.ts
+var import_nanoid2 = require("nanoid");
+async function createFolder(name) {
+  const db = await getDB();
+  const now = Date.now();
+  const folder = {
+    id: (0, import_nanoid2.nanoid)(),
+    name,
+    createdAt: now,
+    updatedAt: now
+  };
+  await db.put("folders", folder);
+  return folder;
+}
+async function getFolder(id) {
+  const db = await getDB();
+  return db.get("folders", id);
+}
+async function getAllFolders() {
+  const db = await getDB();
+  return db.getAllFromIndex("folders", "by-name");
+}
+async function renameFolder(id, name) {
+  const db = await getDB();
+  const existing = await db.get("folders", id);
+  if (!existing) return void 0;
+  const updated = {
+    ...existing,
+    name,
+    updatedAt: Date.now()
+  };
+  await db.put("folders", updated);
+  return updated;
+}
+async function deleteFolder(id) {
+  const db = await getDB();
+  const allDrawings = await db.getAll("drawings");
+  const tx = db.transaction(["drawings", "folders"], "readwrite");
+  for (const drawing of allDrawings) {
+    if (drawing.folderId === id) {
+      drawing.folderId = null;
+      drawing.updatedAt = Date.now();
+      await tx.objectStore("drawings").put(drawing);
+    }
+  }
+  await tx.objectStore("folders").delete(id);
+  await tx.done;
+}
 
 // src/storage/workspaceStore.ts
 var DEFAULT_WORKSPACE_ID = "default";
@@ -246,6 +310,14 @@ var sv = {
   importWorkspace: "Importera arbetsyta",
   exportDrawing: "Spara som .excalidraw",
   importDrawing: "\xD6ppna .excalidraw",
+  // Folders
+  createFolder: "Skapa mapp",
+  renameFolder: "Byt namn p\xE5 mapp",
+  deleteFolder: "Ta bort mapp",
+  deleteFolderConfirm: "Vill du ta bort denna mapp? Ritningarna flyttas till rotniv\xE5n.",
+  moveToFolder: "Flytta till mapp",
+  moveToRoot: "Ingen mapp",
+  newFolderName: "Ny mapp",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -285,6 +357,14 @@ var en = {
   importWorkspace: "Import workspace",
   exportDrawing: "Save as .excalidraw",
   importDrawing: "Open .excalidraw",
+  // Folders
+  createFolder: "Create folder",
+  renameFolder: "Rename folder",
+  deleteFolder: "Delete folder",
+  deleteFolderConfirm: "Delete this folder? Drawings will be moved to root.",
+  moveToFolder: "Move to folder",
+  moveToRoot: "No folder",
+  newFolderName: "New folder",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -367,6 +447,7 @@ function isDrawingOpenedEarlierInOtherTab(drawingId) {
 function WorkspaceProvider({ children, lang = "en" }) {
   const [workspace, setWorkspace] = (0, import_react.useState)(null);
   const [drawings, setDrawings] = (0, import_react.useState)([]);
+  const [folders, setFolders] = (0, import_react.useState)([]);
   const [activeDrawing, setActiveDrawing2] = (0, import_react.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [error, setError] = (0, import_react.useState)(null);
@@ -442,6 +523,8 @@ function WorkspaceProvider({ children, lang = "en" }) {
         const allDrawings = await getAllDrawings();
         const wsDrawings = allDrawings.filter((d) => ws.drawingIds.includes(d.id));
         setDrawings(wsDrawings);
+        const allFolders = await getAllFolders();
+        setFolders(allFolders);
         const lastDrawingId = sessionStorage.getItem("rita-workspace-tab-drawing");
         let active = null;
         if (lastDrawingId) {
@@ -474,14 +557,16 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const allDrawings = await getAllDrawings();
       const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
       setDrawings(wsDrawings);
+      const allFolders = await getAllFolders();
+      setFolders(allFolders);
     } catch (err) {
     }
   }, [workspace]);
-  const createNewDrawing = (0, import_react.useCallback)(async (name) => {
+  const createNewDrawing = (0, import_react.useCallback)(async (name, folderId) => {
     if (!workspace) return null;
     try {
       const defaultName = `${t.newDrawing} ${drawings.length + 1}`;
-      const drawing = await createDrawing(name || defaultName);
+      const drawing = await createDrawing(name || defaultName, [], {}, folderId);
       await addDrawingToWorkspace(workspace.id, drawing.id);
       setDrawings((prev) => [...prev, drawing]);
       setActiveDrawing2(drawing);
@@ -714,9 +799,52 @@ function WorkspaceProvider({ children, lang = "en" }) {
       setError(err instanceof Error ? err.message : "Failed to import drawing");
     }
   }, [workspace, t]);
+  const createFolder2 = (0, import_react.useCallback)(async (name) => {
+    try {
+      const folder = await createFolder(name);
+      setFolders((prev) => [...prev, folder]);
+      return folder;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create folder");
+      return null;
+    }
+  }, []);
+  const renameFolder2 = (0, import_react.useCallback)(async (id, name) => {
+    try {
+      const updated = await renameFolder(id, name);
+      if (updated) {
+        setFolders((prev) => prev.map((f) => f.id === id ? updated : f));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to rename folder");
+    }
+  }, []);
+  const deleteFolder2 = (0, import_react.useCallback)(async (id) => {
+    try {
+      await deleteFolder(id);
+      setFolders((prev) => prev.filter((f) => f.id !== id));
+      setDrawings((prev) => prev.map((d) => d.folderId === id ? { ...d, folderId: null } : d));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete folder");
+    }
+  }, []);
+  const moveDrawingToFolder2 = (0, import_react.useCallback)(async (drawingId, folderId) => {
+    try {
+      const updated = await moveDrawingToFolder(drawingId, folderId);
+      if (updated) {
+        setDrawings((prev) => prev.map((d) => d.id === drawingId ? updated : d));
+        if (activeDrawing?.id === drawingId) {
+          setActiveDrawing2(updated);
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to move drawing");
+    }
+  }, [activeDrawing]);
   const value = {
     workspace,
     drawings,
+    folders,
     activeDrawing,
     isLoading,
     error,
@@ -728,6 +856,10 @@ function WorkspaceProvider({ children, lang = "en" }) {
     renameDrawing,
     removeDrawing,
     duplicateCurrentDrawing,
+    createFolder: createFolder2,
+    renameFolder: renameFolder2,
+    deleteFolder: deleteFolder2,
+    moveDrawingToFolder: moveDrawingToFolder2,
     saveCurrentDrawing,
     saveDrawingById,
     refreshDrawings,
@@ -1081,11 +1213,16 @@ var DrawingsDialog = ({
 }) => {
   const {
     drawings,
+    folders,
     activeDrawing,
     switchDrawing,
     createNewDrawing,
     renameDrawing,
     removeDrawing,
+    createFolder: createFolder2,
+    renameFolder: renameFolder2,
+    deleteFolder: deleteFolder2,
+    moveDrawingToFolder: moveDrawingToFolder2,
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
@@ -1099,21 +1236,39 @@ var DrawingsDialog = ({
   const [editingId, setEditingId] = (0, import_react5.useState)(null);
   const [editName, setEditName] = (0, import_react5.useState)("");
   const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
+  const [switchingId, setSwitchingId] = (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)("");
+  const [editingFolderId, setEditingFolderId] = (0, import_react5.useState)(null);
+  const [editFolderName, setEditFolderName] = (0, import_react5.useState)("");
+  const [confirmDeleteFolderId, setConfirmDeleteFolderId] = (0, import_react5.useState)(null);
+  const [movingDrawingId, setMovingDrawingId] = (0, import_react5.useState)(null);
+  const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
   const [position, setPosition] = (0, import_react5.useState)(null);
   const dragRef = (0, import_react5.useRef)(null);
   const dialogRef = (0, import_react5.useRef)(null);
+  const newFolderInputRef = (0, import_react5.useRef)(null);
   const prevOpenRef = (0, import_react5.useRef)(false);
   (0, import_react5.useEffect)(() => {
     if (open) {
       refreshDrawings();
       if (!prevOpenRef.current) {
         setPosition(null);
+        setSearchQuery("");
+        setExpandedFolders(new Set(folders.map((f) => f.id)));
       }
     }
     prevOpenRef.current = open;
-  }, [open, refreshDrawings]);
+  }, [open, refreshDrawings, folders]);
+  (0, import_react5.useEffect)(() => {
+    if (creatingFolder && newFolderInputRef.current) {
+      newFolderInputRef.current.focus();
+    }
+  }, [creatingFolder]);
   const handleMouseDown = (0, import_react5.useCallback)((e) => {
     if (e.target.closest("button")) return;
+    if (e.target.closest("input")) return;
     if (!dialogRef.current) return;
     const rect = dialogRef.current.getBoundingClientRect();
     const currentX = position?.x ?? rect.left;
@@ -1134,11 +1289,13 @@ var DrawingsDialog = ({
     document.addEventListener("mouseup", handleMouseUp);
   }, [position]);
   const handleSelect = (0, import_react5.useCallback)(async (drawing) => {
+    setSwitchingId(drawing.id);
     await switchDrawing(drawing.id);
     onDrawingSelect?.(drawing);
+    setSwitchingId(null);
   }, [switchDrawing, onDrawingSelect]);
-  const handleCreate = (0, import_react5.useCallback)(async () => {
-    const newDrawing = await createNewDrawing();
+  const handleCreate = (0, import_react5.useCallback)(async (folderId) => {
+    const newDrawing = await createNewDrawing(void 0, folderId);
     if (newDrawing) onDrawingSelect?.(newDrawing);
   }, [createNewDrawing, onDrawingSelect]);
   const handleStartEdit = (0, import_react5.useCallback)((drawing) => {
@@ -1160,6 +1317,42 @@ var DrawingsDialog = ({
     await removeDrawing(id);
     setConfirmDeleteId(null);
   }, [removeDrawing]);
+  const handleCreateFolder = (0, import_react5.useCallback)(async () => {
+    if (newFolderName.trim()) {
+      const folder = await createFolder2(newFolderName.trim());
+      if (folder) {
+        setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
+      }
+    }
+    setCreatingFolder(false);
+    setNewFolderName("");
+  }, [newFolderName, createFolder2]);
+  const handleSaveFolderEdit = (0, import_react5.useCallback)(async () => {
+    if (editingFolderId && editFolderName.trim()) {
+      await renameFolder2(editingFolderId, editFolderName.trim());
+    }
+    setEditingFolderId(null);
+    setEditFolderName("");
+  }, [editingFolderId, editFolderName, renameFolder2]);
+  const handleDeleteFolder = (0, import_react5.useCallback)(async (id) => {
+    await deleteFolder2(id);
+    setConfirmDeleteFolderId(null);
+  }, [deleteFolder2]);
+  const handleMoveToFolder = (0, import_react5.useCallback)(async (drawingId, folderId) => {
+    await moveDrawingToFolder2(drawingId, folderId);
+    setMovingDrawingId(null);
+  }, [moveDrawingToFolder2]);
+  const toggleFolder = (0, import_react5.useCallback)((folderId) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(folderId)) {
+        next.delete(folderId);
+      } else {
+        next.add(folderId);
+      }
+      return next;
+    });
+  }, []);
   const getLocale = () => {
     if (!effectiveLang) return "en-US";
     const baseLang = effectiveLang.split("-")[0].toLowerCase();
@@ -1174,6 +1367,14 @@ var DrawingsDialog = ({
     });
   };
   if (!open) return null;
+  const query = searchQuery.toLowerCase().trim();
+  const filteredDrawings = query ? drawings.filter((d) => d.name.toLowerCase().includes(query)) : drawings;
+  const rootDrawings = filteredDrawings.filter((d) => !d.folderId);
+  const drawingsByFolder = {};
+  for (const folder of folders) {
+    drawingsByFolder[folder.id] = filteredDrawings.filter((d) => d.folderId === folder.id);
+  }
+  const filteredFolders = query ? folders.filter((f) => f.name.toLowerCase().includes(query) || (drawingsByFolder[f.id] || []).length > 0) : folders;
   const dialogStyle = position ? {
     position: "fixed",
     left: position.x,
@@ -1207,6 +1408,324 @@ var DrawingsDialog = ({
     color: "var(--text-secondary-color, #888)",
     padding: "16px 20px 8px"
   };
+  const renderDrawingRow = (drawing) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      onClick: () => {
+        if (editingId || confirmDeleteId || switchingId || movingDrawingId) return;
+        if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
+      },
+      style: {
+        padding: "10px 12px",
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        borderRadius: "8px",
+        marginBottom: "4px",
+        cursor: editingId || confirmDeleteId || switchingId ? "default" : "pointer",
+        backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent",
+        transition: "background-color 0.15s",
+        opacity: switchingId && switchingId !== drawing.id ? 0.5 : 1
+      },
+      children: [
+        renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          width: "64px",
+          height: "48px",
+          flexShrink: 0,
+          borderRadius: "4px",
+          overflow: "hidden",
+          border: "1px solid var(--default-border-color, #e0e0e0)",
+          backgroundColor: "#fff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }, children: renderThumbnail(drawing) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "text",
+              value: editName,
+              onChange: (e) => setEditName(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleSaveEdit();
+                if (e.key === "Escape") handleCancelEdit();
+              },
+              onClick: (e) => e.stopPropagation(),
+              autoFocus: true,
+              style: {
+                flex: 1,
+                padding: "4px 8px",
+                fontSize: "14px",
+                border: "1px solid var(--color-primary, #6c63ff)",
+                borderRadius: "4px",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSaveEdit();
+              },
+              style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
+              children: t.save
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleCancelEdit();
+              },
+              style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
+              children: t.cancel
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "span",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleStartEdit(drawing);
+                },
+                style: {
+                  fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
+                  fontSize: "14px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  cursor: "text"
+                },
+                title: t.rename,
+                children: [
+                  switchingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "inline-block", animation: "spin 1s linear infinite", marginRight: "4px" }, children: "\u23F3" }) : activeDrawing?.id === drawing.id ? "\u2713 " : "",
+                  drawing.name
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleStartEdit(drawing);
+                },
+                style: { background: "none", border: "none", cursor: "pointer", padding: "0 2px", fontSize: "12px", opacity: 0.4, flexShrink: 0 },
+                title: t.rename,
+                children: "\u270F\uFE0F"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: "11px", color: "var(--text-secondary-color, #888)", marginTop: "1px" }, children: [
+            t.modified,
+            ": ",
+            formatDate(drawing.updatedAt)
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: "2px", alignItems: "center" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleDelete(drawing.id);
+              },
+              style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
+              children: t.delete
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setConfirmDeleteId(null);
+              },
+              style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
+              children: t.cancel
+            }
+          )
+        ] }) : movingDrawingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "12px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: () => handleMoveToFolder(drawing.id, null),
+              style: { padding: "3px 8px", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", backgroundColor: !drawing.folderId ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent", color: "inherit", textAlign: "left" },
+              children: t.moveToRoot
+            }
+          ),
+          folders.map((folder) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "button",
+            {
+              onClick: () => handleMoveToFolder(drawing.id, folder.id),
+              style: { padding: "3px 8px", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", backgroundColor: drawing.folderId === folder.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent", color: "inherit", textAlign: "left" },
+              children: [
+                "\u{1F4C1} ",
+                folder.name
+              ]
+            },
+            folder.id
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: () => setMovingDrawingId(null),
+              style: { padding: "3px 8px", border: "none", cursor: "pointer", backgroundColor: "transparent", color: "var(--text-secondary-color, #888)", textAlign: "left" },
+              children: t.cancel
+            }
+          )
+        ] }) : editingId !== drawing.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setMovingDrawingId(drawing.id);
+              },
+              style: { background: "none", border: "none", cursor: "pointer", padding: "4px", fontSize: "14px", opacity: 0.5 },
+              title: t.moveToFolder,
+              children: "\u{1F4C1}"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                exportDrawingAsExcalidraw(drawing.id);
+              },
+              style: { background: "none", border: "none", cursor: "pointer", padding: "4px", fontSize: "14px", opacity: 0.5 },
+              title: t.exportDrawing,
+              children: "\u{1F4BE}"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setConfirmDeleteId(drawing.id);
+              },
+              style: { background: "none", border: "none", cursor: "pointer", padding: "4px", fontSize: "14px", opacity: 0.5 },
+              title: t.delete,
+              disabled: drawings.length <= 1,
+              children: "\u{1F5D1}\uFE0F"
+            }
+          )
+        ] }) })
+      ]
+    },
+    drawing.id
+  );
+  const renderFolderGroup = (folder) => {
+    const folderDrawings = drawingsByFolder[folder.id] || [];
+    const isExpanded = expandedFolders.has(folder.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "div",
+        {
+          onClick: () => toggleFolder(folder.id),
+          style: {
+            padding: "8px 12px",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            borderRadius: "8px",
+            cursor: "pointer",
+            backgroundColor: "var(--color-surface-mid, rgba(0, 0, 0, 0.03))"
+          },
+          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: "\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",
+                {
+                  type: "text",
+                  value: editFolderName,
+                  onChange: (e) => setEditFolderName(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") handleSaveFolderEdit();
+                    if (e.key === "Escape") {
+                      setEditingFolderId(null);
+                      setEditFolderName("");
+                    }
+                  },
+                  autoFocus: true,
+                  style: { flex: 1, padding: "2px 6px", fontSize: "14px", border: "1px solid var(--color-primary, #6c63ff)", borderRadius: "4px", outline: "none" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: handleSaveFolderEdit,
+                  style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
+                  children: t.save
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontWeight: 600, fontSize: "14px" }, children: [
+              folder.name,
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontWeight: 400, fontSize: "12px", color: "var(--text-secondary-color, #888)", marginLeft: "6px" }, children: [
+                "(",
+                folderDrawings.length,
+                ")"
+              ] })
+            ] }) }),
+            confirmDeleteFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: () => handleDeleteFolder(folder.id),
+                  style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
+                  children: t.delete
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: () => setConfirmDeleteFolderId(null),
+                  style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
+                  children: t.cancel
+                }
+              )
+            ] }) : editingFolderId !== folder.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: () => {
+                    setEditingFolderId(folder.id);
+                    setEditFolderName(folder.name);
+                  },
+                  style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
+                  title: t.renameFolder,
+                  children: "\u270F\uFE0F"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: () => setConfirmDeleteFolderId(folder.id),
+                  style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
+                  title: t.deleteFolder,
+                  children: "\u{1F5D1}\uFE0F"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { paddingLeft: "24px", marginTop: "2px" }, children: [
+        folderDrawings.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 12px", fontSize: "12px", color: "var(--text-secondary-color, #888)", fontStyle: "italic" }, children: t.noDrawingsYet }),
+        folderDrawings.map(renderDrawingRow)
+      ] })
+    ] }, folder.id);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -1262,181 +1781,32 @@ var DrawingsDialog = ({
             ]
           }
         ),
+        drawings.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 20px", borderBottom: "1px solid var(--default-border-color, #e0e0e0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            type: "text",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: "\u{1F50D}",
+            style: {
+              width: "100%",
+              padding: "6px 12px",
+              fontSize: "14px",
+              border: "1px solid var(--default-border-color, #e0e0e0)",
+              borderRadius: "6px",
+              outline: "none",
+              backgroundColor: "transparent",
+              color: "inherit",
+              boxSizing: "border-box"
+            }
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
-          drawings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 20px 0" }, children: drawings.map((drawing) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-            "div",
-            {
-              onClick: () => {
-                if (editingId || confirmDeleteId) return;
-                if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
-              },
-              style: {
-                padding: "10px 12px",
-                display: "flex",
-                alignItems: "center",
-                gap: "12px",
-                borderRadius: "8px",
-                marginBottom: "4px",
-                cursor: editingId || confirmDeleteId ? "default" : "pointer",
-                backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent",
-                transition: "background-color 0.15s"
-              },
-              children: [
-                renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
-                  width: "64px",
-                  height: "48px",
-                  flexShrink: 0,
-                  borderRadius: "4px",
-                  overflow: "hidden",
-                  border: "1px solid var(--default-border-color, #e0e0e0)",
-                  backgroundColor: "#fff",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                }, children: renderThumbnail(drawing) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    "input",
-                    {
-                      type: "text",
-                      value: editName,
-                      onChange: (e) => setEditName(e.target.value),
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter") handleSaveEdit();
-                        if (e.key === "Escape") handleCancelEdit();
-                      },
-                      onClick: (e) => e.stopPropagation(),
-                      autoFocus: true,
-                      style: {
-                        flex: 1,
-                        padding: "4px 8px",
-                        fontSize: "14px",
-                        border: "1px solid var(--color-primary, #6c63ff)",
-                        borderRadius: "4px",
-                        outline: "none"
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleSaveEdit();
-                      },
-                      style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
-                      children: t.save
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleCancelEdit();
-                      },
-                      style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
-                      children: t.cancel
-                    }
-                  )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                      "span",
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleStartEdit(drawing);
-                        },
-                        style: {
-                          fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
-                          fontSize: "14px",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap",
-                          cursor: "text"
-                        },
-                        title: t.rename,
-                        children: [
-                          activeDrawing?.id === drawing.id && "\u2713 ",
-                          drawing.name
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                      "button",
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleStartEdit(drawing);
-                        },
-                        style: { background: "none", border: "none", cursor: "pointer", padding: "0 2px", fontSize: "12px", opacity: 0.4, flexShrink: 0 },
-                        title: t.rename,
-                        children: "\u270F\uFE0F"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: "11px", color: "var(--text-secondary-color, #888)", marginTop: "1px" }, children: [
-                    t.modified,
-                    ": ",
-                    formatDate(drawing.updatedAt)
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: "2px" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleDelete(drawing.id);
-                      },
-                      style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
-                      children: t.delete
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setConfirmDeleteId(null);
-                      },
-                      style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
-                      children: t.cancel
-                    }
-                  )
-                ] }) : editingId !== drawing.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        exportDrawingAsExcalidraw(drawing.id);
-                      },
-                      style: { background: "none", border: "none", cursor: "pointer", padding: "4px", fontSize: "14px", opacity: 0.5 },
-                      title: t.exportDrawing,
-                      children: "\u{1F4BE}"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setConfirmDeleteId(drawing.id);
-                      },
-                      style: { background: "none", border: "none", cursor: "pointer", padding: "4px", fontSize: "14px", opacity: 0.5 },
-                      title: t.delete,
-                      disabled: drawings.length <= 1,
-                      children: "\u{1F5D1}\uFE0F"
-                    }
-                  )
-                ] }) })
-              ]
-            },
-            drawing.id
-          )) }),
-          drawings.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
+          (drawings.length > 0 || folders.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "8px 20px 0" }, children: [
+            filteredFolders.map(renderFolderGroup),
+            rootDrawings.map(renderDrawingRow)
+          ] }),
+          drawings.length === 0 && folders.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
           ] }),
@@ -1448,7 +1818,7 @@ var DrawingsDialog = ({
                 icon: "\u{1F4C4}",
                 label: t.createNewDrawing,
                 description: t.createNewDrawingDesc,
-                onClick: handleCreate,
+                onClick: () => handleCreate(),
                 primary: true
               }
             ),
@@ -1460,6 +1830,60 @@ var DrawingsDialog = ({
                 description: t.openFromFileDesc,
                 onClick: importExcalidrawFile
               }
+            ),
+            creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "input",
+                {
+                  ref: newFolderInputRef,
+                  type: "text",
+                  value: newFolderName,
+                  onChange: (e) => setNewFolderName(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") handleCreateFolder();
+                    if (e.key === "Escape") {
+                      setCreatingFolder(false);
+                      setNewFolderName("");
+                    }
+                  },
+                  placeholder: t.newFolderName,
+                  style: {
+                    flex: 1,
+                    padding: "8px 12px",
+                    fontSize: "14px",
+                    border: "1px solid var(--color-primary, #6c63ff)",
+                    borderRadius: "8px",
+                    outline: "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: handleCreateFolder,
+                  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)(
+                "button",
+                {
+                  onClick: () => {
+                    setCreatingFolder(false);
+                    setNewFolderName("");
+                  },
+                  style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
+                  children: t.cancel
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ActionButton,
+              {
+                icon: "\u{1F4C1}",
+                label: t.createFolder,
+                description: "",
+                onClick: () => setCreatingFolder(true)
+              }
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
@@ -1706,16 +2130,22 @@ function WorkspacePlugin(props) {
   addDrawingToWorkspace,
   closeDB,
   createDrawing,
+  createFolder,
   deleteDrawing,
+  deleteFolder,
   duplicateDrawing,
   getAllDrawings,
+  getAllFolders,
   getDB,
   getDrawing,
+  getFolder,
   getOrCreateDefaultWorkspace,
   getTranslations,
   getWorkspace,
   isLanguageSupported,
+  moveDrawingToFolder,
   removeDrawingFromWorkspace,
+  renameFolder,
   setActiveDrawing,
   updateDrawing,
   updateWorkspace,