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>

templates/partials/app-user-profile.phtml

@@ -47,20 +47,31 @@ if ($displayName !== '') {
   $initials = strtoupper($chars !== '' ? $chars : '?');
 }
 $tenantGroups = $values['tenant_groups'] ?? [];
-$hasContact = ($email !== '' || $phone !== '' || $mobile !== '' || $shortDial !== '');
-$hasAddress = ($address !== '' || $postalCode !== '' || $city !== '' || $region !== '' || $country !== '');
-$hasOrganization = (!empty($tenantGroups));
-$aboutSummary = '';
-if ($profileDescription !== '') {
-  foreach (preg_split('/\\r\\n|\\r|\\n/', $profileDescription) as $line) {
-    $line = trim((string) $line);
-    if ($line !== '') {
-      $aboutSummary = $line;
-      break;
-    }
+$tenantGroups = is_array($tenantGroups) ? $tenantGroups : [];
+$primaryTenantLabel = '';
+$primaryTenantDepartments = [];
+foreach ($tenantGroups as $group) {
+  if (!empty($group['is_primary'])) {
+    $primaryTenantLabel = trim((string) ($group['label'] ?? ''));
+    $primaryDepts = $group['departments'] ?? [];
+    $primaryTenantDepartments = is_array($primaryDepts) ? $primaryDepts : [];
+    break;
   }
 }
 
+$hasContact = ($email !== '' || $phone !== '' || $mobile !== '');
+$hasAddress = ($address !== '' || $postalCode !== '' || $city !== '' || $region !== '' || $country !== '');
+// Organization tab only appears for multi-tenant users — single-tenant info
+// is already communicated through the header chips, and redundancy hurts more
+// than a minor asymmetry.
+$hasOrganization = count($tenantGroups) > 1;
+$hasAbout = ($profileDescription !== '' || $hireDateLabel !== '' || $shortDial !== '');
+$hasAnyTab = ($hasAddress || $hasAbout || $hasOrganization);
+
+$copyEmailLabel = t('Copy email address');
+$copyPhoneLabel = t('Copy phone number');
+$copyMobileLabel = t('Copy mobile number');
+
 ?>
 
 <div class="app-details-container">
@@ -80,164 +91,220 @@ if ($profileDescription !== '') {
               <span class="user-avatar-placeholder"><?php e($initials ?: '?'); ?></span>
             <?php endif; ?>
           </div>
-          <div class="app-profile-meta">
-            <hgroup>
+
+          <div class="app-profile-identity">
+            <hgroup class="app-profile-identity-name">
               <h2><?php e($displayName); ?></h2>
               <?php if ($jobTitle !== ''): ?>
-                <p><small><?php e($jobTitle); ?></small></p>
-              <?php else: ?>
-                <p><a href="mailto:<?php e($email); ?>"><small><?php e($email); ?></small></a></p>
+                <p><?php e($jobTitle); ?></p>
               <?php endif; ?>
             </hgroup>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="app-profile-body-container">
-      <div class="app-profile-body">
-        <div class="app-tabs" data-tabs data-app-component="tabs" data-tabs-param="tab" data-tabs-storage-key="<?php e($profileKey); ?>">
-          <div class="app-tabs-nav">
-            <?php if ($hasContact): ?>
-              <button type="button" data-tab="contact" data-tab-default><small><?php e(t('Contact')); ?></small></button>
-            <?php endif; ?>
-            <?php if ($hasAddress): ?>
-              <button type="button" data-tab="address"><small><?php e(t('Address')); ?></small></button>
-            <?php endif; ?>
-            <?php if ($hasOrganization): ?>
-              <button type="button" data-tab="organization"><small><?php e(t('Organization')); ?></small></button>
-            <?php endif; ?>
-            <button type="button" data-tab="about"><small><?php e(t('About')); ?></small></button>
-          </div>
-          <?php if ($hasContact): ?>
-            <div data-tab-panel="contact">
-              <div class="grid">
-                <?php if ($email !== ''): ?>
-                  <div>
-                    <small><?php e(t('Email')); ?></small>
-                    <p><a href="mailto:<?php e($email); ?>"><?php e($email); ?></a></p>
-                  </div>
+
+            <?php if ($primaryTenantLabel !== '' || !empty($primaryTenantDepartments) || $hireDateLabel !== ''): ?>
+              <div class="app-profile-chips" aria-label="<?php e(t('Summary')); ?>">
+                <?php if ($primaryTenantLabel !== ''): ?>
+                  <span class="badge" data-variant="neutral">
+                    <i class="bi bi-building" aria-hidden="true"></i>
+                    <?php e($primaryTenantLabel); ?>
+                    <small>· <?php e(t('Primary')); ?></small>
+                  </span>
                 <?php endif; ?>
-                <?php if ($phone !== ''): ?>
-                  <div>
-                    <small><?php e(t('Phone')); ?></small>
-                    <p><a href="tel:<?php e($phone); ?>"><?php e($phone); ?></a></p>
-                  </div>
+                <?php foreach (array_slice($primaryTenantDepartments, 0, 3) as $dept): ?>
+                  <span class="badge" data-variant="neutral">
+                    <i class="bi bi-tag" aria-hidden="true"></i>
+                    <?php e($dept); ?>
+                  </span>
+                <?php endforeach; ?>
+                <?php if ($hireDateLabel !== ''): ?>
+                  <span class="badge" data-variant="neutral">
+                    <i class="bi bi-calendar-event" aria-hidden="true"></i>
+                    <?php e(t('Hired')); ?> <?php e($hireDateLabel); ?>
+                  </span>
                 <?php endif; ?>
               </div>
-              <div class="grid">
-                <?php if ($mobile !== ''): ?>
-                  <div>
-                    <small><?php e(t('Mobile')); ?></small>
-                    <p><a href="tel:<?php e($mobile); ?>"><?php e($mobile); ?></a></p>
+            <?php endif; ?>
+          </div>
+
+          <?php if ($hasContact): ?>
+            <div class="app-profile-actions">
+              <?php if ($email !== ''): ?>
+                <a role="button" class="secondary outline small app-profile-action-button"
+                   href="mailto:<?php e($email); ?>">
+                  <i class="bi bi-envelope" aria-hidden="true"></i>
+                  <span><?php e(t('Send email')); ?></span>
+                </a>
+              <?php endif; ?>
+              <?php if ($phone !== '' || $mobile !== ''): ?>
+                <?php $callTarget = $phone !== '' ? $phone : $mobile; ?>
+                <a role="button" class="secondary outline small app-profile-action-button"
+                   href="tel:<?php e($callTarget); ?>">
+                  <i class="bi bi-telephone" aria-hidden="true"></i>
+                  <span><?php e(t('Call')); ?></span>
+                </a>
+              <?php endif; ?>
+            </div>
+          <?php endif; ?>
+        </div>
+
+        <?php if ($hasContact): ?>
+          <ul class="app-profile-contact-list" aria-label="<?php e(t('Contact')); ?>">
+            <?php if ($email !== ''): ?>
+              <li class="app-profile-contact-row">
+                <a class="app-profile-contact-value" href="mailto:<?php e($email); ?>" aria-label="<?php e(t('Email')); ?>: <?php e($email); ?>">
+                  <span class="app-profile-contact-icon" aria-hidden="true"
+                        data-tooltip="<?php e(t('Email')); ?>" data-tooltip-pos="right">
+                    <i class="bi bi-envelope"></i>
+                  </span>
+                  <span class="app-profile-contact-text"><?php e($email); ?></span>
+                </a>
+                <button type="button" class="app-copy-button" data-copy-button
+                        data-copy-value="<?php e($email); ?>"
+                        aria-label="<?php e($copyEmailLabel); ?>"
+                        data-tooltip="<?php e($copyEmailLabel); ?>" data-tooltip-pos="left">
+                  <i class="bi bi-copy" data-copy-icon-idle aria-hidden="true"></i>
+                  <i class="bi bi-check2" data-copy-icon-done aria-hidden="true"></i>
+                </button>
+              </li>
+            <?php endif; ?>
+            <?php if ($phone !== ''): ?>
+              <li class="app-profile-contact-row">
+                <a class="app-profile-contact-value" href="tel:<?php e($phone); ?>" aria-label="<?php e(t('Phone')); ?>: <?php e($phone); ?>">
+                  <span class="app-profile-contact-icon" aria-hidden="true"
+                        data-tooltip="<?php e(t('Phone')); ?>" data-tooltip-pos="right">
+                    <i class="bi bi-telephone"></i>
+                  </span>
+                  <span class="app-profile-contact-text"><?php e($phone); ?></span>
+                </a>
+                <button type="button" class="app-copy-button" data-copy-button
+                        data-copy-value="<?php e($phone); ?>"
+                        aria-label="<?php e($copyPhoneLabel); ?>"
+                        data-tooltip="<?php e($copyPhoneLabel); ?>" data-tooltip-pos="left">
+                  <i class="bi bi-copy" data-copy-icon-idle aria-hidden="true"></i>
+                  <i class="bi bi-check2" data-copy-icon-done aria-hidden="true"></i>
+                </button>
+              </li>
+            <?php endif; ?>
+            <?php if ($mobile !== ''): ?>
+              <li class="app-profile-contact-row">
+                <a class="app-profile-contact-value" href="tel:<?php e($mobile); ?>" aria-label="<?php e(t('Mobile')); ?>: <?php e($mobile); ?>">
+                  <span class="app-profile-contact-icon" aria-hidden="true"
+                        data-tooltip="<?php e(t('Mobile')); ?>" data-tooltip-pos="right">
+                    <i class="bi bi-phone"></i>
+                  </span>
+                  <span class="app-profile-contact-text"><?php e($mobile); ?></span>
+                </a>
+                <button type="button" class="app-copy-button" data-copy-button
+                        data-copy-value="<?php e($mobile); ?>"
+                        aria-label="<?php e($copyMobileLabel); ?>"
+                        data-tooltip="<?php e($copyMobileLabel); ?>" data-tooltip-pos="left">
+                  <i class="bi bi-copy" data-copy-icon-idle aria-hidden="true"></i>
+                  <i class="bi bi-check2" data-copy-icon-done aria-hidden="true"></i>
+                </button>
+              </li>
+            <?php endif; ?>
+          </ul>
+        <?php endif; ?>
+      </div>
+    </div>
+
+    <?php if ($hasAnyTab): ?>
+      <div class="app-profile-body-container">
+        <div class="app-profile-body">
+          <div class="app-tabs app-profile-tabs" data-tabs data-app-component="tabs"
+               data-tabs-param="tab" data-tabs-storage-key="<?php e($profileKey); ?>">
+            <div class="app-tabs-nav">
+              <?php
+                $firstTab = true;
+                $renderTabButton = function (string $key, string $label) use (&$firstTab): void {
+                  $default = $firstTab ? ' data-tab-default' : '';
+                  $firstTab = false;
+                  echo '<button type="button" data-tab="' . htmlspecialchars($key, ENT_QUOTES, 'UTF-8') . '"' . $default . '>'
+                    . htmlspecialchars($label, ENT_QUOTES, 'UTF-8') . '</button>';
+                };
+              ?>
+              <?php if ($hasAddress) { $renderTabButton('address', t('Address')); } ?>
+              <?php if ($hasOrganization) { $renderTabButton('organization', t('Organization')); } ?>
+              <?php if ($hasAbout) { $renderTabButton('about', t('About')); } ?>
+            </div>
+
+            <?php if ($hasAddress): ?>
+              <div data-tab-panel="address" class="app-profile-panel">
+                <address class="app-profile-address">
+                  <?php if ($address !== ''): ?>
+                    <span><?php e($address); ?></span>
+                  <?php endif; ?>
+                  <?php $line2 = trim($postalCode . ' ' . $city); ?>
+                  <?php if ($line2 !== ''): ?>
+                    <span><?php e($line2); ?></span>
+                  <?php endif; ?>
+                  <?php if ($region !== ''): ?>
+                    <span><?php e($region); ?></span>
+                  <?php endif; ?>
+                  <?php if ($country !== ''): ?>
+                    <span><?php e($country); ?></span>
+                  <?php endif; ?>
+                </address>
+              </div>
+            <?php endif; ?>
+
+            <?php if ($hasOrganization): ?>
+              <div data-tab-panel="organization" class="app-profile-panel">
+                <ul class="app-profile-tenant-list">
+                  <?php foreach ($tenantGroups as $group): ?>
+                    <?php
+                      $label = trim((string) ($group['label'] ?? ''));
+                      if ($label === '') { continue; }
+                      $departments = $group['departments'] ?? [];
+                      $departments = is_array($departments) ? $departments : [];
+                      $isPrimary = !empty($group['is_primary']);
+                    ?>
+                    <li class="app-profile-tenant-item">
+                      <div class="app-profile-tenant-label">
+                        <i class="bi bi-building" aria-hidden="true"></i>
+                        <strong><?php e($label); ?></strong>
+                        <?php if ($isPrimary): ?>
+                          <small class="app-profile-tenant-primary">· <?php e(t('Primary')); ?></small>
+                        <?php endif; ?>
+                      </div>
+                      <?php if (!empty($departments)): ?>
+                        <div class="app-profile-tenant-departments">
+                          <?php e(implode(', ', $departments)); ?>
+                        </div>
+                      <?php endif; ?>
+                    </li>
+                  <?php endforeach; ?>
+                </ul>
+              </div>
+            <?php endif; ?>
+
+            <?php if ($hasAbout): ?>
+              <div data-tab-panel="about" class="app-profile-panel">
+                <?php if ($hireDateLabel !== ''): ?>
+                  <div class="app-profile-key-value">
+                    <small><?php e(t('Hire date')); ?></small>
+                    <p><?php e($hireDateLabel); ?></p>
                   </div>
                 <?php endif; ?>
                 <?php if ($shortDial !== ''): ?>
-                  <div>
+                  <div class="app-profile-key-value">
                     <small><?php e(t('Short dial')); ?></small>
                     <p><?php e($shortDial); ?></p>
                   </div>
                 <?php endif; ?>
-              </div>
-            </div>
-          <?php endif; ?>
-          <?php if ($hasAddress): ?>
-            <div data-tab-panel="address">
-              <div>
-                <?php if ($address !== ''): ?>
-                  <p><?php e($address); ?></p>
-                <?php endif; ?>
-                <?php $line2 = trim($postalCode . ' ' . $city); ?>
-                <?php if ($line2 !== ''): ?>
-                  <p><?php e($line2); ?></p>
-                <?php endif; ?>
-                <?php if ($region !== ''): ?>
-                  <p><?php e($region); ?></p>
-                <?php endif; ?>
-                <?php if ($country !== ''): ?>
-                  <p><?php e($country); ?></p>
-                <?php endif; ?>
-              </div>
-            </div>
-          <?php endif; ?>
-          <?php if ($hasOrganization): ?>
-            <div data-tab-panel="organization">
-              <?php if (!empty($tenantGroups)): ?>
-                <table class="app-profile-table">
-                  <thead>
-                    <tr>
-                      <th><?php e(t('Tenant')); ?></th>
-                      <th><?php e(t('Departments')); ?></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <?php foreach ($tenantGroups as $group): ?>
-                      <?php
-                      $departments = $group['departments'] ?? [];
-                      $departments = is_array($departments) ? $departments : [];
-                      ?>
-                      <tr>
-                        <td>
-                          <?php e($group['label'] ?? ''); ?>
-                          <?php if (!empty($group['is_primary'])): ?>
-                            <small>(<?php e(t('Primary tenant')); ?>)</small>
-                          <?php endif; ?>
-                        </td>
-                        <td>
-                          <?php if (!empty($departments)): ?>
-                            <?php e(implode(', ', $departments)); ?>
-                          <?php else: ?>
-                            -
-                          <?php endif; ?>
-                        </td>
-                      </tr>
+                <?php if ($profileDescription !== ''): ?>
+                  <div class="app-profile-about-description">
+                    <?php foreach (preg_split('/\\r\\n|\\r|\\n/', $profileDescription) as $line): ?>
+                      <?php if (trim($line) !== ''): ?>
+                        <p><?php e($line); ?></p>
+                      <?php endif; ?>
                     <?php endforeach; ?>
-                  </tbody>
-                </table>
-              <?php else: ?>
-                <p>-</p>
-              <?php endif; ?>
-            </div>
-          <?php endif; ?>
-          <div data-tab-panel="about">
-            <?php if ($hireDateLabel !== ''): ?>
-              <div>
-                <small><?php e(t('Hire date')); ?></small>
-                <p><?php e($hireDateLabel); ?></p>
-              </div>
-            <?php endif; ?>
-            <?php if ($profileDescription !== ''): ?>
-              <?php foreach (preg_split('/\\r\\n|\\r|\\n/', $profileDescription) as $line): ?>
-                <?php if (trim($line) !== ''): ?>
-                  <p><?php e($line); ?></p>
+                  </div>
                 <?php endif; ?>
-              <?php endforeach; ?>
-            <?php elseif ($hireDateLabel === ''): ?>
-              <p>-</p>
+              </div>
             <?php endif; ?>
           </div>
         </div>
       </div>
-    </div>
+    <?php endif; ?>
   </section>
-  <aside id="app-details-aside-section">
-    <div class="app-details-aside-section">
-      <hgroup>
-        <h2><?php e(t('Contact')); ?></h2>
-        <p><?php e(t('Quick actions')); ?></p>
-      </hgroup>
-      <hr>
-      <?php if ($email !== ''): ?>
-        <p><a href="mailto:<?php e($email); ?>"><?php e(t('Send email')); ?></a></p>
-      <?php endif; ?>
-      <?php if ($phone !== ''): ?>
-        <p><a href="tel:<?php e($phone); ?>"><?php e(t('Call phone')); ?></a></p>
-      <?php endif; ?>
-      <?php if ($mobile !== ''): ?>
-        <p><a href="tel:<?php e($mobile); ?>"><?php e(t('Call mobile')); ?></a></p>
-      <?php endif; ?>
-      <?php if (!$hasContact): ?>
-        <p>-</p>
-      <?php endif; ?>
-    </div>
-  </aside>
 </div>