feat(helpdesk): redesign ticket detail with communication as main content and metadata aside

Swap layout: communication feed becomes the primary main content area (full width),
ticket metadata moves to aside panel with 2 stacked KPI tiles (Status, Age) and
a Stripe-style key-value definition list (Description, Company link, Contact,
Category, Support, Debtor No.). Remove activity timeline entirely — communication
feed already includes activity fallback when SOAP is unavailable. Add skeleton
bubble loading for async communication. Simplify JS from 211 to 89 lines. Remove
unused ticketLogUrl data attribute and i18n keys.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

modules/helpdesk/pages/helpdesk/ticket($id).php

@@ -40,7 +40,6 @@ if ($ticket === null && !$connectionError) {
 
 $ticketCustomerNo = $fromCustomerNo;
 $ticketDescription = (string) ($ticket['Description'] ?? $ticketNo);
-$ticketLogUrl = lurl('helpdesk/ticket-log-data');
 $ticketCommunicationUrl = lurl('helpdesk/ticket-communication-data');
 
 Buffer::set('title', $ticketDescription . ' — ' . t('Helpdesk'));

modules/helpdesk/pages/helpdesk/ticket(default).phtml

@@ -7,7 +7,6 @@
  * @var bool $connectionError
  * @var string $ticketCustomerNo
  * @var string $ticketDescription
- * @var string $ticketLogUrl
  * @var string $ticketCommunicationUrl
  */
 
@@ -17,7 +16,6 @@ $ticket = is_array($ticket ?? null) ? $ticket : null;
 $connectionError = $connectionError ?? false;
 $ticketCustomerNo = $ticketCustomerNo ?? '';
 $ticketDescription = $ticketDescription ?? '';
-$ticketLogUrl = $ticketLogUrl ?? '';
 $ticketCommunicationUrl = $ticketCommunicationUrl ?? '';
 
 $backUrl = $ticketCustomerNo !== '' ? lurl('helpdesk/debitor/' . rawurlencode($ticketCustomerNo)) : lurl('helpdesk');
@@ -25,7 +23,6 @@ $backUrl = $ticketCustomerNo !== '' ? lurl('helpdesk/debitor/' . rawurlencode($t
 ?>
 <div class="app-details-container"
      data-ticket-no="<?php e($ticketNo); ?>"
-     data-ticket-log-url="<?php e($ticketLogUrl); ?>"
      data-ticket-communication-url="<?php e($ticketCommunicationUrl); ?>"
 >
   <section>
@@ -58,122 +55,117 @@ $backUrl = $ticketCustomerNo !== '' ? lurl('helpdesk/debitor/' . rawurlencode($t
         <?php e(t('Could not connect to Business Central.')); ?>
       </div>
     <?php elseif ($ticket !== null): ?>
-      <?php
-      $createdRaw = (string) ($ticket['Created_On'] ?? '');
-      $createdFormatted = $createdRaw !== '' && $createdRaw !== '0001-01-01T00:00:00Z'
-          ? (new DateTimeImmutable($createdRaw))->format('d.m.Y H:i')
-          : '—';
-      $lastActivityRaw = (string) ($ticket['Last_Activity_Date'] ?? '');
-      $lastActivityFormatted = $lastActivityRaw !== '' && $lastActivityRaw !== '0001-01-01T00:00:00Z'
-          ? (new DateTimeImmutable($lastActivityRaw))->format('d.m.Y H:i')
-          : '—';
-      $ticketState = (string) ($ticket['Ticket_State'] ?? '');
-      $stateVariant = match ($ticketState) {
-          'Offen', 'Open' => 'primary',
-          'In Bearbeitung', 'In Progress' => 'warning',
-          'Erledigt', 'Resolved', 'Closed', 'Geschlossen' => 'success',
-          default => 'neutral',
-      };
-      ?>
-
-      <div class="grid grid-2">
-        <div class="app-stats-table">
-          <div class="app-stats-table-header"><?php e(t('Ticket details')); ?></div>
-          <table>
-            <tbody>
-              <tr>
-                <td><strong><?php e(t('Ticket No.')); ?></strong></td>
-                <td><?php e((string) ($ticket['No'] ?? '')); ?></td>
-              </tr>
-              <tr>
-                <td><strong><?php e(t('Description')); ?></strong></td>
-                <td><?php e((string) ($ticket['Description'] ?? '')); ?></td>
-              </tr>
-              <tr>
-                <td><strong><?php e(t('Status')); ?></strong></td>
-                <td><span class="badge" data-variant="<?php e($stateVariant); ?>"><?php e($ticketState); ?></span></td>
-              </tr>
-              <tr>
-                <td><strong><?php e(t('Category')); ?></strong></td>
-                <td><?php e((string) ($ticket['Category_1_Description'] ?? '')); ?></td>
-              </tr>
-              <tr>
-                <td><strong><?php e(t('Support')); ?></strong></td>
-                <td><?php e((string) ($ticket['Support_User_Name'] ?? '')); ?></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="app-stats-table">
-          <div class="app-stats-table-header"><?php e(t('Contact & dates')); ?></div>
-          <table>
-            <tbody>
-              <tr>
-                <td><strong><?php e(t('Company')); ?></strong></td>
-                <td><?php e((string) ($ticket['Company_Contact_Name'] ?? '')); ?></td>
-              </tr>
-              <tr>
-                <td><strong><?php e(t('Contact')); ?></strong></td>
-                <td><?php e((string) ($ticket['Current_Contact_Name'] ?? '')); ?></td>
-              </tr>
-              <tr>
-                <td><strong><?php e(t('Created')); ?></strong></td>
-                <td><?php e($createdFormatted); ?></td>
-              </tr>
-              <tr>
-                <td><strong><?php e(t('Last activity')); ?></strong></td>
-                <td><?php e($lastActivityFormatted); ?></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <!-- Activity timeline + communication feed — loaded async -->
-      <div class="grid grid-2">
-        <div class="app-stats-table">
-          <div class="app-stats-table-header"><?php e(t('Activity timeline')); ?></div>
-          <div id="ticket-timeline">
-            <div id="timeline-loading" aria-busy="true"><?php e(t('Loading...')); ?></div>
+      <!-- Communication feed — main content, loaded async -->
+      <div class="helpdesk-ticket-detail-content">
+        <section>
+          <h3 class="helpdesk-support-section-title"><?php e(t('Ticket communication')); ?></h3>
+          <div id="ticket-communication-loading">
+            <?php for ($i = 0; $i < 6; $i++): ?>
+              <div class="helpdesk-skeleton helpdesk-skeleton-aside-bubble <?php e($i % 2 === 1 ? 'helpdesk-skeleton-aside-bubble-alt' : ($i % 3 === 0 ? 'helpdesk-skeleton-aside-bubble-short' : '')); ?>"></div>
+            <?php endfor; ?>
           </div>
-        </div>
-        <div class="app-stats-table">
-          <div class="app-stats-table-header"><?php e(t('Communication history')); ?></div>
-          <div id="ticket-communication">
-            <div id="ticket-communication-loading" aria-busy="true"><?php e(t('Loading...')); ?></div>
+          <div id="ticket-communication-content" hidden>
+            <div id="ticket-communication-feed"></div>
           </div>
-        </div>
+        </section>
       </div>
     <?php endif; ?>
   </section>
+
+  <?php if (!$connectionError && $ticket !== null): ?>
+    <?php
+    $createdRaw = (string) ($ticket['Created_On'] ?? '');
+    $createdFormatted = $createdRaw !== '' && $createdRaw !== '0001-01-01T00:00:00Z'
+        ? (new DateTimeImmutable($createdRaw))->format('d.m.Y H:i')
+        : '—';
+    $lastActivityRaw = (string) ($ticket['Last_Activity_Date'] ?? '');
+    $lastActivityFormatted = $lastActivityRaw !== '' && $lastActivityRaw !== '0001-01-01T00:00:00Z'
+        ? (new DateTimeImmutable($lastActivityRaw))->format('d.m.Y H:i')
+        : '—';
+    $ticketState = (string) ($ticket['Ticket_State'] ?? '');
+
+    // Compute ticket age
+    $ageLabel = '—';
+    if ($createdRaw !== '' && $createdRaw !== '0001-01-01T00:00:00Z') {
+        $createdDt = new DateTimeImmutable($createdRaw);
+        $diff = $createdDt->diff(new DateTimeImmutable('now'));
+        if ($diff->days >= 1) {
+            $ageLabel = $diff->days . ' ' . ($diff->days === 1 ? t('day') : t('days'));
+        } else {
+            $hours = $diff->h + ($diff->days * 24);
+            $ageLabel = max(1, $hours) . ' ' . t('hours');
+        }
+    }
+    ?>
+    <aside id="app-details-aside-section">
+      <div class="app-details-aside-section helpdesk-ticket-aside">
+        <!-- KPI tiles: Status + Age — stacked vertically -->
+        <h3 class="helpdesk-support-section-title"><?php e(t('Ticket details')); ?></h3>
+        <div class="helpdesk-support-metrics helpdesk-support-metrics-aside">
+          <article class="helpdesk-support-metric">
+            <p class="helpdesk-support-metric-label"><?php e(t('Status')); ?></p>
+            <p class="helpdesk-support-metric-value"><?php e($ticketState); ?></p>
+            <p class="helpdesk-support-metric-trend"><?php e(t('Last activity')); ?>: <?php e($lastActivityFormatted); ?></p>
+          </article>
+          <article class="helpdesk-support-metric">
+            <p class="helpdesk-support-metric-label"><?php e(t('Age')); ?></p>
+            <p class="helpdesk-support-metric-value"><?php e($ageLabel); ?></p>
+            <p class="helpdesk-support-metric-trend"><?php e(t('Created')); ?>: <?php e($createdFormatted); ?></p>
+          </article>
+        </div>
+
+        <!-- Compact key-value details -->
+        <h3 class="helpdesk-support-section-title"><?php e(t('Details')); ?></h3>
+        <dl class="helpdesk-ticket-meta">
+          <div class="helpdesk-ticket-meta-item">
+            <dt><?php e(t('Description')); ?></dt>
+            <dd><?php e((string) ($ticket['Description'] ?? '—')); ?></dd>
+          </div>
+          <div class="helpdesk-ticket-meta-item">
+            <dt><?php e(t('Company')); ?></dt>
+            <dd>
+              <?php if ($ticketCustomerNo !== ''): ?>
+                <a href="<?php e(lurl('helpdesk/debitor/' . rawurlencode($ticketCustomerNo))); ?>"><?php e((string) ($ticket['Company_Contact_Name'] ?? $ticketCustomerNo)); ?></a>
+              <?php else: ?>
+                <?php e((string) ($ticket['Company_Contact_Name'] ?? '—')); ?>
+              <?php endif; ?>
+            </dd>
+          </div>
+          <div class="helpdesk-ticket-meta-item">
+            <dt><?php e(t('Contact')); ?></dt>
+            <dd><?php e((string) ($ticket['Current_Contact_Name'] ?? '—')); ?></dd>
+          </div>
+          <div class="helpdesk-ticket-meta-item">
+            <dt><?php e(t('Category')); ?></dt>
+            <dd><?php e((string) ($ticket['Category_1_Description'] ?? '—')); ?></dd>
+          </div>
+          <div class="helpdesk-ticket-meta-item">
+            <dt><?php e(t('Support')); ?></dt>
+            <dd><?php e((string) ($ticket['Support_User_Name'] ?? '—')); ?></dd>
+          </div>
+          <div class="helpdesk-ticket-meta-item">
+            <dt><?php e(t('Debtor No.')); ?></dt>
+            <dd><?php e($ticketCustomerNo !== '' ? $ticketCustomerNo : '—'); ?></dd>
+          </div>
+        </dl>
+      </div>
+    </aside>
+  <?php endif; ?>
 </div>
 
 <!-- i18n strings for JS rendering -->
 <script type="application/json" id="helpdesk-ticket-i18n"><?php gridJsonForJs([
-    'Message' => t('Message'),
-    'Status change' => t('Status change'),
-    'Activity' => t('Activity'),
-    'No activity found.' => t('No activity found.'),
-    'Could not load activity log.' => t('Could not load activity log.'),
-    'Communication history' => t('Communication history'),
     'No communication found.' => t('No communication found.'),
     'Could not load communication history.' => t('Could not load communication history.'),
     'Live communication unavailable, showing activity fallback.' => t('Live communication unavailable, showing activity fallback.'),
     'Ticket' => t('Ticket'),
     'Unknown user' => t('Unknown user'),
     'Unknown time' => t('Unknown time'),
-    'Source' => t('Source'),
-    'SOAP' => t('SOAP'),
-    'Activity fallback' => t('Activity fallback'),
-    'sent a message' => t('sent a message'),
     'changed status' => t('changed status'),
     'Forwarded' => t('Forwarded'),
     'attached a file' => t('attached a file'),
     'logged an activity' => t('logged an activity'),
     'on' => t('on'),
-    'Process' => t('Process'),
-    'Loading...' => t('Loading...'),
 ]); ?></script>
 
 <script type="module" src="<?php e(assetVersion('modules/helpdesk/js/helpdesk-ticket.js')); ?>"></script>