@burdenoff/microfe-files 2026.624.2 → 2026.625.1

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.
@@ -7,223 +7,228 @@ import { useMemo as s, useState as c } from "react";
7
7
  import { Activity as l, Copy as u, Download as d, Edit as f, FolderInput as p, Info as m, RotateCcw as h, Share2 as g, Star as _, Trash2 as v } from "lucide-react";
8
8
  import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
9
9
  import { useI18n as S } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
10
+ import { GlassCard as C } from "@burdenoff/fe-libs/ui";
10
11
  //#region src/files/components/FileCard.tsx
11
- var C = ({ file: C, isSelected: w = !1, isDragging: T = !1, onSelect: E, onPreview: D, onShare: O, onDelete: k, onRestore: A, onFavorite: j, onRename: M, onDownload: N, onCopy: P, onMove: F, onInfo: I, onActivity: L, onDragStart: R, onDragEnd: z, onContextMenu: B }) => {
12
- let { t: V } = S(), [H, U] = c(!1), [W, G] = c(!1), { toggleFileSelection: K } = e(), q = () => {
13
- D && D(C);
14
- }, J = (e) => {
15
- e.stopPropagation(), E ? E(C.id) : K(C.id);
16
- }, Y = (e, t) => {
17
- e.stopPropagation(), t(), U(!1);
18
- }, X = (e) => {
19
- e.dataTransfer.effectAllowed = "copyMove", e.dataTransfer.setData("application/x-file-id", C.id), e.dataTransfer.setData("application/x-file-type", "file");
12
+ var w = ({ file: w, isSelected: T = !1, isDragging: E = !1, onSelect: D, onPreview: O, onShare: k, onDelete: A, onRestore: j, onFavorite: M, onRename: N, onDownload: P, onCopy: F, onMove: I, onInfo: L, onActivity: R, onDragStart: z, onDragEnd: B, onContextMenu: V }) => {
13
+ let { t: H } = S(), [U, W] = c(!1), [G, K] = c(!1), { toggleFileSelection: q } = e(), J = () => {
14
+ O && O(w);
15
+ }, Y = (e) => {
16
+ e.stopPropagation(), D ? D(w.id) : q(w.id);
17
+ }, X = (e, t) => {
18
+ e.stopPropagation(), t(), W(!1);
19
+ }, Z = (e) => {
20
+ e.dataTransfer.effectAllowed = "copyMove", e.dataTransfer.setData("application/x-file-id", w.id), e.dataTransfer.setData("application/x-file-type", "file");
20
21
  let t = o(e);
21
- e.dataTransfer.setData("application/x-drag-operation", t), R?.(C, t);
22
- }, Z = () => {
23
- z?.();
24
- }, Q = (e) => {
25
- e.preventDefault(), e.stopPropagation(), B?.(C, e.clientX, e.clientY);
26
- }, $ = r(C.mimeType), ee = s(() => [
27
- ...N ? [{
28
- label: i(V, "files.card.download", "Download"),
22
+ e.dataTransfer.setData("application/x-drag-operation", t), z?.(w, t);
23
+ }, Q = () => {
24
+ B?.();
25
+ }, $ = (e) => {
26
+ e.preventDefault(), e.stopPropagation(), V?.(w, e.clientX, e.clientY);
27
+ }, ee = r(w.mimeType), te = s(() => [
28
+ ...P ? [{
29
+ label: i(H, "files.card.download", "Download"),
29
30
  icon: /* @__PURE__ */ b(d, { className: "size-4" }),
30
- onClick: () => N(C)
31
+ onClick: () => P(w)
31
32
  }] : [],
32
- ...O ? [{
33
- label: i(V, "files.card.share", "Share"),
33
+ ...k ? [{
34
+ label: i(H, "files.card.share", "Share"),
34
35
  icon: /* @__PURE__ */ b(g, { className: "size-4" }),
35
- onClick: () => O(C)
36
+ onClick: () => k(w)
36
37
  }] : [],
37
- ...P ? [{
38
- label: i(V, "files.card.makeCopy", "Make a copy"),
38
+ ...F ? [{
39
+ label: i(H, "files.card.makeCopy", "Make a copy"),
39
40
  icon: /* @__PURE__ */ b(u, { className: "size-4" }),
40
- onClick: () => P(C)
41
+ onClick: () => F(w)
41
42
  }] : [],
42
- ...F ? [{
43
- label: i(V, "files.card.moveTo", "Move to"),
43
+ ...I ? [{
44
+ label: i(H, "files.card.moveTo", "Move to"),
44
45
  icon: /* @__PURE__ */ b(p, { className: "size-4" }),
45
- onClick: () => F(C)
46
+ onClick: () => I(w)
46
47
  }] : [],
47
- ...M ? [{
48
- label: i(V, "files.card.rename", "Rename"),
48
+ ...N ? [{
49
+ label: i(H, "files.card.rename", "Rename"),
49
50
  icon: /* @__PURE__ */ b(f, { className: "size-4" }),
50
- onClick: () => M(C),
51
+ onClick: () => N(w),
51
52
  divider: !0
52
53
  }] : [],
53
- ...j ? [{
54
- label: C.starred ? i(V, "files.card.removeFromStarred", "Remove from starred") : i(V, "files.card.addToStarred", "Add to starred"),
54
+ ...M ? [{
55
+ label: w.starred ? i(H, "files.card.removeFromStarred", "Remove from starred") : i(H, "files.card.addToStarred", "Add to starred"),
55
56
  icon: /* @__PURE__ */ b(_, { className: "size-4" }),
56
- onClick: () => j(C)
57
+ onClick: () => M(w)
57
58
  }] : [],
58
- ...I ? [{
59
- label: i(V, "files.card.details", "Details"),
59
+ ...L ? [{
60
+ label: i(H, "files.card.details", "Details"),
60
61
  icon: /* @__PURE__ */ b(m, { className: "size-4" }),
61
- onClick: () => I(C)
62
+ onClick: () => L(w)
62
63
  }] : [],
63
- ...L ? [{
64
- label: i(V, "files.card.activity", "Activity"),
64
+ ...R ? [{
65
+ label: i(H, "files.card.activity", "Activity"),
65
66
  icon: /* @__PURE__ */ b(l, { className: "size-4" }),
66
- onClick: () => L(C)
67
+ onClick: () => R(w)
67
68
  }] : [],
68
- ...k ? [{
69
- label: i(V, "files.card.delete", "Delete"),
69
+ ...A ? [{
70
+ label: i(H, "files.card.delete", "Delete"),
70
71
  icon: /* @__PURE__ */ b(v, { className: "size-4" }),
71
- onClick: () => k(C),
72
+ onClick: () => A(w),
72
73
  variant: "danger",
73
74
  divider: !0
74
75
  }] : [],
75
- ...A ? [{
76
- label: i(V, "files.card.restore", "Restore"),
76
+ ...j ? [{
77
+ label: i(H, "files.card.restore", "Restore"),
77
78
  icon: /* @__PURE__ */ b(h, { className: "size-4" }),
78
- onClick: () => A(C)
79
+ onClick: () => j(w)
79
80
  }] : []
80
81
  ], [
81
- C,
82
- N,
83
- O,
82
+ w,
84
83
  P,
84
+ k,
85
85
  F,
86
- M,
87
- j,
88
86
  I,
87
+ N,
88
+ M,
89
89
  L,
90
- k,
90
+ R,
91
91
  A,
92
- V
92
+ j,
93
+ H
93
94
  ]);
94
- return /* @__PURE__ */ x("div", {
95
- className: `@container group relative cursor-pointer overflow-hidden rounded-card border bg-bg-surface shadow-elevation-1 transition-shadow hover:shadow-elevation-2 focus-within:shadow-elevation-2 ${T ? "opacity-50" : "border-border-subtle"}`,
96
- onClick: q,
97
- onContextMenu: Q,
98
- onMouseEnter: () => U(!0),
99
- onMouseLeave: () => U(!1),
100
- onFocus: () => U(!0),
95
+ return /* @__PURE__ */ x(C, {
96
+ treatment: "insight",
97
+ className: `@container group cursor-pointer overflow-hidden border-border-seam focus-within:shadow-elevation-2 ${E ? "opacity-50" : ""}`,
98
+ onClick: J,
99
+ onContextMenu: $,
100
+ onMouseEnter: () => W(!0),
101
+ onMouseLeave: () => W(!1),
102
+ onFocus: () => W(!0),
101
103
  onBlur: (e) => {
102
- e.currentTarget.contains(e.relatedTarget) || U(!1);
104
+ e.currentTarget.contains(e.relatedTarget) || W(!1);
103
105
  },
104
106
  onKeyDown: (e) => {
105
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), q());
107
+ (e.key === "Enter" || e.key === " ") && (e.preventDefault(), J());
106
108
  },
107
- draggable: !!R,
108
- onDragStart: X,
109
- onDragEnd: Z,
109
+ draggable: !!z,
110
+ onDragStart: Z,
111
+ onDragEnd: Q,
110
112
  role: "button",
111
113
  tabIndex: 0,
112
- "aria-label": `Preview ${C.name}`,
114
+ "aria-label": `Preview ${w.name}`,
113
115
  children: [
114
116
  /* @__PURE__ */ b("div", {
115
- className: `absolute top-2 left-2 z-10 transition-opacity ${w ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"}`,
117
+ className: `absolute top-2 left-2 z-10 transition-opacity ${T ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"}`,
116
118
  children: /* @__PURE__ */ b("input", {
117
119
  type: "checkbox",
118
- checked: w,
119
- onChange: J,
120
+ checked: T,
121
+ onChange: Y,
120
122
  className: "size-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-2 focus:ring-action-primary-bg focus:ring-offset-2",
121
- "aria-label": `Select ${C.name}`
123
+ "aria-label": `Select ${w.name}`
122
124
  })
123
125
  }),
124
- C.starred && /* @__PURE__ */ b("div", {
126
+ w.starred && /* @__PURE__ */ b("div", {
125
127
  className: "absolute top-2 right-2 z-10",
126
128
  children: /* @__PURE__ */ b(_, { className: "size-4 fill-yellow-400 text-yellow-400" })
127
129
  }),
128
130
  /* @__PURE__ */ b("div", {
129
131
  className: "aspect-[4/3] bg-bg-sunken flex items-center justify-center overflow-hidden",
130
- children: C.thumbnailUrl ? /* @__PURE__ */ b("img", {
131
- src: C.thumbnailUrl,
132
- alt: C.name,
132
+ children: w.thumbnailUrl ? /* @__PURE__ */ b("img", {
133
+ src: w.thumbnailUrl,
134
+ alt: w.name,
133
135
  className: "h-full w-full object-contain p-2"
134
- }) : /* @__PURE__ */ b($, { className: "size-12 @md:size-16 text-text-muted" })
136
+ }) : /* @__PURE__ */ b(ee, { className: "size-12 @md:size-16 text-text-muted" })
135
137
  }),
136
138
  /* @__PURE__ */ x("div", {
137
139
  className: "p-3 @md:p-4",
138
140
  children: [
139
141
  /* @__PURE__ */ b("h3", {
140
142
  className: "font-text-md font-weight-medium text-text-primary truncate mb-1",
141
- children: C.name
143
+ children: w.name
142
144
  }),
143
145
  /* @__PURE__ */ x("div", {
144
146
  className: "hidden @sm:flex items-center gap-2 text-text-secondary font-text-sm",
145
147
  children: [
146
- /* @__PURE__ */ b("span", { children: n(C.size) }),
148
+ /* @__PURE__ */ b("span", {
149
+ className: "tabular-nums",
150
+ children: n(w.size)
151
+ }),
147
152
  /* @__PURE__ */ b("span", {
148
153
  className: "text-border-subtle",
149
154
  children: "•"
150
155
  }),
151
- /* @__PURE__ */ b("span", { children: t(C.updatedAt) })
156
+ /* @__PURE__ */ b("span", { children: t(w.updatedAt) })
152
157
  ]
153
158
  }),
154
159
  /* @__PURE__ */ x("div", {
155
160
  className: "hidden @md:flex items-center gap-2 mt-2 text-text-muted font-text-xs",
156
- children: [C.createdBy && /* @__PURE__ */ x("div", {
161
+ children: [w.createdBy && /* @__PURE__ */ x("div", {
157
162
  className: "flex items-center gap-1",
158
- children: [C.createdBy.avatar && /* @__PURE__ */ b("img", {
159
- src: C.createdBy.avatar,
160
- alt: C.createdBy.name,
163
+ children: [w.createdBy.avatar && /* @__PURE__ */ b("img", {
164
+ src: w.createdBy.avatar,
165
+ alt: w.createdBy.name,
161
166
  className: "size-4 rounded-full"
162
- }), /* @__PURE__ */ b("span", { children: C.createdBy.name })]
163
- }), C.isShared && /* @__PURE__ */ x(y, { children: [
167
+ }), /* @__PURE__ */ b("span", { children: w.createdBy.name })]
168
+ }), w.isShared && /* @__PURE__ */ x(y, { children: [
164
169
  /* @__PURE__ */ b("span", {
165
170
  className: "text-border-subtle",
166
171
  children: "•"
167
172
  }),
168
173
  /* @__PURE__ */ b(g, { className: "size-3" }),
169
- /* @__PURE__ */ b("span", { children: i(V, "files.card.shared", "Shared") })
174
+ /* @__PURE__ */ b("span", { children: i(H, "files.card.shared", "Shared") })
170
175
  ] })]
171
176
  }),
172
- C.tags && C.tags.length > 0 && /* @__PURE__ */ x("div", {
177
+ w.tags && w.tags.length > 0 && /* @__PURE__ */ x("div", {
173
178
  className: "hidden @lg:flex flex-wrap gap-1 mt-2",
174
- children: [C.tags.slice(0, 3).map((e) => /* @__PURE__ */ b("span", {
179
+ children: [w.tags.slice(0, 3).map((e) => /* @__PURE__ */ b("span", {
175
180
  className: "px-2 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm",
176
181
  children: e
177
- }, e)), C.tags.length > 3 && /* @__PURE__ */ x("span", {
182
+ }, e)), w.tags.length > 3 && /* @__PURE__ */ x("span", {
178
183
  className: "px-2 py-0.5 text-text-muted font-text-xs",
179
- children: ["+", C.tags.length - 3]
184
+ children: ["+", w.tags.length - 3]
180
185
  })]
181
186
  })
182
187
  ]
183
188
  }),
184
- H && /* @__PURE__ */ x("div", {
189
+ U && /* @__PURE__ */ x("div", {
185
190
  className: "absolute bottom-3 right-3 flex items-center gap-1 bg-bg-elevated border border-border-subtle rounded shadow-elevation-2 p-1",
186
191
  children: [
187
- N && /* @__PURE__ */ b("button", {
192
+ P && /* @__PURE__ */ b("button", {
188
193
  type: "button",
189
- onClick: (e) => Y(e, () => N(C)),
194
+ onClick: (e) => X(e, () => P(w)),
190
195
  className: "p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
191
- "aria-label": i(V, "files.card.download", "Download"),
192
- title: i(V, "files.card.download", "Download"),
196
+ "aria-label": i(H, "files.card.download", "Download"),
197
+ title: i(H, "files.card.download", "Download"),
193
198
  children: /* @__PURE__ */ b(d, { className: "size-4 text-text-primary" })
194
199
  }),
195
- O && /* @__PURE__ */ b("button", {
200
+ k && /* @__PURE__ */ b("button", {
196
201
  type: "button",
197
- onClick: (e) => Y(e, () => O(C)),
202
+ onClick: (e) => X(e, () => k(w)),
198
203
  className: "p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
199
- "aria-label": i(V, "files.card.share", "Share"),
200
- title: i(V, "files.card.share", "Share"),
204
+ "aria-label": i(H, "files.card.share", "Share"),
205
+ title: i(H, "files.card.share", "Share"),
201
206
  children: /* @__PURE__ */ b(g, { className: "size-4 text-text-primary" })
202
207
  }),
203
- j && /* @__PURE__ */ b("button", {
208
+ M && /* @__PURE__ */ b("button", {
204
209
  type: "button",
205
- onClick: (e) => Y(e, () => j(C)),
210
+ onClick: (e) => X(e, () => M(w)),
206
211
  className: "p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
207
- "aria-label": C.starred ? i(V, "files.card.unfavorite", "Unfavorite") : i(V, "files.card.favorite", "Favorite"),
208
- title: C.starred ? i(V, "files.card.unfavorite", "Unfavorite") : i(V, "files.card.favorite", "Favorite"),
209
- children: /* @__PURE__ */ b(_, { className: `size-4 ${C.starred ? "fill-status-warning-text text-status-warning-text" : "text-text-primary"}` })
212
+ "aria-label": w.starred ? i(H, "files.card.unfavorite", "Unfavorite") : i(H, "files.card.favorite", "Favorite"),
213
+ title: w.starred ? i(H, "files.card.unfavorite", "Unfavorite") : i(H, "files.card.favorite", "Favorite"),
214
+ children: /* @__PURE__ */ b(_, { className: `size-4 ${w.starred ? "fill-status-warning-text text-status-warning-text" : "text-text-primary"}` })
210
215
  }),
211
- A && /* @__PURE__ */ b("button", {
216
+ j && /* @__PURE__ */ b("button", {
212
217
  type: "button",
213
- onClick: (e) => Y(e, () => A(C)),
218
+ onClick: (e) => X(e, () => j(w)),
214
219
  className: "p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors",
215
- "aria-label": i(V, "files.card.restore", "Restore"),
216
- title: i(V, "files.card.restore", "Restore"),
220
+ "aria-label": i(H, "files.card.restore", "Restore"),
221
+ title: i(H, "files.card.restore", "Restore"),
217
222
  children: /* @__PURE__ */ b(h, { className: "size-4 text-status-success-text" })
218
223
  }),
219
224
  /* @__PURE__ */ b("div", {
220
225
  onClick: (e) => e.stopPropagation(),
221
226
  children: /* @__PURE__ */ b(a, {
222
- items: ee,
227
+ items: te,
223
228
  align: "right",
224
229
  triggerClassName: "p-1.5",
225
- isOpen: W,
226
- onToggle: G
230
+ isOpen: G,
231
+ onToggle: K
227
232
  })
228
233
  })
229
234
  ]
@@ -232,6 +237,6 @@ var C = ({ file: C, isSelected: w = !1, isDragging: T = !1, onSelect: E, onPrevi
232
237
  });
233
238
  };
234
239
  //#endregion
235
- export { C as FileCard };
240
+ export { w as FileCard };
236
241
 
237
242
  //# sourceMappingURL=FileCard.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FileCard.js","names":[],"sources":["../../../src/files/components/FileCard.tsx"],"sourcesContent":["import { type FC, useState, useMemo } from \"react\";\nimport {\n Download,\n Share2,\n Trash2,\n Star,\n RotateCcw,\n Copy,\n Edit,\n FolderInput,\n Info,\n Activity,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem } from \"../types\";\nimport { formatFileSize, formatFileDate, getFileIcon } from \"../utils\";\nimport { useFilesStore } from \"../store/filesStore\";\nimport { ActionMenu } from \"./ActionMenu\";\nimport { getDragOperation } from \"../hooks/useDragDrop\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface FileCardProps {\n file: FileItem;\n isSelected?: boolean;\n isDragging?: boolean;\n onSelect?: (fileId: string) => void;\n onPreview?: (file: FileItem) => void;\n onShare?: (file: FileItem) => void;\n onDelete?: (file: FileItem) => void;\n onRestore?: (file: FileItem) => void;\n onFavorite?: (file: FileItem) => void;\n onRename?: (file: FileItem) => void;\n onDownload?: (file: FileItem) => void;\n onCopy?: (file: FileItem) => void;\n onMove?: (file: FileItem) => void;\n onInfo?: (file: FileItem) => void;\n onActivity?: (file: FileItem) => void;\n onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n onDragEnd?: () => void;\n onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\ninterface DraggableFileCardProps extends Omit<\n FileCardProps,\n \"onDragStart\" | \"onDragEnd\"\n> {\n onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n onDragEnd?: () => void;\n onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\nexport const FileCard: FC<DraggableFileCardProps> = ({\n file,\n isSelected = false,\n isDragging = false,\n onSelect,\n onPreview,\n onShare,\n onDelete,\n onRestore,\n onFavorite,\n onRename,\n onDownload,\n onCopy,\n onMove,\n onInfo,\n onActivity,\n onDragStart,\n onDragEnd,\n onContextMenu,\n}) => {\n const { t } = useI18n();\n const [showActions, setShowActions] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const { toggleFileSelection } = useFilesStore();\n\n const openPreview = () => {\n if (onPreview) {\n onPreview(file);\n }\n };\n\n const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.stopPropagation();\n if (onSelect) {\n onSelect(file.id);\n } else {\n toggleFileSelection(file.id);\n }\n };\n\n const handleActionClick = (e: React.MouseEvent, action: () => void) => {\n e.stopPropagation();\n action();\n setShowActions(false);\n };\n\n const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {\n e.dataTransfer.effectAllowed = \"copyMove\";\n e.dataTransfer.setData(\"application/x-file-id\", file.id);\n e.dataTransfer.setData(\"application/x-file-type\", \"file\");\n const operation = getDragOperation(e);\n e.dataTransfer.setData(\"application/x-drag-operation\", operation);\n onDragStart?.(file, operation);\n };\n\n const handleDragEnd = () => {\n onDragEnd?.();\n };\n\n const handleContextMenu = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onContextMenu?.(file, e.clientX, e.clientY);\n };\n\n const FileIconComponent = getFileIcon(file.mimeType);\n\n // Memoize menu items to prevent re-renders\n const menuItems = useMemo(\n () => [\n ...(onDownload\n ? [\n {\n label: tWithFallback(t, \"files.card.download\", \"Download\"),\n icon: <Download className=\"size-4\" />,\n onClick: () => onDownload(file),\n },\n ]\n : []),\n ...(onShare\n ? [\n {\n label: tWithFallback(t, \"files.card.share\", \"Share\"),\n icon: <Share2 className=\"size-4\" />,\n onClick: () => onShare(file),\n },\n ]\n : []),\n ...(onCopy\n ? [\n {\n label: tWithFallback(t, \"files.card.makeCopy\", \"Make a copy\"),\n icon: <Copy className=\"size-4\" />,\n onClick: () => onCopy(file),\n },\n ]\n : []),\n ...(onMove\n ? [\n {\n label: tWithFallback(t, \"files.card.moveTo\", \"Move to\"),\n icon: <FolderInput className=\"size-4\" />,\n onClick: () => onMove(file),\n },\n ]\n : []),\n ...(onRename\n ? [\n {\n label: tWithFallback(t, \"files.card.rename\", \"Rename\"),\n icon: <Edit className=\"size-4\" />,\n onClick: () => onRename(file),\n divider: true,\n },\n ]\n : []),\n ...(onFavorite\n ? [\n {\n label: file.starred\n ? tWithFallback(\n t,\n \"files.card.removeFromStarred\",\n \"Remove from starred\",\n )\n : tWithFallback(t, \"files.card.addToStarred\", \"Add to starred\"),\n icon: <Star className=\"size-4\" />,\n onClick: () => onFavorite(file),\n },\n ]\n : []),\n ...(onInfo\n ? [\n {\n label: tWithFallback(t, \"files.card.details\", \"Details\"),\n icon: <Info className=\"size-4\" />,\n onClick: () => onInfo(file),\n },\n ]\n : []),\n ...(onActivity\n ? [\n {\n label: tWithFallback(t, \"files.card.activity\", \"Activity\"),\n icon: <Activity className=\"size-4\" />,\n onClick: () => onActivity(file),\n },\n ]\n : []),\n ...(onDelete\n ? [\n {\n label: tWithFallback(t, \"files.card.delete\", \"Delete\"),\n icon: <Trash2 className=\"size-4\" />,\n onClick: () => onDelete(file),\n variant: \"danger\" as const,\n divider: true,\n },\n ]\n : []),\n ...(onRestore\n ? [\n {\n label: tWithFallback(t, \"files.card.restore\", \"Restore\"),\n icon: <RotateCcw className=\"size-4\" />,\n onClick: () => onRestore(file),\n },\n ]\n : []),\n ],\n [\n file,\n onDownload,\n onShare,\n onCopy,\n onMove,\n onRename,\n onFavorite,\n onInfo,\n onActivity,\n onDelete,\n onRestore,\n t,\n ],\n );\n\n return (\n <div\n className={`@container group relative cursor-pointer overflow-hidden rounded-card border bg-bg-surface shadow-elevation-1 transition-shadow hover:shadow-elevation-2 focus-within:shadow-elevation-2 ${isDragging ? \"opacity-50\" : \"border-border-subtle\"}`}\n onClick={openPreview}\n onContextMenu={handleContextMenu}\n onMouseEnter={() => setShowActions(true)}\n onMouseLeave={() => setShowActions(false)}\n onFocus={() => setShowActions(true)}\n onBlur={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget)) {\n setShowActions(false);\n }\n }}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n openPreview();\n }\n }}\n draggable={Boolean(onDragStart)}\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n role=\"button\"\n tabIndex={0}\n aria-label={`Preview ${file.name}`}\n >\n {/* Selection checkbox */}\n <div\n className={`absolute top-2 left-2 z-10 transition-opacity ${\n isSelected\n ? \"opacity-100\"\n : \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\"\n }`}\n >\n <input\n type=\"checkbox\"\n checked={isSelected}\n onChange={handleCheckboxChange}\n className=\"size-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-2 focus:ring-action-primary-bg focus:ring-offset-2\"\n aria-label={`Select ${file.name}`}\n />\n </div>\n\n {/* Favorite indicator */}\n {file.starred && (\n <div className=\"absolute top-2 right-2 z-10\">\n <Star className=\"size-4 fill-yellow-400 text-yellow-400\" />\n </div>\n )}\n\n {/* Thumbnail or icon */}\n <div className=\"aspect-[4/3] bg-bg-sunken flex items-center justify-center overflow-hidden\">\n {file.thumbnailUrl ? (\n <img\n src={file.thumbnailUrl}\n alt={file.name}\n className=\"h-full w-full object-contain p-2\"\n />\n ) : (\n <FileIconComponent className=\"size-12 @md:size-16 text-text-muted\" />\n )}\n </div>\n\n {/* File info */}\n <div className=\"p-3 @md:p-4\">\n <h3 className=\"font-text-md font-weight-medium text-text-primary truncate mb-1\">\n {file.name}\n </h3>\n\n <div className=\"hidden @sm:flex items-center gap-2 text-text-secondary font-text-sm\">\n <span>{formatFileSize(file.size)}</span>\n <span className=\"text-border-subtle\">•</span>\n <span>{formatFileDate(file.updatedAt)}</span>\n </div>\n\n {/* Extended metadata on larger containers */}\n <div className=\"hidden @md:flex items-center gap-2 mt-2 text-text-muted font-text-xs\">\n {file.createdBy && (\n <div className=\"flex items-center gap-1\">\n {file.createdBy.avatar && (\n <img\n src={file.createdBy.avatar}\n alt={file.createdBy.name}\n className=\"size-4 rounded-full\"\n />\n )}\n <span>{file.createdBy.name}</span>\n </div>\n )}\n {file.isShared && (\n <>\n <span className=\"text-border-subtle\">•</span>\n <Share2 className=\"size-3\" />\n <span>{tWithFallback(t, \"files.card.shared\", \"Shared\")}</span>\n </>\n )}\n </div>\n\n {/* Tags */}\n {file.tags && file.tags.length > 0 && (\n <div className=\"hidden @lg:flex flex-wrap gap-1 mt-2\">\n {file.tags.slice(0, 3).map((tag) => (\n <span\n key={tag}\n className=\"px-2 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm\"\n >\n {tag}\n </span>\n ))}\n {file.tags.length > 3 && (\n <span className=\"px-2 py-0.5 text-text-muted font-text-xs\">\n +{file.tags.length - 3}\n </span>\n )}\n </div>\n )}\n </div>\n\n {/* Action buttons (on hover) with dropdown menu */}\n {showActions && (\n <div className=\"absolute bottom-3 right-3 flex items-center gap-1 bg-bg-elevated border border-border-subtle rounded shadow-elevation-2 p-1\">\n {onDownload && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onDownload(file))}\n className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n aria-label={tWithFallback(t, \"files.card.download\", \"Download\")}\n title={tWithFallback(t, \"files.card.download\", \"Download\")}\n >\n <Download className=\"size-4 text-text-primary\" />\n </button>\n )}\n\n {onShare && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onShare(file))}\n className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n aria-label={tWithFallback(t, \"files.card.share\", \"Share\")}\n title={tWithFallback(t, \"files.card.share\", \"Share\")}\n >\n <Share2 className=\"size-4 text-text-primary\" />\n </button>\n )}\n\n {onFavorite && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onFavorite(file))}\n className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n aria-label={\n file.starred\n ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n }\n title={\n file.starred\n ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n }\n >\n <Star\n className={`size-4 ${\n file.starred\n ? \"fill-status-warning-text text-status-warning-text\"\n : \"text-text-primary\"\n }`}\n />\n </button>\n )}\n\n {onRestore && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onRestore(file))}\n className=\"p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors\"\n aria-label={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n title={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n >\n <RotateCcw className=\"size-4 text-status-success-text\" />\n </button>\n )}\n\n {/* More options dropdown */}\n <div onClick={(e) => e.stopPropagation()}>\n <ActionMenu\n items={menuItems}\n align=\"right\"\n triggerClassName=\"p-1.5\"\n isOpen={menuOpen}\n onToggle={setMenuOpen}\n />\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"FileCard.js","names":[],"sources":["../../../src/files/components/FileCard.tsx"],"sourcesContent":["import { type FC, useState, useMemo } from \"react\";\nimport {\n Download,\n Share2,\n Trash2,\n Star,\n RotateCcw,\n Copy,\n Edit,\n FolderInput,\n Info,\n Activity,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport type { FileItem } from \"../types\";\nimport { formatFileSize, formatFileDate, getFileIcon } from \"../utils\";\nimport { useFilesStore } from \"../store/filesStore\";\nimport { ActionMenu } from \"./ActionMenu\";\nimport { getDragOperation } from \"../hooks/useDragDrop\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface FileCardProps {\n file: FileItem;\n isSelected?: boolean;\n isDragging?: boolean;\n onSelect?: (fileId: string) => void;\n onPreview?: (file: FileItem) => void;\n onShare?: (file: FileItem) => void;\n onDelete?: (file: FileItem) => void;\n onRestore?: (file: FileItem) => void;\n onFavorite?: (file: FileItem) => void;\n onRename?: (file: FileItem) => void;\n onDownload?: (file: FileItem) => void;\n onCopy?: (file: FileItem) => void;\n onMove?: (file: FileItem) => void;\n onInfo?: (file: FileItem) => void;\n onActivity?: (file: FileItem) => void;\n onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n onDragEnd?: () => void;\n onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\ninterface DraggableFileCardProps extends Omit<\n FileCardProps,\n \"onDragStart\" | \"onDragEnd\"\n> {\n onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n onDragEnd?: () => void;\n onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\nexport const FileCard: FC<DraggableFileCardProps> = ({\n file,\n isSelected = false,\n isDragging = false,\n onSelect,\n onPreview,\n onShare,\n onDelete,\n onRestore,\n onFavorite,\n onRename,\n onDownload,\n onCopy,\n onMove,\n onInfo,\n onActivity,\n onDragStart,\n onDragEnd,\n onContextMenu,\n}) => {\n const { t } = useI18n();\n const [showActions, setShowActions] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const { toggleFileSelection } = useFilesStore();\n\n const openPreview = () => {\n if (onPreview) {\n onPreview(file);\n }\n };\n\n const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.stopPropagation();\n if (onSelect) {\n onSelect(file.id);\n } else {\n toggleFileSelection(file.id);\n }\n };\n\n const handleActionClick = (e: React.MouseEvent, action: () => void) => {\n e.stopPropagation();\n action();\n setShowActions(false);\n };\n\n const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {\n e.dataTransfer.effectAllowed = \"copyMove\";\n e.dataTransfer.setData(\"application/x-file-id\", file.id);\n e.dataTransfer.setData(\"application/x-file-type\", \"file\");\n const operation = getDragOperation(e);\n e.dataTransfer.setData(\"application/x-drag-operation\", operation);\n onDragStart?.(file, operation);\n };\n\n const handleDragEnd = () => {\n onDragEnd?.();\n };\n\n const handleContextMenu = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onContextMenu?.(file, e.clientX, e.clientY);\n };\n\n const FileIconComponent = getFileIcon(file.mimeType);\n\n // Memoize menu items to prevent re-renders\n const menuItems = useMemo(\n () => [\n ...(onDownload\n ? [\n {\n label: tWithFallback(t, \"files.card.download\", \"Download\"),\n icon: <Download className=\"size-4\" />,\n onClick: () => onDownload(file),\n },\n ]\n : []),\n ...(onShare\n ? [\n {\n label: tWithFallback(t, \"files.card.share\", \"Share\"),\n icon: <Share2 className=\"size-4\" />,\n onClick: () => onShare(file),\n },\n ]\n : []),\n ...(onCopy\n ? [\n {\n label: tWithFallback(t, \"files.card.makeCopy\", \"Make a copy\"),\n icon: <Copy className=\"size-4\" />,\n onClick: () => onCopy(file),\n },\n ]\n : []),\n ...(onMove\n ? [\n {\n label: tWithFallback(t, \"files.card.moveTo\", \"Move to\"),\n icon: <FolderInput className=\"size-4\" />,\n onClick: () => onMove(file),\n },\n ]\n : []),\n ...(onRename\n ? [\n {\n label: tWithFallback(t, \"files.card.rename\", \"Rename\"),\n icon: <Edit className=\"size-4\" />,\n onClick: () => onRename(file),\n divider: true,\n },\n ]\n : []),\n ...(onFavorite\n ? [\n {\n label: file.starred\n ? tWithFallback(\n t,\n \"files.card.removeFromStarred\",\n \"Remove from starred\",\n )\n : tWithFallback(t, \"files.card.addToStarred\", \"Add to starred\"),\n icon: <Star className=\"size-4\" />,\n onClick: () => onFavorite(file),\n },\n ]\n : []),\n ...(onInfo\n ? [\n {\n label: tWithFallback(t, \"files.card.details\", \"Details\"),\n icon: <Info className=\"size-4\" />,\n onClick: () => onInfo(file),\n },\n ]\n : []),\n ...(onActivity\n ? [\n {\n label: tWithFallback(t, \"files.card.activity\", \"Activity\"),\n icon: <Activity className=\"size-4\" />,\n onClick: () => onActivity(file),\n },\n ]\n : []),\n ...(onDelete\n ? [\n {\n label: tWithFallback(t, \"files.card.delete\", \"Delete\"),\n icon: <Trash2 className=\"size-4\" />,\n onClick: () => onDelete(file),\n variant: \"danger\" as const,\n divider: true,\n },\n ]\n : []),\n ...(onRestore\n ? [\n {\n label: tWithFallback(t, \"files.card.restore\", \"Restore\"),\n icon: <RotateCcw className=\"size-4\" />,\n onClick: () => onRestore(file),\n },\n ]\n : []),\n ],\n [\n file,\n onDownload,\n onShare,\n onCopy,\n onMove,\n onRename,\n onFavorite,\n onInfo,\n onActivity,\n onDelete,\n onRestore,\n t,\n ],\n );\n\n return (\n <GlassCard\n treatment=\"insight\"\n className={`@container group cursor-pointer overflow-hidden border-border-seam focus-within:shadow-elevation-2 ${isDragging ? \"opacity-50\" : \"\"}`}\n onClick={openPreview}\n onContextMenu={handleContextMenu}\n onMouseEnter={() => setShowActions(true)}\n onMouseLeave={() => setShowActions(false)}\n onFocus={() => setShowActions(true)}\n onBlur={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget)) {\n setShowActions(false);\n }\n }}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n openPreview();\n }\n }}\n draggable={Boolean(onDragStart)}\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n role=\"button\"\n tabIndex={0}\n aria-label={`Preview ${file.name}`}\n >\n {/* Selection checkbox */}\n <div\n className={`absolute top-2 left-2 z-10 transition-opacity ${\n isSelected\n ? \"opacity-100\"\n : \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\"\n }`}\n >\n <input\n type=\"checkbox\"\n checked={isSelected}\n onChange={handleCheckboxChange}\n className=\"size-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-2 focus:ring-action-primary-bg focus:ring-offset-2\"\n aria-label={`Select ${file.name}`}\n />\n </div>\n\n {/* Favorite indicator */}\n {file.starred && (\n <div className=\"absolute top-2 right-2 z-10\">\n <Star className=\"size-4 fill-yellow-400 text-yellow-400\" />\n </div>\n )}\n\n {/* Thumbnail or icon */}\n <div className=\"aspect-[4/3] bg-bg-sunken flex items-center justify-center overflow-hidden\">\n {file.thumbnailUrl ? (\n <img\n src={file.thumbnailUrl}\n alt={file.name}\n className=\"h-full w-full object-contain p-2\"\n />\n ) : (\n <FileIconComponent className=\"size-12 @md:size-16 text-text-muted\" />\n )}\n </div>\n\n {/* File info */}\n <div className=\"p-3 @md:p-4\">\n <h3 className=\"font-text-md font-weight-medium text-text-primary truncate mb-1\">\n {file.name}\n </h3>\n\n <div className=\"hidden @sm:flex items-center gap-2 text-text-secondary font-text-sm\">\n <span className=\"tabular-nums\">{formatFileSize(file.size)}</span>\n <span className=\"text-border-subtle\">•</span>\n <span>{formatFileDate(file.updatedAt)}</span>\n </div>\n\n {/* Extended metadata on larger containers */}\n <div className=\"hidden @md:flex items-center gap-2 mt-2 text-text-muted font-text-xs\">\n {file.createdBy && (\n <div className=\"flex items-center gap-1\">\n {file.createdBy.avatar && (\n <img\n src={file.createdBy.avatar}\n alt={file.createdBy.name}\n className=\"size-4 rounded-full\"\n />\n )}\n <span>{file.createdBy.name}</span>\n </div>\n )}\n {file.isShared && (\n <>\n <span className=\"text-border-subtle\">•</span>\n <Share2 className=\"size-3\" />\n <span>{tWithFallback(t, \"files.card.shared\", \"Shared\")}</span>\n </>\n )}\n </div>\n\n {/* Tags */}\n {file.tags && file.tags.length > 0 && (\n <div className=\"hidden @lg:flex flex-wrap gap-1 mt-2\">\n {file.tags.slice(0, 3).map((tag) => (\n <span\n key={tag}\n className=\"px-2 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm\"\n >\n {tag}\n </span>\n ))}\n {file.tags.length > 3 && (\n <span className=\"px-2 py-0.5 text-text-muted font-text-xs\">\n +{file.tags.length - 3}\n </span>\n )}\n </div>\n )}\n </div>\n\n {/* Action buttons (on hover) with dropdown menu */}\n {showActions && (\n <div className=\"absolute bottom-3 right-3 flex items-center gap-1 bg-bg-elevated border border-border-subtle rounded shadow-elevation-2 p-1\">\n {onDownload && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onDownload(file))}\n className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n aria-label={tWithFallback(t, \"files.card.download\", \"Download\")}\n title={tWithFallback(t, \"files.card.download\", \"Download\")}\n >\n <Download className=\"size-4 text-text-primary\" />\n </button>\n )}\n\n {onShare && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onShare(file))}\n className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n aria-label={tWithFallback(t, \"files.card.share\", \"Share\")}\n title={tWithFallback(t, \"files.card.share\", \"Share\")}\n >\n <Share2 className=\"size-4 text-text-primary\" />\n </button>\n )}\n\n {onFavorite && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onFavorite(file))}\n className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n aria-label={\n file.starred\n ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n }\n title={\n file.starred\n ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n }\n >\n <Star\n className={`size-4 ${\n file.starred\n ? \"fill-status-warning-text text-status-warning-text\"\n : \"text-text-primary\"\n }`}\n />\n </button>\n )}\n\n {onRestore && (\n <button\n type=\"button\"\n onClick={(e) => handleActionClick(e, () => onRestore(file))}\n className=\"p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors\"\n aria-label={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n title={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n >\n <RotateCcw className=\"size-4 text-status-success-text\" />\n </button>\n )}\n\n {/* More options dropdown */}\n <div onClick={(e) => e.stopPropagation()}>\n <ActionMenu\n items={menuItems}\n align=\"right\"\n triggerClassName=\"p-1.5\"\n isOpen={menuOpen}\n onToggle={setMenuOpen}\n />\n </div>\n </div>\n )}\n </GlassCard>\n );\n};\n"],"mappings":"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"}