rita-workspace 0.4.6 → 0.4.7

package/dist/index.js

@@ -224,12 +224,24 @@ var sv = {
   save: "Spara",
   cancel: "Avbryt",
   confirm: "Bekr\xE4fta",
+  // Sections
+  sectionDrawings: "Ritningar (enskilda filer)",
+  sectionWorkspace: "Hela arbetsytan (alla ritningar)",
+  // Actions with descriptions
+  createNewDrawing: "Skapa ny ritning",
+  createNewDrawingDesc: "Skapar en tom ritning i din arbetsyta",
+  openFromFile: "\xD6ppna ritning fr\xE5n fil",
+  openFromFileDesc: "\xD6ppnar en sparad ritning fr\xE5n din dator",
+  saveAllBackup: "Spara alla ritningar (backup)",
+  saveAllBackupDesc: "Ladda ner hela din arbetsyta som backup",
+  loadBackup: "L\xE4s in sparad arbetsyta",
+  loadBackupDesc: "\xC5terst\xE4ll alla ritningar fr\xE5n en tidigare backup",
   // Messages
   noDrawingsYet: "Inga ritningar \xE4nnu.",
-  clickNewToStart: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.',
+  clickNewToStart: 'Klicka "Skapa ny ritning" f\xF6r att b\xF6rja.',
   modified: "\xC4ndrad",
   confirmDelete: "Vill du ta bort denna ritning?",
-  // Export/Import
+  // Export/Import (legacy)
   exportWorkspace: "Exportera arbetsyta",
   importWorkspace: "Importera arbetsyta",
   exportDrawing: "Spara som .excalidraw",
@@ -243,7 +255,7 @@ var en = {
   newDrawing: "New drawing",
   manageDrawings: "Manage workspace...",
   // Dialog
-  dialogTitle: "Workspace",
+  dialogTitle: "My Workspace",
   close: "Close",
   open: "Open",
   rename: "Rename",
@@ -251,12 +263,24 @@ var en = {
   save: "Save",
   cancel: "Cancel",
   confirm: "Confirm",
+  // Sections
+  sectionDrawings: "Drawings (individual files)",
+  sectionWorkspace: "Entire workspace (all drawings)",
+  // Actions with descriptions
+  createNewDrawing: "Create new drawing",
+  createNewDrawingDesc: "Creates an empty drawing in your workspace",
+  openFromFile: "Open drawing from file",
+  openFromFileDesc: "Opens a saved drawing from your computer",
+  saveAllBackup: "Save all drawings (backup)",
+  saveAllBackupDesc: "Download your entire workspace as a backup",
+  loadBackup: "Load saved workspace",
+  loadBackupDesc: "Restore all drawings from a previous backup",
   // Messages
   noDrawingsYet: "No drawings yet.",
-  clickNewToStart: 'Click "New drawing" to start.',
+  clickNewToStart: 'Click "Create new drawing" to start.',
   modified: "Modified",
   confirmDelete: "Do you want to delete this drawing?",
-  // Export/Import
+  // Export/Import (legacy)
   exportWorkspace: "Export workspace",
   importWorkspace: "Import workspace",
   exportDrawing: "Save as .excalidraw",
@@ -907,6 +931,33 @@ var WorkspaceMenuItems = ({
 // src/ui/Dialog/DrawingsDialog.tsx
 var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  "button",
+  {
+    onClick,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      width: "100%",
+      padding: "12px 16px",
+      backgroundColor: primary ? "var(--color-primary-light, rgba(108, 99, 255, 0.08))" : "transparent",
+      border: "1px solid var(--default-border-color, #e0e0e0)",
+      borderRadius: "8px",
+      cursor: "pointer",
+      textAlign: "left",
+      color: "inherit",
+      fontSize: "14px"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "20px", flexShrink: 0 }, children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: 500 }, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: description })
+      ] })
+    ]
+  }
+);
 var DrawingsDialog = ({
   open,
   onClose,
@@ -929,11 +980,6 @@ var DrawingsDialog = ({
     t: contextT,
     lang: contextLang
   } = useWorkspace();
-  (0, import_react5.useEffect)(() => {
-    if (open) {
-      refreshDrawings();
-    }
-  }, [open, refreshDrawings]);
   const t = lang ? getTranslations(lang) : contextT;
   const effectiveLang = lang || contextLang;
   const [editingId, setEditingId] = (0, import_react5.useState)(null);
@@ -942,7 +988,14 @@ var DrawingsDialog = ({
   const [position, setPosition] = (0, import_react5.useState)(null);
   const dragRef = (0, import_react5.useRef)(null);
   const dialogRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (open) {
+      refreshDrawings();
+      setPosition(null);
+    }
+  }, [open, refreshDrawings]);
   const handleMouseDown = (0, import_react5.useCallback)((e) => {
+    if (e.target.closest("button")) return;
     if (!dialogRef.current) return;
     const rect = dialogRef.current.getBoundingClientRect();
     const currentX = position?.x ?? rect.left;
@@ -968,9 +1021,7 @@ var DrawingsDialog = ({
   }, [switchDrawing, onDrawingSelect]);
   const handleCreate = (0, import_react5.useCallback)(async () => {
     const newDrawing = await createNewDrawing();
-    if (newDrawing) {
-      onDrawingSelect?.(newDrawing);
-    }
+    if (newDrawing) onDrawingSelect?.(newDrawing);
   }, [createNewDrawing, onDrawingSelect]);
   const handleStartEdit = (0, import_react5.useCallback)((drawing) => {
     setEditingId(drawing.id);
@@ -994,12 +1045,10 @@ var DrawingsDialog = ({
   const getLocale = () => {
     if (!effectiveLang) return "en-US";
     const baseLang = effectiveLang.split("-")[0].toLowerCase();
-    if (baseLang === "sv") return "sv-SE";
-    return "en-US";
+    return baseLang === "sv" ? "sv-SE" : "en-US";
   };
   const formatDate = (timestamp) => {
     return new Date(timestamp).toLocaleString(getLocale(), {
-      year: "numeric",
       month: "short",
       day: "numeric",
       hour: "2-digit",
@@ -1012,26 +1061,34 @@ var DrawingsDialog = ({
     left: position.x,
     top: position.y,
     backgroundColor: "var(--island-bg-color, #fff)",
-    borderRadius: "8px",
-    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
+    borderRadius: "12px",
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
     width: "90%",
-    maxWidth: "600px",
-    maxHeight: "80vh",
+    maxWidth: "520px",
+    maxHeight: "85vh",
     display: "flex",
     flexDirection: "column",
     color: "var(--text-primary-color, #1b1b1f)",
     zIndex: 1e4
   } : {
     backgroundColor: "var(--island-bg-color, #fff)",
-    borderRadius: "8px",
-    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
+    borderRadius: "12px",
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
     width: "90%",
-    maxWidth: "600px",
-    maxHeight: "80vh",
+    maxWidth: "520px",
+    maxHeight: "85vh",
     display: "flex",
     flexDirection: "column",
     color: "var(--text-primary-color, #1b1b1f)"
   };
+  const sectionHeaderStyle = {
+    fontSize: "12px",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    color: "var(--text-secondary-color, #888)",
+    padding: "16px 20px 8px"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -1042,7 +1099,7 @@ var DrawingsDialog = ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.5)",
+        backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.4)",
         display: position ? "block" : "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -1052,384 +1109,265 @@ var DrawingsDialog = ({
       onClick: (e) => {
         if (!position && e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        "div",
-        {
-          ref: dialogRef,
-          className: "rita-workspace-dialog",
-          style: { ...dialogStyle, pointerEvents: "auto" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-              "div",
-              {
-                onMouseDown: handleMouseDown,
-                style: {
-                  padding: "16px 20px",
-                  borderBottom: "1px solid var(--default-border-color, #e0e0e0)",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: { ...dialogStyle, pointerEvents: "auto" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            onMouseDown: handleMouseDown,
+            style: {
+              padding: "16px 20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              cursor: "grab",
+              userSelect: "none",
+              borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: t.dialogTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "none",
+                    border: "none",
+                    fontSize: "24px",
+                    cursor: "pointer",
+                    padding: "4px",
+                    lineHeight: 1,
+                    color: "inherit"
+                  },
+                  "aria-label": t.close,
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__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: "space-between",
-                  cursor: "grab",
-                  userSelect: "none"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: t.dialogTitle }),
+                  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)(
-                    "button",
+                    "input",
                     {
-                      onClick: onClose,
+                      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: {
-                        background: "none",
-                        border: "none",
-                        fontSize: "24px",
-                        cursor: "pointer",
-                        padding: "4px",
-                        lineHeight: 1,
-                        color: "inherit"
+                        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();
                       },
-                      "aria-label": t.close,
-                      children: "\xD7"
+                      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.jsx)("div", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: drawings.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "40px 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 })
-            ] }) : drawings.map((drawing) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-              "div",
-              {
-                className: "rita-workspace-dialog-item",
-                onClick: () => {
-                  if (editingId || confirmDeleteId) return;
-                  if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
-                },
-                style: {
-                  padding: "12px 20px",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "12px",
-                  borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
-                  cursor: editingId || confirmDeleteId ? "default" : "pointer",
-                  backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
-                },
-                children: [
-                  renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
-                    width: "80px",
-                    height: "60px",
-                    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",
+                ] }) : /* @__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();
-                          handleCancelEdit();
+                          handleStartEdit(drawing);
                         },
                         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.5,
-                            flexShrink: 0
-                          },
-                          title: t.rename,
-                          children: "\u270F\uFE0F"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "12px",
-                          color: "var(--text-secondary-color, #888)",
-                          marginTop: "2px"
+                          fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
+                          fontSize: "14px",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          cursor: "text"
                         },
+                        title: t.rename,
                         children: [
-                          t.modified,
-                          ": ",
-                          formatDate(drawing.updatedAt)
+                          activeDrawing?.id === drawing.id && "\u2713 ",
+                          drawing.name
                         ]
                       }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: "4px" }, 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: "6px 12px",
-                          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: "6px 12px",
-                          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: {
-                          padding: "6px 12px",
-                          fontSize: "12px",
-                          backgroundColor: "transparent",
-                          border: "1px solid var(--default-border-color, #ccc)",
-                          borderRadius: "4px",
-                          cursor: "pointer",
-                          color: "inherit"
-                        },
-                        title: t.exportDrawing,
-                        children: "\u{1F4BE}"
-                      }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "button",
                       {
                         onClick: (e) => {
                           e.stopPropagation();
-                          setConfirmDeleteId(drawing.id);
-                        },
-                        style: {
-                          padding: "6px 12px",
-                          fontSize: "12px",
-                          backgroundColor: "transparent",
-                          border: "1px solid var(--default-border-color, #ccc)",
-                          borderRadius: "4px",
-                          cursor: "pointer",
-                          color: "inherit"
+                          handleStartEdit(drawing);
                         },
-                        title: t.delete,
-                        disabled: drawings.length <= 1,
-                        children: "\u{1F5D1}\uFE0F"
+                        style: { background: "none", border: "none", cursor: "pointer", padding: "0 2px", fontSize: "12px", opacity: 0.4, flexShrink: 0 },
+                        title: t.rename,
+                        children: "\u270F\uFE0F"
                       }
                     )
-                  ] }) })
-                ]
-              },
-              drawing.id
-            )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              "div",
-              {
-                style: {
-                  padding: "16px 20px",
-                  borderTop: "1px solid var(--default-border-color, #e0e0e0)",
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  ] }),
+                  /* @__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: handleCreate,
-                      style: {
-                        padding: "10px 20px",
-                        fontSize: "14px",
-                        backgroundColor: "var(--color-primary, #6c63ff)",
-                        color: "#fff",
-                        border: "none",
-                        borderRadius: "6px",
-                        cursor: "pointer",
-                        fontWeight: 500
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDelete(drawing.id);
                       },
-                      children: [
-                        "+ ",
-                        t.newDrawing
-                      ]
+                      style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
+                      children: t.delete
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "button",
                     {
-                      onClick: importExcalidrawFile,
-                      style: {
-                        padding: "10px 20px",
-                        fontSize: "14px",
-                        backgroundColor: "transparent",
-                        border: "1px solid var(--default-border-color, #ccc)",
-                        borderRadius: "6px",
-                        cursor: "pointer",
-                        color: "inherit"
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setConfirmDeleteId(null);
                       },
-                      children: [
-                        "\u{1F4C2} ",
-                        t.importDrawing
-                      ]
+                      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)(
+                  )
+                ] }) : editingId !== drawing.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "button",
                     {
-                      onClick: importWorkspace,
-                      style: {
-                        padding: "10px 20px",
-                        fontSize: "14px",
-                        backgroundColor: "transparent",
-                        border: "1px solid var(--default-border-color, #ccc)",
-                        borderRadius: "6px",
-                        cursor: "pointer",
-                        color: "inherit"
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        exportDrawingAsExcalidraw(drawing.id);
                       },
-                      children: [
-                        "\u{1F4E5} ",
-                        t.importWorkspace
-                      ]
+                      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.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "button",
                     {
-                      onClick: exportWorkspace,
-                      style: {
-                        padding: "10px 20px",
-                        fontSize: "14px",
-                        backgroundColor: "transparent",
-                        border: "1px solid var(--default-border-color, #ccc)",
-                        borderRadius: "6px",
-                        cursor: "pointer",
-                        color: "inherit"
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setConfirmDeleteId(drawing.id);
                       },
-                      disabled: drawings.length === 0,
-                      children: [
-                        "\u{1F4E4} ",
-                        t.exportWorkspace
-                      ]
+                      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: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ActionButton,
+              {
+                icon: "\u{1F4C4}",
+                label: t.createNewDrawing,
+                description: t.createNewDrawingDesc,
+                onClick: handleCreate,
+                primary: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ActionButton,
+              {
+                icon: "\u{1F4C2}",
+                label: t.openFromFile,
+                description: t.openFromFileDesc,
+                onClick: importExcalidrawFile
               }
             )
-          ]
-        }
-      )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ActionButton,
+              {
+                icon: "\u{1F4BE}",
+                label: t.saveAllBackup,
+                description: t.saveAllBackupDesc,
+                onClick: exportWorkspace
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ActionButton,
+              {
+                icon: "\u{1F4E5}",
+                label: t.loadBackup,
+                description: t.loadBackupDesc,
+                onClick: importWorkspace
+              }
+            )
+          ] })
+        ] })
+      ] })
     }
   );
 };