@broberg/app-shell 0.4.0 → 0.5.0

package/README.md

@@ -51,6 +51,23 @@ the user menu reads and writes theme, palette, surfaces and backdrop through it.
 | `Avatar` | `picture` when given, otherwise initials. |
 | `AccountPage` | The user's own name and picture, edited inside the app (0.4.0). |
 
+## 0.5.0 — the user menu follows the account page (F095.5)
+
+`onProfileChange(profile)` is called with the profile **as the server now holds
+it** after a name save, a picture upload or a removal. It is never called on load
+or after a failed save. Pass it to the shell's `user`, so the menu changes at once:
+
+```tsx
+const [user, setUser] = useState(sessionUser);
+<AppShell user={user} …>
+  <AccountPage lang="da" onProfileChange={(p) => setUser({ ...user, name: p.name ?? undefined, picture: p.picture ?? undefined })} />
+</AppShell>
+```
+
+With `@broberg/sso` ≥0.11 the session cookie is re-signed with the new name and
+picture as well, so the menu is also right after a reload. «Gem» is disabled
+while the name (trimmed) equals what the server holds.
+
 ## 0.4.0 — AccountPage: name and picture, edited inside the app (F095.3)
 
 The user changes their own name and profile picture without leaving for

package/dist/preact.cjs

@@ -1004,7 +1004,7 @@ function defaultReauthHref() {
   const here = typeof location === "undefined" ? "/" : location.pathname + location.search;
   return `/auth/login?returnTo=${encodeURIComponent(here)}`;
 }
-function AccountPage({ lang, adapter, reauthHref }) {
+function AccountPage({ lang, adapter, reauthHref, onProfileChange }) {
   const t = TEXT[lang];
   const api = hooks.useMemo(() => adapter ?? createFetchAccountAdapter(), [adapter]);
   const [profile, setProfile] = hooks.useState(null);
@@ -1043,7 +1043,9 @@ function AccountPage({ lang, adapter, reauthHref }) {
     setBusy(what);
     setNotice(null);
     try {
-      apply(await op());
+      const p = await op();
+      apply(p);
+      onProfileChange?.(p);
       setNotice({ kind: "ok", text: okText });
     } catch (e) {
       fail(e, t.couldNotSave);
@@ -1053,7 +1055,7 @@ function AccountPage({ lang, adapter, reauthHref }) {
   };
   const onSaveName = (e) => {
     e.preventDefault();
-    if (busy || reauth) return;
+    if (busy || reauth || unchanged) return;
     void run("name", () => api.saveName(draft), t.saved);
   };
   const onFile = (e) => {
@@ -1073,6 +1075,7 @@ function AccountPage({ lang, adapter, reauthHref }) {
     void run("avatar", () => api.removeAvatar(), t.pictureRemoved);
   };
   const locked = reauth || busy !== null || profile === null;
+  const unchanged = draft.trim() === (profile?.name ?? "").trim();
   const user = { name: profile?.name ?? void 0, email: profile?.email ?? void 0, picture: profile?.picture ?? void 0 };
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { class: "bas-account", "data-testid": "account-page", "aria-busy": busy !== null, children: [
     reauth ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-account__note is-reauth", role: "alert", "data-testid": "account-reauth", children: [
@@ -1147,7 +1150,7 @@ function AccountPage({ lang, adapter, reauthHref }) {
               "data-testid": "account-name-input"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", class: "bas-account__btn is-primary", disabled: locked, "data-testid": "account-name-save", children: busy === "name" ? t.saving : t.save })
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", class: "bas-account__btn is-primary", disabled: locked || unchanged, "data-testid": "account-name-save", children: busy === "name" ? t.saving : t.save })
         ] })
       ] }),
       profile.account_url ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: profile.account_url, class: "bas-account__link", "data-testid": "account-bid-link", children: t.bidSecurity }) : null