From e721b33911d17c122ffedd9907449f0bbfc22331 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 28 Mar 2026 13:06:40 -0400
Subject: [PATCH] Align UI with web_template TDS v1.2 standards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace lt-chip priority badges with lt-badge lt-badge-p[1-4] across
  DashboardView, TemplatesView (matches web_template sticky table pattern)
- Add lt-theme-btn theme toggle to header-right; wire lt.theme.toggle()
- Replace ASCII art empty state with lt-empty-state component in dashboard
- Standardize tab wrapper lt-tabs → lt-tab-bar in Dashboard and TicketView
- Add missing lt-keys-help modal to layout_footer (fixes ? key doing nothing)
- Add lt-cmd-overlay command palette container + lt.cmdPalette.init() nav
- Add .lt-timeline-action CSS rule (used in TicketView, was undefined)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/base.css           |  7 ++--
 views/DashboardView.php       | 25 +++++------
 views/TicketView.php          |  2 +-
 views/admin/TemplatesView.php |  4 +-
 views/layout_footer.php       | 78 +++++++++++++++++++++++++++++++++++
 views/layout_header.php       |  2 +
 6 files changed, 100 insertions(+), 18 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index 8fc27bc..b2184c4 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -4465,9 +4465,10 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
   margin-bottom: 0.2rem;
   flex-wrap: wrap;
 }
-.lt-timeline-actor { color: var(--accent-cyan); }
-.lt-timeline-time  { margin-left: auto; white-space: nowrap; }
-.lt-timeline-body  { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
+.lt-timeline-actor  { color: var(--accent-cyan); }
+.lt-timeline-action { color: var(--text-secondary); font-style: italic; }
+.lt-timeline-time   { margin-left: auto; white-space: nowrap; }
+.lt-timeline-body   { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
 .lt-timeline-body code { font-size: 0.72rem; color: var(--accent-green); }
 
 
diff --git a/views/DashboardView.php b/views/DashboardView.php
index 98ca8fe..a4e423d 100644
--- a/views/DashboardView.php
+++ b/views/DashboardView.php
@@ -143,7 +143,7 @@ include __DIR__ . '/layout_header.php';
 <!-- ═══════════════════════════════════════════════════════════
      VIEW TABS (Table / Kanban) — dual-purpose: lt.tabs + dashboard.js set-view-mode
      ═══════════════════════════════════════════════════════════ -->
-<div class="lt-tabs" role="tablist" aria-label="Ticket view mode">
+<div class="lt-tab-bar" role="tablist" aria-label="Ticket view mode">
   <button type="button" id="tableViewBtn"
           class="lt-tab active"
           role="tab" aria-selected="true" aria-controls="tab-table"
@@ -158,7 +158,7 @@ include __DIR__ . '/layout_header.php';
           data-action="set-view-mode" data-mode="card">
     &#x2295; Kanban
   </button>
-</div>
+</div><!-- /.lt-tab-bar -->
 
 <!-- ═══════════════════════════════════════════════════════════
      LAYOUT WRAPPER: sidebar + main content
@@ -387,14 +387,15 @@ include __DIR__ . '/layout_header.php';
             <tbody>
               <?php if (empty($tickets)): ?>
                 <tr>
-                  <td colspan="<?= $colCount ?>" class="lt-empty" style="text-align:center;padding:2rem">
-                    <pre class="lt-text-muted lt-text-xs" style="display:inline-block;text-align:left">
-╔══════════════════════════════════╗
-║                                  ║
-║     NO TICKETS FOUND             ║
-║     [ ] Empty queue — all clear  ║
-║                                  ║
-╚══════════════════════════════════╝</pre>
+                  <td colspan="<?= $colCount ?>" class="lt-empty">
+                    <div class="lt-empty-state">
+                      <div class="lt-empty-state-icon">&#x1F4ED;</div>
+                      <div class="lt-empty-state-title">No Tickets Found</div>
+                      <div class="lt-empty-state-body">No tickets match your current filters.</div>
+                      <?php if (!empty($activeFilters) || !empty($_GET['search'])): ?>
+                        <a href="?" class="lt-btn lt-btn-sm lt-btn-ghost">Clear Filters</a>
+                      <?php endif ?>
+                    </div>
                   </td>
                 </tr>
               <?php else: ?>
@@ -422,8 +423,8 @@ include __DIR__ . '/layout_header.php';
                        class="ticket-link"><?= htmlspecialchars($row['ticket_id']) ?></a>
                   </td>
                   <td data-label="Priority">
-                    <?php $chipClass = match($pNum) { 1 => 'lt-chip-critical', 2 => 'lt-chip-warn', 3 => 'lt-chip-info', default => 'lt-chip-ok' }; ?>
-                    <span class="lt-chip <?= $chipClass ?>">P<?= $pNum ?></span>
+                    <?php $badgeClass = match($pNum) { 1 => 'lt-badge-p1', 2 => 'lt-badge-p2', 3 => 'lt-badge-p3', default => 'lt-badge-p4' }; ?>
+                    <span class="lt-badge <?= $badgeClass ?>">P<?= $pNum ?></span>
                   </td>
                   <td data-label="Title"><?= htmlspecialchars($row['title']) ?></td>
                   <td data-label="Category" class="lt-text-muted lt-text-xs"><?= htmlspecialchars($row['category']) ?></td>
diff --git a/views/TicketView.php b/views/TicketView.php
index 9dab107..c8e1b40 100644
--- a/views/TicketView.php
+++ b/views/TicketView.php
@@ -266,7 +266,7 @@ include __DIR__ . '/layout_header.php';
 <!-- ═══════════════════════════════════════════════════════════
      TAB NAVIGATION
      ═══════════════════════════════════════════════════════════ -->
-<div class="lt-tabs" role="tablist" aria-label="Ticket content sections">
+<div class="lt-tab-bar" role="tablist" aria-label="Ticket content sections">
   <button type="button" class="lt-tab active" id="description-tab-btn"
           role="tab" data-tab="description-panel" aria-selected="true" aria-controls="description-panel">
     Description
diff --git a/views/admin/TemplatesView.php b/views/admin/TemplatesView.php
index 22101ce..a249381 100644
--- a/views/admin/TemplatesView.php
+++ b/views/admin/TemplatesView.php
@@ -45,8 +45,8 @@ include __DIR__ . '/../../views/layout_header.php';
               <td data-label="Name"><strong><?= htmlspecialchars($tpl['template_name']) ?></strong></td>
               <td data-label="Category" class="lt-text-xs"><?= htmlspecialchars($tpl['category'] ?? 'Any') ?></td>
               <td data-label="Type" class="lt-text-xs"><?= htmlspecialchars($tpl['type'] ?? 'Any') ?></td>
-              <?php $tp = (int)($tpl['default_priority'] ?? 4); $tChip = match($tp) { 1 => 'lt-chip-critical', 2 => 'lt-chip-warn', 3 => 'lt-chip-info', default => 'lt-chip-ok' }; ?>
-              <td data-label="Priority"><span class="lt-chip <?= $tChip ?>">P<?= $tp ?></span></td>
+              <?php $tp = (int)($tpl['default_priority'] ?? 4); $tBadge = match($tp) { 1 => 'lt-badge-p1', 2 => 'lt-badge-p2', 3 => 'lt-badge-p3', default => 'lt-badge-p4' }; ?>
+              <td data-label="Priority"><span class="lt-badge <?= $tBadge ?>">P<?= $tp ?></span></td>
               <td data-label="Status">
                 <span class="lt-status <?= ($tpl['is_active'] ?? 1) ? 'lt-status-open' : 'lt-status-closed' ?>">
                   <?= ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive' ?>
diff --git a/views/layout_footer.php b/views/layout_footer.php
index 790b191..3961094 100644
--- a/views/layout_footer.php
+++ b/views/layout_footer.php
@@ -55,6 +55,63 @@
     <span aria-label="Application version">TINKER TICKETS &mdash; TDS v1.2</span>
   </footer>
 
+  <!-- ================================================================
+       KEYBOARD SHORTCUTS HELP MODAL — opened by ? key or footer [?] hint
+       ================================================================ -->
+  <div id="lt-keys-help" class="lt-modal-overlay" aria-hidden="true">
+    <div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="keys-help-title">
+      <div class="lt-modal-header">
+        <span class="lt-modal-title" id="keys-help-title">Keyboard Shortcuts</span>
+        <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+      </div>
+      <div class="lt-modal-body">
+        <table class="lt-data-table" style="width:100%">
+          <thead>
+            <tr><th scope="col">Shortcut</th><th scope="col">Action</th></tr>
+          </thead>
+          <tbody>
+            <tr><td>Ctrl / &#x2318; + K</td><td>Focus search box</td></tr>
+            <tr><td>Ctrl / &#x2318; + E</td><td>Toggle edit mode (ticket page)</td></tr>
+            <tr><td>Ctrl / &#x2318; + S</td><td>Save changes (ticket page)</td></tr>
+            <tr><td>j / &#x2193;</td><td>Select next row</td></tr>
+            <tr><td>k / &#x2191;</td><td>Select previous row</td></tr>
+            <tr><td>Enter</td><td>Open selected ticket</td></tr>
+            <tr><td>n</td><td>New ticket</td></tr>
+            <tr><td>1&ndash;4</td><td>Change ticket status (ticket page)</td></tr>
+            <tr><td>c</td><td>Jump to comment box (ticket page)</td></tr>
+            <tr><td>?</td><td>Show this help</td></tr>
+            <tr><td>ESC</td><td>Close modal / cancel</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="button" class="lt-btn" data-modal-close>Close</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================
+       COMMAND PALETTE — Ctrl+K opens when no search input focused
+       ================================================================ -->
+  <div id="lt-cmd-overlay" class="lt-cmd-overlay" role="dialog" aria-modal="true" aria-label="Command palette" aria-hidden="true">
+    <div class="lt-cmd-palette" id="lt-cmd-palette">
+      <div class="lt-cmd-input-wrap">
+        <span class="lt-cmd-prompt">&gt;</span>
+        <input id="lt-cmd-input" class="lt-cmd-input" type="text"
+               placeholder="Search commands&hellip;" autocomplete="off"
+               spellcheck="false" aria-label="Search commands">
+      </div>
+      <div class="lt-cmd-results" id="lt-cmd-results">
+        <div class="lt-cmd-empty">Start typing to search&hellip;</div>
+      </div>
+      <div class="lt-cmd-footer">
+        <span><kbd>&#x2191;</kbd><kbd>&#x2193;</kbd> Navigate</span>
+        <span><kbd>Enter</kbd> Select</span>
+        <span><kbd>Esc</kbd> Close</span>
+      </div>
+    </div>
+  </div>
+
   <!-- base.js + utils.js + globals already loaded in <head> via layout_header.php -->
 
 <?php if (!empty($pageScripts)): ?>
@@ -75,6 +132,27 @@
   <script nonce="<?= htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8') ?>">
     if (window.lt) {
       lt.init({ bootName: 'TINKER TICKETS' });
+
+      // Theme toggle button
+      var themeBtn = document.getElementById('lt-theme-btn');
+      if (themeBtn) themeBtn.addEventListener('click', function() { lt.theme.toggle(); });
+
+      // Command palette — global navigation commands available on all pages
+      lt.cmdPalette.init([
+        {
+          group: 'Navigation',
+          items: [
+            { icon: '~', label: 'Dashboard',       kbd: 'G D', action: function() { window.location.href = '/'; } },
+            { icon: '+', label: 'New Ticket',       kbd: 'N',   action: function() { window.location.href = '/ticket/create'; } },
+          ]
+        },
+        {
+          group: 'Help',
+          items: [
+            { icon: '?', label: 'Keyboard Shortcuts', kbd: '?', action: function() { lt.modal.open('lt-keys-help'); } },
+          ]
+        },
+      ]);
     }
 
     // Footer hint bar actions (keyboard help + settings — work on all pages)
diff --git a/views/layout_header.php b/views/layout_header.php
index 122cb17..2d09b11 100644
--- a/views/layout_header.php
+++ b/views/layout_header.php
@@ -156,6 +156,8 @@ $_lt_navActive = $activeNav ?? 'dashboard';
       <span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
 <?php   endif; ?>
 <?php endif; ?>
+      <button type="button" class="lt-theme-btn" id="lt-theme-btn"
+              aria-label="Switch to light mode" title="Switch to light mode">&#x2600;</button>
     </div><!-- /.lt-header-right -->
 
   </header><!-- /.lt-header -->