From 1046537429dc3e75218770a86288ddcd94acd015 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 20 Mar 2026 10:41:57 -0400
Subject: [PATCH] Move ASCII banner into boot sequence, fix remaining UI issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove collapsible ASCII banner from dashboard (was cluttering the UI)
- Show ASCII banner in the boot overlay on first session visit, above
  the boot messages, with a 400ms pause before messages begin
- Add scroll fade indicator (green-tinted gradient edges) to .table-wrapper
  so users can see when the table is horizontally scrollable
- Fix null guards for tab switcher in ticket.js (tabEl, activeBtn)
- Fix Reset → RESET uppercase in AuditLogView and UserActivityView

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/dashboard.css         | 12 ++++++-
 assets/js/ticket.js              |  9 +++--
 views/DashboardView.php          | 62 +++++++++++---------------------
 views/admin/AuditLogView.php     |  2 +-
 views/admin/UserActivityView.php |  2 +-
 5 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
index c88dc08..70660d0 100644
--- a/assets/css/dashboard.css
+++ b/assets/css/dashboard.css
@@ -4650,8 +4650,18 @@ table td:nth-child(4) {
     overflow-y: visible;
     margin: 0;
     padding: 0;
-    /* Subtle scroll hint via gradient on right edge */
     -webkit-overflow-scrolling: touch;
+    /* Scroll fade indicator: fades out right edge when content overflows */
+    background-image:
+        linear-gradient(to right, var(--bg-primary), var(--bg-primary)),
+        linear-gradient(to right, var(--bg-primary), var(--bg-primary)),
+        linear-gradient(to right, rgba(0,255,65,0.12), transparent),
+        linear-gradient(to left,  rgba(0,255,65,0.12), transparent);
+    background-position: left center, right center, left center, right center;
+    background-repeat: no-repeat;
+    background-color: var(--bg-primary);
+    background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
+    background-attachment: local, local, scroll, scroll;
 }
 
 @media (max-width: 768px) {
diff --git a/assets/js/ticket.js b/assets/js/ticket.js
index cb7e0d6..d8a48b3 100644
--- a/assets/js/ticket.js
+++ b/assets/js/ticket.js
@@ -548,10 +548,13 @@ function showTab(tabName) {
     });
 
     // Show selected tab and activate its button
-    document.getElementById(`${tabName}-tab`).style.display = 'block';
+    const tabEl = document.getElementById(`${tabName}-tab`);
+    if (tabEl) tabEl.style.display = 'block';
     const activeBtn = document.querySelector(`.tab-btn[data-tab="${tabName}"]`);
-    activeBtn.classList.add('active');
-    activeBtn.setAttribute('aria-selected', 'true');
+    if (activeBtn) {
+        activeBtn.classList.add('active');
+        activeBtn.setAttribute('aria-selected', 'true');
+    }
 
     // Load attachments when tab is shown
     if (tabName === 'attachments') {
diff --git a/views/DashboardView.php b/views/DashboardView.php
index 663e009..18be29b 100644
--- a/views/DashboardView.php
+++ b/views/DashboardView.php
@@ -33,18 +33,18 @@ $nonce = SecurityHeadersMiddleware::getNonce();
 
     <!-- Terminal Boot Sequence -->
     <div id="boot-sequence" class="boot-overlay">
+        <div id="boot-banner" style="text-align:center; margin-bottom: 1rem;"></div>
         <pre id="boot-text"></pre>
     </div>
     <script nonce="<?php echo $nonce; ?>">
         function showBootSequence() {
             const bootText = document.getElementById('boot-text');
             const bootOverlay = document.getElementById('boot-sequence');
+
+            // Render ASCII banner first, then start boot messages
+            renderResponsiveBanner('#boot-banner', 0);
+
             const messages = [
-                '╔═══════════════════════════════════════╗',
-                '║   TINKER TICKETS TERMINAL v1.0       ║',
-                '║   BOOTING SYSTEM...                  ║',
-                '╚═══════════════════════════════════════╝',
-                '',
                 '[ OK ] Loading kernel modules...',
                 '[ OK ] Initializing ticket database...',
                 '[ OK ] Mounting user session...',
@@ -56,18 +56,21 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             ];
 
             let i = 0;
-            const interval = setInterval(() => {
-                if (i < messages.length) {
-                    bootText.textContent += messages[i] + '\n';
-                    i++;
-                } else {
-                    setTimeout(() => {
-                        bootOverlay.style.opacity = '0';
-                        setTimeout(() => bootOverlay.remove(), 500);
-                    }, 500);
-                    clearInterval(interval);
-                }
-            }, 80);
+            // Brief pause after banner renders before boot text begins
+            setTimeout(() => {
+                const interval = setInterval(() => {
+                    if (i < messages.length) {
+                        bootText.textContent += messages[i] + '\n';
+                        i++;
+                    } else {
+                        setTimeout(() => {
+                            bootOverlay.style.opacity = '0';
+                            setTimeout(() => bootOverlay.remove(), 500);
+                        }, 500);
+                        clearInterval(interval);
+                    }
+                }, 80);
+            }, 400);
         }
 
         // Run on first visit only (per session)
@@ -104,28 +107,6 @@ $nonce = SecurityHeadersMiddleware::getNonce();
         </div>
     </header>
 
-    <!-- Collapsible ASCII Banner -->
-    <div class="ascii-banner-wrapper collapsed">
-        <button class="banner-toggle" data-action="toggle-banner">
-            <span class="toggle-icon">▼</span> ASCII Banner
-        </button>
-        <div id="ascii-banner-container" class="banner-content"></div>
-    </div>
-    <script nonce="<?php echo $nonce; ?>">
-        function toggleBanner() {
-            const wrapper = document.querySelector('.ascii-banner-wrapper');
-            const icon = document.querySelector('.toggle-icon');
-            wrapper.classList.toggle('collapsed');
-            icon.textContent = wrapper.classList.contains('collapsed') ? '▼' : '▲';
-
-            // Render banner on first expand (no animation for instant display)
-            if (!wrapper.classList.contains('collapsed') && !wrapper.dataset.rendered) {
-                renderResponsiveBanner('#ascii-banner-container', 0); // Speed 0 = no animation
-                wrapper.dataset.rendered = 'true';
-            }
-        }
-    </script>
-
     <!-- Dashboard Layout with Sidebar -->
     <div class="dashboard-layout" id="dashboardLayout">
         <!-- Left Sidebar with Filters -->
@@ -888,9 +869,6 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     saveSettings();
                     break;
 
-                case 'toggle-banner':
-                    toggleBanner();
-                    break;
 
                 case 'toggle-sidebar':
                     toggleSidebar();
diff --git a/views/admin/AuditLogView.php b/views/admin/AuditLogView.php
index 094c253..01c0e82 100644
--- a/views/admin/AuditLogView.php
+++ b/views/admin/AuditLogView.php
@@ -78,7 +78,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     </div>
                     <div style="display: flex; align-items: flex-end;">
                         <button type="submit" class="btn">FILTER</button>
-                        <a href="?" class="btn btn-secondary" style="margin-left: 0.5rem;">Reset</a>
+                        <a href="?" class="btn btn-secondary" style="margin-left: 0.5rem;">RESET</a>
                     </div>
                 </form>
 
diff --git a/views/admin/UserActivityView.php b/views/admin/UserActivityView.php
index 42cff2a..65155d2 100644
--- a/views/admin/UserActivityView.php
+++ b/views/admin/UserActivityView.php
@@ -52,7 +52,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                         <input type="date" name="date_to" value="<?php echo htmlspecialchars($dateRange['to'] ?? ''); ?>" class="setting-select">
                     </div>
                     <button type="submit" class="btn">APPLY</button>
-                    <a href="?" class="btn btn-secondary">Reset</a>
+                    <a href="?" class="btn btn-secondary">RESET</a>
                 </form>
 
                 <!-- User Activity Table -->