templates/partials/app-detail-drawer.phtml

<?php

/**
 * Shared right-edge detail drawer.
 *
 * Mounted once at the bottom of the logged-in shell so admin list pages
 * can attach behavior via [data-detail-drawer]. Markup mirrors what
 * web/js/components/app-detail-drawer.js drives — JS only queries
 * data-attributes, never injects chrome.
 */

?>
<div class="app-detail-drawer"
  data-detail-drawer
  role="dialog"
  aria-modal="true"
  aria-hidden="true"
  hidden>
  <div class="app-detail-drawer-backdrop" data-detail-drawer-backdrop></div>
  <aside class="app-detail-drawer-panel" data-detail-drawer-panel tabindex="-1">
    <header class="app-detail-drawer-header">
      <div class="app-detail-drawer-stepper">
        <button type="button" class="transparent icon-button" data-detail-drawer-prev
          aria-label="<?php e(t('Previous')); ?>"
          data-tooltip="<?php e(t('Previous')); ?>"
          data-tooltip-pos="bottom">
          <i class="bi bi-chevron-left"></i>
        </button>
        <button type="button" class="transparent icon-button" data-detail-drawer-next
          aria-label="<?php e(t('Next')); ?>"
          data-tooltip="<?php e(t('Next')); ?>"
          data-tooltip-pos="bottom">
          <i class="bi bi-chevron-right"></i>
        </button>
      </div>
      <div class="app-detail-drawer-actions">
        <a role="button" class="secondary outline small app-detail-drawer-full"
          data-detail-drawer-full
          aria-label="<?php e(t('Open full page')); ?>">
          <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
          <span><?php e(t('Open full page')); ?></span>
        </a>
        <button type="button" class="transparent icon-button" data-detail-drawer-close
          aria-label="<?php e(t('Close')); ?>"
          data-tooltip="<?php e(t('Close')); ?>"
          data-tooltip-pos="bottom">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>
    </header>
    <div class="app-detail-drawer-body" data-detail-drawer-body>
      <div class="app-detail-drawer-loading" data-detail-drawer-loading hidden><?php e(t('Loading')); ?></div>
      <div class="app-detail-drawer-error" data-detail-drawer-error hidden><?php e(t('Failed to load')); ?></div>
      <div class="app-detail-drawer-content" data-detail-drawer-content></div>
    </div>
  </aside>
</div>
refactor(ui): move detail drawer chrome to a server-rendered partial The drawer chrome used to be built in JS via a 50-line innerHTML string and needed every caller to plumb through a labels object sourced from per-page PHP config. That diverged from the codebase convention — the confirm dialog, search dialog and session warning are all PHP partials mounted once in templates/default.phtml. The drawer now follows the same pattern: templates/partials/app-detail-drawer.phtml renders the markup with t() labels, default.phtml mounts it inside the logged-in shell, and the JS only attaches behavior via the [data-detail-drawer] selector. Knock-on cleanup: ensureDrawerElement and resolveLabels disappear from the JS, all three initDetailDrawer callers (admin/users, address book, helpdesk debitor) drop their labels parameter, and the matching dead 'drawerClose'/'drawerPrev'/… entries leave the per-page PHP grid configs. The drawer also gains a clean fallback when the partial is missing (console warn + null return), so logged-out edges can't crash. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> 2026-04-25 19:06:06 +02:00			`<?php`

			`/**`
			`* Shared right-edge detail drawer.`
			`*`
			`* Mounted once at the bottom of the logged-in shell so admin list pages`
			`* can attach behavior via [data-detail-drawer]. Markup mirrors what`
			`* web/js/components/app-detail-drawer.js drives — JS only queries`
			`* data-attributes, never injects chrome.`
			`*/`

			`?>`
			`<div class="app-detail-drawer"`
			`data-detail-drawer`
			`role="dialog"`
			`aria-modal="true"`
			`aria-hidden="true"`
			`hidden>`
			`<div class="app-detail-drawer-backdrop" data-detail-drawer-backdrop></div>`
			`<aside class="app-detail-drawer-panel" data-detail-drawer-panel tabindex="-1">`
			`<header class="app-detail-drawer-header">`
			`<div class="app-detail-drawer-stepper">`
			`<button type="button" class="transparent icon-button" data-detail-drawer-prev`
			`aria-label="<?php e(t('Previous')); ?>"`
			`data-tooltip="<?php e(t('Previous')); ?>"`
			`data-tooltip-pos="bottom">`
			`<i class="bi bi-chevron-left"></i>`
			`</button>`
			`<button type="button" class="transparent icon-button" data-detail-drawer-next`
			`aria-label="<?php e(t('Next')); ?>"`
			`data-tooltip="<?php e(t('Next')); ?>"`
			`data-tooltip-pos="bottom">`
			`<i class="bi bi-chevron-right"></i>`
			`</button>`
			`</div>`
			`<div class="app-detail-drawer-actions">`
			`<a role="button" class="secondary outline small app-detail-drawer-full"`
			`data-detail-drawer-full`
			`aria-label="<?php e(t('Open full page')); ?>">`
			`<i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>`
			`<span><?php e(t('Open full page')); ?></span>`
			`</a>`
			`<button type="button" class="transparent icon-button" data-detail-drawer-close`
			`aria-label="<?php e(t('Close')); ?>"`
			`data-tooltip="<?php e(t('Close')); ?>"`
			`data-tooltip-pos="bottom">`
			`<i class="bi bi-x-lg"></i>`
			`</button>`
			`</div>`
			`</header>`
			`<div class="app-detail-drawer-body" data-detail-drawer-body>`
			`<div class="app-detail-drawer-loading" data-detail-drawer-loading hidden><?php e(t('Loading')); ?></div>`
			`<div class="app-detail-drawer-error" data-detail-drawer-error hidden><?php e(t('Failed to load')); ?></div>`
			`<div class="app-detail-drawer-content" data-detail-drawer-content></div>`
			`</div>`
			`</aside>`
			`</div>`