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>
This commit is contained in:
2026-04-22 22:40:55 +02:00
parent 149d4515de
commit bd10e07f37
5 changed files with 686 additions and 214 deletions

View File

@@ -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',