From 3ab6a731c31bc3c7c5fe812c47b32e4b66d540c2 Mon Sep 17 00:00:00 2001
From: ChuckBuilds <charlesmynard@gmail.com>
Date: Thu, 16 Jul 2026 12:01:03 -0400
Subject: [PATCH] fix(web): add the missing nav tab for the Rotation &
 Durations page

The durations partial (/partials/durations) has existed as a route with no
nav tab and no content panel referencing it - an orphaned page. That made
the new rotation-order UI unreachable through the interface (caught by the
owner testing on the rig; my endpoint-level tests fetched the partial by
URL and never noticed the missing entry point).

- New "Rotation" tab (fa-rotate icon, verified present in the vendored
  FA 6.0.0 css) between Display and Backup & Restore, wired exactly like
  the other tabs (#durations-content + hx-get + loadtab; loadTabContent()
  is fully generic, so no JS changes needed).
- Page heading updated from "Display Durations" to "Rotation & Durations"
  to match its content since the rotation-order card landed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
---
 web_interface/templates/v3/base.html            | 17 +++++++++++++++++
 .../templates/v3/partials/durations.html        |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/web_interface/templates/v3/base.html b/web_interface/templates/v3/base.html
index 27c4577e..09000568 100644
--- a/web_interface/templates/v3/base.html
+++ b/web_interface/templates/v3/base.html
@@ -462,6 +462,11 @@
                             class="nav-tab">
                         <i class="fas fa-desktop"></i>Display
                     </button>
+                    <button @click="activeTab = 'durations'"
+                            :class="activeTab === 'durations' ? 'nav-tab-active' : ''"
+                            class="nav-tab">
+                        <i class="fas fa-rotate"></i>Rotation
+                    </button>
                     <button @click="activeTab = 'config-editor'"
                             :class="activeTab === 'config-editor' ? 'nav-tab-active' : ''"
                             class="nav-tab">
@@ -685,6 +690,18 @@
                 </div>
             </div>
 
+            <!-- Rotation & Durations tab -->
+            <div x-show="activeTab === 'durations'" x-transition>
+                <div id="durations-content" hx-get="/v3/partials/durations" hx-trigger="loadtab" hx-swap="innerHTML">
+                    <div class="animate-pulse">
+                        <div class="bg-white rounded-lg shadow p-6">
+                            <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
+                            <div class="h-32 bg-gray-200 rounded"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Backup & Restore tab -->
             <div x-show="activeTab === 'backup-restore'" x-transition>
                 <div id="backup-restore-content" hx-get="/v3/partials/backup-restore" hx-trigger="loadtab" hx-swap="innerHTML">
diff --git a/web_interface/templates/v3/partials/durations.html b/web_interface/templates/v3/partials/durations.html
index 096f6b48..d980744c 100644
--- a/web_interface/templates/v3/partials/durations.html
+++ b/web_interface/templates/v3/partials/durations.html
@@ -1,8 +1,8 @@
 {% import 'v3/partials/_macros.html' as ui %}
 <div class="bg-white rounded-lg shadow p-6">
     <div class="border-b border-gray-200 pb-4 mb-6">
-        <h2 class="text-lg font-semibold text-gray-900">Display Durations</h2>
-        <p class="mt-1 text-sm text-gray-600">Configure how long each screen is shown before switching. Values in seconds.</p>
+        <h2 class="text-lg font-semibold text-gray-900">Rotation &amp; Durations</h2>
+        <p class="mt-1 text-sm text-gray-600">Set the order plugins rotate on the display and how long each screen is shown. Durations are in seconds.</p>
     </div>
 
     {{ ui.settings_filter() }}