feat: polish alpine shell feedback

apps/ui/js/auth.js

@@ -3,6 +3,20 @@
   var sessionCache = null;
   var sessionPromise = null;
 
+  function currentWorkspaceLabel() {
+    if (window.getCurrentWorkspace) {
+      var workspace = window.getCurrentWorkspace();
+      if (workspace && workspace.name) {
+        return workspace.name;
+      }
+    }
+    try {
+      return localStorage.getItem('crank_workspace_slug') || 'workspace';
+    } catch (_error) {
+      return 'workspace';
+    }
+  }
+
   function isLoginPage() {
     return /\/html\/login\.html$/.test(window.location.pathname);
   }
@@ -21,12 +35,25 @@
     try {
       localStorage.removeItem(STORAGE_KEY);
     } catch (_error) {}
+    renderShellIdentity(null);
   }
 
   function primaryMembership(session) {
-    return session && session.memberships && session.memberships.length
-      ? session.memberships[0]
-      : null;
+    if (!(session && session.memberships && session.memberships.length)) {
+      return null;
+    }
+    if (window.getCurrentWorkspace) {
+      var currentWorkspace = window.getCurrentWorkspace();
+      if (currentWorkspace) {
+        var matched = session.memberships.find(function(item) {
+          return item.workspace && item.workspace.id === currentWorkspace.id;
+        });
+        if (matched) {
+          return matched;
+        }
+      }
+    }
+    return session.memberships[0];
   }
 
   function initials(displayName, email) {
@@ -56,9 +83,47 @@
     } catch (_error) {}
   }
 
+  function mirroredUser() {
+    try {
+      return JSON.parse(localStorage.getItem(STORAGE_KEY));
+    } catch (_error) {
+      return null;
+    }
+  }
+
+  function renderShellIdentity(session) {
+    var membership = primaryMembership(session);
+    var fallbackUser = mirroredUser();
+    var displayName = session && session.user
+      ? (session.user.display_name || session.user.email || 'Crank')
+      : (fallbackUser && fallbackUser.name) || 'Crank';
+    var email = session && session.user
+      ? session.user.email
+      : fallbackUser && fallbackUser.email;
+    var role = membership
+      ? String(membership.role || '').replace(/^\w/, function(char) { return char.toUpperCase(); })
+      : (fallbackUser && fallbackUser.role) || 'Viewer';
+    var workspace = membership && membership.workspace
+      ? (membership.workspace.display_name || membership.workspace.slug || membership.workspace.id)
+      : currentWorkspaceLabel();
+    var avatarValue = initials(displayName, email);
+
+    document.querySelectorAll('.nav-avatar').forEach(function(element) {
+      element.textContent = avatarValue;
+    });
+    document.querySelectorAll('.user-dropdown-name').forEach(function(element) {
+      element.textContent = displayName;
+    });
+    document.querySelectorAll('.user-dropdown-role').forEach(function(element) {
+      element.textContent = role + ' · ' + workspace;
+    });
+  }
+
   function replaceSession(session) {
     sessionCache = session;
     persistUserMirror(session);
+    renderShellIdentity(session);
+    window.dispatchEvent(new CustomEvent('crank:sessionchange', { detail: session }));
     return session;
   }
 
@@ -144,4 +209,16 @@
     logout: logout,
     handleUnauthorized: handleUnauthorized,
   };
+
+  window.addEventListener('crank:workspacechange', function() {
+    renderShellIdentity(sessionCache);
+  });
+
+  window.addEventListener('crank:sessionchange', function(event) {
+    renderShellIdentity(event.detail || sessionCache);
+  });
+
+  document.addEventListener('DOMContentLoaded', function() {
+    renderShellIdentity(sessionCache);
+  });
 }());