From ab75c61ec70c3d78a7abc290fdebbe190f4225e0 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Wed, 24 Dec 2025 09:58:33 +1100
Subject: [PATCH] Add apps tile so you dont need to scroll to particular app in
 admin section

---
 templates/admin.html | 125 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 120 insertions(+), 5 deletions(-)

diff --git a/templates/admin.html b/templates/admin.html
index c5e4e64..2c27989 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -14,6 +14,7 @@
     <style>
         * {
             box-sizing: border-box;
+            scroll-behavior: smooth;
         }
 
         @keyframes scanline {
@@ -172,12 +173,89 @@
             box-shadow: 0 0 10px rgba(255, 85, 85, 0.4) !important;
         }
 
+        /* Navigation Grid */
+        .nav-grid-container {
+            background: #161b22;
+            border: 2px solid #30363d;
+            padding: 20px;
+            margin-bottom: 40px;
+            position: relative;
+        }
+
+        .nav-grid-container::before {
+            content: '[ NAVIGATION_CONTROL_CENTER ]';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: #161b22;
+            padding: 0 10px;
+            color: #00d9ff;
+            font-size: 11px;
+            font-weight: 700;
+            letter-spacing: 2px;
+        }
+
+        .nav-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 10px;
+        }
+
+        .nav-tile {
+            background: #0d1117;
+            border: 1px solid #30363d;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            text-decoration: none;
+            color: inherit;
+            transition: all 0.2s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .nav-tile:hover {
+            border-color: #00d9ff;
+            background: rgba(0, 217, 255, 0.05);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        .led {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .led-on {
+            background: #00ff88;
+            box-shadow: 0 0 8px #00ff88;
+        }
+
+        .led-off {
+            background: #ff5555;
+            box-shadow: 0 0 8px #ff5555;
+        }
+
+        .nav-tile-name {
+            font-size: 11px;
+            font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+        }
+
+        /* App Stations */
         .station {
             background: #161b22;
             border: 2px solid #30363d;
-            margin-bottom: 40px;
+            margin-bottom: 60px;
             position: relative;
             padding: 24px;
+            scroll-margin-top: 40px;
         }
 
         .station::before {
@@ -193,14 +271,35 @@
             letter-spacing: 2px;
         }
 
+        .station-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 20px;
+        }
+
         h2 {
             font-size: 18px;
             color: #00ff88;
-            margin: 0 0 20px 0;
+            margin: 0;
             text-transform: uppercase;
             letter-spacing: 1px;
         }
 
+        .back-to-top {
+            font-size: 10px;
+            color: #8b949e;
+            text-decoration: none;
+            border: 1px solid #30363d;
+            padding: 4px 8px;
+            text-transform: uppercase;
+        }
+
+        .back-to-top:hover {
+            color: #00d9ff;
+            border-color: #00d9ff;
+        }
+
         .grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -341,7 +440,7 @@
     </style>
 </head>
 
-<body>
+<body id="top">
     <div class="container">
         <div class="header-terminal">
             <div class="terminal-title">
@@ -355,9 +454,25 @@
             </div>
         </div>
 
+        <!-- Navigation Grid -->
+        <div class="nav-grid-container">
+            <div class="nav-grid">
+                {% for r in data.apps %}
+                <a href="#station-{{ loop.index }}" class="nav-tile">
+                    <div class="led {% if r.detail.state.running %}led-on{% else %}led-off{% endif %}"></div>
+                    <span class="nav-tile-name">{{ r.app }}</span>
+                </a>
+                {% endfor %}
+            </div>
+        </div>
+
         {% for r in data.apps %}
-        <section class="station" data-label="[ STATION: {{ " %02d"|format(loop.index) }} ]">
-            <h2>{{ r.app }}</h2>
+        <section id="station-{{ loop.index }}" class="station" data-label="[ STATION: {{ " %02d"|format(loop.index) }}
+            ]">
+            <div class="station-header">
+                <h2>{{ r.app }}</h2>
+                <a href="#top" class="back-to-top">[^ BACK_TO_TOP]</a>
+            </div>
 
             <div class="grid">
                 <!-- Metadata Panel -->