Align UI with web_template TDS v1.2 standards

- 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>
This commit is contained in:
2026-03-28 13:06:40 -04:00
parent d7775e62ec
commit e721b33911
6 changed files with 100 additions and 18 deletions
+4 -3
View File
@@ -4465,9 +4465,10 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.lt-timeline-actor { color: var(--accent-cyan); } .lt-timeline-actor { color: var(--accent-cyan); }
.lt-timeline-time { margin-left: auto; white-space: nowrap; } .lt-timeline-action { color: var(--text-secondary); font-style: italic; }
.lt-timeline-body { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; } .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); } .lt-timeline-body code { font-size: 0.72rem; color: var(--accent-green); }
+13 -12
View File
@@ -143,7 +143,7 @@ include __DIR__ . '/layout_header.php';
<!-- ═══════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════
VIEW TABS (Table / Kanban) dual-purpose: lt.tabs + dashboard.js set-view-mode 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" <button type="button" id="tableViewBtn"
class="lt-tab active" class="lt-tab active"
role="tab" aria-selected="true" aria-controls="tab-table" 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"> data-action="set-view-mode" data-mode="card">
&#x2295; Kanban &#x2295; Kanban
</button> </button>
</div> </div><!-- /.lt-tab-bar -->
<!-- ═══════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════
LAYOUT WRAPPER: sidebar + main content LAYOUT WRAPPER: sidebar + main content
@@ -387,14 +387,15 @@ include __DIR__ . '/layout_header.php';
<tbody> <tbody>
<?php if (empty($tickets)): ?> <?php if (empty($tickets)): ?>
<tr> <tr>
<td colspan="<?= $colCount ?>" class="lt-empty" style="text-align:center;padding:2rem"> <td colspan="<?= $colCount ?>" class="lt-empty">
<pre class="lt-text-muted lt-text-xs" style="display:inline-block;text-align:left"> <div class="lt-empty-state">
╔══════════════════════════════════╗ <div class="lt-empty-state-icon">&#x1F4ED;</div>
<div class="lt-empty-state-title">No Tickets Found</div>
NO TICKETS FOUND <div class="lt-empty-state-body">No tickets match your current filters.</div>
[ ] Empty queue all clear <?php if (!empty($activeFilters) || !empty($_GET['search'])): ?>
<a href="?" class="lt-btn lt-btn-sm lt-btn-ghost">Clear Filters</a>
╚══════════════════════════════════╝</pre> <?php endif ?>
</div>
</td> </td>
</tr> </tr>
<?php else: ?> <?php else: ?>
@@ -422,8 +423,8 @@ include __DIR__ . '/layout_header.php';
class="ticket-link"><?= htmlspecialchars($row['ticket_id']) ?></a> class="ticket-link"><?= htmlspecialchars($row['ticket_id']) ?></a>
</td> </td>
<td data-label="Priority"> <td data-label="Priority">
<?php $chipClass = match($pNum) { 1 => 'lt-chip-critical', 2 => 'lt-chip-warn', 3 => 'lt-chip-info', default => 'lt-chip-ok' }; ?> <?php $badgeClass = match($pNum) { 1 => 'lt-badge-p1', 2 => 'lt-badge-p2', 3 => 'lt-badge-p3', default => 'lt-badge-p4' }; ?>
<span class="lt-chip <?= $chipClass ?>">P<?= $pNum ?></span> <span class="lt-badge <?= $badgeClass ?>">P<?= $pNum ?></span>
</td> </td>
<td data-label="Title"><?= htmlspecialchars($row['title']) ?></td> <td data-label="Title"><?= htmlspecialchars($row['title']) ?></td>
<td data-label="Category" class="lt-text-muted lt-text-xs"><?= htmlspecialchars($row['category']) ?></td> <td data-label="Category" class="lt-text-muted lt-text-xs"><?= htmlspecialchars($row['category']) ?></td>
+1 -1
View File
@@ -266,7 +266,7 @@ include __DIR__ . '/layout_header.php';
<!-- ═══════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════
TAB NAVIGATION 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" <button type="button" class="lt-tab active" id="description-tab-btn"
role="tab" data-tab="description-panel" aria-selected="true" aria-controls="description-panel"> role="tab" data-tab="description-panel" aria-selected="true" aria-controls="description-panel">
Description Description
+2 -2
View File
@@ -45,8 +45,8 @@ include __DIR__ . '/../../views/layout_header.php';
<td data-label="Name"><strong><?= htmlspecialchars($tpl['template_name']) ?></strong></td> <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="Category" class="lt-text-xs"><?= htmlspecialchars($tpl['category'] ?? 'Any') ?></td>
<td data-label="Type" class="lt-text-xs"><?= htmlspecialchars($tpl['type'] ?? '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' }; ?> <?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-chip <?= $tChip ?>">P<?= $tp ?></span></td> <td data-label="Priority"><span class="lt-badge <?= $tBadge ?>">P<?= $tp ?></span></td>
<td data-label="Status"> <td data-label="Status">
<span class="lt-status <?= ($tpl['is_active'] ?? 1) ? 'lt-status-open' : 'lt-status-closed' ?>"> <span class="lt-status <?= ($tpl['is_active'] ?? 1) ? 'lt-status-open' : 'lt-status-closed' ?>">
<?= ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive' ?> <?= ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive' ?>
+78
View File
@@ -55,6 +55,63 @@
<span aria-label="Application version">TINKER TICKETS &mdash; TDS v1.2</span> <span aria-label="Application version">TINKER TICKETS &mdash; TDS v1.2</span>
</footer> </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 --> <!-- base.js + utils.js + globals already loaded in <head> via layout_header.php -->
<?php if (!empty($pageScripts)): ?> <?php if (!empty($pageScripts)): ?>
@@ -75,6 +132,27 @@
<script nonce="<?= htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8') ?>"> <script nonce="<?= htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8') ?>">
if (window.lt) { if (window.lt) {
lt.init({ bootName: 'TINKER TICKETS' }); 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) // Footer hint bar actions (keyboard help + settings — work on all pages)
+2
View File
@@ -156,6 +156,8 @@ $_lt_navActive = $activeNav ?? 'dashboard';
<span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span> <span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
<?php endif; ?> <?php endif; ?>
<?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 --> </div><!-- /.lt-header-right -->
</header><!-- /.lt-header --> </header><!-- /.lt-header -->