@burdenoff/fe-libs 2026.1027.1 → 2026.1027.2
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/chrome/ProfileSwitcher.js +236 -213
- package/package.json +1 -1
|
@@ -1,234 +1,257 @@
|
|
|
1
1
|
import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { Sheet as t, SheetContent as n, SheetHeader as r, SheetTitle as i } from "../ui/sheet.js";
|
|
3
|
+
import { useAssistantControl as a } from "../shared/assistant/appControls/useAssistantControl.js";
|
|
4
|
+
import { useIsMobile as o } from "./contextSwitcher/useIsMobile.js";
|
|
5
|
+
import { useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
|
|
6
|
+
import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
5
7
|
//#region src/chrome/ProfileSwitcher.tsx
|
|
6
|
-
var
|
|
7
|
-
let [
|
|
8
|
-
|
|
9
|
-
let
|
|
10
|
-
if (
|
|
11
|
-
let e =
|
|
8
|
+
var m = ({ user: m, accounts: h = [], activeAccountId: g, onViewProfile: _, onLogout: v, onSwitchAccount: y, onAddAccount: b, onRemoveAccount: x, compact: S = !1 }) => {
|
|
9
|
+
let [C, w] = u(!1), T = l(null), E = e(), D = o(), O = l(v);
|
|
10
|
+
O.current = v;
|
|
11
|
+
let k = v !== void 0;
|
|
12
|
+
if (a("account.logout", c(() => k ? { run: () => {
|
|
13
|
+
let e = O.current;
|
|
12
14
|
return e ? (e(), { status: "done" }) : { status: "failed" };
|
|
13
|
-
} } : null, [
|
|
15
|
+
} } : null, [k])), s(() => {
|
|
16
|
+
if (D) return;
|
|
14
17
|
let e = (e) => {
|
|
15
|
-
|
|
18
|
+
T.current && !T.current.contains(e.target) && w(!1);
|
|
16
19
|
};
|
|
17
|
-
if (
|
|
18
|
-
}, [
|
|
19
|
-
let
|
|
20
|
-
|
|
21
|
-
className: "
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
if (C) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
21
|
+
}, [C, D]), !m) return null;
|
|
22
|
+
let A = `${m.firstName.charAt(0)}${m.lastName.charAt(0)}`.toUpperCase(), j = h.length > 1, M = h.find((e) => e.id === g), N = h.filter((e) => e.id !== g), P = /* @__PURE__ */ p("button", {
|
|
23
|
+
onClick: () => w(!C),
|
|
24
|
+
className: `flex items-center gap-2 p-2 rounded-button hover:bg-bg-sunken transition-colors ${C ? "bg-bg-sunken" : ""}`,
|
|
25
|
+
"aria-label": E("appShell.userMenu", "User menu"),
|
|
26
|
+
"aria-expanded": C,
|
|
27
|
+
children: [
|
|
28
|
+
/* @__PURE__ */ f("div", {
|
|
29
|
+
className: "size-8 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
|
|
30
|
+
children: m.avatar ? /* @__PURE__ */ f("img", {
|
|
31
|
+
src: m.avatar,
|
|
32
|
+
alt: `${m.firstName} ${m.lastName}`,
|
|
33
|
+
className: "w-full h-full rounded-full object-cover"
|
|
34
|
+
}) : /* @__PURE__ */ f("span", {
|
|
35
|
+
className: "text-action-primary-text font-semibold text-sm",
|
|
36
|
+
children: A
|
|
37
|
+
})
|
|
38
|
+
}),
|
|
39
|
+
!S && /* @__PURE__ */ p("span", {
|
|
40
|
+
className: "text-body-sm font-medium text-text-primary",
|
|
41
|
+
children: [
|
|
42
|
+
m.firstName,
|
|
43
|
+
" ",
|
|
44
|
+
m.lastName
|
|
45
|
+
]
|
|
46
|
+
}),
|
|
47
|
+
!S && j && /* @__PURE__ */ f("span", {
|
|
48
|
+
className: "text-xs bg-action-primary-bg text-action-primary-text rounded-full size-5 flex items-center justify-center font-semibold",
|
|
49
|
+
children: h.length
|
|
50
|
+
}),
|
|
51
|
+
!S && /* @__PURE__ */ f("svg", {
|
|
52
|
+
className: `w-4 h-4 text-text-secondary transition-transform ${C ? "rotate-180" : ""}`,
|
|
53
|
+
fill: "none",
|
|
54
|
+
stroke: "currentColor",
|
|
55
|
+
viewBox: "0 0 24 24",
|
|
56
|
+
children: /* @__PURE__ */ f("path", {
|
|
57
|
+
strokeLinecap: "round",
|
|
58
|
+
strokeLinejoin: "round",
|
|
59
|
+
strokeWidth: 2,
|
|
60
|
+
d: "M19 9l-7 7-7-7"
|
|
61
|
+
})
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
}), F = () => /* @__PURE__ */ p(d, { children: [
|
|
65
|
+
!j && /* @__PURE__ */ p("div", {
|
|
66
|
+
className: "px-6 py-4 text-center border-b border-border-subtle",
|
|
28
67
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
className: "size-
|
|
31
|
-
children:
|
|
32
|
-
src:
|
|
33
|
-
alt:
|
|
68
|
+
/* @__PURE__ */ f("div", {
|
|
69
|
+
className: "size-20 mx-auto mb-3 rounded-full bg-action-primary-bg flex items-center justify-center",
|
|
70
|
+
children: m.avatar ? /* @__PURE__ */ f("img", {
|
|
71
|
+
src: m.avatar,
|
|
72
|
+
alt: m.firstName,
|
|
34
73
|
className: "w-full h-full rounded-full object-cover"
|
|
35
|
-
}) : /* @__PURE__ */
|
|
36
|
-
className: "text-action-primary-text font-
|
|
37
|
-
children:
|
|
74
|
+
}) : /* @__PURE__ */ f("span", {
|
|
75
|
+
className: "text-action-primary-text font-bold text-2xl",
|
|
76
|
+
children: A
|
|
38
77
|
})
|
|
39
78
|
}),
|
|
40
|
-
|
|
41
|
-
className: "text-
|
|
42
|
-
children:
|
|
43
|
-
l.firstName,
|
|
44
|
-
" ",
|
|
45
|
-
l.lastName
|
|
46
|
-
]
|
|
47
|
-
}),
|
|
48
|
-
!_ && T && /* @__PURE__ */ s("span", {
|
|
49
|
-
className: "text-xs bg-action-primary-bg text-action-primary-text rounded-full size-5 flex items-center justify-center font-semibold",
|
|
50
|
-
children: u.length
|
|
79
|
+
/* @__PURE__ */ f("h3", {
|
|
80
|
+
className: "text-base font-semibold text-text-primary mb-1",
|
|
81
|
+
children: E("userMenu.greeting", "Hi, {{name}}!", { name: m.firstName })
|
|
51
82
|
}),
|
|
52
|
-
|
|
53
|
-
className:
|
|
54
|
-
|
|
55
|
-
stroke: "currentColor",
|
|
56
|
-
viewBox: "0 0 24 24",
|
|
57
|
-
children: /* @__PURE__ */ s("path", {
|
|
58
|
-
strokeLinecap: "round",
|
|
59
|
-
strokeLinejoin: "round",
|
|
60
|
-
strokeWidth: 2,
|
|
61
|
-
d: "M19 9l-7 7-7-7"
|
|
62
|
-
})
|
|
83
|
+
m.email && /* @__PURE__ */ f("p", {
|
|
84
|
+
className: "text-body-sm text-text-secondary truncate",
|
|
85
|
+
children: m.email
|
|
63
86
|
})
|
|
64
87
|
]
|
|
65
|
-
}),
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
88
|
+
}),
|
|
89
|
+
j && M && /* @__PURE__ */ p("div", {
|
|
90
|
+
className: "px-4 py-3 border-b border-border-subtle",
|
|
91
|
+
children: [/* @__PURE__ */ p("p", {
|
|
92
|
+
className: "text-body-sm font-semibold text-text-primary",
|
|
93
|
+
children: [
|
|
94
|
+
M.firstName,
|
|
95
|
+
" ",
|
|
96
|
+
M.lastName
|
|
97
|
+
]
|
|
98
|
+
}), /* @__PURE__ */ f("p", {
|
|
99
|
+
className: "text-xs text-text-muted mt-0.5 truncate",
|
|
100
|
+
children: M.email
|
|
101
|
+
})]
|
|
102
|
+
}),
|
|
103
|
+
_ && /* @__PURE__ */ f("div", {
|
|
104
|
+
className: "px-4 py-2",
|
|
105
|
+
children: /* @__PURE__ */ f("button", {
|
|
106
|
+
type: "button",
|
|
107
|
+
onClick: () => {
|
|
108
|
+
_(), w(!1);
|
|
109
|
+
},
|
|
110
|
+
className: "w-full px-4 py-2.5 text-body-sm font-medium text-text-primary bg-bg-surface hover:bg-bg-sunken rounded-button border border-border-subtle transition-colors",
|
|
111
|
+
children: E("userMenu.viewProfile", "View Profile")
|
|
112
|
+
})
|
|
113
|
+
}),
|
|
114
|
+
j && N.length > 0 && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
|
|
115
|
+
className: "px-4 pt-2 pb-1",
|
|
116
|
+
children: /* @__PURE__ */ f("p", {
|
|
117
|
+
className: "text-[11px] font-medium text-text-muted uppercase tracking-wider",
|
|
118
|
+
children: E("auth.security.switchAccount", "Switch Account")
|
|
119
|
+
})
|
|
120
|
+
}), /* @__PURE__ */ f("div", {
|
|
121
|
+
className: `${N.length >= 3 ? "max-h-48 overflow-y-auto" : ""}`,
|
|
122
|
+
children: N.map((e) => {
|
|
123
|
+
let t = `${e.firstName?.charAt(0) || ""}${e.lastName?.charAt(0) || ""}`.toUpperCase();
|
|
124
|
+
return /* @__PURE__ */ f("div", {
|
|
125
|
+
className: "px-4 py-2 hover:bg-bg-sunken transition-colors group",
|
|
126
|
+
children: /* @__PURE__ */ p("div", {
|
|
127
|
+
className: "flex items-center gap-3",
|
|
96
128
|
children: [
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
/* @__PURE__ */ c("button", {
|
|
144
|
-
type: "button",
|
|
145
|
-
onClick: () => {
|
|
146
|
-
m && (m(e), y(!1));
|
|
147
|
-
},
|
|
148
|
-
className: "flex-1 text-left min-w-0",
|
|
149
|
-
children: [/* @__PURE__ */ c("p", {
|
|
150
|
-
className: "text-body-sm font-medium text-text-primary truncate",
|
|
151
|
-
children: [
|
|
152
|
-
e.firstName,
|
|
153
|
-
" ",
|
|
154
|
-
e.lastName
|
|
155
|
-
]
|
|
156
|
-
}), /* @__PURE__ */ s("p", {
|
|
157
|
-
className: "text-xs text-text-muted truncate",
|
|
158
|
-
children: e.email
|
|
159
|
-
})]
|
|
160
|
-
}),
|
|
161
|
-
g && /* @__PURE__ */ s("button", {
|
|
162
|
-
type: "button",
|
|
163
|
-
onClick: (t) => {
|
|
164
|
-
t.stopPropagation(), g(e.id);
|
|
165
|
-
},
|
|
166
|
-
className: "size-6 flex items-center justify-center rounded-full hover:bg-status-error-bg-subtle text-text-muted hover:text-status-error-text transition-colors opacity-0 group-hover:opacity-100",
|
|
167
|
-
"aria-label": x("appShell.removeAccount", "Remove account"),
|
|
168
|
-
children: /* @__PURE__ */ s("svg", {
|
|
169
|
-
className: "size-4",
|
|
170
|
-
fill: "none",
|
|
171
|
-
stroke: "currentColor",
|
|
172
|
-
viewBox: "0 0 24 24",
|
|
173
|
-
children: /* @__PURE__ */ s("path", {
|
|
174
|
-
strokeLinecap: "round",
|
|
175
|
-
strokeLinejoin: "round",
|
|
176
|
-
strokeWidth: 2,
|
|
177
|
-
d: "M6 18L18 6M6 6l12 12"
|
|
178
|
-
})
|
|
179
|
-
})
|
|
129
|
+
/* @__PURE__ */ f("div", {
|
|
130
|
+
className: "size-10 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
|
|
131
|
+
children: e.avatar ? /* @__PURE__ */ f("img", {
|
|
132
|
+
src: e.avatar,
|
|
133
|
+
alt: e.name,
|
|
134
|
+
className: "w-full h-full rounded-full object-cover"
|
|
135
|
+
}) : /* @__PURE__ */ f("span", {
|
|
136
|
+
className: "text-action-primary-text font-semibold text-sm",
|
|
137
|
+
children: t
|
|
138
|
+
})
|
|
139
|
+
}),
|
|
140
|
+
/* @__PURE__ */ p("button", {
|
|
141
|
+
type: "button",
|
|
142
|
+
onClick: () => {
|
|
143
|
+
y && (y(e), w(!1));
|
|
144
|
+
},
|
|
145
|
+
className: "flex-1 text-left min-w-0",
|
|
146
|
+
children: [/* @__PURE__ */ p("p", {
|
|
147
|
+
className: "text-body-sm font-medium text-text-primary truncate",
|
|
148
|
+
children: [
|
|
149
|
+
e.firstName,
|
|
150
|
+
" ",
|
|
151
|
+
e.lastName
|
|
152
|
+
]
|
|
153
|
+
}), /* @__PURE__ */ f("p", {
|
|
154
|
+
className: "text-xs text-text-muted truncate",
|
|
155
|
+
children: e.email
|
|
156
|
+
})]
|
|
157
|
+
}),
|
|
158
|
+
x && /* @__PURE__ */ f("button", {
|
|
159
|
+
type: "button",
|
|
160
|
+
onClick: (t) => {
|
|
161
|
+
t.stopPropagation(), x(e.id);
|
|
162
|
+
},
|
|
163
|
+
className: "size-6 flex items-center justify-center rounded-full hover:bg-status-error-bg-subtle text-text-muted hover:text-status-error-text transition-colors opacity-0 group-hover:opacity-100",
|
|
164
|
+
"aria-label": E("appShell.removeAccount", "Remove account"),
|
|
165
|
+
children: /* @__PURE__ */ f("svg", {
|
|
166
|
+
className: "size-4",
|
|
167
|
+
fill: "none",
|
|
168
|
+
stroke: "currentColor",
|
|
169
|
+
viewBox: "0 0 24 24",
|
|
170
|
+
children: /* @__PURE__ */ f("path", {
|
|
171
|
+
strokeLinecap: "round",
|
|
172
|
+
strokeLinejoin: "round",
|
|
173
|
+
strokeWidth: 2,
|
|
174
|
+
d: "M6 18L18 6M6 6l12 12"
|
|
180
175
|
})
|
|
181
|
-
|
|
176
|
+
})
|
|
182
177
|
})
|
|
183
|
-
|
|
178
|
+
]
|
|
184
179
|
})
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
})
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
})
|
|
180
|
+
}, e.id);
|
|
181
|
+
})
|
|
182
|
+
})] }),
|
|
183
|
+
/* @__PURE__ */ f("div", {
|
|
184
|
+
className: "px-4 py-3 border-t border-border-subtle",
|
|
185
|
+
children: /* @__PURE__ */ p("div", {
|
|
186
|
+
className: "grid grid-cols-2 gap-2",
|
|
187
|
+
children: [b && /* @__PURE__ */ p("button", {
|
|
188
|
+
type: "button",
|
|
189
|
+
onClick: () => {
|
|
190
|
+
b(), w(!1);
|
|
191
|
+
},
|
|
192
|
+
className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-bg-surface hover:bg-bg-sunken rounded-button border border-border-subtle transition-colors",
|
|
193
|
+
children: [/* @__PURE__ */ f("svg", {
|
|
194
|
+
className: "size-4",
|
|
195
|
+
fill: "none",
|
|
196
|
+
stroke: "currentColor",
|
|
197
|
+
viewBox: "0 0 24 24",
|
|
198
|
+
children: /* @__PURE__ */ f("path", {
|
|
199
|
+
strokeLinecap: "round",
|
|
200
|
+
strokeLinejoin: "round",
|
|
201
|
+
strokeWidth: 2,
|
|
202
|
+
d: "M12 4v16m8-8H4"
|
|
203
|
+
})
|
|
204
|
+
}), /* @__PURE__ */ f("span", { children: E("auth.profileMenu.addAccount", "Add account") })]
|
|
205
|
+
}), v && /* @__PURE__ */ p("button", {
|
|
206
|
+
type: "button",
|
|
207
|
+
onClick: () => {
|
|
208
|
+
v(), w(!1);
|
|
209
|
+
},
|
|
210
|
+
className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-bg-surface hover:bg-bg-sunken rounded-button border border-border-subtle transition-colors",
|
|
211
|
+
children: [/* @__PURE__ */ f("svg", {
|
|
212
|
+
className: "size-4",
|
|
213
|
+
fill: "none",
|
|
214
|
+
stroke: "currentColor",
|
|
215
|
+
viewBox: "0 0 24 24",
|
|
216
|
+
children: /* @__PURE__ */ f("path", {
|
|
217
|
+
strokeLinecap: "round",
|
|
218
|
+
strokeLinejoin: "round",
|
|
219
|
+
strokeWidth: 2,
|
|
220
|
+
d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
|
221
|
+
})
|
|
222
|
+
}), /* @__PURE__ */ f("span", { children: E("auth.security.signOutDialogConfirm", "Sign out") })]
|
|
223
|
+
})]
|
|
224
|
+
})
|
|
225
|
+
})
|
|
226
|
+
] });
|
|
227
|
+
return D ? /* @__PURE__ */ p("div", {
|
|
228
|
+
className: "relative",
|
|
229
|
+
children: [P, /* @__PURE__ */ f(t, {
|
|
230
|
+
open: C,
|
|
231
|
+
onOpenChange: w,
|
|
232
|
+
children: /* @__PURE__ */ p(n, {
|
|
233
|
+
side: "bottom",
|
|
234
|
+
className: "h-[70vh] flex flex-col p-0",
|
|
235
|
+
children: [/* @__PURE__ */ f(r, {
|
|
236
|
+
className: "px-4 pt-4 pb-2 border-b border-border-subtle",
|
|
237
|
+
children: /* @__PURE__ */ f(i, {
|
|
238
|
+
className: "text-text-primary",
|
|
239
|
+
children: E("appShell.userMenuSheetTitle", "Account")
|
|
227
240
|
})
|
|
228
|
-
})
|
|
229
|
-
|
|
241
|
+
}), /* @__PURE__ */ f("div", {
|
|
242
|
+
className: "flex-1 overflow-y-auto",
|
|
243
|
+
children: F()
|
|
244
|
+
})]
|
|
245
|
+
})
|
|
246
|
+
})]
|
|
247
|
+
}) : /* @__PURE__ */ p("div", {
|
|
248
|
+
className: "relative",
|
|
249
|
+
ref: T,
|
|
250
|
+
children: [P, C && /* @__PURE__ */ f("div", {
|
|
251
|
+
className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-72 max-w-72 bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] overflow-hidden z-50 animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
|
|
252
|
+
children: F()
|
|
230
253
|
})]
|
|
231
254
|
});
|
|
232
255
|
};
|
|
233
256
|
//#endregion
|
|
234
|
-
export {
|
|
257
|
+
export { m as ProfileSwitcher };
|