From 1d7a2f634492f5b4c0b648324d66471a3f48361d Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 6 May 2025 15:40:23 -0700
Subject: [PATCH 01/21] fix: update header styles and layout in
 default-base.css

- Corrected position property from 'absolute' to 'relative' for #header.
- Added flexbox properties to #header for better alignment and spacing.
- Introduced new styles for unraid-i18n-host and Downgrade icon rotation.
- Adjusted #menu position to 'sticky' for improved usability.

This change enhances the layout and responsiveness of the header and menu elements.
---
 .../plugins/dynamix/styles/default-base.css   | 45 +++++++++++++++----
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 2b8c91faf..7b5679fe5 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -358,9 +358,17 @@ textarea {
     border-bottom: 1px solid var(--input-border-color);
 }
 #header {
-    position: absolute;
-    top: 0;
-    left: 0;
+    position: relaitve;
+    z-index: 102 !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
     width: 100%;
     height: 91px;
     z-index: 102;
@@ -371,6 +379,27 @@ textarea {
     background-repeat: no-repeat;
 }
 
+#header unraid-i18n-host {
+    font-size: 16px;
+    margin-left: auto;
+    height: 100%;
+}
+
+/**
+ * Tools page, rotate the Downgrade icon to prevent needing to add a new icon to the icon font.
+ * The pseudo element is targeted here otherwise the rotation of the span would mess up spacing with the text.
+ */
+a[href="/Tools/Downgrade"] .icon-update:before {
+    display: inline-block; /* required otherwise the rotation won't work */
+    rotate: 180deg;
+}
+/* overriding #header .logo svg */
+#header .logo .partner-logo svg {
+    fill: var(--header-text-primary);
+    width: auto;
+    height: 28px;
+}
+
 #header.image { /* .image is conditionally added by DefaultPageLayout.php */
     background-image: var(--customer-header-background-image);
 }
@@ -436,10 +465,9 @@ div.title.shift {
     margin-top: -30px;
 }
 #menu {
-    position: absolute;
-    top: 90px;
-    left: 0;
-    right: 0;
+    position: sticky;
+    top: 0;
+    width: 100%;
     display: grid;
     grid-template-columns: auto max-content;
     z-index: 101;
@@ -1708,8 +1736,7 @@ span#wlan0 {
     }
 
     #header {
-        position: fixed;
-        height: 90px;
+        position: relative;
         z-index: 100;
         border-bottom: 1px solid var(--gray-600);
         box-sizing: border-box;

From 2401c2b8d360c7920bd7a720abc2c01d2b260400 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 6 May 2025 15:41:20 -0700
Subject: [PATCH 02/21] chore: remove unused CSS styles from myservers1.php

- Deleted obsolete styles related to the header and Downgrade icon rotation.
- Cleaned up the file to improve maintainability and reduce clutter.
---
 .../dynamix.my.servers/include/myservers1.php | 34 -------------------
 1 file changed, 34 deletions(-)

diff --git a/emhttp/plugins/dynamix.my.servers/include/myservers1.php b/emhttp/plugins/dynamix.my.servers/include/myservers1.php
index b9cfc44ff..d8de6b2eb 100644
--- a/emhttp/plugins/dynamix.my.servers/include/myservers1.php
+++ b/emhttp/plugins/dynamix.my.servers/include/myservers1.php
@@ -9,40 +9,6 @@
  * all copies or substantial portions of the Software.
  */
 ?>
-<style>
-#header {
-    z-index: 102 !important;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-#header unraid-i18n-host {
-    font-size: 16px;
-    margin-left: auto;
-    height: 100%;
-}
-
-/**
- * Tools page, rotate the Downgrade icon to prevent needing to add a new icon to the icon font.
- * The pseudo element is targeted here otherwise the rotation of the span would mess up spacing with the text.
- */
-a[href="/Tools/Downgrade"] .icon-update:before {
-    display: inline-block; /* required otherwise the rotation won't work */
-    rotate: 180deg;
-}
-/* overriding #header .logo svg */
-#header .logo .partner-logo svg {
-    fill: var(--header-text-primary);
-    width: auto;
-    height: 28px;
-}
-</style>
 <?php
 require_once("$docroot/plugins/dynamix.my.servers/include/web-components-extractor.php");
 

From f2e4d6fb18d146a92502e32a00c569aac3bf61fc Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 6 May 2025 15:54:52 -0700
Subject: [PATCH 03/21] refactor: update footer layout and styles for improved
 responsiveness

- Restructured footer HTML to use flexbox for better alignment and spacing.
- Adjusted CSS styles for #footer, including padding and box-sizing.
- Removed unnecessary float properties and improved layout consistency.
---
 .../DefaultPageLayout/BodyInlineJS.php        |  2 -
 .../include/DefaultPageLayout/Footer.php      | 57 +++++++++++--------
 .../plugins/dynamix/styles/default-base.css   | 28 +++++----
 3 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index 5b9359601..a6150fb43 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -234,8 +234,6 @@ $(window).scroll(function() {
     $('.back_to_top').fadeOut(scrollDuration);
   }
 <?if ($themeHelper->isTopNavTheme()):?>
-  var top = $('div#header').height()-1; // header height has 1 extra pixel to cover overlap
-  $('div#menu').css($(this).scrollTop() > top ? {position:'fixed',top:'0'} : {position:'absolute',top:top+'px'});
   // banner
   $('div.upgrade_notice').css($(this).scrollTop() > 24 ? {position:'fixed',top:'0'} : {position:'absolute',top:'24px'});
 <?endif;?>
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
index 80909394b..ea762b60b 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -42,31 +42,40 @@ function getArrayStatus($var) {
 ?>
 
 <footer id="footer">
-    <span id="statusraid">
-        <span id="statusbar">
-            <? $status = getArrayStatus($var); ?>
-            <span class="<?=$status['class']?> strong">
-                <i class="fa fa-<?=$status['icon']?>"></i> <?=$status['text']?>
+    <div class="footer-left">
+        <span id="statusraid">
+            <span id="statusbar">
+                <? $status = getArrayStatus($var); ?>
+                <span class="<?=$status['class']?> strong">
+                    <i class="fa fa-<?=$status['icon']?>"></i> <?=$status['text']?>
+                </span>
+                <? if ($status['progress']): ?>
+                    &bullet;<span class="blue strong tour"><?=$status['progress']?></span>
+                <? endif; ?>
             </span>
-            <? if ($status['progress']): ?>
-                &bullet;<span class="blue strong tour"><?=$status['progress']?></span>
-            <? endif; ?>
         </span>
-    </span>
-    <span id="user-notice" class="red-text"></span>
-    <? if ($wlan0): ?>
-        <span id="wlan0" class="grey-text" onclick="wlanSettings()">
-            <i class="fa fa-wifi fa-fw"></i>
+        <span id="user-notice" class="red-text"></span>
+    </div>
+    <div class="footer-right">
+        <span id="copyright">
+            <unraid-theme-switcher
+                current="<?=$theme?>"
+                themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
+            </unraid-theme-switcher>
+            Unraid&reg; webGui &copy;<?=releaseDateYear()?>, Lime Technology, Inc.
+            <a
+                class="footer-link"
+                href="https://docs.unraid.net/go/manual/"
+                target="_blank"
+                title="<?=_('Online manual')?>"
+            >
+                <i class="fa fa-book"></i> <?=_('manual')?>
+            </a>
         </span>
-    <? endif; ?>
-    <span id="copyright">
-        Unraid&reg; webGui &copy;<?=releaseDateYear()?>, Lime Technology, Inc.
-        <a href="https://docs.unraid.net/go/manual/" target="_blank" title="<?=_('Online manual')?>">
-            <i class="fa fa-book"></i> <?=_('manual')?>
-        </a>
-        <unraid-theme-switcher 
-            current="<?=$theme?>"
-            themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
-        </unraid-theme-switcher>
-    </span>
+        <? if ($wlan0): ?>
+            <span id="wlan0" class="grey-text" onclick="wlanSettings()">
+                <i class="fa fa-wifi fa-fw"></i>
+            </span>
+        <? endif; ?>
+    </div>
 </footer>
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 7b5679fe5..ed9b70249 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -564,30 +564,38 @@ div.title.shift {
     clear: both;
 }
 #footer {
+    box-sizing: border-box;
     position: fixed;
     bottom: 0;
     left: 0;
     color: var(--footer-text);
     background-color: var(--footer-background-color);
-    padding: 5px 0;
+    padding: .5rem 1rem;
     width: 100%;
-    height: 1.6rem;
-    line-height: 1.6rem;
     text-align: center;
     z-index: 10000;
-}
-#statusraid {
-    float: left;
-    padding-left: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
 }
 #countdown {
     margin: 0 auto;
 }
+.footer-right {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+.footer-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
 #copyright {
     font-family: bitstream;
     font-size: 1.1rem;
-    float: right;
-    padding-right: 10px;
 }
 .green {
     color: var(--green-800);
@@ -1537,8 +1545,6 @@ pre#swalbody p {
     margin-block-end: 1em;
 }
 span#wlan0 {
-    float: right;
-    margin-right: 10px;
     cursor: pointer;
 }
 

From 5c8d920269086e8b8eec5971ff571401d18ad2bd Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 6 May 2025 16:24:25 -0700
Subject: [PATCH 04/21] style: update padding in DashStats.css and
 default-base.css for improved layout

- Changed padding-top and padding-bottom in DashStats.css from fixed values to rem units for better responsiveness.
- Removed margin from div.tabs in default-base.css to enhance layout consistency.
---
 emhttp/plugins/dynamix/sheets/DashStats.css    | 4 ++--
 emhttp/plugins/dynamix/styles/default-base.css | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/emhttp/plugins/dynamix/sheets/DashStats.css b/emhttp/plugins/dynamix/sheets/DashStats.css
index cc9b69027..2ce63b5c3 100644
--- a/emhttp/plugins/dynamix/sheets/DashStats.css
+++ b/emhttp/plugins/dynamix/sheets/DashStats.css
@@ -12,8 +12,8 @@
 }
 
 div.frame {
-    padding-top: 14px;
-    padding-bottom: 160px;
+    padding-top: 1rem;
+    padding-bottom: 5rem;
 }
 div.tile,
 i.tile {
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index ed9b70249..12f2d2758 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -1172,7 +1172,6 @@ label + .content {
 }
 div.tabs {
     position: relative;
-    margin: 120px 0 0 0;
 }
 div.tab {
     float: left;
@@ -2108,7 +2107,6 @@ span#wlan0 {
     }
 
     div.tabs {
-        margin: 110px 20px 30px 90px;
         background-color: var(--background-color);
     }
 

From 8379c02192a366499cb703a2ac0b35c7354f37d6 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 6 May 2025 17:11:43 -0700
Subject: [PATCH 05/21] fix: jquery.ui.css reference

---
 emhttp/plugins/dynamix/include/DefaultPageLayout.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
index 3c5c350ad..f31560a42 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
@@ -94,7 +94,7 @@ if (count($pages)) {
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-dynamix.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/dynamix-jquery-ui.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$theme}.css")?>">
 
 <style>

From 843efed231f796a6233cdc84ac01da47a3f7a822 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 10:48:13 -0700
Subject: [PATCH 06/21] refactor: abstract tab vs no tab content into separate
 components

---
 .../include/DefaultPageLayout/MainContent.php |  87 ++---------
 .../DefaultPageLayout/MainContentNotab.php    |  43 +++++
 .../DefaultPageLayout/MainContentTabbed.php   | 147 ++++++++++++++++++
 .../plugins/dynamix/styles/default-base.css   |  82 ++++++++--
 4 files changed, 273 insertions(+), 86 deletions(-)
 create mode 100644 emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php
 create mode 100644 emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
index 0364b470d..a5505b624 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
@@ -1,11 +1,18 @@
-<?
+<?php
 /**
- * Main content template for the Unraid web interface.
- * Handles the rendering of tabs and page content.
+ * Main content delegator for the Unraid web interface.
+ * Includes the correct template based on tabbed state.
+ * 
+ * Even if DisplaySettings is not enabled for tabs, pages with Tabs="true" will use tabs
+ * and pages with Tabs="false" will not use tabs.
  */
+$display['tabs'] = isset($myPage['Tabs'])
+    ? (strtolower($myPage['Tabs']) == 'true' ? 0 : 1)
+    : $display['tabs'];
+$tabbed = $display['tabs'] == 0 && count($pages) > 1;
+$contentInclude = $tabbed ? 'MainContentTabbed.php' : 'MainContentNotab.php';
 
 $defaultIcon = "<i class=\"icon-app PanelIcon\"></i>";
-// Helper function to process icon
 function process_icon($icon, $docroot, $root) {
     global $defaultIcon;
     if (substr($icon, -4) == '.png') {
@@ -25,76 +32,6 @@ function process_icon($icon, $docroot, $root) {
     }
     return $icon;
 }
-
-$tab = 1;
-// even if DisplaySettings is not enabled for tabs, pages with Tabs="true" will use tabs
-$display['tabs'] = isset($myPage['Tabs']) ? (strtolower($myPage['Tabs']) == 'true' ? 0 : 1) : 1;
-$tabbed = $display['tabs'] == 0 && count($pages) > 1;
 ?>
-<div id="displaybox">
-    <div class="tabs">
-        <? foreach ($pages as $page):
-            $close = false;
-            if (isset($page['Title'])):
-                $title = htmlspecialchars($page['Title']) ?? '';
-                if ($tabbed): ?>
-                    <div class="tab">
-                        <input type="radio" id="tab<?= $tab ?>" name="tabs" onclick="settab(this.id)">
-                        <label for="tab<?= $tab ?>">
-                            <?= tab_title($title, $page['root'], _var($page, 'Tag', false)) ?>
-                        </label>
-                        <div class="content">
-                    <? $close = true;
-                else:
-                    if ($tab == 1): ?>
-                        <div class="tab">
-                            <input type="radio" id="tab<?= $tab ?>" name="tabs">
-                            <div class="content shift">
-                    <? endif; ?>
-                        <div class="title">
-                            <span class="left">
-                                <?= tab_title($title, $page['root'], _var($page, 'Tag', false)) ?>
-                            </span>
-                        </div>
-                <? endif;
-                $tab++;
-            endif;
 
-            // Handle menu type pages
-            if (isset($page['Type']) && $page['Type'] == 'menu'):
-                $pgs = find_pages($page['name']);
-                foreach ($pgs as $pg):
-                    // Set title variable with proper escaping (suppress errors)
-                    @$title = htmlspecialchars($pg['Title']);
-                    $icon = _var($pg, 'Icon', $defaultIcon);
-                    $icon = process_icon($icon, $docroot, $pg['root']); ?>
-                    <div class="Panel">
-                        <a href="/<?= $path ?>/<?= $pg['name'] ?>" onclick="$.cookie('one','tab1')">
-                            <span><?= $icon ?></span>
-                            <div class="PanelText"><?= _($title) ?></div>
-                        </a>
-                    </div>
-                <? endforeach;
-            endif;
-
-            // Annotate with HTML comment
-            annotate($page['file']);
-
-            // Create page content
-            if (empty($page['Markdown']) || $page['Markdown'] == 'true'):
-                eval('?>'.Markdown(parse_text($page['text'])));
-            else:
-                eval('?>'.parse_text($page['text']));
-            endif;
-
-            if ($close): ?>
-                </div><!-- /.content -->
-            </div><!-- /.tab -->
-            <? endif;
-        endforeach; ?>
-    </div><!-- /.tabs -->
-</div><!-- /#displaybox -->
-<?
-// Clean up variables
-unset($pages, $page, $pgs, $pg, $icon, $nchan, $running, $start, $stop, $row, $script, $opt, $nchan_run);
-?>
+<?php require_once __DIR__ . "/$contentInclude"; ?>
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php
new file mode 100644
index 000000000..690b151da
--- /dev/null
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php
@@ -0,0 +1,43 @@
+<?php
+/**
+ * Non-tabbed content template for the Unraid web interface.
+ * Renders all pages in sequence without tabs, using original per-page logic.
+ */
+?>
+<div id="displaybox">
+    <div class="content">
+        <? foreach ($pages as $page): ?>
+            <? annotate($page['file']); ?>
+            <? includePageStylesheets($page); ?>
+
+            <? if (isset($page['Title'])): ?>
+                <div class="title">
+                    <?= tab_title($page['Title'], $page['root'], _var($page, 'Tag', false)) ?>
+                </div>
+            <? endif; ?>
+
+            <? if (isset($page['Type']) && $page['Type'] == 'menu'): ?>
+                <? $pgs = find_pages($page['name']); ?>
+                <? foreach ($pgs as $pg): ?>
+                    <?
+                        @$panelTitle = htmlspecialchars($pg['Title']);
+                        $icon = _var($pg, 'Icon', $defaultIcon);
+                        $icon = process_icon($icon, $docroot, $pg['root']);
+                    ?>
+                    <div class="Panel">
+                        <a href="/<?= $path ?>/<?= $pg['name'] ?>" onclick="$.cookie('one','tab1')">
+                            <span><?= $icon ?></span>
+                            <div class="PanelText"><?= _($panelTitle) ?></div>
+                        </a>
+                    </div>
+                <? endforeach; ?>
+            <? endif; ?>
+
+            <? if (empty($page['Markdown']) || $page['Markdown'] == 'true'): ?>
+                <? eval('?>'.Markdown(parse_text($page['text']))); ?>
+            <? else: ?>
+                <? eval('?>'.parse_text($page['text'])); ?>
+            <? endif; ?>
+        <? endforeach; ?>
+    </div>
+</div>
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
new file mode 100644
index 000000000..ecdcbfd64
--- /dev/null
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
@@ -0,0 +1,147 @@
+<?php
+/**
+ * Tabbed content template for the Unraid web interface.
+ * Accessible, modern, and decoupled from non-tabbed logic.
+ */
+?>
+<div id="displaybox">
+  <nav class="tabs" role="tablist" aria-label="Page Tabs">
+    <div class="tabs-container">
+      <?php 
+      $i = 0;
+      foreach ($pages as $page):
+        if (!isset($page['Title'])) continue;
+        $title = htmlspecialchars((string)$page['Title']);
+        $tabId = "tab" . ($i+1);
+      ?>
+        <button role="tab" id="<?= $tabId ?>" aria-controls="<?= $tabId ?>-panel" tabindex="<?= $i === 0 ? '0' : '-1' ?>" aria-selected="<?= $i === 0 ? 'true' : 'false' ?>">
+          <?= tab_title($title, $page['root'], _var($page, 'Tag', false)) ?>
+        </button>
+      <?php 
+      $i++;
+      endforeach; ?>
+    </div>
+  </nav>
+  <?php 
+  $i = 0;
+  foreach ($pages as $page):
+    if (!isset($page['Title'])) continue;
+    $title = htmlspecialchars((string)$page['Title']);
+    $tabId = "tab" . ($i+1);
+  ?>
+    <section id="<?= $tabId ?>-panel" role="tabpanel" aria-labelledby="<?= $tabId ?>" style="display:none;" class="content" tabindex="0">
+      <?php
+      if (isset($page['Type']) && $page['Type'] == 'menu') {
+        $pgs = find_pages($page['name']);
+        foreach ($pgs as $pg) {
+          @$title = htmlspecialchars($pg['Title']);
+          $icon = _var($pg, 'Icon', $defaultIcon);
+          $icon = process_icon($icon, $docroot, $pg['root']);
+          echo "<div class=\"Panel\"><a href=\"/$path/{$pg['name']}\"><span>$icon</span><div class=\"PanelText\">"._($title)."</div></a></div>";
+        }
+      }
+      annotate($page['file']);
+        // Handle menu type pages
+        if (isset($page['Type']) && $page['Type'] == 'menu'):
+            $pgs = find_pages($page['name']);
+            foreach ($pgs as $pg):
+                // Set title variable with proper escaping (suppress errors)
+                @$title = htmlspecialchars($pg['Title']);
+                $icon = _var($pg, 'Icon', $defaultIcon);
+                $icon = process_icon($icon, $docroot, $pg['root']); ?>
+                <div class="Panel">
+                    <a href="/<?= $path ?>/<?= $pg['name'] ?>" onclick="$.cookie('one','tab1')">
+                        <span><?= $icon ?></span>
+                        <div class="PanelText"><?= _($title) ?></div>
+                    </a>
+                </div>
+            <? endforeach;
+        endif;
+      if (empty($page['Markdown']) || $page['Markdown'] == 'true') {
+        eval('?>'.Markdown(parse_text($page['text'])));
+      } else {
+        eval('?>'.parse_text($page['text']));
+      }
+      ?>
+    </section>
+  <?php 
+  $i++;
+  endforeach; ?>
+</div>
+<script>
+// Cookie helpers
+function getCookie(name) {
+  const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
+  return v ? v[2] : null;
+}
+function setCookie(name, value) {
+  document.cookie = name + '=' + value + '; path=/';
+}
+
+const tabs = document.querySelectorAll('.tabs [role="tab"]');
+const panels = document.querySelectorAll('[role="tabpanel"]');
+
+// Hide all panels by default (avoid flash)
+panels.forEach(panel => panel.style.display = 'none');
+
+// Figure out which cookie to use (matches settab logic)
+let cookieName = 'tab';
+<?php
+// Emulate settab's switch logic for cookie name
+switch ($myPage['name']) {
+  case 'Main':
+    echo "cookieName = 'tab';\n";
+    break;
+  case 'Cache': case 'Data': case 'Device': case 'Flash': case 'Parity':
+    echo "cookieName = 'one';\n";
+    break;
+  default:
+    echo "cookieName = 'one';\n";
+    break;
+}
+?>
+
+// On load: select correct tab from cookie, or default to first
+let activeIdx = 0;
+const cookieVal = getCookie(cookieName);
+if (cookieVal) {
+  const idx = Array.from(tabs).findIndex(tab => tab.id === cookieVal);
+  if (idx !== -1) activeIdx = idx;
+}
+tabs.forEach((tab, i) => {
+  if (i === activeIdx) {
+    tab.setAttribute('aria-selected', 'true');
+    tab.setAttribute('tabindex', '0');
+    panels[i].style.display = 'block';
+  } else {
+    tab.setAttribute('aria-selected', 'false');
+    tab.setAttribute('tabindex', '-1');
+    panels[i].style.display = 'none';
+  }
+});
+
+// On tab click: update cookie and show correct panel
+// Also update ARIA
+// No content flash
+
+tabs.forEach((tab, i) => {
+  tab.addEventListener('click', () => {
+    tabs.forEach((t, j) => {
+      t.setAttribute('aria-selected', j === i ? 'true' : 'false');
+      t.setAttribute('tabindex', j === i ? '0' : '-1');
+      panels[j].style.display = j === i ? 'block' : 'none';
+    });
+    setCookie(cookieName, tab.id);
+    tab.focus();
+  });
+  tab.addEventListener('keydown', e => {
+    let idx = Array.prototype.indexOf.call(tabs, document.activeElement);
+    if (e.key === 'ArrowRight') {
+      tabs[(idx+1)%tabs.length].focus();
+    } else if (e.key === 'ArrowLeft') {
+      tabs[(idx-1+tabs.length)%tabs.length].focus();
+    }
+  });
+});
+</script>
+<?php unset($pages, $page, $pgs, $pg, $icon, $nchan, $running, $start, $stop, $row, $script, $opt, $nchan_run); ?> 
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 12f2d2758..ac1894d64 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -764,7 +764,8 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
     border-style: hidden;
-    margin: -30px 0 0 0;
+    /* margin: -30px 0 0 0; */
+    margin: 0;
     width: 100%;
     background-color: var(--background-color);
 }
@@ -1034,11 +1035,7 @@ span.cpu-speed {
     color: var(--blue-900);
 }
 span.status {
-    float: right;
     font-size: 1.4rem;
-    margin-top: 30px;
-    padding-right: 8px;
-    letter-spacing: 1.8px;
 }
 span.status.vhshift {
     margin-top: 0;
@@ -1156,12 +1153,9 @@ a.list {
     color: inherit;
 }
 div.content {
-    position: absolute;
-    top: 0;
-    left: 0;
+    position: relative;
     width: 100%;
-    padding-bottom: 30px;
-    z-index: -1;
+    padding-bottom: 3rem;
     clear: both;
 }
 div.content.shift {
@@ -1171,7 +1165,9 @@ label + .content {
     margin-top: 86px;
 }
 div.tabs {
-    position: relative;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: stretch !important;
 }
 div.tab {
     float: left;
@@ -2315,3 +2311,67 @@ span#wlan0 {
         margin: 0 20px;
     }
 }
+
+.tabs,
+.tabs-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.tabs {
+    justify-content: space-between;
+}
+
+.tabs button[role="tab"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: var(--radio-background-color);
+    border: 1px solid var(--disabled-input-border-color);
+    border-radius: 0;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border-bottom: 1px solid transparent;
+    color: var(--gray-300);
+    font-weight: normal;
+    font-family: inherit;
+    font-size: 1.4rem;
+    letter-spacing: 1.8px;
+    margin-right: 4px;
+    margin-bottom: 0;
+    padding: .75rem 1rem;
+    min-width: 0;
+    box-shadow: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    line-height: 1.0;
+    cursor: pointer;
+    transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.2s;
+    text-transform: none;
+    background-image: none;
+    opacity: .75;
+}
+.tabs button[role="tab"] > .tab-icon {
+    margin-right: 8px;
+    display: inline-flex;
+    align-items: center;
+}
+.tabs button[role="tab"]:focus,
+.tabs button[role="tab"]:hover,
+.tabs button[role="tab"][aria-selected="true"] {
+    background: transparent;
+    color: var(--text-color);
+    border-color: var(--brand-orange);
+    border-bottom: 1px solid transparent;
+    opacity: 1;
+}
+/* .tabs button[role="tab"]:focus {
+    outline: 1px solid var(--brand-orange);
+} */
+.tabs button[role="tab"]:last-child {
+    margin-right: 0;
+}

From 8472f1b4ed63920efe1f84e407984e513c17dd47 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 10:48:28 -0700
Subject: [PATCH 07/21] fix: ensure banner settings visibility based on form
 selection

- Added a check to ensure the form object exists before accessing the selectedIndex property.
- Improved readability by restructuring the conditional logic for showing/hiding banner settings.
---
 emhttp/plugins/dynamix/DisplaySettings.page | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/DisplaySettings.page b/emhttp/plugins/dynamix/DisplaySettings.page
index 5738ba549..301b13e90 100644
--- a/emhttp/plugins/dynamix/DisplaySettings.page
+++ b/emhttp/plugins/dynamix/DisplaySettings.page
@@ -51,7 +51,11 @@ function upload(lang) {
   }
 }
 function presetBanner(form) {
-  if (form.banner.selectedIndex == 0) $('.js-bannerSettings').hide(); else $('.js-bannerSettings').show();
+  if (form.banner && form.banner.selectedIndex == 0) {
+    $('.js-bannerSettings').hide();
+  } else {
+    $('.js-bannerSettings').show()
+  };
 }
 function presetRefresh(form) {
   for (var i=0,item; item=form.refresh.options[i]; i++) item.value *= -1;

From 15279ab619afcfb7b8bd67124e8d9c03d35ee547 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 10:48:37 -0700
Subject: [PATCH 08/21] style: remove commented margin in default-base.css for
 cleaner code

- Deleted the commented-out margin property in the default-base.css file to enhance code clarity and maintainability.
---
 emhttp/plugins/dynamix/styles/default-base.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index ac1894d64..4dfc9c2f3 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -764,7 +764,6 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
     border-style: hidden;
-    /* margin: -30px 0 0 0; */
     margin: 0;
     width: 100%;
     background-color: var(--background-color);

From 46731110ea06040f20fb5bfa6cf86bddd8a11359 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 10:48:43 -0700
Subject: [PATCH 09/21] fix: adjust cookie handling for scroll position in
 BodyInlineJS.php

- Modified the calculation of the 'top' variable to remove the offset adjustment, simplifying the logic.
- Ensured that the scroll position is set correctly based on the cookie value.

This change improves the handling of scroll position based on user preferences.
---
 .../plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index a6150fb43..cc980995c 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -283,7 +283,7 @@ $(function() {
       $(this).attr('onsubmit','clearTimeout(timers.flashReport);escapeQuotes(this);'+onsubmit);
     }
   });
-  var top = ($.cookie('top')||0) - $('.tabs').offset().top - 75;
+  var top = ($.cookie('top')||0);
   if (top>0) {$('html,body').scrollTop(top);}
   $.removeCookie('top');
   if ($.cookie('addAlert') != null) bannerAlert(addAlert.text,addAlert.cmd,addAlert.plg,addAlert.func);

From 3f46137605bee1d3701c12ac0192c0bc08134696 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 11:08:25 -0700
Subject: [PATCH 10/21] fix: adjust cookie handling for scroll position in
 BodyInlineJS.php

- Modified the calculation of the 'top' variable to remove the offset adjustment, simplifying the logic.
- Ensured that the scroll position is set correctly based on the cookie value.

This change improves the handling of scroll position based on user preferences.
---
 .../dynamix.plugin.manager/sheets/Plugins.css |   3 -
 .../plugins/dynamix/styles/default-base.css   | 175 ++++++------------
 2 files changed, 60 insertions(+), 118 deletions(-)

diff --git a/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css b/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css
index f49d79aa6..dd3d30489 100644
--- a/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css
+++ b/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css
@@ -12,7 +12,4 @@ table tbody td {
     span.status.vhshift {
         margin-top: 8px !important;
     }
-    table#plugin_table {
-        margin-top: -43px !important;
-    }
 }
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 4dfc9c2f3..0fb7a996e 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -1151,65 +1151,70 @@ a.list {
     text-decoration: none;
     color: inherit;
 }
-div.content {
+.content {
     position: relative;
     width: 100%;
-    padding-bottom: 3rem;
-    clear: both;
+    box-sizing: border-box;
 }
-div.content.shift {
-    margin-top: 1px;
+.tabs,
+.tabs-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
-label + .content {
-    margin-top: 86px;
+
+.tabs {
+    justify-content: space-between;
 }
-div.tabs {
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: stretch !important;
-}
-div.tab {
-    float: left;
-    margin-top: 30px;
-}
-div.tab input[id^="tab"] {
-    display: none;
-}
-div.tab [type="radio"] + label:hover {
-    background-color: transparent;
-    border: 1px solid var(--brand-orange);
-    border-bottom: none;
-    cursor: pointer;
-    opacity: 1;
-}
-div.tab [type="radio"]:checked + label {
-    cursor: default;
-    background-color: transparent;
-    border: 1px solid var(--brand-orange);
-    border-bottom: none;
-    opacity: 1;
-}
-div.tab [type="radio"] + label ~ .content {
-    display: none;
-}
-div.tab [type="radio"]:checked + label ~ .content {
-    display: inline;
-}
-div.tab [type="radio"] + label {
-    position: relative;
-    font-size: 1.4rem;
-    letter-spacing: 1.8px;
-    padding: 4px 10px;
-    margin-right: 2px;
+
+.tabs button[role="tab"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: var(--radio-background-color);
+    border: 1px solid var(--disabled-input-border-color);
+    border-radius: 0;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
-    border: 1px solid var(--disabled-input-border-color);
-    border-bottom: none;
-    background-color: var(--radio-background-color);
-    opacity: 0.5;
+    border-bottom: 1px solid transparent;
+    color: var(--gray-300);
+    font-weight: normal;
+    font-family: inherit;
+    font-size: 1.4rem;
+    letter-spacing: 1.8px;
+    margin-right: 4px;
+    margin-bottom: 0;
+    padding: .75rem 1rem;
+    min-width: 0;
+    box-shadow: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    line-height: 1.0;
+    cursor: pointer;
+    transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.2s;
+    text-transform: none;
+    background-image: none;
+    opacity: .75;
 }
-div.tab [type="radio"] + label img {
-    padding-right: 4px;
+.tabs button[role="tab"] > .tab-icon {
+    margin-right: 8px;
+    display: inline-flex;
+    align-items: center;
+}
+.tabs button[role="tab"]:focus,
+.tabs button[role="tab"]:hover,
+.tabs button[role="tab"][aria-selected="true"] {
+    background: transparent;
+    color: var(--text-color);
+    border-color: var(--brand-orange);
+    border-bottom: 1px solid transparent;
+    opacity: 1;
+}
+.tabs button[role="tab"]:last-child {
+    margin-right: 0;
 }
 div.Panel {
     text-align: center;
@@ -2251,6 +2256,10 @@ span#wlan0 {
     }
 }
 
+#displaybox {
+    padding: 0 1rem 4rem;
+}
+
 /* Theme width styles */
 .Theme--width-boxed #displaybox {
     min-width: 1280px;
@@ -2310,67 +2319,3 @@ span#wlan0 {
         margin: 0 20px;
     }
 }
-
-.tabs,
-.tabs-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.tabs {
-    justify-content: space-between;
-}
-
-.tabs button[role="tab"] {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-color: var(--radio-background-color);
-    border: 1px solid var(--disabled-input-border-color);
-    border-radius: 0;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-    border-bottom: 1px solid transparent;
-    color: var(--gray-300);
-    font-weight: normal;
-    font-family: inherit;
-    font-size: 1.4rem;
-    letter-spacing: 1.8px;
-    margin-right: 4px;
-    margin-bottom: 0;
-    padding: .75rem 1rem;
-    min-width: 0;
-    box-shadow: none;
-    outline: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    line-height: 1.0;
-    cursor: pointer;
-    transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.2s;
-    text-transform: none;
-    background-image: none;
-    opacity: .75;
-}
-.tabs button[role="tab"] > .tab-icon {
-    margin-right: 8px;
-    display: inline-flex;
-    align-items: center;
-}
-.tabs button[role="tab"]:focus,
-.tabs button[role="tab"]:hover,
-.tabs button[role="tab"][aria-selected="true"] {
-    background: transparent;
-    color: var(--text-color);
-    border-color: var(--brand-orange);
-    border-bottom: 1px solid transparent;
-    opacity: 1;
-}
-/* .tabs button[role="tab"]:focus {
-    outline: 1px solid var(--brand-orange);
-} */
-.tabs button[role="tab"]:last-child {
-    margin-right: 0;
-}

From ad9f54618c8884f68180703bd15d38d701639be6 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 15:06:38 -0700
Subject: [PATCH 11/21] refactor: implement panel generation functions for menu
 pages

- Added `generatePanel` and `generatePanels` functions to encapsulate panel creation logic for menu items.
- Updated `MainContentNotab.php` and `MainContentTabbed.php` to utilize the new functions, improving code reusability and readability.
- Introduced `generateContent` function to handle content generation based on Markdown flag.
---
 .../include/DefaultPageLayout/MainContent.php |  80 ++++++-
 .../DefaultPageLayout/MainContentNotab.php    |  23 +-
 .../DefaultPageLayout/MainContentTabbed.php   | 196 ++++++++----------
 .../plugins/dynamix/styles/default-base.css   |  10 +-
 4 files changed, 178 insertions(+), 131 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
index a5505b624..e37d51073 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
@@ -32,6 +32,84 @@ function process_icon($icon, $docroot, $root) {
     }
     return $icon;
 }
+
+/**
+ * Generates a Panel DOM element for menu items
+ * 
+ * @param array $pg Page data array containing name, Title, Icon
+ * @param string $path Current path
+ * @param string $defaultIcon Default icon to use if none specified
+ * @param string $docroot Document root path
+ * @param bool $useTabCookie Whether to add tab cookie onclick handler
+ * @return string HTML for the Panel element
+ */
+function generatePanel($pg, $path, $defaultIcon, $docroot, $useTabCookie = false) {
+    $panelTitle = htmlspecialchars($pg['Title']);
+    $icon = _var($pg, 'Icon', $defaultIcon);
+    $icon = process_icon($icon, $docroot, $pg['root']);
+
+    $onclick = $useTabCookie ? ' onclick="$.cookie(\'one\',\'tab1\')"' : '';
+
+    return sprintf(
+        '<div class="Panel">
+            <a href="/%s/%s"%s>
+                <span>%s</span>
+                <div class="PanelText">%s</div>
+            </a>
+        </div>',
+        $path,
+        $pg['name'],
+        $onclick,
+        $icon,
+        _($panelTitle)
+    );
+}
+
+/**
+ * Generates all panels for a menu page
+ * 
+ * @param array $page Page data array containing Type and name
+ * @param string $path Current path
+ * @param string $defaultIcon Default icon to use if none specified
+ * @param string $docroot Document root path
+ * @param bool $useTabCookie Whether to add tab cookie onclick handler
+ * @return string HTML for all panels or empty string if not a menu page
+ */
+function generatePanels($page, $path, $defaultIcon, $docroot, $useTabCookie = false) {
+    if (!isset($page['Type']) || $page['Type'] != 'menu') {
+        return '';
+    }
+
+    $output = '';
+    $pgs = find_pages($page['name']);
+    foreach ($pgs as $pg) {
+        $output .= generatePanel($pg, $path, $defaultIcon, $docroot, $useTabCookie);
+    }
+    return $output;
+}
+
+/**
+ * Generates the content for a page
+ * 
+ * @param array $page Page data array containing text and Markdown flag
+ * @return string Parsed text ready for eval
+ * 
+ * Usage example:
+ * <? eval('?>'.generateContent($page)); ?>
+ */
+function generateContent($page) {
+    if (empty($page['Markdown']) || $page['Markdown'] == 'true') {
+        return Markdown(parse_text($page['text']));
+    }
+    return parse_text($page['text']);
+}
 ?>
 
-<?php require_once __DIR__ . "/$contentInclude"; ?>
\ No newline at end of file
+<?php require_once __DIR__ . "/$contentInclude"; ?>
+
+<?
+/**
+ * Legacy carryover. Ideally wouldn't be needed.
+ */
+unset($pages, $page, $pgs, $pg, $icon, $nchan, $running, $start, $stop, $row, $script, $opt, $nchan_run);
+?>
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php
index 690b151da..d36f189e9 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php
@@ -16,28 +16,9 @@
                 </div>
             <? endif; ?>
 
-            <? if (isset($page['Type']) && $page['Type'] == 'menu'): ?>
-                <? $pgs = find_pages($page['name']); ?>
-                <? foreach ($pgs as $pg): ?>
-                    <?
-                        @$panelTitle = htmlspecialchars($pg['Title']);
-                        $icon = _var($pg, 'Icon', $defaultIcon);
-                        $icon = process_icon($icon, $docroot, $pg['root']);
-                    ?>
-                    <div class="Panel">
-                        <a href="/<?= $path ?>/<?= $pg['name'] ?>" onclick="$.cookie('one','tab1')">
-                            <span><?= $icon ?></span>
-                            <div class="PanelText"><?= _($panelTitle) ?></div>
-                        </a>
-                    </div>
-                <? endforeach; ?>
-            <? endif; ?>
+            <?= generatePanels($page, $path, $defaultIcon, $docroot, true) ?>
 
-            <? if (empty($page['Markdown']) || $page['Markdown'] == 'true'): ?>
-                <? eval('?>'.Markdown(parse_text($page['text']))); ?>
-            <? else: ?>
-                <? eval('?>'.parse_text($page['text'])); ?>
-            <? endif; ?>
+            <? eval('?>'.generateContent($page)); ?>
         <? endforeach; ?>
     </div>
 </div>
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
index ecdcbfd64..28c3aa879 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
@@ -1,81 +1,65 @@
-<?php
+<?
 /**
  * Tabbed content template for the Unraid web interface.
  * Accessible, modern, and decoupled from non-tabbed logic.
  */
 ?>
 <div id="displaybox">
-  <nav class="tabs" role="tablist" aria-label="Page Tabs">
-    <div class="tabs-container">
-      <?php 
-      $i = 0;
-      foreach ($pages as $page):
-        if (!isset($page['Title'])) continue;
-        $title = htmlspecialchars((string)$page['Title']);
-        $tabId = "tab" . ($i+1);
-      ?>
-        <button role="tab" id="<?= $tabId ?>" aria-controls="<?= $tabId ?>-panel" tabindex="<?= $i === 0 ? '0' : '-1' ?>" aria-selected="<?= $i === 0 ? 'true' : 'false' ?>">
-          <?= tab_title($title, $page['root'], _var($page, 'Tag', false)) ?>
-        </button>
-      <?php 
-      $i++;
-      endforeach; ?>
-    </div>
-  </nav>
-  <?php 
-  $i = 0;
-  foreach ($pages as $page):
-    if (!isset($page['Title'])) continue;
-    $title = htmlspecialchars((string)$page['Title']);
-    $tabId = "tab" . ($i+1);
-  ?>
-    <section id="<?= $tabId ?>-panel" role="tabpanel" aria-labelledby="<?= $tabId ?>" style="display:none;" class="content" tabindex="0">
-      <?php
-      if (isset($page['Type']) && $page['Type'] == 'menu') {
-        $pgs = find_pages($page['name']);
-        foreach ($pgs as $pg) {
-          @$title = htmlspecialchars($pg['Title']);
-          $icon = _var($pg, 'Icon', $defaultIcon);
-          $icon = process_icon($icon, $docroot, $pg['root']);
-          echo "<div class=\"Panel\"><a href=\"/$path/{$pg['name']}\"><span>$icon</span><div class=\"PanelText\">"._($title)."</div></a></div>";
-        }
-      }
-      annotate($page['file']);
-        // Handle menu type pages
-        if (isset($page['Type']) && $page['Type'] == 'menu'):
-            $pgs = find_pages($page['name']);
-            foreach ($pgs as $pg):
-                // Set title variable with proper escaping (suppress errors)
-                @$title = htmlspecialchars($pg['Title']);
-                $icon = _var($pg, 'Icon', $defaultIcon);
-                $icon = process_icon($icon, $docroot, $pg['root']); ?>
-                <div class="Panel">
-                    <a href="/<?= $path ?>/<?= $pg['name'] ?>" onclick="$.cookie('one','tab1')">
-                        <span><?= $icon ?></span>
-                        <div class="PanelText"><?= _($title) ?></div>
-                    </a>
-                </div>
-            <? endforeach;
-        endif;
-      if (empty($page['Markdown']) || $page['Markdown'] == 'true') {
-        eval('?>'.Markdown(parse_text($page['text'])));
-      } else {
-        eval('?>'.parse_text($page['text']));
-      }
-      ?>
-    </section>
-  <?php 
-  $i++;
-  endforeach; ?>
+    <nav class="tabs" role="tablist" aria-label="Page Tabs">
+        <div class="tabs-container">
+            <? $i = 0; ?>
+            <? foreach ($pages as $page): ?>
+                <? if (!isset($page['Title'])) continue; ?>
+                <? $title = htmlspecialchars((string)$page['Title']); ?>
+                <? $tabId = "tab" . ($i+1); ?>
+                <button
+                    role="tab"
+                    id="<?= $tabId ?>"
+                    aria-controls="<?= $tabId ?>-panel"
+                    tabindex="<?= $i === 0 ? '0' : '-1' ?>"
+                    aria-selected="<?= $i === 0 ? 'true' : 'false' ?>"
+                >
+                    <?= tab_title($title, $page['root'], _var($page, 'Tag', false)) ?>
+                </button>
+            <? $i++; ?>
+            <? endforeach; ?>
+        </div>
+    </nav>
+
+    <? $i = 0; ?>
+    <? foreach ($pages as $page): ?>
+        <? 
+            if (!isset($page['Title'])) {
+                continue;
+            }
+            $title = htmlspecialchars((string)$page['Title']);
+            $tabId = "tab" . ($i+1);
+            annotate($page['file']);
+        ?>
+        <section
+            id="<?= $tabId ?>-panel"
+            role="tabpanel"
+            aria-labelledby="<?= $tabId ?>"
+            class="content"
+            tabindex="0"
+            style="display:none;"
+        >
+            <?= generatePanels($page, $path, $defaultIcon, $docroot) ?>
+
+            <? eval('?>'.generateContent($page)); ?>
+        </section>
+        <? $i++; ?>
+    <? endforeach; ?>
 </div>
+
 <script>
 // Cookie helpers
 function getCookie(name) {
-  const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
-  return v ? v[2] : null;
+    const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
+    return v ? v[2] : null;
 }
 function setCookie(name, value) {
-  document.cookie = name + '=' + value + '; path=/';
+    document.cookie = name + '=' + value + '; path=/';
 }
 
 const tabs = document.querySelectorAll('.tabs [role="tab"]');
@@ -86,18 +70,22 @@ panels.forEach(panel => panel.style.display = 'none');
 
 // Figure out which cookie to use (matches settab logic)
 let cookieName = 'tab';
-<?php
+<?
 // Emulate settab's switch logic for cookie name
 switch ($myPage['name']) {
-  case 'Main':
-    echo "cookieName = 'tab';\n";
-    break;
-  case 'Cache': case 'Data': case 'Device': case 'Flash': case 'Parity':
-    echo "cookieName = 'one';\n";
-    break;
-  default:
-    echo "cookieName = 'one';\n";
-    break;
+    case 'Main':
+        echo "cookieName = 'tab';\n";
+        break;
+    case 'Cache':
+    case 'Data':
+    case 'Device':
+    case 'Flash':
+    case 'Parity':
+        echo "cookieName = 'one';\n";
+        break;
+    default:
+        echo "cookieName = 'one';\n";
+        break;
 }
 ?>
 
@@ -105,43 +93,41 @@ switch ($myPage['name']) {
 let activeIdx = 0;
 const cookieVal = getCookie(cookieName);
 if (cookieVal) {
-  const idx = Array.from(tabs).findIndex(tab => tab.id === cookieVal);
-  if (idx !== -1) activeIdx = idx;
+    const idx = Array.from(tabs).findIndex(tab => tab.id === cookieVal);
+    if (idx !== -1) activeIdx = idx;
 }
 tabs.forEach((tab, i) => {
-  if (i === activeIdx) {
-    tab.setAttribute('aria-selected', 'true');
-    tab.setAttribute('tabindex', '0');
-    panels[i].style.display = 'block';
-  } else {
-    tab.setAttribute('aria-selected', 'false');
-    tab.setAttribute('tabindex', '-1');
-    panels[i].style.display = 'none';
-  }
+    if (i === activeIdx) {
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        panels[i].style.display = 'block';
+    } else {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        panels[i].style.display = 'none';
+    }
 });
 
 // On tab click: update cookie and show correct panel
 // Also update ARIA
 // No content flash
-
 tabs.forEach((tab, i) => {
-  tab.addEventListener('click', () => {
-    tabs.forEach((t, j) => {
-      t.setAttribute('aria-selected', j === i ? 'true' : 'false');
-      t.setAttribute('tabindex', j === i ? '0' : '-1');
-      panels[j].style.display = j === i ? 'block' : 'none';
+    tab.addEventListener('click', () => {
+            tabs.forEach((t, j) => {
+            t.setAttribute('aria-selected', j === i ? 'true' : 'false');
+            t.setAttribute('tabindex', j === i ? '0' : '-1');
+            panels[j].style.display = j === i ? 'block' : 'none';
+        });
+        setCookie(cookieName, tab.id);
+        tab.focus();
+    });
+    tab.addEventListener('keydown', e => {
+        let idx = Array.prototype.indexOf.call(tabs, document.activeElement);
+        if (e.key === 'ArrowRight') {
+            tabs[(idx+1)%tabs.length].focus();
+        } else if (e.key === 'ArrowLeft') {
+            tabs[(idx-1+tabs.length)%tabs.length].focus();
+        }
     });
-    setCookie(cookieName, tab.id);
-    tab.focus();
-  });
-  tab.addEventListener('keydown', e => {
-    let idx = Array.prototype.indexOf.call(tabs, document.activeElement);
-    if (e.key === 'ArrowRight') {
-      tabs[(idx+1)%tabs.length].focus();
-    } else if (e.key === 'ArrowLeft') {
-      tabs[(idx-1+tabs.length)%tabs.length].focus();
-    }
-  });
 });
 </script>
-<?php unset($pages, $page, $pgs, $pg, $icon, $nchan, $running, $start, $stop, $row, $script, $opt, $nchan_run); ?> 
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 0fb7a996e..e8f253f2e 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -448,10 +448,11 @@ div.title {
     border-bottom: 1px solid var(--table-border-color);
     background-color: var(--title-header-background-color);
     letter-spacing: 1.8px;
-}
-div.title span.left {
     font-size: 1.4rem;
 }
+/* div.title span.left {
+    font-size: 1.4rem;
+} */
 div.title span.right {
     font-size: 1.4rem;
     padding-top: 2px;
@@ -1936,6 +1937,7 @@ span#wlan0 {
 
     div.title {
         color: var(--text-color);
+        font-size: 1.6rem;
         margin: 20px 0 10px 0;
         padding: 10px 0;
         clear: both;
@@ -1943,10 +1945,10 @@ span#wlan0 {
         border-bottom: 1px solid var(--border-color);
         letter-spacing: 1.8px;
     }
-    div.title span.left {
+    /* div.title span.left {
         font-size: 1.6rem;
         text-transform: uppercase;
-    }
+    } */
     div.title span.right {
         font-size: 1.6rem;
         padding-right: 10px;

From 648d9252ccc7ae5ecf141af33d4f0a30a2a74802 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 15:20:16 -0700
Subject: [PATCH 12/21] fix: update cookie handling in tab management

- Removed unused cookie helper functions from MainContentTabbed.php to streamline the code.
- Updated the tab management logic to ensure cookies are cleared when no cookie exists, aligning with the behavior of the initab function.
- Corrected the filename reference in MainContent.php from 'MainContentNotab.php' to 'MainContentNoTab.php' for consistency.
---
 .../DefaultPageLayout/HeadInlineJS.php        | 18 +-----------------
 .../include/DefaultPageLayout/MainContent.php |  2 +-
 .../DefaultPageLayout/MainContentTabbed.php   | 19 ++++++++-----------
 3 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
index f191553d6..798d1fac5 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
@@ -101,28 +101,12 @@ function refresh(top) {
   }
 }
 
-function initab(page) {
+function initab(page) { // @todo remove in the future
   $.removeCookie('one');
   $.removeCookie('tab');
   if (page != null) location.replace(page);
 }
 
-function settab(tab) {
-<?switch ($myPage['name']):?>
-<?case'Main':?>
-  $.cookie('tab',tab);
-<?if (_var($var,'fsState')=='Started'):?>
-  $.cookie('one','tab1');
-<?endif;?>
-<?break;?>
-<?case'Cache':case'Data':case'Device':case'Flash':case'Parity':?>
-  $.cookie('one',tab);
-<?break;?>
-<?default:?>
-  $.cookie('one',tab);
-<?endswitch;?>
-}
-
 function done(key) {
   var url = location.pathname.split('/');
   var path = '/'+url[1];
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
index e37d51073..ef14af62c 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
@@ -10,7 +10,7 @@ $display['tabs'] = isset($myPage['Tabs'])
     ? (strtolower($myPage['Tabs']) == 'true' ? 0 : 1)
     : $display['tabs'];
 $tabbed = $display['tabs'] == 0 && count($pages) > 1;
-$contentInclude = $tabbed ? 'MainContentTabbed.php' : 'MainContentNotab.php';
+$contentInclude = $tabbed ? 'MainContentTabbed.php' : 'MainContentNoTab.php';
 
 $defaultIcon = "<i class=\"icon-app PanelIcon\"></i>";
 function process_icon($icon, $docroot, $root) {
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
index 28c3aa879..d8a6fd81f 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabbed.php
@@ -53,15 +53,6 @@
 </div>
 
 <script>
-// Cookie helpers
-function getCookie(name) {
-    const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
-    return v ? v[2] : null;
-}
-function setCookie(name, value) {
-    document.cookie = name + '=' + value + '; path=/';
-}
-
 const tabs = document.querySelectorAll('.tabs [role="tab"]');
 const panels = document.querySelectorAll('[role="tabpanel"]');
 
@@ -91,11 +82,16 @@ switch ($myPage['name']) {
 
 // On load: select correct tab from cookie, or default to first
 let activeIdx = 0;
-const cookieVal = getCookie(cookieName);
+const cookieVal = $.cookie(cookieName);
 if (cookieVal) {
     const idx = Array.from(tabs).findIndex(tab => tab.id === cookieVal);
     if (idx !== -1) activeIdx = idx;
+} else {
+    // If no cookie exists, clear both cookies to match the origial initab function behavior
+    $.removeCookie('one');
+    $.removeCookie('tab');
 }
+
 tabs.forEach((tab, i) => {
     if (i === activeIdx) {
         tab.setAttribute('aria-selected', 'true');
@@ -111,6 +107,7 @@ tabs.forEach((tab, i) => {
 // On tab click: update cookie and show correct panel
 // Also update ARIA
 // No content flash
+
 tabs.forEach((tab, i) => {
     tab.addEventListener('click', () => {
             tabs.forEach((t, j) => {
@@ -118,7 +115,7 @@ tabs.forEach((tab, i) => {
             t.setAttribute('tabindex', j === i ? '0' : '-1');
             panels[j].style.display = j === i ? 'block' : 'none';
         });
-        setCookie(cookieName, tab.id);
+        $.cookie(cookieName, tab.id);
         tab.focus();
     });
     tab.addEventListener('keydown', e => {

From 27629ebd3b6b5aab38743d816f911f5ef6985efc Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 16:03:37 -0700
Subject: [PATCH 13/21] fix: correct typo in CSS positioning property

---
 emhttp/plugins/dynamix/styles/default-base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index e8f253f2e..7c553a632 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -358,7 +358,7 @@ textarea {
     border-bottom: 1px solid var(--input-border-color);
 }
 #header {
-    position: relaitve;
+    position: relative;
     z-index: 102 !important;
     display: -webkit-box;
     display: -ms-flexbox;

From 3457f5918acd291b6543be3156797aca2c56c9cb Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 16:09:13 -0700
Subject: [PATCH 14/21] fix: remove duplicate jQuery UI CSS reference from
 DefaultPageLayout.php

---
 emhttp/plugins/dynamix/include/DefaultPageLayout.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
index f31560a42..0bdf4ec2c 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
@@ -94,7 +94,6 @@ if (count($pages)) {
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-dynamix.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$theme}.css")?>">
 
 <style>

From 9eab318383c073e7d5b44c0fcb6466a494845af9 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 16:09:59 -0700
Subject: [PATCH 15/21] fix: add rel attribute to footer link for security
 enhancement

---
 emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
index ea762b60b..208dad74c 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -67,6 +67,7 @@ function getArrayStatus($var) {
                 class="footer-link"
                 href="https://docs.unraid.net/go/manual/"
                 target="_blank"
+                rel="noopener noreferrer"
                 title="<?=_('Online manual')?>"
             >
                 <i class="fa fa-book"></i> <?=_('manual')?>

From 5c134044927c230f58b78cfe5cd2b225048effe9 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 16:11:14 -0700
Subject: [PATCH 16/21] refactor: update content handling for non-tabbed layout

- Introduced a new file, MainContentTabless.php, which provides a non-tabbed content template for the Unraid web interface, rendering all pages in sequence without tabs.
---
 .../plugins/dynamix/include/DefaultPageLayout/MainContent.php   | 2 +-
 .../{MainContentNotab.php => MainContentTabless.php}            | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename emhttp/plugins/dynamix/include/DefaultPageLayout/{MainContentNotab.php => MainContentTabless.php} (100%)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
index ef14af62c..011ac94d2 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php
@@ -10,7 +10,7 @@ $display['tabs'] = isset($myPage['Tabs'])
     ? (strtolower($myPage['Tabs']) == 'true' ? 0 : 1)
     : $display['tabs'];
 $tabbed = $display['tabs'] == 0 && count($pages) > 1;
-$contentInclude = $tabbed ? 'MainContentTabbed.php' : 'MainContentNoTab.php';
+$contentInclude = $tabbed ? 'MainContentTabbed.php' : 'MainContentTabless.php';
 
 $defaultIcon = "<i class=\"icon-app PanelIcon\"></i>";
 function process_icon($icon, $docroot, $root) {
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabless.php
similarity index 100%
rename from emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentNotab.php
rename to emhttp/plugins/dynamix/include/DefaultPageLayout/MainContentTabless.php

From 02c1410e02199ef48bd4e83d7f9be30ef66e812b Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 16:13:46 -0700
Subject: [PATCH 17/21] fix: correct syntax error in presetBanner function

---
 emhttp/plugins/dynamix/DisplaySettings.page | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/DisplaySettings.page b/emhttp/plugins/dynamix/DisplaySettings.page
index 301b13e90..e017faeb8 100644
--- a/emhttp/plugins/dynamix/DisplaySettings.page
+++ b/emhttp/plugins/dynamix/DisplaySettings.page
@@ -55,7 +55,7 @@ function presetBanner(form) {
     $('.js-bannerSettings').hide();
   } else {
     $('.js-bannerSettings').show()
-  };
+  }
 }
 function presetRefresh(form) {
   for (var i=0,item; item=form.refresh.options[i]; i++) item.value *= -1;

From 98c5ef3a1932fcb07f321cf531056dfc56bea809 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 16:14:32 -0700
Subject: [PATCH 18/21] fix: add aria-live attribute to status bar for improved
 accessibility

---
 emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
index 208dad74c..213b7a7db 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -44,7 +44,7 @@ function getArrayStatus($var) {
 <footer id="footer">
     <div class="footer-left">
         <span id="statusraid">
-            <span id="statusbar">
+            <span id="statusbar" aria-live="polite">
                 <? $status = getArrayStatus($var); ?>
                 <span class="<?=$status['class']?> strong">
                     <i class="fa fa-<?=$status['icon']?>"></i> <?=$status['text']?>

From ad342e68b69f646afb0925cd9012c773448c94d1 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 16:15:45 -0700
Subject: [PATCH 19/21] refactor: improve scroll position handling in
 BodyInlineJS.php

- Changed the 'top' variable to use parseInt for better type handling.
- Updated the scrollTop logic for clarity and consistency.
---
 .../dynamix/include/DefaultPageLayout/BodyInlineJS.php      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index cc980995c..ae5f5eb67 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -283,8 +283,10 @@ $(function() {
       $(this).attr('onsubmit','clearTimeout(timers.flashReport);escapeQuotes(this);'+onsubmit);
     }
   });
-  var top = ($.cookie('top')||0);
-  if (top>0) {$('html,body').scrollTop(top);}
+  const top = parseInt($.cookie('top') || '0', 10);
+  if (top > 0) {
+    $('html, body').scrollTop(top);
+  }
   $.removeCookie('top');
   if ($.cookie('addAlert') != null) bannerAlert(addAlert.text,addAlert.cmd,addAlert.plg,addAlert.func);
 <?if ($safemode):?>

From 091675054e28d6173f46ee07d951985efb87e072 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 May 2025 15:54:43 -0700
Subject: [PATCH 20/21] refactor: shares, docker, and vm pages - move away from
 echoing full HTML

---
 .../dynamix.docker.manager/Docker.page        | 15 ++++++++-----
 emhttp/plugins/dynamix.vm.manager/VMs.page    | 19 +++++++++++-----
 emhttp/plugins/dynamix/Shares.page            | 22 ++++++++++++++-----
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/Docker.page b/emhttp/plugins/dynamix.docker.manager/Docker.page
index 1d20e958a..687baea8e 100644
--- a/emhttp/plugins/dynamix.docker.manager/Docker.page
+++ b/emhttp/plugins/dynamix.docker.manager/Docker.page
@@ -18,9 +18,14 @@ Cond="exec(\"grep -o '^DOCKER_ENABLED=.yes' /boot/config/docker.cfg 2>/dev/null\
  */
 ?>
 <?
-if ($var['fsState'] != 'Started') {
-  echo "<div class='notice shift'>_(Array must be **Started** to view Docker containers)_.</div>";
-} elseif (!is_file('/var/run/dockerd.pid') || (!is_dir('/proc/'.@file_get_contents('/var/run/dockerd.pid')))) {
-  echo "<div class='notice shift'>_(Docker Service failed to start)_.</div>";
-}
+  $noticeMessage = null;
+  if ($var['fsState'] != 'Started') {
+    $noticeMessage = _('Array must be **Started** to view Docker containers');
+  } elseif (!is_file('/var/run/dockerd.pid') || (!is_dir('/proc/'.@file_get_contents('/var/run/dockerd.pid')))) {
+    $noticeMessage = _('Docker Service failed to start');
+  }
 ?>
+
+<? if ($noticeMessage): ?>
+  <p class="notice"><?= $noticeMessage ?></p>
+<? endif; ?>
diff --git a/emhttp/plugins/dynamix.vm.manager/VMs.page b/emhttp/plugins/dynamix.vm.manager/VMs.page
index e7c76fc61..51528d0d0 100644
--- a/emhttp/plugins/dynamix.vm.manager/VMs.page
+++ b/emhttp/plugins/dynamix.vm.manager/VMs.page
@@ -18,10 +18,19 @@ Cond="exec(\"grep -o '^SERVICE=.enable' /boot/config/domain.cfg 2>/dev/null\")"
  */
 ?>
 <?
-if ($var['fsState'] != "Started") {
-  echo "<div class='notice shift'>"._('Array must be **started** to view Virtual Machines').".</div>";
-} elseif (!is_file('/var/run/libvirt/libvirtd.pid') || (!is_dir('/proc/'.@file_get_contents('/var/run/libvirt/libvirtd.pid')))) {
-  echo "<div class='notice shift'>"._('Libvirt Service failed to start').".</div>";
+  $noticeMessage = null;
+  if ($var['fsState'] != "Started") {
+    $noticeMessage = _('Array must be **started** to view Virtual Machines');
+  } elseif (!is_file('/var/run/libvirt/libvirtd.pid') || (!is_dir('/proc/'.@file_get_contents('/var/run/libvirt/libvirtd.pid')))) {
+    $noticeMessage = _('Libvirt Service failed to start');
+  }
+?>
+<? if ($noticeMessage): ?>
+  <p class="notice"><?= $noticeMessage ?></p>
+<? endif; ?>
+
+<?
+if (count($pages) == 2) {
+  $tabbed = false;
 }
-if (count($pages)==2) $tabbed = false;
 ?>
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/Shares.page b/emhttp/plugins/dynamix/Shares.page
index a8f148b2d..80c67d706 100644
--- a/emhttp/plugins/dynamix/Shares.page
+++ b/emhttp/plugins/dynamix/Shares.page
@@ -2,10 +2,20 @@ Menu="Tasks:2"
 Type="xmenu"
 Code="e92a"
 ---
-<?PHP
-if ($var['fsState']=="Stopped") {
-  echo "<p class='notice shift'>"._('Array must be **Started** to view Shares').".</p>";
-  return;
-}
-if (count($pages)==2) $tabbed = false;
+<?
+  $noticeMessage = null;
+  if ($var['fsState'] == "Stopped") {
+    $noticeMessage = _('Array must be **Started** to view Shares');
+  }
+?>
+
+<? if ($noticeMessage): ?>
+  <p class="notice"><?= $noticeMessage ?></p>
+  <? return; ?>
+<? endif; ?>
+
+<?
+if (count($pages) == 2) {
+  $tabbed = false;
+}
 ?>

From 3208c8c0f1542556841fb428edc5c310f2a48d26 Mon Sep 17 00:00:00 2001
From: SimonFair <39065407+SimonFair@users.noreply.github.com>
Date: Thu, 8 May 2025 16:51:14 +0100
Subject: [PATCH 21/21] Fix boot issue starting VM manager.

---
 sbin/qemu | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sbin/qemu b/sbin/qemu
index da3c4945f..79415243a 100755
--- a/sbin/qemu
+++ b/sbin/qemu
@@ -7,7 +7,7 @@ if [ $DISABLE == "yes" ]
     exit 1 ;
 fi 
 PCI="no"
-PCI=$(/usr/local/emhttp/plugins/dynamix.vm.manager/scripts/pcicheck.php "$@");
+#PCI=$(/usr/local/emhttp/plugins/dynamix.vm.manager/scripts/pcicheck.php "$@");
 if [ $PCI == "yes" ]
     then 
     printf '\n%s\n' "Start/autostart is disabled PCI Change detected." >&2 ## Send message to stderr.