From eb3c69df39d40f5576329830445a72341ef2dc05 Mon Sep 17 00:00:00 2001
From: Stanislaw Grams <stanislawgrams@gmail.com>
Date: Thu, 12 Feb 2026 23:22:37 +0100
Subject: [PATCH] [feat](trx-frontend-http): reorder plugin tabs and add FT8
 slot timer

Reorder Plugins subtabs to align with the Overview plugin listing
(APRS, CW, FT8, WSPR), with Map moved to the end.

Also add a live FT8 period countdown indicator in the FT8 panel.

Co-authored-by: Codex <codex@openai.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
---
 .../trx-frontend-http/assets/web/index.html          |  6 ++++--
 .../trx-frontend-http/assets/web/plugins/ft8.js      | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index d61fa4c..9223f62 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -122,11 +122,11 @@
     <div id="tab-plugins" class="tab-panel" style="display:none;">
       <div class="sub-tab-bar">
         <button class="sub-tab active" data-subtab="overview">Overview</button>
-        <button class="sub-tab" data-subtab="map">Map</button>
         <button class="sub-tab" data-subtab="aprs">APRS</button>
+        <button class="sub-tab" data-subtab="cw">CW</button>
         <button class="sub-tab" data-subtab="ft8">FT8</button>
         <button class="sub-tab" data-subtab="wspr">WSPR</button>
-        <button class="sub-tab" data-subtab="cw">CW</button>
+        <button class="sub-tab" data-subtab="map">Map</button>
       </div>
       <div id="subtab-overview" class="sub-tab-panel">
         <div class="plugin-item">
@@ -174,6 +174,7 @@
           <button id="ft8-clear-btn" type="button">Clear</button>
           <input id="ft8-filter" class="ft8-filter" type="text" placeholder="Filter (e.g. CQ, DL4)" />
           <small id="ft8-status" style="color:var(--text-muted);">Waiting for server decode</small>
+          <small id="ft8-period" style="color:var(--text-muted);">Next slot --s</small>
         </div>
         <div class="ft8-header">
           <span class="ft8-time">Time</span>
@@ -189,6 +190,7 @@
           <button id="wspr-decode-toggle-btn" type="button">Enable WSPR</button>
           <button id="wspr-clear-btn" type="button">Clear</button>
           <small id="wspr-status" style="color:var(--text-muted);">Waiting for server decode</small>
+          <small id="wspr-period" style="color:var(--text-muted);">Next slot --:--</small>
         </div>
         <div class="ft8-header">
           <span class="ft8-time">Time</span>
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft8.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft8.js
index 962edb8..6a56fbd 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft8.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft8.js
@@ -1,8 +1,10 @@
 // --- FT8 Decoder Plugin (server-side decode) ---
 const ft8Status = document.getElementById("ft8-status");
+const ft8PeriodEl = document.getElementById("ft8-period");
 const ft8MessagesEl = document.getElementById("ft8-messages");
 const ft8FilterInput = document.getElementById("ft8-filter");
 const FT8_MAX_MESSAGES = 200;
+const FT8_PERIOD_SECONDS = 15;
 let ft8FilterText = "";
 
 function fmtTime(tsMs) {
@@ -10,6 +12,16 @@ function fmtTime(tsMs) {
   return new Date(tsMs).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
 
+function updateFt8PeriodTimer() {
+  if (!ft8PeriodEl) return;
+  const nowSec = Math.floor(Date.now() / 1000);
+  const remaining = FT8_PERIOD_SECONDS - (nowSec % FT8_PERIOD_SECONDS);
+  ft8PeriodEl.textContent = `Next slot ${String(remaining).padStart(2, "0")}s`;
+}
+
+updateFt8PeriodTimer();
+setInterval(updateFt8PeriodTimer, 500);
+
 function renderFt8Row(msg) {
   const row = document.createElement("div");
   row.className = "ft8-row";