@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.
- package/dist/files/components/CopyDialog.js +73 -80
- package/dist/files/components/CopyDialog.js.map +1 -1
- package/dist/files/components/FileBrowser.js +2 -2
- package/dist/files/components/FileBrowser.js.map +1 -1
- package/dist/files/components/FileCard.js +115 -110
- package/dist/files/components/FileCard.js.map +1 -1
- package/dist/files/components/FileInfoPanel.js +89 -84
- package/dist/files/components/FileInfoPanel.js.map +1 -1
- package/dist/files/components/FileListItem.js +2 -2
- package/dist/files/components/FileListItem.js.map +1 -1
- package/dist/files/components/FileVersionPanel.js +7 -4
- package/dist/files/components/FileVersionPanel.js.map +1 -1
- package/dist/files/components/FolderCard.js +128 -126
- package/dist/files/components/FolderCard.js.map +1 -1
- package/dist/files/components/MoveDialog.js +72 -77
- package/dist/files/components/MoveDialog.js.map +1 -1
- package/dist/files/components/StorageBanner.js.map +1 -1
- package/dist/files/pages/BrowserPage.js +445 -463
- package/dist/files/pages/BrowserPage.js.map +1 -1
- package/dist/files/pages/ShareAccessPage.js +45 -43
- package/dist/files/pages/ShareAccessPage.js.map +1 -1
- package/package.json +2 -2
|
@@ -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
|
|
12
|
-
let { t:
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
e.stopPropagation(),
|
|
16
|
-
},
|
|
17
|
-
e.stopPropagation(), t(),
|
|
18
|
-
},
|
|
19
|
-
e.dataTransfer.effectAllowed = "copyMove", e.dataTransfer.setData("application/x-file-id",
|
|
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),
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
e.preventDefault(), e.stopPropagation(),
|
|
26
|
-
},
|
|
27
|
-
...
|
|
28
|
-
label: i(
|
|
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: () =>
|
|
31
|
+
onClick: () => P(w)
|
|
31
32
|
}] : [],
|
|
32
|
-
...
|
|
33
|
-
label: i(
|
|
33
|
+
...k ? [{
|
|
34
|
+
label: i(H, "files.card.share", "Share"),
|
|
34
35
|
icon: /* @__PURE__ */ b(g, { className: "size-4" }),
|
|
35
|
-
onClick: () =>
|
|
36
|
+
onClick: () => k(w)
|
|
36
37
|
}] : [],
|
|
37
|
-
...
|
|
38
|
-
label: i(
|
|
38
|
+
...F ? [{
|
|
39
|
+
label: i(H, "files.card.makeCopy", "Make a copy"),
|
|
39
40
|
icon: /* @__PURE__ */ b(u, { className: "size-4" }),
|
|
40
|
-
onClick: () =>
|
|
41
|
+
onClick: () => F(w)
|
|
41
42
|
}] : [],
|
|
42
|
-
...
|
|
43
|
-
label: i(
|
|
43
|
+
...I ? [{
|
|
44
|
+
label: i(H, "files.card.moveTo", "Move to"),
|
|
44
45
|
icon: /* @__PURE__ */ b(p, { className: "size-4" }),
|
|
45
|
-
onClick: () =>
|
|
46
|
+
onClick: () => I(w)
|
|
46
47
|
}] : [],
|
|
47
|
-
...
|
|
48
|
-
label: i(
|
|
48
|
+
...N ? [{
|
|
49
|
+
label: i(H, "files.card.rename", "Rename"),
|
|
49
50
|
icon: /* @__PURE__ */ b(f, { className: "size-4" }),
|
|
50
|
-
onClick: () =>
|
|
51
|
+
onClick: () => N(w),
|
|
51
52
|
divider: !0
|
|
52
53
|
}] : [],
|
|
53
|
-
...
|
|
54
|
-
label:
|
|
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: () =>
|
|
57
|
+
onClick: () => M(w)
|
|
57
58
|
}] : [],
|
|
58
|
-
...
|
|
59
|
-
label: i(
|
|
59
|
+
...L ? [{
|
|
60
|
+
label: i(H, "files.card.details", "Details"),
|
|
60
61
|
icon: /* @__PURE__ */ b(m, { className: "size-4" }),
|
|
61
|
-
onClick: () =>
|
|
62
|
+
onClick: () => L(w)
|
|
62
63
|
}] : [],
|
|
63
|
-
...
|
|
64
|
-
label: i(
|
|
64
|
+
...R ? [{
|
|
65
|
+
label: i(H, "files.card.activity", "Activity"),
|
|
65
66
|
icon: /* @__PURE__ */ b(l, { className: "size-4" }),
|
|
66
|
-
onClick: () =>
|
|
67
|
+
onClick: () => R(w)
|
|
67
68
|
}] : [],
|
|
68
|
-
...
|
|
69
|
-
label: i(
|
|
69
|
+
...A ? [{
|
|
70
|
+
label: i(H, "files.card.delete", "Delete"),
|
|
70
71
|
icon: /* @__PURE__ */ b(v, { className: "size-4" }),
|
|
71
|
-
onClick: () =>
|
|
72
|
+
onClick: () => A(w),
|
|
72
73
|
variant: "danger",
|
|
73
74
|
divider: !0
|
|
74
75
|
}] : [],
|
|
75
|
-
...
|
|
76
|
-
label: i(
|
|
76
|
+
...j ? [{
|
|
77
|
+
label: i(H, "files.card.restore", "Restore"),
|
|
77
78
|
icon: /* @__PURE__ */ b(h, { className: "size-4" }),
|
|
78
|
-
onClick: () =>
|
|
79
|
+
onClick: () => j(w)
|
|
79
80
|
}] : []
|
|
80
81
|
], [
|
|
81
|
-
|
|
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
|
-
|
|
90
|
+
R,
|
|
91
91
|
A,
|
|
92
|
-
|
|
92
|
+
j,
|
|
93
|
+
H
|
|
93
94
|
]);
|
|
94
|
-
return /* @__PURE__ */ x(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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) ||
|
|
104
|
+
e.currentTarget.contains(e.relatedTarget) || W(!1);
|
|
103
105
|
},
|
|
104
106
|
onKeyDown: (e) => {
|
|
105
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
107
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), J());
|
|
106
108
|
},
|
|
107
|
-
draggable: !!
|
|
108
|
-
onDragStart:
|
|
109
|
-
onDragEnd:
|
|
109
|
+
draggable: !!z,
|
|
110
|
+
onDragStart: Z,
|
|
111
|
+
onDragEnd: Q,
|
|
110
112
|
role: "button",
|
|
111
113
|
tabIndex: 0,
|
|
112
|
-
"aria-label": `Preview ${
|
|
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 ${
|
|
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:
|
|
119
|
-
onChange:
|
|
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 ${
|
|
123
|
+
"aria-label": `Select ${w.name}`
|
|
122
124
|
})
|
|
123
125
|
}),
|
|
124
|
-
|
|
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:
|
|
131
|
-
src:
|
|
132
|
-
alt:
|
|
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(
|
|
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:
|
|
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", {
|
|
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(
|
|
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: [
|
|
161
|
+
children: [w.createdBy && /* @__PURE__ */ x("div", {
|
|
157
162
|
className: "flex items-center gap-1",
|
|
158
|
-
children: [
|
|
159
|
-
src:
|
|
160
|
-
alt:
|
|
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:
|
|
163
|
-
}),
|
|
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(
|
|
174
|
+
/* @__PURE__ */ b("span", { children: i(H, "files.card.shared", "Shared") })
|
|
170
175
|
] })]
|
|
171
176
|
}),
|
|
172
|
-
|
|
177
|
+
w.tags && w.tags.length > 0 && /* @__PURE__ */ x("div", {
|
|
173
178
|
className: "hidden @lg:flex flex-wrap gap-1 mt-2",
|
|
174
|
-
children: [
|
|
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)),
|
|
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: ["+",
|
|
184
|
+
children: ["+", w.tags.length - 3]
|
|
180
185
|
})]
|
|
181
186
|
})
|
|
182
187
|
]
|
|
183
188
|
}),
|
|
184
|
-
|
|
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
|
-
|
|
192
|
+
P && /* @__PURE__ */ b("button", {
|
|
188
193
|
type: "button",
|
|
189
|
-
onClick: (e) =>
|
|
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(
|
|
192
|
-
title: i(
|
|
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
|
-
|
|
200
|
+
k && /* @__PURE__ */ b("button", {
|
|
196
201
|
type: "button",
|
|
197
|
-
onClick: (e) =>
|
|
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(
|
|
200
|
-
title: i(
|
|
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
|
-
|
|
208
|
+
M && /* @__PURE__ */ b("button", {
|
|
204
209
|
type: "button",
|
|
205
|
-
onClick: (e) =>
|
|
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":
|
|
208
|
-
title:
|
|
209
|
-
children: /* @__PURE__ */ b(_, { className: `size-4 ${
|
|
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
|
-
|
|
216
|
+
j && /* @__PURE__ */ b("button", {
|
|
212
217
|
type: "button",
|
|
213
|
-
onClick: (e) =>
|
|
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(
|
|
216
|
-
title: i(
|
|
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:
|
|
227
|
+
items: te,
|
|
223
228
|
align: "right",
|
|
224
229
|
triggerClassName: "p-1.5",
|
|
225
|
-
isOpen:
|
|
226
|
-
onToggle:
|
|
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 {
|
|
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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"}
|