feat(addressbook): Stripe-style detail profile — meta chips, always-visible contact stack, copy affordance

Refactors the address-book detail partial (templates/partials/app-user-profile.phtml)
toward a Stripe/Linear aesthetic: the banner + avatar still carry identity,
but the header now also carries meta chips (primary tenant, department,
hire date) and primary CTAs (Send email, Call). Email/phone/mobile move
out of a tab into an always-visible contact stack directly under the
identity block, with icon-led rows and a hover-revealed copy button.
Tabs reduce to Address / About / Organization, with Organization only
appearing for multi-tenant users — single-tenant assignments are fully
communicated through chips. The detail aside is gone; main content is
single-column and more focused.

Introduces web/js/components/app-copy-field.js — a generic, server-
markup-driven copy-to-clipboard button component wired from app-init.js.
The markup is rendered by the PHP partial (role-compatible, SSR-safe);
the component only attaches the click handler and drives icon-swap
feedback via an is-copied class.

Address-book index page now loads the 'address-book' CSS group alongside
'address-book-index' so the detail drawer (which mounts the same profile
partial inline) gets the correct styles.

Contact rows use inline-block + vertical-align centering inside the
clickable link; the field-label tooltip lives on a <span> wrapper rather
than the <i> itself (Bootstrap icons render their glyph via ::before, and
the tooltip rule would otherwise cap it). Hover reveals the copy button
on pointer devices; @media (hover: none) shows it permanently on touch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/js/app-init.js

@@ -4,6 +4,7 @@ import { warnOnce } from './core/app-dom.js';
 import { initFlashAutoDismiss } from './components/app-flash-auto-dismiss.js';
 import { initPasswordHints } from './components/app-password-hints.js';
 import { initBadgeCopy } from './components/app-copy-badge.js';
+import { initCopyField } from './components/app-copy-field.js';
 import { initMultiSelectComponent } from './components/app-multiselect-init.js';
 import { initSidebarToggle } from './components/app-toggle-sidebar.js';
 import { initAsidePanels } from './components/app-toggle-aside-panels.js';
@@ -174,6 +175,10 @@ const bootRuntime = async () => {
     scope: 'global',
     configPath: 'components.copyBadge',
   });
+  runtime.register('copy-field', initCopyField, {
+    scope: 'global',
+    configPath: 'components.copyField',
+  });
   runtime.register('multiselect', initMultiSelectComponent, {
     scope: 'global',
     configPath: 'components.multiSelect',

web/js/components/app-copy-field.js

@@ -0,0 +1,101 @@
+/**
+ * Copy-to-clipboard button — click writes `data-copy-value` to the clipboard
+ * and swaps the button icon to a check for ~1.2s. Self-contained: markup is
+ * fully rendered server-side, this component only wires the click handler.
+ *
+ *   <button type="button" data-copy-button data-copy-value="max@acme.com"
+ *           aria-label="Copy email">
+ *     <i class="bi bi-copy" data-copy-icon-idle></i>
+ *     <i class="bi bi-check2" data-copy-icon-done></i>
+ *   </button>
+ */
+import { resolveHost } from '../core/app-dom.js';
+
+const BUTTON_SELECTOR = '[data-copy-button]';
+const DONE_CLASS = 'is-copied';
+const DONE_TIMEOUT_MS = 1200;
+
+const copyText = async (value) => {
+  if (!value) {return false;}
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+  let ok = false;
+  try {
+    ok = document.execCommand('copy');
+  } catch {
+    ok = false;
+  }
+  document.body.removeChild(textarea);
+  return ok;
+};
+
+export function initCopyField(root = document, options = {}) {
+  const selector = String(options.selector || BUTTON_SELECTOR).trim() || BUTTON_SELECTOR;
+  const host = resolveHost(root);
+  const buttons = Array.from(host.querySelectorAll(selector));
+  if (!buttons.length) {
+    return { destroy: () => {} };
+  }
+
+  const cleanupFns = [];
+  const timers = new Map();
+
+  buttons.forEach((button) => {
+    if (!(button instanceof HTMLElement) || button.dataset.copyButtonBound === '1') {
+      return;
+    }
+    button.dataset.copyButtonBound = '1';
+
+    // Clipboard API is unavailable in insecure contexts (http without localhost)
+    // and the execCommand fallback is deprecated. If neither is usable, hide
+    // the button entirely rather than show a non-functional control.
+    const clipboardUsable = typeof navigator.clipboard?.writeText === 'function'
+      || typeof document.execCommand === 'function';
+    if (!clipboardUsable) {
+      button.hidden = true;
+      return;
+    }
+
+    const onClick = async (event) => {
+      event.preventDefault();
+      const value = button.dataset.copyValue || '';
+      const ok = await copyText(value);
+      if (!ok) {return;}
+      button.classList.add(DONE_CLASS);
+      const prevTimer = timers.get(button);
+      if (prevTimer) {window.clearTimeout(prevTimer);}
+      const timer = window.setTimeout(() => {
+        button.classList.remove(DONE_CLASS);
+        timers.delete(button);
+      }, DONE_TIMEOUT_MS);
+      timers.set(button, timer);
+    };
+
+    button.addEventListener('click', onClick);
+    cleanupFns.push(() => {
+      button.removeEventListener('click', onClick);
+      delete button.dataset.copyButtonBound;
+    });
+  });
+
+  const destroy = () => {
+    cleanupFns.forEach((fn) => fn());
+    timers.forEach((timer) => window.clearTimeout(timer));
+    timers.clear();
+  };
+
+  return { destroy };
+}