@flow-industries/id 0.23.3 → 0.24.0

package/dist/sdk/client/profile-button.js

@@ -74,17 +74,26 @@ export function createProfileButton(options) {
     fallback.rel = "noopener noreferrer";
     fallback.textContent = "Open Flow ID";
     fallback.hidden = true;
-    let lastUsername;
+    let lastUser = null;
+    let imageUrl = null;
+    avatar.textContent = "F";
     let profileRequest = null;
-    function update() {
+    function update(refresh = false) {
         const user = flow.getState().user;
         name.textContent = user?.username ?? "Flow ID";
         button.setAttribute("aria-label", `Open ${user?.username ?? "your"} Flow ID account in a new tab`);
-        if (user?.username === lastUsername)
+        const identityChanged = user?.id !== lastUser?.id ||
+            user?.username !== lastUser?.username ||
+            user?.isGuest !== lastUser?.isGuest;
+        if (identityChanged) {
+            profileRequest?.abort();
+            profileRequest = null;
+            imageUrl = null;
+            avatar.textContent = user?.username.slice(0, 1).toUpperCase() ?? "F";
+            lastUser = user;
+        }
+        else if (!refresh || profileRequest)
             return;
-        lastUsername = user?.username;
-        profileRequest?.abort();
-        avatar.textContent = user?.username.slice(0, 1).toUpperCase() ?? "F";
         if (!user || user.isGuest)
             return;
         const controller = new AbortController();
@@ -98,7 +107,14 @@ export function createProfileButton(options) {
                 return;
             // SAFETY: Flow ID owns the public profile endpoint and its optional image field.
             const profile = (await response.json());
-            if (controller.signal.aborted || !profile.image)
+            if (controller.signal.aborted)
+                return;
+            if (profile.image === null) {
+                imageUrl = null;
+                avatar.textContent = user.username.slice(0, 1).toUpperCase();
+                return;
+            }
+            if (!profile.image || profile.image === imageUrl)
                 return;
             const image = document.createElement("img");
             image.src = profile.image;
@@ -108,9 +124,17 @@ export function createProfileButton(options) {
                 height: "100%",
                 objectFit: "cover",
             });
+            await image.decode();
+            if (controller.signal.aborted)
+                return;
+            imageUrl = profile.image;
             avatar.replaceChildren(image);
         })
-            .catch(() => { });
+            .catch(() => { })
+            .finally(() => {
+            if (profileRequest === controller)
+                profileRequest = null;
+        });
     }
     button.addEventListener("click", () => {
         const opened = flow.openAccount();
@@ -120,8 +144,7 @@ export function createProfileButton(options) {
         fallback.hidden = opened;
     });
     function refresh() {
-        lastUsername = undefined;
-        update();
+        update(true);
     }
     window.addEventListener("focus", refresh);
     function setTheme(theme) {
@@ -130,7 +153,7 @@ export function createProfileButton(options) {
     setTheme(options.theme ?? "light dark");
     container.append(button, notice, fallback);
     update();
-    const unsubscribe = flow.subscribe(update);
+    const unsubscribe = flow.subscribe(() => update());
     return {
         setTheme,
         destroy() {

package/dist/sdk/types/cosmetics.d.ts

@@ -81,12 +81,13 @@ export type CosmeticMaterial = (typeof COSMETIC_MATERIALS)[number];
  * that shrank whenever a slot emptied would churn the contract every time
  * content lands.
  */
-export type CosmeticSlot = "hat" | "face" | "top" | "bottom" | "feet";
+export type CosmeticSlot = "hat" | "hair" | "face" | "top" | "bottom" | "feet";
 /** One item in the catalog. */
 export interface CosmeticItem {
     id: string;
     slot: CosmeticSlot;
     name: string;
+    description?: string;
     /**
      * ALWAYS plural, even for a single region, and the only shape there is: TF2
      * carried a singular `equip_region` key alongside the plural one, and items

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-industries/id",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -140,7 +140,7 @@
   ],
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1073.0",
-    "@flow-industries/ui": "^0.21.1",
+    "@flow-industries/ui": "^0.23.3",
     "@hono/otel": "^1.1.2",
     "@openobserve/browser-logs": "^0.3.1",
     "@openobserve/browser-rum": "^0.3.1",