@burdenoff/microfe-comradecircle 2026.704.1 → 2026.704.3

package/dist/comradecircle/pages/profile/MyProfilePage.js

@@ -9,152 +9,247 @@ import { formatEnumLabel as s } from "../../utils/formatters.js";
 import { ErrorView as c, LoadingView as l } from "../../components/StateViews.js";
 import { StatusBadge as u } from "../../components/StatusBadge.js";
 import { TagInput as d } from "../../components/TagInput.js";
-import { useState as f } from "react";
-import { Save as p } from "lucide-react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Button as g, GlassCard as _, Input as v, Label as y, Select as b, SelectContent as x, SelectItem as S, SelectTrigger as C, SelectValue as w, Switch as T, Textarea as E } from "@burdenoff/fe-libs/ui";
+import { MiniBar as f } from "../../components/MiniBar.js";
+import { AvatarUploadField as p } from "../../components/AvatarUploadField.js";
+import { useState as m } from "react";
+import { Save as h } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Button as v, GlassCard as y, Input as b, Label as x, Select as S, SelectContent as C, SelectItem as w, SelectTrigger as T, SelectValue as E, Switch as D, Textarea as O } from "@burdenoff/fe-libs/ui";
 //#region src/comradecircle/pages/profile/MyProfilePage.tsx
-var D = [
+var k = [
 	"ONLINE",
 	"AWAY",
 	"BUSY",
 	"OFFLINE"
 ];
-function O() {
+function A() {
 	let { currentUser: r } = e(), i = r?.id, { data: a, isLoading: o, isError: s, refetch: u } = n(i), d = r?.name ?? r?.email ?? "";
-	return o ? /* @__PURE__ */ m(t, {
+	return o ? /* @__PURE__ */ g(t, {
 		title: "My Profile",
-		children: /* @__PURE__ */ m(l, { label: "Loading your profile…" })
-	}) : s ? /* @__PURE__ */ m(t, {
+		children: /* @__PURE__ */ g(l, { label: "Loading your profile…" })
+	}) : s ? /* @__PURE__ */ g(t, {
 		title: "My Profile",
-		children: /* @__PURE__ */ m(c, {
+		children: /* @__PURE__ */ g(c, {
 			title: "We couldn't load your profile",
 			message: "Something went wrong while fetching your profile. Retry before editing so you don't overwrite saved details.",
 			onRetry: () => u()
 		})
-	}) : /* @__PURE__ */ m(t, {
+	}) : /* @__PURE__ */ g(t, {
 		title: "My Profile",
 		description: "Your profile is your identity across every circle — it's how members recognise, find and follow you.",
-		children: /* @__PURE__ */ m(k, {
+		children: /* @__PURE__ */ g(N, {
 			initialProfile: a ?? null,
 			identityName: d
 		}, a?.id ?? "new")
 	});
 }
-function k({ initialProfile: e, identityName: t }) {
-	let n = r(), [c, l] = f(e?.displayName ?? t), [O, k] = f(e?.headline ?? ""), [A, j] = f(e?.bio ?? ""), [M, N] = f(e?.interests ?? []), [P, F] = f(e?.skills ?? []), [I, L] = f(e?.presence ?? "ONLINE"), [R, z] = f(e?.discoverable ?? !0), B = c.trim();
-	return /* @__PURE__ */ h("div", {
+function j({ children: e }) {
+	return /* @__PURE__ */ g("p", {
+		className: "text-xs font-semibold uppercase tracking-[0.08em] text-text-tertiary",
+		children: e
+	});
+}
+function M(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+function N({ initialProfile: e, identityName: t }) {
+	let n = r(), c = {
+		displayName: e?.displayName ?? t,
+		headline: e?.headline ?? "",
+		bio: e?.bio ?? "",
+		interests: e?.interests ?? [],
+		skills: e?.skills ?? [],
+		presence: e?.presence ?? "ONLINE",
+		discoverable: e?.discoverable ?? !0,
+		avatarFileId: e?.avatar?.id ?? null
+	}, [l, A] = m(c.displayName), [N, P] = m(c.headline), [F, I] = m(c.bio), [L, R] = m(c.interests), [z, B] = m(c.skills), [V, H] = m(c.presence), [U, W] = m(c.discoverable), [G, K] = m(c.avatarFileId), q = l.trim(), J = [
+		{
+			done: !!G,
+			nudge: "Add a profile photo so members recognise you at a glance."
+		},
+		{
+			done: q.length > 0,
+			nudge: "Add a display name so members know who you are."
+		},
+		{
+			done: N.trim().length > 0,
+			nudge: "Add a headline to sum yourself up in one line."
+		},
+		{
+			done: F.trim().length > 0,
+			nudge: "Write a short bio to help circles get to know you."
+		},
+		{
+			done: L.length > 0,
+			nudge: "Add a few interests to help you find your people."
+		},
+		{
+			done: z.length > 0,
+			nudge: "List some skills so circles know what you bring."
+		}
+	], Y = J.filter((e) => e.done).length, X = Math.round(Y / J.length * 100), Z = J.find((e) => !e.done)?.nudge ?? "Your profile is complete — it looks great.", Q = l !== c.displayName || N !== c.headline || F !== c.bio || V !== c.presence || U !== c.discoverable || G !== c.avatarFileId || !M(L, c.interests) || !M(z, c.skills);
+	return /* @__PURE__ */ _("div", {
 		className: "grid gap-6 lg:grid-cols-[1fr_320px]",
-		children: [/* @__PURE__ */ m(_, {
+		children: [/* @__PURE__ */ g(y, {
 			treatment: "plain",
 			className: "order-2 p-5 sm:p-6 lg:order-1",
-			children: /* @__PURE__ */ h("div", {
-				className: "flex flex-col gap-5",
+			children: /* @__PURE__ */ _("div", {
+				className: "flex flex-col gap-6",
 				children: [
-					/* @__PURE__ */ h("div", {
-						className: "grid gap-1.5",
-						children: [/* @__PURE__ */ m(y, {
-							htmlFor: "profile-name",
-							children: "Display name"
-						}), /* @__PURE__ */ m(v, {
-							id: "profile-name",
-							value: c,
-							onChange: (e) => l(e.target.value),
-							placeholder: "How members see you",
-							required: !0,
-							"aria-required": "true"
-						})]
-					}),
-					/* @__PURE__ */ h("div", {
-						className: "grid gap-1.5",
-						children: [/* @__PURE__ */ m(y, {
-							htmlFor: "profile-headline",
-							children: "Headline"
-						}), /* @__PURE__ */ m(v, {
-							id: "profile-headline",
-							value: O,
-							onChange: (e) => k(e.target.value),
-							placeholder: "e.g. Community organiser · Photographer"
-						})]
-					}),
-					/* @__PURE__ */ h("div", {
-						className: "grid gap-1.5",
-						children: [/* @__PURE__ */ m(y, {
-							htmlFor: "profile-bio",
-							children: "Bio"
-						}), /* @__PURE__ */ m(E, {
-							id: "profile-bio",
-							value: A,
-							onChange: (e) => j(e.target.value),
-							rows: 4,
-							placeholder: "Tell circles a little about yourself."
-						})]
-					}),
-					/* @__PURE__ */ h("div", {
-						className: "grid gap-1.5",
-						children: [/* @__PURE__ */ m(y, {
-							htmlFor: "profile-interests",
-							children: "Interests"
-						}), /* @__PURE__ */ m(d, {
-							id: "profile-interests",
-							value: M,
-							onChange: N,
-							placeholder: "Add an interest…"
-						})]
+					/* @__PURE__ */ _("div", {
+						className: "grid gap-2 rounded-xl border border-border-seam bg-bg-surface p-4",
+						children: [
+							/* @__PURE__ */ _("div", {
+								className: "flex items-baseline justify-between gap-3",
+								children: [/* @__PURE__ */ g(j, { children: "Profile completeness" }), /* @__PURE__ */ _("span", {
+									className: "text-sm font-semibold tabular-nums text-text-primary",
+									children: [X, "%"]
+								})]
+							}),
+							/* @__PURE__ */ g(f, {
+								value: X,
+								height: 8,
+								barClassName: "bg-gradient-to-r from-accent to-[var(--color-accent-soft)]"
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "text-xs text-text-secondary",
+								children: Z
+							})
+						]
 					}),
-					/* @__PURE__ */ h("div", {
-						className: "grid gap-1.5",
-						children: [/* @__PURE__ */ m(y, {
-							htmlFor: "profile-skills",
-							children: "Skills"
-						}), /* @__PURE__ */ m(d, {
-							id: "profile-skills",
-							value: P,
-							onChange: F,
-							placeholder: "Add a skill…"
-						})]
+					/* @__PURE__ */ _("section", {
+						className: "grid gap-4",
+						children: [
+							/* @__PURE__ */ g(j, { children: "Identity" }),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(x, { children: "Avatar" }), /* @__PURE__ */ g(p, {
+									fileId: G,
+									name: q || t,
+									onUploaded: K
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(x, {
+									htmlFor: "profile-name",
+									children: "Display name"
+								}), /* @__PURE__ */ g(b, {
+									id: "profile-name",
+									value: l,
+									onChange: (e) => A(e.target.value),
+									placeholder: "How members see you",
+									required: !0,
+									"aria-required": "true"
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(x, {
+									htmlFor: "profile-headline",
+									children: "Headline"
+								}), /* @__PURE__ */ g(b, {
+									id: "profile-headline",
+									value: N,
+									onChange: (e) => P(e.target.value),
+									placeholder: "e.g. Community organiser · Photographer"
+								})]
+							})
+						]
 					}),
-					/* @__PURE__ */ h("div", {
-						className: "grid gap-1.5",
-						children: [/* @__PURE__ */ m(y, {
-							htmlFor: "profile-presence",
-							children: "Presence"
-						}), /* @__PURE__ */ h(b, {
-							value: I,
-							onValueChange: (e) => L(e),
-							children: [/* @__PURE__ */ m(C, {
-								id: "profile-presence",
-								children: /* @__PURE__ */ m(w, {})
-							}), /* @__PURE__ */ m(x, { children: D.map((e) => /* @__PURE__ */ m(S, {
-								value: e,
-								children: s(e)
-							}, e)) })]
-						})]
+					/* @__PURE__ */ _("section", {
+						className: "grid gap-4 border-t border-border-seam pt-6",
+						children: [
+							/* @__PURE__ */ g(j, { children: "About you" }),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(x, {
+									htmlFor: "profile-bio",
+									children: "Bio"
+								}), /* @__PURE__ */ g(O, {
+									id: "profile-bio",
+									value: F,
+									onChange: (e) => I(e.target.value),
+									rows: 4,
+									placeholder: "Tell circles a little about yourself."
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(x, {
+									htmlFor: "profile-interests",
+									children: "Interests"
+								}), /* @__PURE__ */ g(d, {
+									id: "profile-interests",
+									value: L,
+									onChange: R,
+									placeholder: "Add an interest…"
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(x, {
+									htmlFor: "profile-skills",
+									children: "Skills"
+								}), /* @__PURE__ */ g(d, {
+									id: "profile-skills",
+									value: z,
+									onChange: B,
+									placeholder: "Add a skill…"
+								})]
+							})
+						]
 					}),
-					/* @__PURE__ */ h("div", {
-						className: "flex items-start justify-between gap-4 rounded-xl border border-border-seam bg-bg-surface p-3.5",
-						children: [/* @__PURE__ */ h("div", {
-							className: "min-w-0",
-							children: [/* @__PURE__ */ m(y, {
-								htmlFor: "profile-discoverable",
-								children: "List me in the member directory"
-							}), /* @__PURE__ */ m("p", {
-								className: "mt-1 text-xs text-text-tertiary",
-								children: "When on, your profile appears in the discoverable member directory so others can find and follow you. Turn it off to stay unlisted."
-							})]
-						}), /* @__PURE__ */ m(T, {
-							id: "profile-discoverable",
-							checked: R,
-							onCheckedChange: z,
-							"aria-label": "List me in the member directory",
-							className: "mt-0.5 shrink-0"
-						})]
+					/* @__PURE__ */ _("section", {
+						className: "grid gap-4 border-t border-border-seam pt-6",
+						children: [
+							/* @__PURE__ */ g(j, { children: "Visibility" }),
+							/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(x, {
+									htmlFor: "profile-presence",
+									children: "Presence"
+								}), /* @__PURE__ */ _(S, {
+									value: V,
+									onValueChange: (e) => H(e),
+									children: [/* @__PURE__ */ g(T, {
+										id: "profile-presence",
+										children: /* @__PURE__ */ g(E, {})
+									}), /* @__PURE__ */ g(C, { children: k.map((e) => /* @__PURE__ */ g(w, {
+										value: e,
+										children: s(e)
+									}, e)) })]
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "flex items-start justify-between gap-4 rounded-xl border border-border-seam bg-bg-surface p-3.5",
+								children: [/* @__PURE__ */ _("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ g(x, {
+										htmlFor: "profile-discoverable",
+										children: "List me in the member directory"
+									}), /* @__PURE__ */ g("p", {
+										className: "mt-1 text-xs text-text-tertiary",
+										children: "When on, your profile appears in the discoverable member directory so others can find and follow you. Turn it off to stay unlisted."
+									})]
+								}), /* @__PURE__ */ g(D, {
+									id: "profile-discoverable",
+									checked: U,
+									onCheckedChange: W,
+									"aria-label": "List me in the member directory",
+									className: "mt-0.5 shrink-0"
+								})]
+							})
+						]
 					}),
-					/* @__PURE__ */ m("div", {
-						className: "flex justify-end pt-1",
-						children: /* @__PURE__ */ h(g, {
+					/* @__PURE__ */ _("div", {
+						className: "flex flex-wrap items-center justify-end gap-3 border-t border-border-seam pt-5",
+						children: [!Q && !n.isPending && /* @__PURE__ */ g("span", {
+							className: "text-xs text-text-tertiary",
+							children: "No changes to save"
+						}), /* @__PURE__ */ _(v, {
 							onClick: async () => {
-								let e = c.trim();
+								let e = l.trim();
 								if (!e) {
 									o.error("Display name required", "Add a name so members can recognise you.");
 									return;
@@ -162,94 +257,106 @@ function k({ initialProfile: e, identityName: t }) {
 								try {
 									await n.mutateAsync({
 										displayName: e,
-										headline: O.trim() || null,
-										bio: A.trim() || null,
-										interests: M,
-										skills: P,
-										presence: I,
-										discoverable: R
+										headline: N.trim() || null,
+										bio: F.trim() || null,
+										avatarFileId: G,
+										interests: L,
+										skills: z,
+										presence: V,
+										discoverable: U
 									}), o.success("Profile saved");
 								} catch (e) {
 									o.error("Could not save profile", a(e));
 								}
 							},
-							disabled: n.isPending,
-							children: [/* @__PURE__ */ m(p, { className: "mr-1.5 h-4 w-4" }), n.isPending ? "Saving…" : "Save profile"]
-						})
+							disabled: n.isPending || !Q,
+							children: [/* @__PURE__ */ g(h, { className: "mr-1.5 h-4 w-4" }), n.isPending ? "Saving…" : "Save profile"]
+						})]
 					})
 				]
 			})
-		}), /* @__PURE__ */ m("div", {
+		}), /* @__PURE__ */ g("div", {
 			className: "order-1 lg:order-2",
-			children: /* @__PURE__ */ h(_, {
+			children: /* @__PURE__ */ _(y, {
 				treatment: "plain",
-				className: "p-5 lg:sticky lg:top-6",
-				children: [
-					/* @__PURE__ */ m("p", {
-						className: "mb-4 text-xs font-semibold uppercase tracking-wide text-text-tertiary",
-						children: "Preview"
-					}),
-					/* @__PURE__ */ h("div", {
-						className: "flex flex-col items-center gap-3 text-center",
-						children: [
-							/* @__PURE__ */ m(i, {
-								name: B || t,
-								size: "xl",
-								presence: I
-							}),
-							/* @__PURE__ */ h("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ m("h3", {
-									className: "truncate text-lg font-semibold text-text-primary",
-									children: B || "Your name"
-								}), O.trim() && /* @__PURE__ */ m("p", {
-									className: "mt-0.5 text-sm text-text-secondary",
-									children: O.trim()
-								})]
-							}),
-							/* @__PURE__ */ m(u, { status: I })
-						]
-					}),
-					A.trim() && /* @__PURE__ */ m("p", {
-						className: "mt-4 whitespace-pre-wrap break-words text-center text-sm text-text-secondary",
-						children: A.trim()
-					}),
-					M.length > 0 && /* @__PURE__ */ h("div", {
-						className: "mt-5",
-						children: [/* @__PURE__ */ m("p", {
-							className: "mb-1.5 text-xs font-medium text-text-tertiary",
-							children: "Interests"
-						}), /* @__PURE__ */ m("div", {
-							className: "flex flex-wrap gap-1.5",
-							children: M.map((e) => /* @__PURE__ */ m("span", {
-								className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary",
-								children: e
-							}, e))
-						})]
-					}),
-					P.length > 0 && /* @__PURE__ */ h("div", {
-						className: "mt-4",
-						children: [/* @__PURE__ */ m("p", {
-							className: "mb-1.5 text-xs font-medium text-text-tertiary",
-							children: "Skills"
-						}), /* @__PURE__ */ m("div", {
-							className: "flex flex-wrap gap-1.5",
-							children: P.map((e) => /* @__PURE__ */ m("span", {
-								className: "rounded-full bg-[var(--color-accent-soft)] px-2.5 py-0.5 text-xs font-medium text-text-primary",
-								children: e
-							}, e))
-						})]
-					}),
-					!R && /* @__PURE__ */ m("p", {
-						className: "mt-5 text-center text-xs text-text-tertiary",
-						children: "Hidden from the member directory."
-					})
-				]
+				className: "overflow-hidden p-0 lg:sticky lg:top-6",
+				children: [/* @__PURE__ */ _("div", {
+					className: "relative h-24 bg-gloss-card",
+					children: [/* @__PURE__ */ g("div", {
+						className: "absolute inset-0 bg-gradient-to-br from-[var(--color-accent-soft)] via-[var(--color-accent-soft)]/30 to-transparent",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ g("span", {
+						className: "absolute right-3 top-3 rounded-full bg-bg-surface/80 px-2 py-0.5 text-[0.62rem] font-medium uppercase tracking-[0.08em] text-text-tertiary backdrop-blur",
+						children: "How members see you"
+					})]
+				}), /* @__PURE__ */ _("div", {
+					className: "px-5 pb-5",
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: "-mt-12 flex flex-col items-center text-center",
+							children: [
+								/* @__PURE__ */ g(i, {
+									name: q || t,
+									size: "xl",
+									presence: V,
+									fileId: G,
+									ring: !0
+								}),
+								/* @__PURE__ */ g("h3", {
+									className: "mt-3 max-w-full truncate text-lg font-semibold text-text-primary",
+									children: q || "Your name"
+								}),
+								N.trim() && /* @__PURE__ */ g("p", {
+									className: "mt-0.5 max-w-full truncate text-sm text-text-secondary",
+									children: N.trim()
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "mt-2.5",
+									children: /* @__PURE__ */ g(u, { status: V })
+								})
+							]
+						}),
+						F.trim() && /* @__PURE__ */ g("p", {
+							className: "mt-4 whitespace-pre-wrap break-words text-center text-sm text-text-secondary",
+							children: F.trim()
+						}),
+						L.length > 0 && /* @__PURE__ */ _("div", {
+							className: "mt-5",
+							children: [/* @__PURE__ */ g("p", {
+								className: "mb-1.5 text-xs font-medium text-text-tertiary",
+								children: "Interests"
+							}), /* @__PURE__ */ g("div", {
+								className: "flex flex-wrap gap-1.5",
+								children: L.map((e) => /* @__PURE__ */ g("span", {
+									className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary",
+									children: e
+								}, e))
+							})]
+						}),
+						z.length > 0 && /* @__PURE__ */ _("div", {
+							className: "mt-4",
+							children: [/* @__PURE__ */ g("p", {
+								className: "mb-1.5 text-xs font-medium text-text-tertiary",
+								children: "Skills"
+							}), /* @__PURE__ */ g("div", {
+								className: "flex flex-wrap gap-1.5",
+								children: z.map((e) => /* @__PURE__ */ g("span", {
+									className: "rounded-full bg-[var(--color-accent-soft)] px-2.5 py-0.5 text-xs font-medium text-text-primary",
+									children: e
+								}, e))
+							})]
+						}),
+						!U && /* @__PURE__ */ g("p", {
+							className: "mt-5 text-center text-xs text-text-tertiary",
+							children: "Hidden from the member directory."
+						})
+					]
+				})]
 			})
 		})]
 	});
 }
 //#endregion
-export { O as MyProfilePage };
+export { A as MyProfilePage };
 
 //# sourceMappingURL=MyProfilePage.js.map