feat(userVignette): add external badge when needed

static/css/components/userVignette.css

@@ -28,11 +28,15 @@
     justify-content: center;
     font-weight: 700;
     flex-shrink: 0;
-    /* Default size = --sm; overridden by size modifier below */
+    /* Diameter comes from `--avatar-size`, declared per size variant on
-    width: 24px;
+       the wrapper so the origin badge (a wrapper sibling or an avatar
-    height: 24px;
+       child) can size off the same value. Default fallback is `--sm`. */
+    width: var(--avatar-size, 24px);
+    height: var(--avatar-size, 24px);
     font-size: 10px;
-    /* Anchor for the bottom-right `__origin` badge. */
+    /* Anchor for `__origin--overlay` (the avatar-only-mode badge that
+       sits on the bottom-right corner of the picture). Harmless when
+       no overlay child is present. */
     position: relative;
 }
 
@@ -66,45 +70,60 @@
 
 /* ── Size variants ─────────────────────────────────────────────────────────── */
 
+/* `--avatar-size` is the single source of truth for the diameter. The
+   `__avatar` element reads it for width/height; the `__origin` badge
+   reads it (via the wrapper's inheritance scope) to scale itself to a
+   fixed proportion of the avatar regardless of variant. The avatar's
+   own `font-size` (used for initials) stays per-variant because the
+   initials-to-avatar ratio is a deliberate design choice, not a fixed
+   fraction. */
+
+.user-vignette--xs {
+    --avatar-size: 20px;
+}
 .user-vignette--xs .user-vignette__avatar {
-    width: 20px;
-    height: 20px;
     font-size: 9px;
 }
 
+.user-vignette--sm {
+    --avatar-size: 24px;
+}
 .user-vignette--sm .user-vignette__avatar {
-    width: 24px;
-    height: 24px;
     font-size: 10px;
 }
 
+.user-vignette--list {
+    --avatar-size: 36px;
+}
 .user-vignette--list .user-vignette__avatar {
-    width: 36px;
-    height: 36px;
     font-size: 13px;
 }
 
+.user-vignette--md {
+    --avatar-size: 32px;
+}
 .user-vignette--md .user-vignette__avatar {
-    width: 32px;
-    height: 32px;
     font-size: 12px;
 }
 
+.user-vignette--lg {
+    --avatar-size: 40px;
+}
 .user-vignette--lg .user-vignette__avatar {
-    width: 40px;
-    height: 40px;
     font-size: 15px;
 }
 
+.user-vignette--menu {
+    --avatar-size: 38px;
+}
 .user-vignette--menu .user-vignette__avatar {
-    width: 38px;
-    height: 38px;
     font-size: 14px;
 }
 
+.user-vignette--xl {
+    --avatar-size: 48px;
+}
 .user-vignette--xl .user-vignette__avatar {
-    width: 48px;
-    height: 48px;
     font-size: 17px;
 }
 
@@ -141,9 +160,13 @@
 /* ── Photo rendering ───────────────────────────────────────────────────────── */
 
 /* When a photo is available the JS replaces the initials text with an <img>.
-   The avatar <span> keeps its background color as a fallback while loading. */
+   The avatar <span> keeps its background color as a fallback while loading.
+   The `:not(.user-vignette__origin)` carve-out excludes the overlay badge
+   (avatar-only mode) which is also an `.oxi-icon` inside `.__avatar`
+   after SVG conversion — without the carve-out it would inherit the
+   100% / 100% sizing and fill the whole circle. */
 .user-vignette__avatar img,
-.user-vignette__avatar .oxi-icon {
+.user-vignette__avatar .oxi-icon:not(.user-vignette__origin) {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -180,35 +203,49 @@
 }
 
 /* ── Origin badge (external-user marker) ───────────────────────────────────
- * Tiny FontAwesome icon overlaid on the bottom-right of the avatar circle.
+ * Inline-flex sibling rendered to the right of the avatar + name. Shown
- * Shown ONLY for external users — internal users render the bare avatar
+ * ONLY for external users — internal users render the bare vignette
  * (Ed's "external only" preference: quiet UI for the common case).
  *
- * The white background ring lifts the icon off coloured avatars so it
+ * Earlier iterations placed this inside `.__avatar` as an absolute-
- * stays readable across the full palette.                                  */
+ * positioned corner badge. The corner approach failed once the avatar
+ * showed a user photo — the `<img>` masked the badge out. Pulling it
+ * out to a sibling keeps it visible regardless of avatar content.    */
 
 .user-vignette__origin {
-    position: absolute;
+    flex-shrink: 0;
-    /* Bottom-right corner, slightly tucked past the avatar's edge. */
-    right: -2px;
-    bottom: -2px;
-    /* Scale to ~40% of avatar diameter via em — the parent's font-size
-       changes per size variant, so the badge naturally tracks. */
-    font-size: 0.9em;
     line-height: 1;
-    background: var(--color-bg-surface);
+    /* Default (sibling mode, with name): track the avatar's font-size
-    color: var(--color-text-secondary);
+       so the badge matches the row's text scale. The overlay mode
-    border-radius: 50%;
+       overrides this below with the explicit 30%-of-avatar-diameter
-    /* Halo ring so the icon visually detaches from coloured avatars. */
+       rule. */
-    box-shadow: 0 0 0 1.5px var(--color-bg-surface);
+    font-size: 1em;
-    /* Don't intercept hover events on the avatar itself. */
-    pointer-events: auto;
 }
 
 .user-vignette__origin--external {
     color: var(--color-warning-orange-text);
 }
 
+/* Avatar-only renders (the user-menu toolbar button is the canonical
+   case) have no sibling row to anchor the badge against. The
+   `--overlay` modifier puts it on the bottom-right corner of the
+   picture at exactly 30% of the avatar diameter, regardless of size
+   variant. `--avatar-size` is declared per variant on the wrapper and
+   inherits to the badge via the cascade. Halo ring lifts the icon off
+   coloured avatars + the user's photo so it stays readable across the
+   palette. */
+.user-vignette__origin--overlay {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    /* `.oxi-icon` (the SVG that replaces the original `<i>`) is
+       `width: 1em; height: 1em`, so font-size IS the rendered size. */
+    font-size: calc(var(--avatar-size, 24px) * 0.3);
+    background: var(--color-bg-surface);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1.5px var(--color-bg-surface);
+}
+
 .user-vignette__origin.hidden {
     display: none;
 }

static/js/components/pendingEmailVignette.js

@@ -49,14 +49,6 @@ export function createPendingEmailVignette(email, size = 'sm') {
     const [local, domain] = trimmed.split('@');
     const synthName = local && domain ? `${local[0]} ${domain[0]}` : trimmed.slice(0, 2);
     avatar.textContent = _initials(synthName);
-
-    // Forced external badge — this is the whole point of the component.
-    const badge = document.createElement('i');
-    badge.className = 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark';
-    badge.title = 'External invitation';
-    badge.setAttribute('aria-hidden', 'true');
-    avatar.appendChild(badge);
-
     wrapper.appendChild(avatar);
 
     // The "name" for a pending invite is just the email itself — there
@@ -66,5 +58,16 @@ export function createPendingEmailVignette(email, size = 'sm') {
     nameEl.textContent = trimmed;
     wrapper.appendChild(nameEl);
 
+    // Forced external badge — this is the whole point of the component.
+    // Lives as a sibling at the end of the wrapper (mirrors the
+    // userVignette layout) so it stays visible regardless of avatar
+    // content (initials today, possibly a photo in a future "saved
+    // email contact" mode).
+    const badge = document.createElement('i');
+    badge.className = 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark';
+    badge.title = 'External invitation';
+    badge.setAttribute('aria-hidden', 'true');
+    wrapper.appendChild(badge);
+
     return wrapper;
 }

static/js/components/userVignette.js

@@ -119,18 +119,6 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE
     avatar.textContent = userId.slice(0, 2).toUpperCase();
     wrapper.appendChild(avatar);
 
-    // Origin badge (external-only — internal users render unchanged).
-    // Created hidden; revealed once `getIsExternal` resolves to true.
-    // FontAwesome glyph classes are added alongside the component
-    // class so the icon renders as a building-with-x glyph.
-    /** @type {HTMLElement | null} */
-    const originEl = showOrigin ? document.createElement('i') : null;
-    if (originEl) {
-        originEl.className = 'user-vignette__origin user-vignette__origin--external hidden fa-solid fa-building-circle-xmark';
-        originEl.setAttribute('aria-hidden', 'true');
-        avatar.appendChild(originEl);
-    }
-
     /** @type {HTMLElement | null} */
     const nameEl = showName ? document.createElement('span') : null;
 
@@ -157,11 +145,21 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE
     // Resolve name, photo, email, and (when requested) is_external
     // asynchronously. All four go through the systemUsers cache so a
     // single fetch back-fills every facet.
+    //
+    // The origin badge (external-user marker) is created here only
+    // when `isExternal` is true — NOT pre-created hidden — because the
+    // global icon-replacement `MutationObserver` (core/icons.js) swaps
+    // every `<i class="fa-…">` for an `<svg>`, invalidating any
+    // reference we'd otherwise hold across the await. Late-resolve
+    // calls used to toggle `.hidden` on the original `<i>` that no
+    // longer existed in the DOM, leaving the badge invisible until
+    // the next render. Creating-then-appending keeps the icon system
+    // and our reveal step in agreement.
     Promise.all([
         systemUsers.getDisplayName(userId),
         systemUsers.getPhoto(userId),
         emailEl ? systemUsers.getEmail(userId) : Promise.resolve(null),
-        originEl ? systemUsers.getIsExternal(userId) : Promise.resolve(false)
+        showOrigin ? systemUsers.getIsExternal(userId) : Promise.resolve(false)
     ]).then(([name, photo, email, isExternal]) => {
         if (nameEl) nameEl.textContent = name;
         if (emailEl) emailEl.textContent = email ?? '';
@@ -170,14 +168,23 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE
         } else {
             avatar.textContent = _initials(name);
         }
-        // Both branches above replace the avatar's children, wiping the
+        if (showOrigin && isExternal) {
-        // pre-attached badge node. Re-attach AFTER the avatar's content
+            const badge = document.createElement('i');
-        // is final so the badge sits on top.
+            // In avatar-only mode (no name span), overlay the badge on
-        if (originEl) {
+            // the bottom-right corner of the picture — the right-hand
-            avatar.appendChild(originEl);
+            // sibling spot doesn't exist there and a row-end position
-            if (isExternal) {
+            // would visually float in nothing. With a name, keep the
-                originEl.classList.remove('hidden');
+            // badge as a sibling on the right of the row.
-                originEl.title = 'External user';
+            const overlay = !showName;
+            badge.className = overlay
+                ? 'user-vignette__origin user-vignette__origin--external user-vignette__origin--overlay fa-solid fa-building-circle-xmark'
+                : 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark';
+            badge.title = 'External user';
+            badge.setAttribute('aria-hidden', 'true');
+            if (overlay) {
+                avatar.appendChild(badge);
+            } else {
+                wrapper.appendChild(badge);
             }
         }
     });

static/js/model/systemUsers.js

@@ -62,7 +62,22 @@ function _nameFor(c) {
  */
 async function _ensureIndex() {
     if (_index !== null) return;
-    const contacts = await addressBook.listContacts(SYSTEM_BOOK_ID);
+
+    // System address book load. Tolerates ANY error (most relevantly the
+    // 403 external users receive on `/api/address-books/system/contacts`
+    // since PR 11.1's defense-in-depth lockout): treat as "empty book"
+    // and fall through to the per-user localStorage injection below so
+    // at least the logged-in user resolves correctly. Without this
+    // try/catch an external user's systemUsers cache stays unbuilt and
+    // every userVignette (including their own avatar in the user menu)
+    // falls back to the UUID-prefix placeholder.
+    /** @type {ContactItem[]} */
+    let contacts = [];
+    try {
+        contacts = await addressBook.listContacts(SYSTEM_BOOK_ID);
+    } catch {
+        // 403 / 5xx / network error — leave contacts empty.
+    }
     _index = new Map(contacts.map((c) => [c.id, _nameFor(c)]));
     _photoIndex = new Map(contacts.map((c) => [c.id, c.photo_url ?? null]));
     _emailIndex = new Map(