rita-workspace 0.4.6 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +11 -8
  2. package/dist/index.d.ts +11 -8
  3. package/dist/index.js +294 -356
  4. package/dist/index.mjs +294 -356
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -162,12 +162,24 @@ var sv = {
162
162
  save: "Spara",
163
163
  cancel: "Avbryt",
164
164
  confirm: "Bekr\xE4fta",
165
+ // Sections
166
+ sectionDrawings: "Ritningar (enskilda filer)",
167
+ sectionWorkspace: "Hela arbetsytan (alla ritningar)",
168
+ // Actions with descriptions
169
+ createNewDrawing: "Skapa ny ritning",
170
+ createNewDrawingDesc: "Skapar en tom ritning i din arbetsyta",
171
+ openFromFile: "\xD6ppna ritning fr\xE5n fil",
172
+ openFromFileDesc: "\xD6ppnar en sparad ritning fr\xE5n din dator",
173
+ saveAllBackup: "Spara alla ritningar (backup)",
174
+ saveAllBackupDesc: "Ladda ner hela din arbetsyta som backup",
175
+ loadBackup: "L\xE4s in sparad arbetsyta",
176
+ loadBackupDesc: "\xC5terst\xE4ll alla ritningar fr\xE5n en tidigare backup",
165
177
  // Messages
166
178
  noDrawingsYet: "Inga ritningar \xE4nnu.",
167
- clickNewToStart: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.',
179
+ clickNewToStart: 'Klicka "Skapa ny ritning" f\xF6r att b\xF6rja.',
168
180
  modified: "\xC4ndrad",
169
181
  confirmDelete: "Vill du ta bort denna ritning?",
170
- // Export/Import
182
+ // Export/Import (legacy)
171
183
  exportWorkspace: "Exportera arbetsyta",
172
184
  importWorkspace: "Importera arbetsyta",
173
185
  exportDrawing: "Spara som .excalidraw",
@@ -181,7 +193,7 @@ var en = {
181
193
  newDrawing: "New drawing",
182
194
  manageDrawings: "Manage workspace...",
183
195
  // Dialog
184
- dialogTitle: "Workspace",
196
+ dialogTitle: "My Workspace",
185
197
  close: "Close",
186
198
  open: "Open",
187
199
  rename: "Rename",
@@ -189,12 +201,24 @@ var en = {
189
201
  save: "Save",
190
202
  cancel: "Cancel",
191
203
  confirm: "Confirm",
204
+ // Sections
205
+ sectionDrawings: "Drawings (individual files)",
206
+ sectionWorkspace: "Entire workspace (all drawings)",
207
+ // Actions with descriptions
208
+ createNewDrawing: "Create new drawing",
209
+ createNewDrawingDesc: "Creates an empty drawing in your workspace",
210
+ openFromFile: "Open drawing from file",
211
+ openFromFileDesc: "Opens a saved drawing from your computer",
212
+ saveAllBackup: "Save all drawings (backup)",
213
+ saveAllBackupDesc: "Download your entire workspace as a backup",
214
+ loadBackup: "Load saved workspace",
215
+ loadBackupDesc: "Restore all drawings from a previous backup",
192
216
  // Messages
193
217
  noDrawingsYet: "No drawings yet.",
194
- clickNewToStart: 'Click "New drawing" to start.',
218
+ clickNewToStart: 'Click "Create new drawing" to start.',
195
219
  modified: "Modified",
196
220
  confirmDelete: "Do you want to delete this drawing?",
197
- // Export/Import
221
+ // Export/Import (legacy)
198
222
  exportWorkspace: "Export workspace",
199
223
  importWorkspace: "Import workspace",
200
224
  exportDrawing: "Save as .excalidraw",
@@ -845,6 +869,33 @@ var WorkspaceMenuItems = ({
845
869
  // src/ui/Dialog/DrawingsDialog.tsx
846
870
  import { useState as useState4, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect3 } from "react";
847
871
  import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
872
+ var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PURE__ */ jsxs4(
873
+ "button",
874
+ {
875
+ onClick,
876
+ style: {
877
+ display: "flex",
878
+ alignItems: "center",
879
+ gap: "12px",
880
+ width: "100%",
881
+ padding: "12px 16px",
882
+ backgroundColor: primary ? "var(--color-primary-light, rgba(108, 99, 255, 0.08))" : "transparent",
883
+ border: "1px solid var(--default-border-color, #e0e0e0)",
884
+ borderRadius: "8px",
885
+ cursor: "pointer",
886
+ textAlign: "left",
887
+ color: "inherit",
888
+ fontSize: "14px"
889
+ },
890
+ children: [
891
+ /* @__PURE__ */ jsx6("span", { style: { fontSize: "20px", flexShrink: 0 }, children: icon }),
892
+ /* @__PURE__ */ jsxs4("div", { children: [
893
+ /* @__PURE__ */ jsx6("div", { style: { fontWeight: 500 }, children: label }),
894
+ /* @__PURE__ */ jsx6("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: description })
895
+ ] })
896
+ ]
897
+ }
898
+ );
848
899
  var DrawingsDialog = ({
849
900
  open,
850
901
  onClose,
@@ -867,11 +918,6 @@ var DrawingsDialog = ({
867
918
  t: contextT,
868
919
  lang: contextLang
869
920
  } = useWorkspace();
870
- useEffect3(() => {
871
- if (open) {
872
- refreshDrawings();
873
- }
874
- }, [open, refreshDrawings]);
875
921
  const t = lang ? getTranslations(lang) : contextT;
876
922
  const effectiveLang = lang || contextLang;
877
923
  const [editingId, setEditingId] = useState4(null);
@@ -880,7 +926,14 @@ var DrawingsDialog = ({
880
926
  const [position, setPosition] = useState4(null);
881
927
  const dragRef = useRef2(null);
882
928
  const dialogRef = useRef2(null);
929
+ useEffect3(() => {
930
+ if (open) {
931
+ refreshDrawings();
932
+ setPosition(null);
933
+ }
934
+ }, [open, refreshDrawings]);
883
935
  const handleMouseDown = useCallback2((e) => {
936
+ if (e.target.closest("button")) return;
884
937
  if (!dialogRef.current) return;
885
938
  const rect = dialogRef.current.getBoundingClientRect();
886
939
  const currentX = position?.x ?? rect.left;
@@ -906,9 +959,7 @@ var DrawingsDialog = ({
906
959
  }, [switchDrawing, onDrawingSelect]);
907
960
  const handleCreate = useCallback2(async () => {
908
961
  const newDrawing = await createNewDrawing();
909
- if (newDrawing) {
910
- onDrawingSelect?.(newDrawing);
911
- }
962
+ if (newDrawing) onDrawingSelect?.(newDrawing);
912
963
  }, [createNewDrawing, onDrawingSelect]);
913
964
  const handleStartEdit = useCallback2((drawing) => {
914
965
  setEditingId(drawing.id);
@@ -932,12 +983,10 @@ var DrawingsDialog = ({
932
983
  const getLocale = () => {
933
984
  if (!effectiveLang) return "en-US";
934
985
  const baseLang = effectiveLang.split("-")[0].toLowerCase();
935
- if (baseLang === "sv") return "sv-SE";
936
- return "en-US";
986
+ return baseLang === "sv" ? "sv-SE" : "en-US";
937
987
  };
938
988
  const formatDate = (timestamp) => {
939
989
  return new Date(timestamp).toLocaleString(getLocale(), {
940
- year: "numeric",
941
990
  month: "short",
942
991
  day: "numeric",
943
992
  hour: "2-digit",
@@ -950,26 +999,34 @@ var DrawingsDialog = ({
950
999
  left: position.x,
951
1000
  top: position.y,
952
1001
  backgroundColor: "var(--island-bg-color, #fff)",
953
- borderRadius: "8px",
954
- boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
1002
+ borderRadius: "12px",
1003
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
955
1004
  width: "90%",
956
- maxWidth: "600px",
957
- maxHeight: "80vh",
1005
+ maxWidth: "520px",
1006
+ maxHeight: "85vh",
958
1007
  display: "flex",
959
1008
  flexDirection: "column",
960
1009
  color: "var(--text-primary-color, #1b1b1f)",
961
1010
  zIndex: 1e4
962
1011
  } : {
963
1012
  backgroundColor: "var(--island-bg-color, #fff)",
964
- borderRadius: "8px",
965
- boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
1013
+ borderRadius: "12px",
1014
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
966
1015
  width: "90%",
967
- maxWidth: "600px",
968
- maxHeight: "80vh",
1016
+ maxWidth: "520px",
1017
+ maxHeight: "85vh",
969
1018
  display: "flex",
970
1019
  flexDirection: "column",
971
1020
  color: "var(--text-primary-color, #1b1b1f)"
972
1021
  };
1022
+ const sectionHeaderStyle = {
1023
+ fontSize: "12px",
1024
+ fontWeight: 600,
1025
+ textTransform: "uppercase",
1026
+ letterSpacing: "0.5px",
1027
+ color: "var(--text-secondary-color, #888)",
1028
+ padding: "16px 20px 8px"
1029
+ };
973
1030
  return /* @__PURE__ */ jsx6(
974
1031
  "div",
975
1032
  {
@@ -980,7 +1037,7 @@ var DrawingsDialog = ({
980
1037
  left: 0,
981
1038
  right: 0,
982
1039
  bottom: 0,
983
- backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.5)",
1040
+ backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.4)",
984
1041
  display: position ? "block" : "flex",
985
1042
  alignItems: "center",
986
1043
  justifyContent: "center",
@@ -990,384 +1047,265 @@ var DrawingsDialog = ({
990
1047
  onClick: (e) => {
991
1048
  if (!position && e.target === e.currentTarget) onClose();
992
1049
  },
993
- children: /* @__PURE__ */ jsxs4(
994
- "div",
995
- {
996
- ref: dialogRef,
997
- className: "rita-workspace-dialog",
998
- style: { ...dialogStyle, pointerEvents: "auto" },
999
- children: [
1000
- /* @__PURE__ */ jsxs4(
1001
- "div",
1002
- {
1003
- onMouseDown: handleMouseDown,
1004
- style: {
1005
- padding: "16px 20px",
1006
- borderBottom: "1px solid var(--default-border-color, #e0e0e0)",
1050
+ children: /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: { ...dialogStyle, pointerEvents: "auto" }, children: [
1051
+ /* @__PURE__ */ jsxs4(
1052
+ "div",
1053
+ {
1054
+ onMouseDown: handleMouseDown,
1055
+ style: {
1056
+ padding: "16px 20px",
1057
+ display: "flex",
1058
+ alignItems: "center",
1059
+ justifyContent: "space-between",
1060
+ cursor: "grab",
1061
+ userSelect: "none",
1062
+ borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
1063
+ },
1064
+ children: [
1065
+ /* @__PURE__ */ jsx6("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: t.dialogTitle }),
1066
+ /* @__PURE__ */ jsx6(
1067
+ "button",
1068
+ {
1069
+ onClick: onClose,
1070
+ style: {
1071
+ background: "none",
1072
+ border: "none",
1073
+ fontSize: "24px",
1074
+ cursor: "pointer",
1075
+ padding: "4px",
1076
+ lineHeight: 1,
1077
+ color: "inherit"
1078
+ },
1079
+ "aria-label": t.close,
1080
+ children: "\xD7"
1081
+ }
1082
+ )
1083
+ ]
1084
+ }
1085
+ ),
1086
+ /* @__PURE__ */ jsxs4("div", { style: { flex: 1, overflow: "auto" }, children: [
1087
+ drawings.length > 0 && /* @__PURE__ */ jsx6("div", { style: { padding: "8px 20px 0" }, children: drawings.map((drawing) => /* @__PURE__ */ jsxs4(
1088
+ "div",
1089
+ {
1090
+ onClick: () => {
1091
+ if (editingId || confirmDeleteId) return;
1092
+ if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
1093
+ },
1094
+ style: {
1095
+ padding: "10px 12px",
1096
+ display: "flex",
1097
+ alignItems: "center",
1098
+ gap: "12px",
1099
+ borderRadius: "8px",
1100
+ marginBottom: "4px",
1101
+ cursor: editingId || confirmDeleteId ? "default" : "pointer",
1102
+ backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent",
1103
+ transition: "background-color 0.15s"
1104
+ },
1105
+ children: [
1106
+ renderThumbnail && /* @__PURE__ */ jsx6("div", { style: {
1107
+ width: "64px",
1108
+ height: "48px",
1109
+ flexShrink: 0,
1110
+ borderRadius: "4px",
1111
+ overflow: "hidden",
1112
+ border: "1px solid var(--default-border-color, #e0e0e0)",
1113
+ backgroundColor: "#fff",
1007
1114
  display: "flex",
1008
1115
  alignItems: "center",
1009
- justifyContent: "space-between",
1010
- cursor: "grab",
1011
- userSelect: "none"
1012
- },
1013
- children: [
1014
- /* @__PURE__ */ jsx6("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: t.dialogTitle }),
1116
+ justifyContent: "center"
1117
+ }, children: renderThumbnail(drawing) }),
1118
+ /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
1015
1119
  /* @__PURE__ */ jsx6(
1016
- "button",
1120
+ "input",
1017
1121
  {
1018
- onClick: onClose,
1122
+ type: "text",
1123
+ value: editName,
1124
+ onChange: (e) => setEditName(e.target.value),
1125
+ onKeyDown: (e) => {
1126
+ if (e.key === "Enter") handleSaveEdit();
1127
+ if (e.key === "Escape") handleCancelEdit();
1128
+ },
1129
+ onClick: (e) => e.stopPropagation(),
1130
+ autoFocus: true,
1019
1131
  style: {
1020
- background: "none",
1021
- border: "none",
1022
- fontSize: "24px",
1023
- cursor: "pointer",
1024
- padding: "4px",
1025
- lineHeight: 1,
1026
- color: "inherit"
1132
+ flex: 1,
1133
+ padding: "4px 8px",
1134
+ fontSize: "14px",
1135
+ border: "1px solid var(--color-primary, #6c63ff)",
1136
+ borderRadius: "4px",
1137
+ outline: "none"
1138
+ }
1139
+ }
1140
+ ),
1141
+ /* @__PURE__ */ jsx6(
1142
+ "button",
1143
+ {
1144
+ onClick: (e) => {
1145
+ e.stopPropagation();
1146
+ handleSaveEdit();
1027
1147
  },
1028
- "aria-label": t.close,
1029
- children: "\xD7"
1148
+ style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1149
+ children: t.save
1150
+ }
1151
+ ),
1152
+ /* @__PURE__ */ jsx6(
1153
+ "button",
1154
+ {
1155
+ onClick: (e) => {
1156
+ e.stopPropagation();
1157
+ handleCancelEdit();
1158
+ },
1159
+ style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
1160
+ children: t.cancel
1030
1161
  }
1031
1162
  )
1032
- ]
1033
- }
1034
- ),
1035
- /* @__PURE__ */ jsx6("div", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: drawings.length === 0 ? /* @__PURE__ */ jsxs4("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
1036
- /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
1037
- /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
1038
- ] }) : drawings.map((drawing) => /* @__PURE__ */ jsxs4(
1039
- "div",
1040
- {
1041
- className: "rita-workspace-dialog-item",
1042
- onClick: () => {
1043
- if (editingId || confirmDeleteId) return;
1044
- if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
1045
- },
1046
- style: {
1047
- padding: "12px 20px",
1048
- display: "flex",
1049
- alignItems: "center",
1050
- gap: "12px",
1051
- borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
1052
- cursor: editingId || confirmDeleteId ? "default" : "pointer",
1053
- backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
1054
- },
1055
- children: [
1056
- renderThumbnail && /* @__PURE__ */ jsx6("div", { style: {
1057
- width: "80px",
1058
- height: "60px",
1059
- flexShrink: 0,
1060
- borderRadius: "4px",
1061
- overflow: "hidden",
1062
- border: "1px solid var(--default-border-color, #e0e0e0)",
1063
- backgroundColor: "#fff",
1064
- display: "flex",
1065
- alignItems: "center",
1066
- justifyContent: "center"
1067
- }, children: renderThumbnail(drawing) }),
1068
- /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
1069
- /* @__PURE__ */ jsx6(
1070
- "input",
1071
- {
1072
- type: "text",
1073
- value: editName,
1074
- onChange: (e) => setEditName(e.target.value),
1075
- onKeyDown: (e) => {
1076
- if (e.key === "Enter") handleSaveEdit();
1077
- if (e.key === "Escape") handleCancelEdit();
1078
- },
1079
- onClick: (e) => e.stopPropagation(),
1080
- autoFocus: true,
1081
- style: {
1082
- flex: 1,
1083
- padding: "4px 8px",
1084
- fontSize: "14px",
1085
- border: "1px solid var(--color-primary, #6c63ff)",
1086
- borderRadius: "4px",
1087
- outline: "none"
1088
- }
1089
- }
1090
- ),
1091
- /* @__PURE__ */ jsx6(
1092
- "button",
1093
- {
1094
- onClick: (e) => {
1095
- e.stopPropagation();
1096
- handleSaveEdit();
1097
- },
1098
- style: {
1099
- padding: "4px 10px",
1100
- fontSize: "12px",
1101
- backgroundColor: "var(--color-primary, #6c63ff)",
1102
- color: "#fff",
1103
- border: "none",
1104
- borderRadius: "4px",
1105
- cursor: "pointer"
1106
- },
1107
- children: t.save
1108
- }
1109
- ),
1110
- /* @__PURE__ */ jsx6(
1111
- "button",
1163
+ ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
1164
+ /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
1165
+ /* @__PURE__ */ jsxs4(
1166
+ "span",
1112
1167
  {
1113
1168
  onClick: (e) => {
1114
1169
  e.stopPropagation();
1115
- handleCancelEdit();
1170
+ handleStartEdit(drawing);
1116
1171
  },
1117
1172
  style: {
1118
- padding: "4px 10px",
1119
- fontSize: "12px",
1120
- backgroundColor: "transparent",
1121
- border: "1px solid var(--default-border-color, #ccc)",
1122
- borderRadius: "4px",
1123
- cursor: "pointer",
1124
- color: "inherit"
1125
- },
1126
- children: t.cancel
1127
- }
1128
- )
1129
- ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
1130
- /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
1131
- /* @__PURE__ */ jsxs4(
1132
- "span",
1133
- {
1134
- onClick: (e) => {
1135
- e.stopPropagation();
1136
- handleStartEdit(drawing);
1137
- },
1138
- style: {
1139
- fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
1140
- fontSize: "14px",
1141
- overflow: "hidden",
1142
- textOverflow: "ellipsis",
1143
- whiteSpace: "nowrap",
1144
- cursor: "text"
1145
- },
1146
- title: t.rename,
1147
- children: [
1148
- activeDrawing?.id === drawing.id && "\u2713 ",
1149
- drawing.name
1150
- ]
1151
- }
1152
- ),
1153
- /* @__PURE__ */ jsx6(
1154
- "button",
1155
- {
1156
- onClick: (e) => {
1157
- e.stopPropagation();
1158
- handleStartEdit(drawing);
1159
- },
1160
- style: {
1161
- background: "none",
1162
- border: "none",
1163
- cursor: "pointer",
1164
- padding: "0 2px",
1165
- fontSize: "12px",
1166
- opacity: 0.5,
1167
- flexShrink: 0
1168
- },
1169
- title: t.rename,
1170
- children: "\u270F\uFE0F"
1171
- }
1172
- )
1173
- ] }),
1174
- /* @__PURE__ */ jsxs4(
1175
- "div",
1176
- {
1177
- style: {
1178
- fontSize: "12px",
1179
- color: "var(--text-secondary-color, #888)",
1180
- marginTop: "2px"
1173
+ fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
1174
+ fontSize: "14px",
1175
+ overflow: "hidden",
1176
+ textOverflow: "ellipsis",
1177
+ whiteSpace: "nowrap",
1178
+ cursor: "text"
1181
1179
  },
1180
+ title: t.rename,
1182
1181
  children: [
1183
- t.modified,
1184
- ": ",
1185
- formatDate(drawing.updatedAt)
1182
+ activeDrawing?.id === drawing.id && "\u2713 ",
1183
+ drawing.name
1186
1184
  ]
1187
1185
  }
1188
- )
1189
- ] }) }),
1190
- /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "4px" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1191
- /* @__PURE__ */ jsx6(
1192
- "button",
1193
- {
1194
- onClick: (e) => {
1195
- e.stopPropagation();
1196
- handleDelete(drawing.id);
1197
- },
1198
- style: {
1199
- padding: "6px 12px",
1200
- fontSize: "12px",
1201
- backgroundColor: "#dc3545",
1202
- color: "#fff",
1203
- border: "none",
1204
- borderRadius: "4px",
1205
- cursor: "pointer"
1206
- },
1207
- children: t.delete
1208
- }
1209
- ),
1210
- /* @__PURE__ */ jsx6(
1211
- "button",
1212
- {
1213
- onClick: (e) => {
1214
- e.stopPropagation();
1215
- setConfirmDeleteId(null);
1216
- },
1217
- style: {
1218
- padding: "6px 12px",
1219
- fontSize: "12px",
1220
- backgroundColor: "transparent",
1221
- border: "1px solid var(--default-border-color, #ccc)",
1222
- borderRadius: "4px",
1223
- cursor: "pointer",
1224
- color: "inherit"
1225
- },
1226
- children: t.cancel
1227
- }
1228
- )
1229
- ] }) : editingId !== drawing.id && /* @__PURE__ */ jsxs4(Fragment3, { children: [
1230
- /* @__PURE__ */ jsx6(
1231
- "button",
1232
- {
1233
- onClick: (e) => {
1234
- e.stopPropagation();
1235
- exportDrawingAsExcalidraw(drawing.id);
1236
- },
1237
- style: {
1238
- padding: "6px 12px",
1239
- fontSize: "12px",
1240
- backgroundColor: "transparent",
1241
- border: "1px solid var(--default-border-color, #ccc)",
1242
- borderRadius: "4px",
1243
- cursor: "pointer",
1244
- color: "inherit"
1245
- },
1246
- title: t.exportDrawing,
1247
- children: "\u{1F4BE}"
1248
- }
1249
1186
  ),
1250
1187
  /* @__PURE__ */ jsx6(
1251
1188
  "button",
1252
1189
  {
1253
1190
  onClick: (e) => {
1254
1191
  e.stopPropagation();
1255
- setConfirmDeleteId(drawing.id);
1256
- },
1257
- style: {
1258
- padding: "6px 12px",
1259
- fontSize: "12px",
1260
- backgroundColor: "transparent",
1261
- border: "1px solid var(--default-border-color, #ccc)",
1262
- borderRadius: "4px",
1263
- cursor: "pointer",
1264
- color: "inherit"
1192
+ handleStartEdit(drawing);
1265
1193
  },
1266
- title: t.delete,
1267
- disabled: drawings.length <= 1,
1268
- children: "\u{1F5D1}\uFE0F"
1194
+ style: { background: "none", border: "none", cursor: "pointer", padding: "0 2px", fontSize: "12px", opacity: 0.4, flexShrink: 0 },
1195
+ title: t.rename,
1196
+ children: "\u270F\uFE0F"
1269
1197
  }
1270
1198
  )
1271
- ] }) })
1272
- ]
1273
- },
1274
- drawing.id
1275
- )) }),
1276
- /* @__PURE__ */ jsx6(
1277
- "div",
1278
- {
1279
- style: {
1280
- padding: "16px 20px",
1281
- borderTop: "1px solid var(--default-border-color, #e0e0e0)",
1282
- display: "flex",
1283
- justifyContent: "space-between",
1284
- alignItems: "center"
1285
- },
1286
- children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
1287
- /* @__PURE__ */ jsxs4(
1199
+ ] }),
1200
+ /* @__PURE__ */ jsxs4("div", { style: { fontSize: "11px", color: "var(--text-secondary-color, #888)", marginTop: "1px" }, children: [
1201
+ t.modified,
1202
+ ": ",
1203
+ formatDate(drawing.updatedAt)
1204
+ ] })
1205
+ ] }) }),
1206
+ /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "2px" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1207
+ /* @__PURE__ */ jsx6(
1288
1208
  "button",
1289
1209
  {
1290
- onClick: handleCreate,
1291
- style: {
1292
- padding: "10px 20px",
1293
- fontSize: "14px",
1294
- backgroundColor: "var(--color-primary, #6c63ff)",
1295
- color: "#fff",
1296
- border: "none",
1297
- borderRadius: "6px",
1298
- cursor: "pointer",
1299
- fontWeight: 500
1210
+ onClick: (e) => {
1211
+ e.stopPropagation();
1212
+ handleDelete(drawing.id);
1300
1213
  },
1301
- children: [
1302
- "+ ",
1303
- t.newDrawing
1304
- ]
1214
+ style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1215
+ children: t.delete
1305
1216
  }
1306
1217
  ),
1307
- /* @__PURE__ */ jsxs4(
1218
+ /* @__PURE__ */ jsx6(
1308
1219
  "button",
1309
1220
  {
1310
- onClick: importExcalidrawFile,
1311
- style: {
1312
- padding: "10px 20px",
1313
- fontSize: "14px",
1314
- backgroundColor: "transparent",
1315
- border: "1px solid var(--default-border-color, #ccc)",
1316
- borderRadius: "6px",
1317
- cursor: "pointer",
1318
- color: "inherit"
1221
+ onClick: (e) => {
1222
+ e.stopPropagation();
1223
+ setConfirmDeleteId(null);
1319
1224
  },
1320
- children: [
1321
- "\u{1F4C2} ",
1322
- t.importDrawing
1323
- ]
1225
+ style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
1226
+ children: t.cancel
1324
1227
  }
1325
- ),
1326
- /* @__PURE__ */ jsxs4(
1228
+ )
1229
+ ] }) : editingId !== drawing.id && /* @__PURE__ */ jsxs4(Fragment3, { children: [
1230
+ /* @__PURE__ */ jsx6(
1327
1231
  "button",
1328
1232
  {
1329
- onClick: importWorkspace,
1330
- style: {
1331
- padding: "10px 20px",
1332
- fontSize: "14px",
1333
- backgroundColor: "transparent",
1334
- border: "1px solid var(--default-border-color, #ccc)",
1335
- borderRadius: "6px",
1336
- cursor: "pointer",
1337
- color: "inherit"
1233
+ onClick: (e) => {
1234
+ e.stopPropagation();
1235
+ exportDrawingAsExcalidraw(drawing.id);
1338
1236
  },
1339
- children: [
1340
- "\u{1F4E5} ",
1341
- t.importWorkspace
1342
- ]
1237
+ style: { background: "none", border: "none", cursor: "pointer", padding: "4px", fontSize: "14px", opacity: 0.5 },
1238
+ title: t.exportDrawing,
1239
+ children: "\u{1F4BE}"
1343
1240
  }
1344
1241
  ),
1345
- /* @__PURE__ */ jsxs4(
1242
+ /* @__PURE__ */ jsx6(
1346
1243
  "button",
1347
1244
  {
1348
- onClick: exportWorkspace,
1349
- style: {
1350
- padding: "10px 20px",
1351
- fontSize: "14px",
1352
- backgroundColor: "transparent",
1353
- border: "1px solid var(--default-border-color, #ccc)",
1354
- borderRadius: "6px",
1355
- cursor: "pointer",
1356
- color: "inherit"
1245
+ onClick: (e) => {
1246
+ e.stopPropagation();
1247
+ setConfirmDeleteId(drawing.id);
1357
1248
  },
1358
- disabled: drawings.length === 0,
1359
- children: [
1360
- "\u{1F4E4} ",
1361
- t.exportWorkspace
1362
- ]
1249
+ style: { background: "none", border: "none", cursor: "pointer", padding: "4px", fontSize: "14px", opacity: 0.5 },
1250
+ title: t.delete,
1251
+ disabled: drawings.length <= 1,
1252
+ children: "\u{1F5D1}\uFE0F"
1363
1253
  }
1364
1254
  )
1365
- ] })
1255
+ ] }) })
1256
+ ]
1257
+ },
1258
+ drawing.id
1259
+ )) }),
1260
+ drawings.length === 0 && /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
1261
+ /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
1262
+ /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
1263
+ ] }),
1264
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
1265
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
1266
+ /* @__PURE__ */ jsx6(
1267
+ ActionButton,
1268
+ {
1269
+ icon: "\u{1F4C4}",
1270
+ label: t.createNewDrawing,
1271
+ description: t.createNewDrawingDesc,
1272
+ onClick: handleCreate,
1273
+ primary: true
1274
+ }
1275
+ ),
1276
+ /* @__PURE__ */ jsx6(
1277
+ ActionButton,
1278
+ {
1279
+ icon: "\u{1F4C2}",
1280
+ label: t.openFromFile,
1281
+ description: t.openFromFileDesc,
1282
+ onClick: importExcalidrawFile
1366
1283
  }
1367
1284
  )
1368
- ]
1369
- }
1370
- )
1285
+ ] }),
1286
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
1287
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
1288
+ /* @__PURE__ */ jsx6(
1289
+ ActionButton,
1290
+ {
1291
+ icon: "\u{1F4BE}",
1292
+ label: t.saveAllBackup,
1293
+ description: t.saveAllBackupDesc,
1294
+ onClick: exportWorkspace
1295
+ }
1296
+ ),
1297
+ /* @__PURE__ */ jsx6(
1298
+ ActionButton,
1299
+ {
1300
+ icon: "\u{1F4E5}",
1301
+ label: t.loadBackup,
1302
+ description: t.loadBackupDesc,
1303
+ onClick: importWorkspace
1304
+ }
1305
+ )
1306
+ ] })
1307
+ ] })
1308
+ ] })
1371
1309
  }
1372
1310
  );
1373
1311
  };