@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.
Files changed (22) hide show
  1. package/dist/files/components/CopyDialog.js +73 -80
  2. package/dist/files/components/CopyDialog.js.map +1 -1
  3. package/dist/files/components/FileBrowser.js +2 -2
  4. package/dist/files/components/FileBrowser.js.map +1 -1
  5. package/dist/files/components/FileCard.js +115 -110
  6. package/dist/files/components/FileCard.js.map +1 -1
  7. package/dist/files/components/FileInfoPanel.js +89 -84
  8. package/dist/files/components/FileInfoPanel.js.map +1 -1
  9. package/dist/files/components/FileListItem.js +2 -2
  10. package/dist/files/components/FileListItem.js.map +1 -1
  11. package/dist/files/components/FileVersionPanel.js +7 -4
  12. package/dist/files/components/FileVersionPanel.js.map +1 -1
  13. package/dist/files/components/FolderCard.js +128 -126
  14. package/dist/files/components/FolderCard.js.map +1 -1
  15. package/dist/files/components/MoveDialog.js +72 -77
  16. package/dist/files/components/MoveDialog.js.map +1 -1
  17. package/dist/files/components/StorageBanner.js.map +1 -1
  18. package/dist/files/pages/BrowserPage.js +445 -463
  19. package/dist/files/pages/BrowserPage.js.map +1 -1
  20. package/dist/files/pages/ShareAccessPage.js +45 -43
  21. package/dist/files/pages/ShareAccessPage.js.map +1 -1
  22. package/package.json +2 -2
package/dist/files/components/MoveDialog.js CHANGED
@@ -1,121 +1,116 @@
1
1
  import { tWithFallback as e } from "../utils/i18n.js";
2
2
  import { useFoldersQuery as t } from "../hooks/useFoldersQuery.js";
3
3
  import { useState as n } from "react";
4
- import { ChevronRight as r, Folder as i, Home as a, Loader2 as o, X as s } from "lucide-react";
5
- import { jsx as c, jsxs as l } from "react/jsx-runtime";
6
- import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
4
+ import { ChevronRight as r, Folder as i, Home as a, Loader2 as o } from "lucide-react";
5
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
6
+ import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
7
+ import { Button as u, ResponsiveDialog as d, ResponsiveDialogContent as f, ResponsiveDialogFooter as p, ResponsiveDialogHeader as m, ResponsiveDialogTitle as h } from "@burdenoff/fe-libs/ui";
7
8
  //#region src/files/components/MoveDialog.tsx
8
- var d = ({ item: d, type: f, onClose: p, onMove: m, isLoading: h = !1 }) => {
9
- let { t: g } = u(), [_, v] = n(null), [y, b] = n([]), [x, S] = n(void 0), { data: C, loading: w } = t(_ || void 0), T = C?.getFolders?.folders || [], E = (e) => {
10
- v(e.id), b([...y, {
9
+ var g = ({ item: g, type: _, onClose: v, onMove: y, isLoading: b = !1 }) => {
10
+ let { t: x } = l(), [S, C] = n(null), [w, T] = n([]), [E, D] = n(void 0), { data: O, loading: k } = t(S || void 0), A = O?.getFolders?.folders || [], j = (e) => {
11
+ C(e.id), T([...w, {
11
12
  id: e.id,
12
13
  name: e.name
13
- }]), S(e.id);
14
- }, D = (e) => {
15
- if (e === -1) v(null), b([]), S(null);
14
+ }]), D(e.id);
15
+ }, M = (e) => {
16
+ if (e === -1) C(null), T([]), D(null);
16
17
  else {
17
- let t = y[e];
18
- v(t.id), b(y.slice(0, e + 1)), S(t.id);
18
+ let t = w[e];
19
+ C(t.id), T(w.slice(0, e + 1)), D(t.id);
19
20
  }
20
- }, O = async () => {
21
- x === void 0 || x === d.id || (await m(x), p());
22
- }, k = T.filter((e) => !(f === "folder" && e.id === d.id));
23
- return /* @__PURE__ */ c("div", {
24
- className: "fixed inset-0 backdrop-blur-sm flex items-center justify-center z-[100] animate-in fade-in duration-200",
25
- role: "dialog",
26
- "aria-modal": "true",
27
- "aria-label": e(g, "files.moveDialog.ariaLabel", "Move {{type}} {{name}}", {
28
- type: f,
29
- name: d.name
30
- }),
31
- children: /* @__PURE__ */ l("div", {
32
- className: "bg-bg-surface rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[80vh] flex flex-col animate-in zoom-in-95 duration-200",
21
+ }, N = async () => {
22
+ E === void 0 || E === g.id || (await y(E), v());
23
+ }, P = A.filter((e) => !(_ === "folder" && e.id === g.id));
24
+ return /* @__PURE__ */ s(d, {
25
+ open: !0,
26
+ onOpenChange: (e) => {
27
+ !e && !b && v();
28
+ },
29
+ children: /* @__PURE__ */ c(f, {
30
+ className: "flex max-h-[80vh] w-full max-w-md flex-col gap-0 p-0",
31
+ "aria-label": e(x, "files.moveDialog.ariaLabel", "Move {{type}} {{name}}", {
32
+ type: _,
33
+ name: g.name
34
+ }),
33
35
  children: [
34
- /* @__PURE__ */ l("div", {
35
- className: "flex items-center justify-between px-6 py-4 border-b border-border-default",
36
- children: [/* @__PURE__ */ c("h2", {
36
+ /* @__PURE__ */ s(m, {
37
+ className: "px-6 py-4 border-b border-border-default text-left",
38
+ children: /* @__PURE__ */ s(h, {
37
39
  className: "text-lg font-semibold text-text-primary",
38
- children: e(g, "files.moveDialog.title", "Move \"{{name}}\"", { name: d.name })
39
- }), /* @__PURE__ */ c("button", {
40
- type: "button",
41
- onClick: p,
42
- className: "p-1 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200",
43
- "aria-label": e(g, "files.moveDialog.actions.close", "Close move dialog"),
44
- children: /* @__PURE__ */ c(s, { className: "size-5" })
45
- })]
40
+ children: e(x, "files.moveDialog.title", "Move \"{{name}}\"", { name: g.name })
41
+ })
46
42
  }),
47
- /* @__PURE__ */ c("div", {
43
+ /* @__PURE__ */ s("div", {
48
44
  className: "px-6 py-3 border-b border-border-default bg-bg-sunken",
49
- children: /* @__PURE__ */ l("div", {
45
+ children: /* @__PURE__ */ c("div", {
50
46
  className: "flex items-center gap-2 text-sm overflow-x-auto",
51
- children: [/* @__PURE__ */ l("button", {
47
+ children: [/* @__PURE__ */ c("button", {
52
48
  type: "button",
53
- onClick: () => D(-1),
49
+ onClick: () => M(-1),
54
50
  className: "flex items-center gap-1.5 text-text-primary hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 whitespace-nowrap",
55
- children: [/* @__PURE__ */ c(a, { className: "size-4" }), /* @__PURE__ */ c("span", { children: e(g, "files.browser.rootLabel", "My Drive") })]
56
- }), y.map((e, t) => /* @__PURE__ */ l("div", {
51
+ children: [/* @__PURE__ */ s(a, { className: "size-4" }), /* @__PURE__ */ s("span", { children: e(x, "files.browser.rootLabel", "My Drive") })]
52
+ }), w.map((e, t) => /* @__PURE__ */ c("div", {
57
53
  className: "flex items-center gap-2 whitespace-nowrap",
58
- children: [/* @__PURE__ */ c(r, { className: "size-4 text-text-tertiary" }), /* @__PURE__ */ c("button", {
54
+ children: [/* @__PURE__ */ s(r, { className: "size-4 text-text-tertiary" }), /* @__PURE__ */ s("button", {
59
55
  type: "button",
60
- onClick: () => D(t),
61
- className: `hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${t === y.length - 1 ? "text-text-primary font-medium" : "text-text-secondary"}`,
56
+ onClick: () => M(t),
57
+ className: `hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${t === w.length - 1 ? "text-text-primary font-medium" : "text-text-secondary"}`,
62
58
  children: e.name
63
59
  })]
64
60
  }, e.id))]
65
61
  })
66
62
  }),
67
- /* @__PURE__ */ c("div", {
63
+ /* @__PURE__ */ s("div", {
68
64
  className: "flex-1 overflow-y-auto px-6 py-4",
69
- children: w ? /* @__PURE__ */ c("div", {
65
+ children: k ? /* @__PURE__ */ s("div", {
70
66
  className: "flex items-center justify-center py-8",
71
- children: /* @__PURE__ */ c(o, { className: "size-6 text-text-tertiary animate-spin" })
72
- }) : /* @__PURE__ */ l("div", {
67
+ children: /* @__PURE__ */ s(o, { className: "size-6 text-text-tertiary animate-spin" })
68
+ }) : /* @__PURE__ */ c("div", {
73
69
  className: "space-y-1",
74
- children: [/* @__PURE__ */ l("button", {
70
+ children: [/* @__PURE__ */ c("button", {
75
71
  type: "button",
76
- onClick: () => S(_),
77
- className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${x === _ ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
78
- children: [/* @__PURE__ */ c(i, { className: "size-5 text-text-link" }), /* @__PURE__ */ c("span", {
72
+ onClick: () => D(S),
73
+ className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${E === S ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
74
+ children: [/* @__PURE__ */ s(i, { className: "size-5 text-text-link" }), /* @__PURE__ */ s("span", {
79
75
  className: "font-medium text-text-primary",
80
- children: e(g, "files.moveDialog.actions.moveHere", "Move here")
76
+ children: e(x, "files.moveDialog.actions.moveHere", "Move here")
81
77
  })]
82
- }), k.length === 0 ? /* @__PURE__ */ c("p", {
78
+ }), P.length === 0 ? /* @__PURE__ */ s("p", {
83
79
  className: "text-sm text-text-secondary text-center py-4",
84
- children: e(g, "files.moveDialog.empty.noSubfolders", "No subfolders")
85
- }) : k.map((t) => /* @__PURE__ */ l("div", {
86
- className: `flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${x === t.id ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
87
- children: [/* @__PURE__ */ l("button", {
80
+ children: e(x, "files.moveDialog.empty.noSubfolders", "No subfolders")
81
+ }) : P.map((t) => /* @__PURE__ */ c("div", {
82
+ className: `flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${E === t.id ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
83
+ children: [/* @__PURE__ */ c("button", {
88
84
  type: "button",
89
- onClick: () => S(t.id),
85
+ onClick: () => D(t.id),
90
86
  className: "flex items-center gap-3 flex-1 min-w-0",
91
- children: [/* @__PURE__ */ c(i, { className: "size-5 text-text-link flex-shrink-0" }), /* @__PURE__ */ c("span", {
87
+ children: [/* @__PURE__ */ s(i, { className: "size-5 text-text-link flex-shrink-0" }), /* @__PURE__ */ s("span", {
92
88
  className: "font-medium text-text-primary truncate",
93
89
  children: t.name
94
90
  })]
95
- }), /* @__PURE__ */ c("button", {
91
+ }), /* @__PURE__ */ s("button", {
96
92
  type: "button",
97
- onClick: () => E(t),
93
+ onClick: () => j(t),
98
94
  className: "p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 flex-shrink-0",
99
- title: e(g, "files.moveDialog.actions.openFolder", "Open folder"),
100
- "aria-label": e(g, "files.moveDialog.actions.openFolderNamed", "Open {{name}}", { name: t.name }),
101
- children: /* @__PURE__ */ c(r, { className: "size-4" })
95
+ title: e(x, "files.moveDialog.actions.openFolder", "Open folder"),
96
+ "aria-label": e(x, "files.moveDialog.actions.openFolderNamed", "Open {{name}}", { name: t.name }),
97
+ children: /* @__PURE__ */ s(r, { className: "size-4" })
102
98
  })]
103
99
  }, t.id))]
104
100
  })
105
101
  }),
106
- /* @__PURE__ */ l("div", {
107
- className: "flex items-center justify-end gap-2 px-6 py-4 border-t border-border-default",
108
- children: [/* @__PURE__ */ c("button", {
102
+ /* @__PURE__ */ c(p, {
103
+ className: "px-6 py-4 border-t border-border-default",
104
+ children: [/* @__PURE__ */ s(u, {
109
105
  type: "button",
110
- onClick: p,
111
- className: "px-4 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
112
- children: e(g, "files.common.actions.cancel", "Cancel")
113
- }), /* @__PURE__ */ l("button", {
106
+ variant: "outline",
107
+ onClick: v,
108
+ children: e(x, "files.common.actions.cancel", "Cancel")
109
+ }), /* @__PURE__ */ c(u, {
114
110
  type: "button",
115
- onClick: O,
116
- disabled: h || x === void 0,
117
- className: "px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover disabled:bg-bg-sunken disabled:text-text-tertiary disabled:cursor-not-allowed transition-colors duration-200 flex items-center gap-2",
118
- children: [h && /* @__PURE__ */ c(o, { className: "size-4 animate-spin" }), h ? e(g, "files.moveDialog.actions.moving", "Moving...") : e(g, "files.common.actions.move", "Move")]
111
+ onClick: N,
112
+ disabled: b || E === void 0,
113
+ children: [b && /* @__PURE__ */ s(o, { className: "size-4 animate-spin" }), b ? e(x, "files.moveDialog.actions.moving", "Moving...") : e(x, "files.common.actions.move", "Move")]
119
114
  })]
120
115
  })
121
116
  ]
@@ -123,6 +118,6 @@ var d = ({ item: d, type: f, onClose: p, onMove: m, isLoading: h = !1 }) => {
123
118
  });
124
119
  };
125
120
  //#endregion
126
- export { d as MoveDialog };
121
+ export { g as MoveDialog };
127
122
 
128
123
  //# sourceMappingURL=MoveDialog.js.map
package/dist/files/components/MoveDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MoveDialog.js","names":[],"sources":["../../../src/files/components/MoveDialog.tsx"],"sourcesContent":["import { type FC, useState } from \"react\";\nimport { Folder, Home, ChevronRight, Loader2, X } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { useFoldersQuery } from \"../hooks/useFoldersQuery\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface MoveDialogProps {\n item: FileItem | FolderItem;\n type: \"file\" | \"folder\";\n onClose: () => void;\n onMove: (destinationFolderId: string | null) => Promise<void>;\n isLoading?: boolean;\n}\n\nexport const MoveDialog: FC<MoveDialogProps> = ({\n item,\n type,\n onClose,\n onMove,\n isLoading = false,\n}) => {\n const { t } = useI18n();\n const [currentFolderId, setCurrentFolderId] = useState<string | null>(null);\n const [breadcrumbs, setBreadcrumbs] = useState<\n Array<{ id: string; name: string }>\n >([]);\n // undefined = nothing selected yet; null = root selected; string = folder id selected\n const [selectedDestination, setSelectedDestination] = useState<\n string | null | undefined\n >(undefined);\n\n // Fetch folders in current location\n const { data, loading: loadingFolders } = useFoldersQuery(\n currentFolderId || undefined,\n );\n const folders = (data?.getFolders?.folders || []) as FolderItem[];\n\n const handleFolderNavigate = (folder: FolderItem) => {\n setCurrentFolderId(folder.id);\n setBreadcrumbs([...breadcrumbs, { id: folder.id, name: folder.name }]);\n setSelectedDestination(folder.id);\n };\n\n const handleBreadcrumbClick = (index: number) => {\n if (index === -1) {\n setCurrentFolderId(null);\n setBreadcrumbs([]);\n setSelectedDestination(null);\n } else {\n const crumb = breadcrumbs[index];\n setCurrentFolderId(crumb.id);\n setBreadcrumbs(breadcrumbs.slice(0, index + 1));\n setSelectedDestination(crumb.id);\n }\n };\n\n const handleMove = async () => {\n if (selectedDestination === undefined || selectedDestination === item.id) {\n return;\n }\n await onMove(selectedDestination);\n onClose();\n };\n\n const filteredFolders = folders.filter((folder) => {\n // Don't show the item itself if it's a folder\n if (type === \"folder\" && folder.id === item.id) {\n return false;\n }\n return true;\n });\n\n return (\n <div\n className=\"fixed inset-0 backdrop-blur-sm flex items-center justify-center z-[100] animate-in fade-in duration-200\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={tWithFallback(\n t,\n \"files.moveDialog.ariaLabel\",\n \"Move {{type}} {{name}}\",\n { type, name: item.name },\n )}\n >\n <div className=\"bg-bg-surface rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[80vh] flex flex-col animate-in zoom-in-95 duration-200\">\n {/* Header */}\n <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tWithFallback(t, \"files.moveDialog.title\", 'Move \"{{name}}\"', {\n name: item.name,\n })}\n </h2>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"p-1 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n aria-label={tWithFallback(\n t,\n \"files.moveDialog.actions.close\",\n \"Close move dialog\",\n )}\n >\n <X className=\"size-5\" />\n </button>\n </div>\n\n {/* Breadcrumb navigation */}\n <div className=\"px-6 py-3 border-b border-border-default bg-bg-sunken\">\n <div className=\"flex items-center gap-2 text-sm overflow-x-auto\">\n <button\n type=\"button\"\n onClick={() => handleBreadcrumbClick(-1)}\n className=\"flex items-center gap-1.5 text-text-primary hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 whitespace-nowrap\"\n >\n <Home className=\"size-4\" />\n <span>\n {tWithFallback(t, \"files.browser.rootLabel\", \"My Drive\")}\n </span>\n </button>\n {breadcrumbs.map((crumb, index) => (\n <div\n key={crumb.id}\n className=\"flex items-center gap-2 whitespace-nowrap\"\n >\n <ChevronRight className=\"size-4 text-text-tertiary\" />\n <button\n type=\"button\"\n onClick={() => handleBreadcrumbClick(index)}\n className={`hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${\n index === breadcrumbs.length - 1\n ? \"text-text-primary font-medium\"\n : \"text-text-secondary\"\n }`}\n >\n {crumb.name}\n </button>\n </div>\n ))}\n </div>\n </div>\n\n {/* Folder list */}\n <div className=\"flex-1 overflow-y-auto px-6 py-4\">\n {loadingFolders ? (\n <div className=\"flex items-center justify-center py-8\">\n <Loader2 className=\"size-6 text-text-tertiary animate-spin\" />\n </div>\n ) : (\n <div className=\"space-y-1\">\n {/* Option to move to current folder */}\n <button\n type=\"button\"\n onClick={() => setSelectedDestination(currentFolderId)}\n className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${\n selectedDestination === currentFolderId\n ? \"bg-bg-accent border-2 border-action-primary-border\"\n : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n }`}\n >\n <Folder className=\"size-5 text-text-link\" />\n <span className=\"font-medium text-text-primary\">\n {tWithFallback(\n t,\n \"files.moveDialog.actions.moveHere\",\n \"Move here\",\n )}\n </span>\n </button>\n\n {filteredFolders.length === 0 ? (\n <p className=\"text-sm text-text-secondary text-center py-4\">\n {tWithFallback(\n t,\n \"files.moveDialog.empty.noSubfolders\",\n \"No subfolders\",\n )}\n </p>\n ) : (\n /* List of subfolders — clicking name selects, ChevronRight navigates in */\n filteredFolders.map((folder) => (\n <div\n key={folder.id}\n className={`flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${\n selectedDestination === folder.id\n ? \"bg-bg-accent border-2 border-action-primary-border\"\n : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n }`}\n >\n <button\n type=\"button\"\n onClick={() => setSelectedDestination(folder.id)}\n className=\"flex items-center gap-3 flex-1 min-w-0\"\n >\n <Folder className=\"size-5 text-text-link flex-shrink-0\" />\n <span className=\"font-medium text-text-primary truncate\">\n {folder.name}\n </span>\n </button>\n <button\n type=\"button\"\n onClick={() => handleFolderNavigate(folder)}\n className=\"p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 flex-shrink-0\"\n title={tWithFallback(\n t,\n \"files.moveDialog.actions.openFolder\",\n \"Open folder\",\n )}\n aria-label={tWithFallback(\n t,\n \"files.moveDialog.actions.openFolderNamed\",\n \"Open {{name}}\",\n { name: folder.name },\n )}\n >\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n ))\n )}\n </div>\n )}\n </div>\n\n {/* Footer */}\n <div className=\"flex items-center justify-end gap-2 px-6 py-4 border-t border-border-default\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"px-4 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n >\n {tWithFallback(t, \"files.common.actions.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"button\"\n onClick={handleMove}\n disabled={isLoading || selectedDestination === undefined}\n className=\"px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover disabled:bg-bg-sunken disabled:text-text-tertiary disabled:cursor-not-allowed transition-colors duration-200 flex items-center gap-2\"\n >\n {isLoading && <Loader2 className=\"size-4 animate-spin\" />}\n {isLoading\n ? tWithFallback(t, \"files.moveDialog.actions.moving\", \"Moving...\")\n : tWithFallback(t, \"files.common.actions.move\", \"Move\")}\n </button>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"MoveDialog.js","names":[],"sources":["../../../src/files/components/MoveDialog.tsx"],"sourcesContent":["import { type FC, useState } from \"react\";\nimport { Folder, Home, ChevronRight, Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogFooter,\n Button,\n} from \"@burdenoff/fe-libs/ui\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { useFoldersQuery } from \"../hooks/useFoldersQuery\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface MoveDialogProps {\n item: FileItem | FolderItem;\n type: \"file\" | \"folder\";\n onClose: () => void;\n onMove: (destinationFolderId: string | null) => Promise<void>;\n isLoading?: boolean;\n}\n\nexport const MoveDialog: FC<MoveDialogProps> = ({\n item,\n type,\n onClose,\n onMove,\n isLoading = false,\n}) => {\n const { t } = useI18n();\n const [currentFolderId, setCurrentFolderId] = useState<string | null>(null);\n const [breadcrumbs, setBreadcrumbs] = useState<\n Array<{ id: string; name: string }>\n >([]);\n // undefined = nothing selected yet; null = root selected; string = folder id selected\n const [selectedDestination, setSelectedDestination] = useState<\n string | null | undefined\n >(undefined);\n\n // Fetch folders in current location\n const { data, loading: loadingFolders } = useFoldersQuery(\n currentFolderId || undefined,\n );\n const folders = (data?.getFolders?.folders || []) as FolderItem[];\n\n const handleFolderNavigate = (folder: FolderItem) => {\n setCurrentFolderId(folder.id);\n setBreadcrumbs([...breadcrumbs, { id: folder.id, name: folder.name }]);\n setSelectedDestination(folder.id);\n };\n\n const handleBreadcrumbClick = (index: number) => {\n if (index === -1) {\n setCurrentFolderId(null);\n setBreadcrumbs([]);\n setSelectedDestination(null);\n } else {\n const crumb = breadcrumbs[index];\n setCurrentFolderId(crumb.id);\n setBreadcrumbs(breadcrumbs.slice(0, index + 1));\n setSelectedDestination(crumb.id);\n }\n };\n\n const handleMove = async () => {\n if (selectedDestination === undefined || selectedDestination === item.id) {\n return;\n }\n await onMove(selectedDestination);\n onClose();\n };\n\n const filteredFolders = folders.filter((folder) => {\n // Don't show the item itself if it's a folder\n if (type === \"folder\" && folder.id === item.id) {\n return false;\n }\n return true;\n });\n\n return (\n <ResponsiveDialog\n open\n onOpenChange={(next: boolean) => {\n if (!next && !isLoading) {\n onClose();\n }\n }}\n >\n <ResponsiveDialogContent\n className=\"flex max-h-[80vh] w-full max-w-md flex-col gap-0 p-0\"\n aria-label={tWithFallback(\n t,\n \"files.moveDialog.ariaLabel\",\n \"Move {{type}} {{name}}\",\n { type, name: item.name },\n )}\n >\n {/* Header */}\n <ResponsiveDialogHeader className=\"px-6 py-4 border-b border-border-default text-left\">\n <ResponsiveDialogTitle className=\"text-lg font-semibold text-text-primary\">\n {tWithFallback(t, \"files.moveDialog.title\", 'Move \"{{name}}\"', {\n name: item.name,\n })}\n </ResponsiveDialogTitle>\n </ResponsiveDialogHeader>\n\n {/* Breadcrumb navigation */}\n <div className=\"px-6 py-3 border-b border-border-default bg-bg-sunken\">\n <div className=\"flex items-center gap-2 text-sm overflow-x-auto\">\n <button\n type=\"button\"\n onClick={() => handleBreadcrumbClick(-1)}\n className=\"flex items-center gap-1.5 text-text-primary hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 whitespace-nowrap\"\n >\n <Home className=\"size-4\" />\n <span>\n {tWithFallback(t, \"files.browser.rootLabel\", \"My Drive\")}\n </span>\n </button>\n {breadcrumbs.map((crumb, index) => (\n <div\n key={crumb.id}\n className=\"flex items-center gap-2 whitespace-nowrap\"\n >\n <ChevronRight className=\"size-4 text-text-tertiary\" />\n <button\n type=\"button\"\n onClick={() => handleBreadcrumbClick(index)}\n className={`hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${\n index === breadcrumbs.length - 1\n ? \"text-text-primary font-medium\"\n : \"text-text-secondary\"\n }`}\n >\n {crumb.name}\n </button>\n </div>\n ))}\n </div>\n </div>\n\n {/* Folder list */}\n <div className=\"flex-1 overflow-y-auto px-6 py-4\">\n {loadingFolders ? (\n <div className=\"flex items-center justify-center py-8\">\n <Loader2 className=\"size-6 text-text-tertiary animate-spin\" />\n </div>\n ) : (\n <div className=\"space-y-1\">\n {/* Option to move to current folder */}\n <button\n type=\"button\"\n onClick={() => setSelectedDestination(currentFolderId)}\n className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${\n selectedDestination === currentFolderId\n ? \"bg-bg-accent border-2 border-action-primary-border\"\n : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n }`}\n >\n <Folder className=\"size-5 text-text-link\" />\n <span className=\"font-medium text-text-primary\">\n {tWithFallback(\n t,\n \"files.moveDialog.actions.moveHere\",\n \"Move here\",\n )}\n </span>\n </button>\n\n {filteredFolders.length === 0 ? (\n <p className=\"text-sm text-text-secondary text-center py-4\">\n {tWithFallback(\n t,\n \"files.moveDialog.empty.noSubfolders\",\n \"No subfolders\",\n )}\n </p>\n ) : (\n /* List of subfolders — clicking name selects, ChevronRight navigates in */\n filteredFolders.map((folder) => (\n <div\n key={folder.id}\n className={`flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${\n selectedDestination === folder.id\n ? \"bg-bg-accent border-2 border-action-primary-border\"\n : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n }`}\n >\n <button\n type=\"button\"\n onClick={() => setSelectedDestination(folder.id)}\n className=\"flex items-center gap-3 flex-1 min-w-0\"\n >\n <Folder className=\"size-5 text-text-link flex-shrink-0\" />\n <span className=\"font-medium text-text-primary truncate\">\n {folder.name}\n </span>\n </button>\n <button\n type=\"button\"\n onClick={() => handleFolderNavigate(folder)}\n className=\"p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 flex-shrink-0\"\n title={tWithFallback(\n t,\n \"files.moveDialog.actions.openFolder\",\n \"Open folder\",\n )}\n aria-label={tWithFallback(\n t,\n \"files.moveDialog.actions.openFolderNamed\",\n \"Open {{name}}\",\n { name: folder.name },\n )}\n >\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n ))\n )}\n </div>\n )}\n </div>\n\n {/* Footer */}\n <ResponsiveDialogFooter className=\"px-6 py-4 border-t border-border-default\">\n <Button type=\"button\" variant=\"outline\" onClick={onClose}>\n {tWithFallback(t, \"files.common.actions.cancel\", \"Cancel\")}\n </Button>\n <Button\n type=\"button\"\n onClick={handleMove}\n disabled={isLoading || selectedDestination === undefined}\n >\n {isLoading && <Loader2 className=\"size-4 animate-spin\" />}\n {isLoading\n ? tWithFallback(t, \"files.moveDialog.actions.moving\", \"Moving...\")\n : tWithFallback(t, \"files.common.actions.move\", \"Move\")}\n </Button>\n </ResponsiveDialogFooter>\n </ResponsiveDialogContent>\n </ResponsiveDialog>\n );\n};\n"],"mappings":"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"}
package/dist/files/components/StorageBanner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StorageBanner.js","names":[],"sources":["../../../src/files/components/StorageBanner.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { AlertCircle, AlertTriangle, HardDrive } from \"lucide-react\";\nimport type { StorageQuotaState } from \"../hooks/useStorageQuota\";\n\nfunction formatBytes(bytes: number): string {\n if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(1)} GB`;\n if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(1)} MB`;\n if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${bytes} B`;\n}\n\ninterface StorageBannerProps {\n quota: StorageQuotaState;\n}\n\nexport const StorageBanner: FC<StorageBannerProps> = ({ quota }) => {\n if (\n quota.loading ||\n quota.noLimit ||\n (!quota.isExhausted && !quota.isNearLimit)\n ) {\n return null;\n }\n\n const usedLabel = formatBytes(quota.usedBytes);\n const limitLabel = quota.limitBytes ? formatBytes(quota.limitBytes) : null;\n\n if (quota.isExhausted) {\n return (\n <div className=\"flex items-center gap-3 rounded-lg border border-status-error-bg/30 bg-status-error-bg/10 px-4 py-3 text-sm\">\n <AlertCircle className=\"size-4 shrink-0 text-status-error-bg\" />\n <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n <span className=\"font-medium\">Storage full.</span>\n <span className=\"text-text-secondary\">\n {limitLabel\n ? `${usedLabel} of ${limitLabel} used — no space left.`\n : `${usedLabel} used — no space left.`}{\" \"}\n Delete files to free up space or upgrade your plan.\n </span>\n </div>\n <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n <div className=\"h-full w-full rounded-full bg-status-error-bg\" />\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"flex items-center gap-3 rounded-lg border border-status-warning-bg/30 bg-status-warning-bg/10 px-4 py-3 text-sm\">\n <AlertTriangle className=\"size-4 shrink-0 text-status-warning-bg\" />\n <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n <span className=\"font-medium\">Storage almost full.</span>\n <span className=\"text-text-secondary\">\n {limitLabel\n ? `${usedLabel} of ${limitLabel} used (${Math.round(quota.usedPercent)}%).`\n : `${usedLabel} used.`}{\" \"}\n Consider deleting files or upgrading your plan.\n </span>\n </div>\n <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n className=\"h-full rounded-full bg-status-warning-bg transition-all\"\n style={{ width: `${quota.usedPercent}%` }}\n />\n </div>\n </div>\n );\n};\n\ninterface StorageIndicatorProps {\n quota: StorageQuotaState;\n}\n\nexport const StorageIndicator: FC<StorageIndicatorProps> = ({ quota }) => {\n if (quota.loading || quota.noLimit || !quota.limitBytes) return null;\n\n const usedLabel = formatBytes(quota.usedBytes);\n const limitLabel = formatBytes(quota.limitBytes);\n const color = quota.isExhausted\n ? \"bg-status-error-bg\"\n : quota.isNearLimit\n ? \"bg-status-warning-bg\"\n : \"bg-status-info-bg\";\n\n return (\n <div className=\"flex items-center gap-2 text-xs text-text-muted\">\n <HardDrive className=\"size-3.5 shrink-0\" />\n <span>\n {usedLabel} / {limitLabel}\n </span>\n <div className=\"h-1 w-16 overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n className={`h-full rounded-full transition-all ${color}`}\n style={{ width: `${quota.usedPercent}%` }}\n />\n </div>\n </div>\n );\n};\n"],"mappings":";;;AAIA,SAAS,EAAY,GAAuB;AAI1C,QAHI,KAAS,aAAmB,IAAI,IAAQ,YAAY,QAAQ,EAAE,CAAC,OAC/D,KAAS,UAAgB,IAAI,IAAQ,SAAS,QAAQ,EAAE,CAAC,OACzD,KAAS,OAAa,IAAI,IAAQ,MAAM,QAAQ,EAAE,CAAC,OAChD,GAAG,EAAM;;AAOlB,IAAa,KAAyC,EAAE,eAAY;AAClE,KACE,EAAM,WACN,EAAM,WACL,CAAC,EAAM,eAAe,CAAC,EAAM,YAE9B,QAAO;CAGT,IAAM,IAAY,EAAY,EAAM,UAAU,EACxC,IAAa,EAAM,aAAa,EAAY,EAAM,WAAW,GAAG;AAsBtE,QApBI,EAAM,cAEN,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAa,WAAU,wCAAyC,CAAA;GAChE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAc;KAAoB,CAAA,EAClD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,GAAG,EAAU,MAAM,EAAW,0BAC9B,GAAG,EAAU;MAAyB;MAAI;MAEzC;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;IAC7D,CAAA;GACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAe,WAAU,0CAA2C,CAAA;GACpE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAc;KAA2B,CAAA,EACzD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,GAAG,EAAU,MAAM,EAAW,SAAS,KAAK,MAAM,EAAM,YAAY,CAAC,OACrE,GAAG,EAAU;MAAS;MAAI;MAEzB;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,OAAO,GAAG,EAAM,YAAY,IAAI;KACzC,CAAA;IACE,CAAA;GACF"}
1
+ {"version":3,"file":"StorageBanner.js","names":[],"sources":["../../../src/files/components/StorageBanner.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { AlertCircle, AlertTriangle, HardDrive } from \"lucide-react\";\nimport type { StorageQuotaState } from \"../hooks/useStorageQuota\";\n\nfunction formatBytes(bytes: number): string {\n if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(1)} GB`;\n if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(1)} MB`;\n if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${bytes} B`;\n}\n\ninterface StorageBannerProps {\n quota: StorageQuotaState;\n}\n\nexport const StorageBanner: FC<StorageBannerProps> = ({ quota }) => {\n if (\n quota.loading ||\n quota.noLimit ||\n (!quota.isExhausted && !quota.isNearLimit)\n ) {\n return null;\n }\n\n const usedLabel = formatBytes(quota.usedBytes);\n const limitLabel = quota.limitBytes ? formatBytes(quota.limitBytes) : null;\n\n if (quota.isExhausted) {\n return (\n <div className=\"flex items-center gap-3 rounded-lg border border-status-error-bg/30 bg-status-error-bg/10 px-4 py-3 text-sm\">\n <AlertCircle className=\"size-4 shrink-0 text-status-error-bg\" />\n <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n <span className=\"font-medium\">Storage full.</span>\n <span className=\"text-text-secondary\">\n {limitLabel\n ? `${usedLabel} of ${limitLabel} used — no space left.`\n : `${usedLabel} used — no space left.`}{\" \"}\n Delete files to free up space or upgrade your plan.\n </span>\n </div>\n <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n <div className=\"h-full w-full rounded-full bg-status-error-bg\" />\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"flex items-center gap-3 rounded-lg border border-status-warning-bg/30 bg-status-warning-bg/10 px-4 py-3 text-sm\">\n <AlertTriangle className=\"size-4 shrink-0 text-status-warning-bg\" />\n <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n <span className=\"font-medium\">Storage almost full.</span>\n <span className=\"text-text-secondary\">\n {limitLabel\n ? `${usedLabel} of ${limitLabel} used (${Math.round(quota.usedPercent)}%).`\n : `${usedLabel} used.`}{\" \"}\n Consider deleting files or upgrading your plan.\n </span>\n </div>\n <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n className=\"h-full rounded-full bg-status-warning-bg transition-all\"\n style={{ width: `${quota.usedPercent}%` }}\n />\n </div>\n </div>\n );\n};\n\ninterface StorageIndicatorProps {\n quota: StorageQuotaState;\n}\n\nexport const StorageIndicator: FC<StorageIndicatorProps> = ({ quota }) => {\n if (quota.loading || quota.noLimit || !quota.limitBytes) return null;\n\n const usedLabel = formatBytes(quota.usedBytes);\n const limitLabel = formatBytes(quota.limitBytes);\n const color = quota.isExhausted\n ? \"bg-status-error-bg\"\n : quota.isNearLimit\n ? \"bg-status-warning-bg\"\n : \"bg-status-info-bg\";\n\n return (\n <div className=\"flex items-center gap-2 text-xs text-text-muted\">\n <HardDrive className=\"size-3.5 shrink-0\" />\n <span className=\"tabular-nums\">\n {usedLabel} / {limitLabel}\n </span>\n <div className=\"h-1 w-16 overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n className={`h-full rounded-full transition-all ${color}`}\n style={{ width: `${quota.usedPercent}%` }}\n />\n </div>\n </div>\n );\n};\n"],"mappings":";;;AAIA,SAAS,EAAY,GAAuB;AAI1C,QAHI,KAAS,aAAmB,IAAI,IAAQ,YAAY,QAAQ,EAAE,CAAC,OAC/D,KAAS,UAAgB,IAAI,IAAQ,SAAS,QAAQ,EAAE,CAAC,OACzD,KAAS,OAAa,IAAI,IAAQ,MAAM,QAAQ,EAAE,CAAC,OAChD,GAAG,EAAM;;AAOlB,IAAa,KAAyC,EAAE,eAAY;AAClE,KACE,EAAM,WACN,EAAM,WACL,CAAC,EAAM,eAAe,CAAC,EAAM,YAE9B,QAAO;CAGT,IAAM,IAAY,EAAY,EAAM,UAAU,EACxC,IAAa,EAAM,aAAa,EAAY,EAAM,WAAW,GAAG;AAsBtE,QApBI,EAAM,cAEN,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAa,WAAU,wCAAyC,CAAA;GAChE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAc;KAAoB,CAAA,EAClD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,GAAG,EAAU,MAAM,EAAW,0BAC9B,GAAG,EAAU;MAAyB;MAAI;MAEzC;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;IAC7D,CAAA;GACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAe,WAAU,0CAA2C,CAAA;GACpE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAc;KAA2B,CAAA,EACzD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,GAAG,EAAU,MAAM,EAAW,SAAS,KAAK,MAAM,EAAM,YAAY,CAAC,OACrE,GAAG,EAAU;MAAS;MAAI;MAEzB;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,OAAO,GAAG,EAAM,YAAY,IAAI;KACzC,CAAA;IACE,CAAA;GACF"}