refactor(settings/audit): conditional retention disclosure + flat layout

Drops the wrapping details-card so the audit toggle and retention input
read like the email page. The audit switch now uses role="switch" and a
new app-settings-audit component (built on the existing
createConditionalToggleInit primitive) hides the retention block when
audit is disabled — the input is meaningless without audit on, and the
control state syncs automatically on toggle. The redundant info
blockquote and the toggle's paraphrased DB description are gone.

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

pages/admin/settings/audit(default).phtml

@@ -46,37 +46,26 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
     require templatePath('partials/app-details-titlebar.phtml');
     ?>
 
-    <form id="settings-audit-form" method="post" data-details-storage="settings-audit-details-v1" data-standard-detail-form="1">
+    <form id="settings-audit-form" method="post" data-standard-detail-form="1">
-      <details class="app-details-card" name="settings-audit-system" data-details-key="settings-audit-system" open>
+      <div data-settings-audit-root>
-        <summary>
+        <label class="app-field">
-          <span class="app-details-card-summary-title"><?php e(t('System audit')); ?></span>
+          <input type="checkbox" role="switch" name="system_audit_enabled" value="1"
-          <span class="app-details-card-summary-meta">
+            data-audit-enabled-toggle
-            <span class="badge" data-variant="neutral"><?php e($systemAuditEnabled ? t('Enabled') : t('Disabled')); ?></span>
+            <?php e($systemAuditEnabled ? 'checked' : ''); ?> <?php e($disabledAttr); ?>>
-          </span>
+          <span><?php e(t('Enable system audit log')); ?></span>
-        </summary>
+        </label>
-        <div class="app-details-card-container">
+        <div data-audit-when-enabled <?php e($systemAuditEnabled ? '' : 'hidden'); ?>>
-          <blockquote data-variant="info">
-            <small><?php e(t('System audit controls whether security events are logged and how long they are kept.')); ?></small>
-          </blockquote>
-          <label class="app-field">
-            <input type="checkbox" name="system_audit_enabled" value="1" <?php e($systemAuditEnabled ? 'checked' : ''); ?> <?php e($disabledAttr); ?>>
-            <span><?php e(t('Enable system audit log')); ?></span>
-          </label>
           <hr>
           <label class="app-field">
             <span><?php e(t('Retention (days)')); ?></span>
-            <input
+            <input type="number" name="system_audit_retention_days"
-              type="number"
-              name="system_audit_retention_days"
               value="<?php e((string) $systemAuditRetentionDays); ?>"
-              min="30"
+              min="30" max="1095" step="1"
-              max="1095"
-              step="1"
               <?php e($readonlyAttr); ?>>
             <small><?php e(t($systemAuditRetentionDaysDesc)); ?></small>
           </label>
         </div>
-      </details>
+      </div>
 
       <?php Session::getCsrfInput(); ?>
     </form>

tests/Architecture/FrontendRuntimeContractSupport.php

@@ -27,6 +27,7 @@ trait FrontendRuntimeContractSupport
             'web/js/components/app-custom-field-options-toggle.js',
             'web/js/components/app-tenant-sso-toggle.js',
             'web/js/components/app-settings-telemetry.js',
+            'web/js/components/app-settings-audit.js',
             'web/js/components/app-standard-detail-page.js',
             'web/js/components/app-auto-submit.js',
             'modules/bookmarks/web/js/components/app-bookmark-save.js',

web/js/app-init.js

@@ -20,6 +20,7 @@ import { initCustomFieldOptionsToggle } from './components/app-custom-field-opti
 import { initTenantSsoToggle } from './components/app-tenant-sso-toggle.js';
 import { initTenantLdapToggle } from './components/app-tenant-ldap-toggle.js';
 import { initTelemetrySettings } from './components/app-settings-telemetry.js';
+import { initSettingsAudit } from './components/app-settings-audit.js';
 import { initStandardDetailPages } from './components/app-standard-detail-page.js';
 import { initAutoSubmit } from './components/app-auto-submit.js';
 import { initTabs } from './components/app-tabs.js';
@@ -196,6 +197,10 @@ const bootRuntime = async () => {
     scope: 'global',
     configPath: 'components.settingsTelemetry',
   });
+  runtime.register('settings-audit', initSettingsAudit, {
+    scope: 'global',
+    configPath: 'components.settingsAudit',
+  });
   runtime.register('auto-submit', initAutoSubmit, {
     scope: 'global',
     configPath: 'components.autoSubmit',

web/js/components/app-settings-audit.js

@@ -0,0 +1,24 @@
+/**
+ * Shows/hides audit retention field based on the audit-enabled toggle.
+ */
+import { syncControlState, createConditionalToggleInit } from '../core/app-conditional-controls.js';
+
+const initRoot = (root) => {
+  const enabledInput = root.querySelector('[data-audit-enabled-toggle]');
+  const dependent = root.querySelector('[data-audit-when-enabled]');
+  if (!(enabledInput instanceof HTMLInputElement) || !(dependent instanceof HTMLElement)) {
+    return null;
+  }
+  const sync = () => syncControlState(dependent, enabledInput.checked);
+  enabledInput.addEventListener('change', sync);
+  sync();
+  return () => {
+    enabledInput.removeEventListener('change', sync);
+  };
+};
+
+export const initSettingsAudit = createConditionalToggleInit({
+  rootSelector: '[data-settings-audit-root]',
+  boundKey: 'settingsAuditBound',
+  initRoot,
+});