From 0a996ac5c77d2a3b29eaf711324228c937c52be5 Mon Sep 17 00:00:00 2001
From: bergware <bergware@users.noreply.github.com>
Date: Thu, 3 Apr 2025 23:24:26 +0200
Subject: [PATCH 01/36] Wireless fixes

- Allow connection to hidden networks
- Set automatic as default choice for manual input
---
 emhttp/plugins/dynamix/include/Wireless.php | 2 +-
 etc/rc.d/rc.wireless                        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/include/Wireless.php b/emhttp/plugins/dynamix/include/Wireless.php
index 747b7c76d..13032e258 100644
--- a/emhttp/plugins/dynamix/include/Wireless.php
+++ b/emhttp/plugins/dynamix/include/Wireless.php
@@ -185,8 +185,8 @@ case 'join':
   }
   if ($manual || $safe) {
     echo "<tr><td>"._('Security')."</td><td><select name=\"SECURITY\" onclick=\"showSecurity(this.value)\">";
-    echo mk_option($safe, 'open', _('None'));
     echo mk_option($safe, 'auto', _('Automatic'));
+    echo mk_option($safe, 'open', _('None'));
     echo mk_option($safe, 'PSK', _('WPA2'));
     echo mk_option($safe, 'PSK SAE', _('WPA2/WPA3'));
     echo mk_option($safe, 'SAE', _('WPA3'));
diff --git a/etc/rc.d/rc.wireless b/etc/rc.d/rc.wireless
index f1516316c..2a19d65ee 100755
--- a/etc/rc.d/rc.wireless
+++ b/etc/rc.d/rc.wireless
@@ -147,6 +147,7 @@ wpa_configuration(){
   [[ -z $2 && -n $CC ]] && echo "country=${CC,,}" >>$WPA
   echo "network={" >>$WPA
   echo "ssid=\"$SSID\"" >>$WPA
+  echo "scan_ssid=1" >>$WPA
   [[ $1 == "PSK" ]] && echo "key_mgmt=WPA-PSK" >>$WPA
   [[ $1 == "SAE" ]] && echo "key_mgmt=SAE" >>$WPA
   [[ $1 =~ "IEEE" && $1 != "IEEE 802.1X/SHA-256" ]] && echo "key_mgmt=WPA-EAP" >>$WPA

From da7e6387463c4810182b13d241ed093784805828 Mon Sep 17 00:00:00 2001
From: bergware <bergware@users.noreply.github.com>
Date: Fri, 4 Apr 2025 00:16:56 +0200
Subject: [PATCH 02/36] Wireless: fix list stays empty

---
 emhttp/plugins/dynamix/include/Wireless.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/Wireless.php b/emhttp/plugins/dynamix/include/Wireless.php
index 13032e258..1dabe0757 100644
--- a/emhttp/plugins/dynamix/include/Wireless.php
+++ b/emhttp/plugins/dynamix/include/Wireless.php
@@ -48,7 +48,7 @@ function scanWifi($port) {
       // store MAC address only
       $wlan[$network][0] = substr($wlan[$network][0],4,17);
       // identify open network
-      $wlan[$network][4] = $wlan[$network][4] ?: 'open';
+      $wlan[$network][4] = $wlan[$network][4] ?? 'open';
     } else {
       // group radio frequencies
       $wlan[$network][1] .= ' '.$attr[1];
@@ -84,7 +84,7 @@ case 'list':
   $title = _('Connect to WiFi network');
   $port  = array_key_first($wifi);
   $carrier = "/sys/class/net/$port/carrier";
-  $echo  = [];
+  $echo  = $wlan = [];
   foreach ($wifi as $network => $block) {
     if ($network == $port) continue;
     $wlan[$network][0] = $block['ATTR1'] ?? '';

From 33132c6c036baef65bea6594c43cf849517308a9 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 2 Apr 2025 17:40:08 -0700
Subject: [PATCH 03/36] fix: remove line-height from VMTemplates.css

---
 emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css b/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css
index 1c300ed3d..f78ed5732 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css
+++ b/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css
@@ -33,7 +33,6 @@
 .vmtemplate p {
     text-align: center;
     margin-top: 8px;
-    line-height: 12px;
 }
 
 div.template,

From 97398aa862bfae0630f1a6c6a231d5d30490c8b6 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 2 Apr 2025 18:05:58 -0700
Subject: [PATCH 04/36] fix: enhance AddVM.css with hover effects and layout
 adjustments for image chooser

---
 .../dynamix.vm.manager/sheets/AddVM.css       | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css b/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
index b86c887c1..3b53faec9 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
+++ b/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
@@ -142,17 +142,30 @@ span.advancedview_panel {
 .template_img_chooser_inner {
     display: inline-block;
     width: 80px;
-    margin-bottom: 15px;
-    margin-right: 10px;
     text-align: center;
 }
+.template_img_chooser_inner:hover {
+    color: var(--orange-400);
+    cursor: pointer;
+}
 .template_img_chooser_inner img {
     width: 48px;
     height: 48px;
 }
 .template_img_chooser_inner p {
     text-align: center;
-    line-height: 8px;
+    margin: 0;
+}
+.template_img_parent {
+    position: relative;
+}
+#template_img_chooser_outer {
+    position: absolute;
+    display: none;
+    border-radius: 5px;
+    border: 1px solid var(--gray-150);
+    background: var(--add-vm-background);
+    z-index: 10;
 }
 #template_img_chooser {
     width: 560px;
@@ -161,10 +174,7 @@ span.advancedview_panel {
     position: relative;
     display:grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-#template_img_chooser div:hover {
-    background-color: var(--gray-150); /* Condensed from: #eee */
-    cursor: pointer;
+    gap: 1rem;
 }
 #form_content {
     display: none;

From e66406d1aee9e9fc7b2759e72d294b23cc671731 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 2 Apr 2025 18:06:48 -0700
Subject: [PATCH 05/36] fix: update AddVM.css to use custom border variable for
 consistency

---
 emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css b/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
index 3b53faec9..f9b585ec4 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
+++ b/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
@@ -1,5 +1,6 @@
 :root {
     --add-vm-background: var(--black);
+    --add-vm-border: var(--gray-150);
 }
 
 .Theme--azure:root,
@@ -163,7 +164,7 @@ span.advancedview_panel {
     position: absolute;
     display: none;
     border-radius: 5px;
-    border: 1px solid var(--gray-150);
+    border: 1px solid var(--add-vm-border);
     background: var(--add-vm-background);
     z-index: 10;
 }

From e61b1cd588a31ff292766a1d02fe4084e9063e96 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 2 Apr 2025 18:07:28 -0700
Subject: [PATCH 06/36] fix: remove unnecessary negative margin from domain
 class in default-base.css, prevents azure/gray overlap w/ page title

---
 emhttp/plugins/dynamix/styles/default-base.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 006bad971..f9d1b3773 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -1260,9 +1260,6 @@ div .unraid_mark_8 {
 div.spinner .unraid_mark_7 {
     animation: mark_7 1.5s ease infinite;
 }
-div.domain {
-    margin-top: -20px;
-}
 @keyframes mark_2 {
     50% {
         transform: translateY(-40px);

From 855508edb67ba220190abd353186c7c37cb724b5 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 2 Apr 2025 18:15:29 -0700
Subject: [PATCH 07/36] fix: restore hover effect for VM templates in
 default-base.css and update opac-background-color variable in azure.css

---
 emhttp/plugins/dynamix/styles/default-base.css | 6 +++---
 emhttp/plugins/dynamix/styles/themes/azure.css | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index f9d1b3773..945dd0510 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -2157,14 +2157,14 @@ span#wlan0 {
         display: block;
         clear: both;
     }
-    div.vmtemplate:hover {
-        background-color: var(--opac-background-color);
-    }
     div.vmtemplate {
         height: 12rem;
         width: 12rem;
         border: 1px solid var(--table-alt-border-color);
     }
+    div.vmtemplate:hover {
+        background-color: var(--opac-background-color);
+    }
     div.vmtemplate img {
         margin-top: 20px;
     }
diff --git a/emhttp/plugins/dynamix/styles/themes/azure.css b/emhttp/plugins/dynamix/styles/themes/azure.css
index 76becf6aa..aa356bf33 100644
--- a/emhttp/plugins/dynamix/styles/themes/azure.css
+++ b/emhttp/plugins/dynamix/styles/themes/azure.css
@@ -24,7 +24,7 @@
 
     --background-color: var(--gray-150); /* Originally #e4e2e4 */
     --alt-background-color: var(--gray-700); /* Originally #383a34 */
-    --opac-background-color: var(--gray-895);
+    --opac-background-color: var(--white-opacity-80);
     --mild-background-color: var(--theme-azure--gray-150);
     --usage-bar-background-color: var(--theme-azure--cyan-400);
     --usage-disk-background-color: var(--theme-azure--gray-150);

From dc1a9759ef775690f2e320792607902459243dc0 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 13:48:33 -0700
Subject: [PATCH 08/36] fix: update Boot.php to enhance theme handling and
 improve status display elements

---
 emhttp/plugins/dynamix/include/Boot.php | 52 ++++++++++++++++++-------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/Boot.php b/emhttp/plugins/dynamix/include/Boot.php
index d3dfdb900..278f9928d 100644
--- a/emhttp/plugins/dynamix/include/Boot.php
+++ b/emhttp/plugins/dynamix/include/Boot.php
@@ -20,9 +20,20 @@ $_SERVER['REQUEST_URI'] = '';
 require_once "$docroot/webGui/include/Translations.php";
 
 $var = parse_ini_file("/var/local/emhttp/var.ini");
+
+/**
+ * Just like DefaultPageLayout.php
+ */
+$theme   = strtok($display['theme'],'-');
+$themes1 = in_array($theme,['black','white']);
+$themes2 = in_array($theme,['gray','azure']);
+$themeHtmlClass = "Theme--$theme";
+if ($themes2) {
+  $themeHtmlClass .= " Theme--sidebar";
+}
 ?>
 <!DOCTYPE HTML>
-<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>">
+<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>" class="<?= $themeHtmlClass ?>">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -35,11 +46,22 @@ $var = parse_ini_file("/var/local/emhttp/var.ini");
 
 <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-{$display['theme']}.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
 
 <style>
-.notice{background-image:none;color:#e68a00;font-size:6rem;text-transform:uppercase;text-align:center;padding:4rem 0}
-.sub1,.sub2{margin:6rem 0;text-align:center;font-size:3rem}
+.boot-title {
+  background-image: none;
+  color: var(--orange-300);
+  font-size: 6rem;
+  text-transform: uppercase;
+  text-align: center;
+  padding: 4rem 0;
+}
+.boot-subtext {
+  margin: 6rem 0;
+  text-align: center;
+  font-size: 3rem;
+}
 </style>
 
 <script src="<?autov('/webGui/javascript/dynamix.js')?>"></script>
@@ -65,7 +87,7 @@ boot.on('message', function(msg) {
     default          : var status = "<span class='orange'>"+_('Array '+ini['fsState'])+"</span>";
   }
   status += ini['fsProgress'] ? "<br><span class='blue'>"+_(ini['fsProgress'])+"</span>" : "<br>&nbsp;";
-  $('.sub1').html(status);
+  $('.js-arrayStatus').html(status);
 });
 
 function parseINI(msg) {
@@ -102,19 +124,19 @@ function timer() {
   return Math.round((now.getTime()-start.getTime())/1000);
 }
 function reboot_now() {
-  $('.notice').html("<?=_('Reboot')?> - <?=gethostname()?>");
+  $('.js-bootTitle').html("<?=_('Reboot')?> - <?=gethostname()?>");
   boot.start();
   reboot_online();
 }
 function shutdown_now() {
-  $('.notice').html("<?=_('Shutdown')?> - <?=gethostname()?>");
+  $('.js-bootTitle').html("<?=_('Shutdown')?> - <?=gethostname()?>");
   boot.start();
   shutdown_online();
 }
 function reboot_online() {
   $.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
   .done(function(){
-    $('.sub2').html("<?=_('System is going down')?>... "+timer());
+    $('.js-powerStatus').html("<?=_('System is going down')?>... "+timer());
     setTimeout(reboot_online,500);
   })
   .fail(function(){start=new Date(); setTimeout(reboot_offline,500);});
@@ -123,14 +145,14 @@ function reboot_offline() {
   $.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
   .done(function(){location = '/Main';})
   .fail(function(){
-    $('.sub2').html("<?=_('System is rebooting')?>... "+timer());
+    $('.js-powerStatus').html("<?=_('System is rebooting')?>... "+timer());
     setTimeout(reboot_offline,500);
   });
 }
 function shutdown_online() {
   $.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
   .done(function(){
-    $('.sub2').html("<?=_('System is going down')?>... "+timer());
+    $('.js-powerStatus').html("<?=_('System is going down')?>... "+timer());
     setTimeout(shutdown_online,500);
   })
   .fail(function(){start=new Date(); setTimeout(shutdown_offline,500);});
@@ -138,10 +160,10 @@ function shutdown_online() {
 function shutdown_offline() {
   var time = timer();
   if (time < 30) {
-    $('.sub2').html("<?=_('System is offline')?>... "+time);
+    $('.js-powerStatus').html("<?=_('System is offline')?>... "+time);
     setTimeout(shutdown_offline,500);
   } else {
-    $('.sub2').html("<?=_('System is powered off')?>...");
+    $('.js-powerStatus').html("<?=_('System is powered off')?>...");
     setTimeout(power_on,500);
   }
 }
@@ -177,8 +199,8 @@ case 'shutdown':
   exec('/sbin/poweroff -n');
   break;
 }
-echo '<div class="notice"></div>';
-echo '<div class="sub1">';
+echo '<div class="js-bootTitle boot-title"></div>';
+echo '<div class="js-arrayStatus boot-subtext">';
 switch (_var($var,'fsState')) {
 case 'Stopped':
   echo "<span class='red'>",_('Array Stopped'),"</span>$progress"; break;
@@ -190,7 +212,7 @@ default:
   echo "<span class='green'>",_('Array Started'),"</span>$progress"; break;
 }
 echo '</div>';
-echo '<div class="sub2"></div>';
+echo '<div class="js-powerStatus boot-subtext"></div>';
 echo '</body>';
 }else{
 ?>

From c2738a17861bed34bd1e82aab48f14eec1897848 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 13:48:47 -0700
Subject: [PATCH 09/36] fix: streamline VMTemplates.page by removing duplicate
 stylesheet and script links, improving load efficiency

---
 .../dynamix.vm.manager/VMTemplates.page        | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/emhttp/plugins/dynamix.vm.manager/VMTemplates.page b/emhttp/plugins/dynamix.vm.manager/VMTemplates.page
index e1e44ceac..011266462 100644
--- a/emhttp/plugins/dynamix.vm.manager/VMTemplates.page
+++ b/emhttp/plugins/dynamix.vm.manager/VMTemplates.page
@@ -16,6 +16,14 @@ Markdown="false"
  * all copies or substantial portions of the Software.
  */
 ?>
+<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
+
+<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
+<script src="<?autov('/plugins/dynamix.vm.manager/javascript/dynamix.vm.manager.js')?>"></script>
+<script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>
+<script src="<?autov('/webGui/javascript/jquery.filetree.js')?>" charset="utf-8"></script>
 <?
 	$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
 	require_once "$docroot/plugins/dynamix.vm.manager/include/libvirt_helpers.php";
@@ -37,16 +45,6 @@ Markdown="false"
 	}
 	if (strpos($strName,"User-") === false) $user = ""; else $user = ' class="user"'; 
 ?>
-
-<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
-
-<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
-<script src="<?autov('/plugins/dynamix.vm.manager/javascript/dynamix.vm.manager.js')?>"></script>
-<script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>
-<script src="<?autov('/webGui/javascript/jquery.filetree.js')?>" charset="utf-8"></script>
-
 <div class="vmtemplate">
 	<a href="/VMs/AddVM?template=<?=htmlspecialchars(urlencode($strName))?>">
 		<span name="<?=htmlspecialchars($strName)?>" <?=$user?>><img src="/plugins/dynamix.vm.manager/templates/images/<?=htmlspecialchars($arrTemplate['icon'])?>" title="<?=htmlspecialchars($strName)?>"></span>

From 9289df5e681a173d08bce04091c48a36b12e5010 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 14:43:48 -0700
Subject: [PATCH 10/36] fix: comment out .fileTree styles across multiple CSS
 files to streamline layout and prevent conflicts

---
 .../dynamix.docker.manager/sheets/AddContainer.css     |  9 ++-------
 .../dynamix.docker.manager/sheets/DockerSettings.css   | 10 ++--------
 .../dynamix.docker.manager/sheets/UpdateContainer.css  |  9 ++-------
 emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css     |  4 ++++
 .../plugins/dynamix.vm.manager/sheets/VMMachines.css   | 10 ++--------
 .../plugins/dynamix.vm.manager/sheets/VMSettings.css   | 10 ++--------
 .../plugins/dynamix.vm.manager/sheets/VMTemplates.css  | 10 ++--------
 emhttp/plugins/dynamix/sheets/BrowseButton.css         | 10 ++--------
 emhttp/plugins/dynamix/styles/default-dynamix.css      |  7 +++++++
 emhttp/plugins/dynamix/styles/themes/black.css         |  3 ++-
 emhttp/plugins/dynamix/styles/themes/gray.css          |  2 ++
 11 files changed, 29 insertions(+), 55 deletions(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/sheets/AddContainer.css b/emhttp/plugins/dynamix.docker.manager/sheets/AddContainer.css
index 18095486f..21d425290 100644
--- a/emhttp/plugins/dynamix.docker.manager/sheets/AddContainer.css
+++ b/emhttp/plugins/dynamix.docker.manager/sheets/AddContainer.css
@@ -66,12 +66,7 @@ div#configLocation dt {
     --add-container-file-tree-background: var(--gray-100);
 }
 
-.fileTree {
+/* .fileTree {
     width: 240px;
     max-height: 200px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    display: none;
-    background: var(--add-container-file-tree-background);
-}
+} */
diff --git a/emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings.css b/emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings.css
index 636329602..e9b30701f 100644
--- a/emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings.css
+++ b/emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings.css
@@ -75,16 +75,10 @@ span.nonexist {
     margin-left: 20px;
 }
 
-.fileTree {
-    background: var(--docker-settings-file-tree-background);
+/* .fileTree {
     width: 300px;
     max-height: 150px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    z-index: 100;
-    display: none;
-}
+} */
 span.disabled {
     color: var(--docker-settings-span-disabled-color);
 }
diff --git a/emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer.css b/emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer.css
index 3e7a8efdf..836c822bb 100644
--- a/emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer.css
+++ b/emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer.css
@@ -66,12 +66,7 @@ div#configLocation dt {
     margin-top: -0.18rem !important;
 }
 
-.fileTree {
+/* .fileTree {
     width: 240px;
     max-height: 200px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    display: none;
-    background: var(--update-container-file-tree-background);
-}
+} */
diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css b/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
index f9b585ec4..ad897e805 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
+++ b/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
@@ -305,3 +305,7 @@ input.second {
 .CodeMirror pre.CodeMirror-placeholder {
     color: var(--gray-400);
 }
+
+.fileTree {
+    position: relative;
+}
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/VMMachines.css b/emhttp/plugins/dynamix.vm.manager/sheets/VMMachines.css
index 045a4cedb..5d107af86 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/VMMachines.css
+++ b/emhttp/plugins/dynamix.vm.manager/sheets/VMMachines.css
@@ -128,13 +128,7 @@ span.vmgraphics {
     text-align: left;
 }
 
-.fileTree {
-    background: var(--vm-machines-file-tree-background);
+/* .fileTree {
     width: 500px;
     max-height: 320px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    z-index: 100;
-    display: none;
-}
+} */
diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css b/emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css
index f02419b9a..a3d717f8e 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css
+++ b/emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css
@@ -57,13 +57,7 @@ body {
     font-family: clear-sans;
 }
 
-.fileTree {
-    background: var(--vm-machines-file-tree-background);
+/* .fileTree {
     width: 300px;
     max-height: 150px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    z-index: 100;
-    display: none;
-}
+} */
diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css b/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css
index f78ed5732..886d03883 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css
+++ b/emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css
@@ -41,13 +41,7 @@ input#upload {
     display: none;
 }
 
-.fileTree {
-    background: var(--filetree-background);
+/* .fileTree {
     width: 300px;
     max-height: 150px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    z-index: 100;
-    display: none;
-}
+} */
diff --git a/emhttp/plugins/dynamix/sheets/BrowseButton.css b/emhttp/plugins/dynamix/sheets/BrowseButton.css
index 0053e1e11..22c1326ed 100644
--- a/emhttp/plugins/dynamix/sheets/BrowseButton.css
+++ b/emhttp/plugins/dynamix/sheets/BrowseButton.css
@@ -200,16 +200,10 @@ input#dfm_target {
     color: var(--input-dfm-target-text-color);
     width: 500px;
 }
-input#dfm_target + .fileTree {
-    background: var(--input-dfm-target-filetree-bg-color);
+/* .fileTree {
     width: 500px;
     max-height: 320px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    z-index: 100;
-    display: none;
-}
+} */
 i.dfm_filter {
     margin-top: -2px;
 }
diff --git a/emhttp/plugins/dynamix/styles/default-dynamix.css b/emhttp/plugins/dynamix/styles/default-dynamix.css
index 7efb189d9..9154115b1 100644
--- a/emhttp/plugins/dynamix/styles/default-dynamix.css
+++ b/emhttp/plugins/dynamix/styles/default-dynamix.css
@@ -1450,6 +1450,13 @@ div.icon-zip {
     border-left: 3px solid var(--dynamix-tooltipster-sidetip-box-border-color);
 }
 .fileTree {
+    display: none;
+    width: 300px;
+    max-height: 300px;
+    position: absolute;
+    z-index: 100;
+    overflow-y: scroll;
+    overflow-x: hidden;
     background-color: var(--dynamix-filetree-bg-color);
 }
 #guiSearchBox:placeholder-shown {
diff --git a/emhttp/plugins/dynamix/styles/themes/black.css b/emhttp/plugins/dynamix/styles/themes/black.css
index c54e07437..5dbe5c11c 100644
--- a/emhttp/plugins/dynamix/styles/themes/black.css
+++ b/emhttp/plugins/dynamix/styles/themes/black.css
@@ -72,5 +72,6 @@
     --focus-input-bg-color: var(--mild-background-color);
     /* /End vars used in default-base */
 
-    /* dynamix CSS var values set in base-dynamix.css */
+    /* dynamix CSS var values set in default-dynamix.css */
+    --dynamix-filetree-bg-color: var(--gray-900);
 }
diff --git a/emhttp/plugins/dynamix/styles/themes/gray.css b/emhttp/plugins/dynamix/styles/themes/gray.css
index c6f53b9d8..8953b13c2 100644
--- a/emhttp/plugins/dynamix/styles/themes/gray.css
+++ b/emhttp/plugins/dynamix/styles/themes/gray.css
@@ -84,6 +84,8 @@
     /* /End vars used in default-base */
 
     /* Set vars for default-dynamix */
+    --dynamix-filetree-bg-color: var(--gray-900);
+
     --dynamix-ui-dropdownchecklist-color: var(--theme-gray--cyan-300);
     --dynamix-ui-dropdownchecklist-color-alt1: var(--gray-900);
     --dynamix-ui-dropdownchecklist-dropcontainer-border-color: var(--blue-700);

From d6f30cd9020942459224235fb2c31d04e26bd4b8 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 15:10:13 -0700
Subject: [PATCH 11/36] refactor: create edit.css for both UpdateVM.page &
 AddVM.page removing duplicated styles

---
 .../dynamix.vm.manager/include/VMedit.php     |   3 +-
 .../dynamix.vm.manager/sheets/UpdateVM.css    | 296 ------------------
 .../{sheets/AddVM.css => styles/edit.css}     |  16 +-
 3 files changed, 10 insertions(+), 305 deletions(-)
 delete mode 100644 emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM.css
 rename emhttp/plugins/dynamix.vm.manager/{sheets/AddVM.css => styles/edit.css} (97%)

diff --git a/emhttp/plugins/dynamix.vm.manager/include/VMedit.php b/emhttp/plugins/dynamix.vm.manager/include/VMedit.php
index cd0768870..c9f98d653 100644
--- a/emhttp/plugins/dynamix.vm.manager/include/VMedit.php
+++ b/emhttp/plugins/dynamix.vm.manager/include/VMedit.php
@@ -100,9 +100,10 @@ if (strpos($strSelectedTemplate,"User-") !== false) {
 	$usertemplate = 1;
 }
 ?>
-<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.filetree.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
+<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
+<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/edit.css')?>">
 
 <span class="status advancedview_panel" style="margin-top:<?=$top?>px;"><input type="checkbox" class="inlineview"><input type="checkbox" class="advancedview"></span>
 <div class="domain">
diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM.css b/emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM.css
deleted file mode 100644
index b86c887c1..000000000
--- a/emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM.css
+++ /dev/null
@@ -1,296 +0,0 @@
-:root {
-    --add-vm-background: var(--black);
-}
-
-.Theme--azure:root,
-.Theme--white:root {
-    --add-vm-background: var(--gray-100);
-}
-
-body {
-    -webkit-overflow-scrolling: touch;
-}
-#vmform table {
-    margin-top: 0;
-    table-layout: fixed;
-}
-#vmform div.title + table {
-    margin-top: 0;
-}
-#vmform table tr {
-    vertical-align: top;
-    line-height: 4rem;
-    height: 4rem;
-}
-#vmform table tr td:nth-child(1) {
-    width: 25%;
-    text-align: right;
-    padding-right: 10px;
-}
-#vmform table tr td:nth-child(2) {
-    width: 800px;
-}
-@media (max-width: 1280px) {
-    #vmform table tr td:first-child {
-        width: 35%;
-        padding-right: 4rem;
-    }
-}
-@media (min-width: 1281px) {
-    #vmform table tr td:first-child {
-        width: 30%;
-        padding-right: 4rem;
-    }
-}
-@media (min-width: 1921px) {
-    #vmform table tr td:first-child {
-        width: 25%;
-        padding-right: 4rem;
-    }
-}
-#vmform table tr td:last-child {
-    width: inherit;
-}
-
-#vmform textarea{
-    max-width:500px;
-    scrollbar-width:4px;
-}
-
-#vmform textarea::-webkit-scrollbar{
-    height:4px;
-    width:4px;
-}
-
-#vmform .multiple {
-    position: relative;
-}
-#vmform .sectionbutton {
-    position: absolute;
-    left: 2px;
-    cursor: pointer;
-    opacity: 0.4;
-    font-size: 1.4rem;
-    line-height: 17px;
-    z-index: 10;
-    transition-property: opacity, left;
-    transition-duration: 0.1s;
-    transition-timing-function: linear;
-}
-#vmform .sectionbutton.remove {
-    top: 0;
-    opacity: 0.3;
-}
-#vmform .sectionbutton.add {
-    bottom: 0;
-}
-#vmform .sectionbutton:hover {
-    opacity: 1;
-}
-#vmform .sectiontab {
-    position: absolute;
-    top: 2px;
-    bottom: 2px;
-    left: 0;
-    width: 6px;
-    border-radius: 3px;
-    background-color: var(--gray-200); /* Condensed from: #dddddd */
-    transition-property: background, width;
-    transition-duration: 0.1s;
-    transition-timing-function: linear;
-}
-#vmform .multiple:hover .sectionbutton {
-    opacity: 0.7;
-    left: 4px;
-}
-#vmform .multiple:hover .sectionbutton.remove {
-    opacity: 0.6;
-}
-#vmform .multiple:hover .sectiontab {
-    background-color: var(--gray-300);
-    width: 8px;
-}
-#vmform table.multiple:hover {
-    background-position: 0 0;
-}
-#vmform table.multiple td {
-    padding: 5px 0;
-}
-span.advancedview_panel {
-    display: none;
-    line-height: 16px;
-    margin-top: 1px;
-}
-.basic {
-    display: none;
-}
-.advanced {
-    /*Empty placeholder*/
-}
-.switch-button-label.off {
-    color: inherit;
-}
-#template_img {
-    cursor: pointer;
-}
-#template_img:hover {
-    opacity: 0.5;
-}
-#template_img:hover i {
-    opacity: 1;
-}
-.template_img_chooser_inner {
-    display: inline-block;
-    width: 80px;
-    margin-bottom: 15px;
-    margin-right: 10px;
-    text-align: center;
-}
-.template_img_chooser_inner img {
-    width: 48px;
-    height: 48px;
-}
-.template_img_chooser_inner p {
-    text-align: center;
-    line-height: 8px;
-}
-#template_img_chooser {
-    width: 560px;
-    height: 300px;
-    overflow-y: scroll;
-    position: relative;
-    display:grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-#template_img_chooser div:hover {
-    background-color: var(--gray-150); /* Condensed from: #eee */
-    cursor: pointer;
-}
-#form_content {
-    display: none;
-}
-#vmform .four {
-    overflow: hidden;
-}
-#vmform .four label {
-    float: left;
-    display: table-cell;
-    width: 15%;
-}
-#vmform .four label:nth-child(4n + 4) {
-}
-#vmform .four label.cpu1 {
-    width: 28%;
-    height: 16px;
-    line-height: 16px;
-}
-#vmform .four label.cpu2 {
-    width: 3%;
-    height: 16px;
-    line-height: 16px;
-}
-#vmform .mac_generate {
-    cursor: pointer;
-    margin-left: -5px;
-    color: var(--blue-700); /* Condensed from: #08c */
-    font-size: 1.3rem;
-    transform: translate(0px, 2px);
-}
-#vmform .disk {
-    display: none;
-}
-#vmform .disk_preview {
-    display: inline-block;
-    color: var(--gray-300); /* Condensed from: #bbb */
-    transform: translate(0px, 1px);
-}
-i.fa-plus-circle,
-i.fa-minus-circle {
-    margin-left: 8px;
-}
-input[type="checkbox"] {
-    margin-left: 0;
-}
-
-span.width {
-    display: inline-block;
-    width: 280px;
-}
-
-span.column1 {
-    display: inline-block;
-    width: 140px;
-}
-
-span.column2 {
-    display: inline-block;
-    width: 220px;
-}
-
-input#btnvCPUSelect,
-input.wlan0_info {
-    font-size: 1rem;
-    padding: 5px 10px;
-    margin: 0 0 0 10px;
-}
-
-span.space {
-    display: inline-block;
-    width: 60px;
-}
-
-span.label {
-    display: inline-block;
-    width: 110px;
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-span.ipvtap {
-    margin-left: 25px;
-    font-family: bitstream;
-}
-
-select.narrow {
-    min-width: 90px !important;
-}
-
-select.second {
-    margin-left: 12px;
-    max-width: 90px;
-    margin-right: 0;
-}
-
-div.wlan0 {
-    text-align: left;
-}
-
-input.trim {
-    width: 98px;
-    min-width: 98px;
-}
-
-input.second {
-    margin-left: 8px;
-}
-
-.autostart ~ .switch-button-background {
-    margin-top: 8px !important;
-    margin-left: 0 !important;
-}
-
-.hidden {
-    display: none !important;
-}
-
-.CodeMirror {
-    border: 1px solid var(--gray-150);
-    cursor: text;
-    margin-top: 15px;
-    margin-bottom: 10px;
-}
-
-.CodeMirror pre.CodeMirror-placeholder {
-    color: var(--gray-400);
-}
diff --git a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css b/emhttp/plugins/dynamix.vm.manager/styles/edit.css
similarity index 97%
rename from emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
rename to emhttp/plugins/dynamix.vm.manager/styles/edit.css
index ad897e805..2e942b58d 100644
--- a/emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css
+++ b/emhttp/plugins/dynamix.vm.manager/styles/edit.css
@@ -53,14 +53,14 @@ body {
     width: inherit;
 }
 
-#vmform textarea{
-    max-width:500px;
-    scrollbar-width:4px;
+#vmform textarea {
+    max-width: 500px;
+    scrollbar-width: 4px;
 }
 
-#vmform textarea::-webkit-scrollbar{
-    height:4px;
-    width:4px;
+#vmform textarea::-webkit-scrollbar {
+    height: 4px;
+    width: 4px;
 }
 
 #vmform .multiple {
@@ -173,7 +173,7 @@ span.advancedview_panel {
     height: 300px;
     overflow-y: scroll;
     position: relative;
-    display:grid;
+    display: grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: 1rem;
 }
@@ -308,4 +308,4 @@ input.second {
 
 .fileTree {
     position: relative;
-}
\ No newline at end of file
+}

From f73f786a7bbff651f071528b45a5d9a188e7c36e Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 15:49:07 -0700
Subject: [PATCH 12/36] fix: enhance jGrowl notification styles in
 default-dynamix.css by adding box-shadow for better visibility

---
 .../dynamix/styles/default-dynamix.css        | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-dynamix.css b/emhttp/plugins/dynamix/styles/default-dynamix.css
index 9154115b1..45d9a3417 100644
--- a/emhttp/plugins/dynamix/styles/default-dynamix.css
+++ b/emhttp/plugins/dynamix/styles/default-dynamix.css
@@ -119,26 +119,6 @@
     margin-left: auto;
     margin-right: auto;
 }
-.jGrowl-notification.alert {
-    color: var(--dynamix-jgrowl-alert-text-color);
-    background-color: var(--dynamix-jgrowl-alert-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-alert-border-color);
-}
-.jGrowl-notification.warning {
-    color: var(--dynamix-jgrowl-warning-text-color);
-    background-color: var(--dynamix-jgrowl-warning-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-warning-border-color);
-}
-.jGrowl-notification.normal {
-    color: var(--dynamix-jgrowl-normal-text-color);
-    background-color: var(--dynamix-jgrowl-normal-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-normal-border-color);
-}
-.jGrowl-notification.default {
-    color: var(--dynamix-jgrowl-text-color);
-    background-color: var(--dynamix-jgrowl-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-border-color);
-}
 .jGrowl-notification {
     opacity: 0.96;
     min-height: 1.2rem;
@@ -147,6 +127,29 @@
     margin: 5px 0;
     text-align: left;
     border-radius: 6px;
+}
+.jGrowl-notification.alert {
+    color: var(--dynamix-jgrowl-alert-text-color);
+    background-color: var(--dynamix-jgrowl-alert-bg-color);
+    border: 1px solid var(--dynamix-jgrowl-alert-border-color);
+    box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+}
+.jGrowl-notification.warning {
+    color: var(--dynamix-jgrowl-warning-text-color);
+    background-color: var(--dynamix-jgrowl-warning-bg-color);
+    border: 1px solid var(--dynamix-jgrowl-warning-border-color);
+    box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+}
+.jGrowl-notification.normal {
+    color: var(--dynamix-jgrowl-normal-text-color);
+    background-color: var(--dynamix-jgrowl-normal-bg-color);
+    border: 1px solid var(--dynamix-jgrowl-normal-border-color);
+    box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+}
+.jGrowl-notification.default {
+    color: var(--dynamix-jgrowl-text-color);
+    background-color: var(--dynamix-jgrowl-bg-color);
+    border: 1px solid var(--dynamix-jgrowl-border-color);
     box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
 }
 .jGrowl-notification .jGrowl-header {

From 35b3fd45098625480f5612d920044795dafac1b6 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 15:49:13 -0700
Subject: [PATCH 13/36] fix: add comments to default-color-palette.css for
 clarity on color naming conventions and brand colors

---
 .../plugins/dynamix/styles/default-color-palette.css   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-color-palette.css b/emhttp/plugins/dynamix/styles/default-color-palette.css
index 506f214b3..3c69d869b 100644
--- a/emhttp/plugins/dynamix/styles/default-color-palette.css
+++ b/emhttp/plugins/dynamix/styles/default-color-palette.css
@@ -1,3 +1,7 @@
+/*
+ * Naming convention inspired by Tailwind CSS
+ * @see https://tailwindcss.com/docs/customizing-colors
+ */
 :root {
     --font-sans: clear-sans, sans-serif;
     --font-bitstream: bitstream;
@@ -36,8 +40,8 @@
     --orange-200: #ff9900;
     --orange-300: #e68a00;
     --orange-400: #ce7c10;
-    --orange-500: #ff8c2f;
-    --orange-800: #f15a2c;
+    --orange-500: #ff8c2f; /* Unraid Brand Orange */
+    --orange-800: #f15a2c; /* Unraid Brand Orange Dark */
     --orange-900: #d63301;
 
     --red-100: #ffddd1;
@@ -45,7 +49,7 @@
     --red-500: #ff3300;
     --red-600: #f0000c; /* Condensed from: #ff0000 red */
     --red-700: #de1100;
-    --red-800: #e22828; /* Condensed from: #e80000 #ef3d47 */
+    --red-800: #e22828; /* Unraid Brand Red, Condensed from: #e80000 #ef3d47 */
     --red-900: #941c00;
 
     --green-100: #dff2bf;

From f1692d3e3f10312ed9545255165eac3e93778172 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 15:51:37 -0700
Subject: [PATCH 14/36] refactor: simplify jGrowl notification styles in
 default-dynamix.css by using nested selectors for better organization and
 maintainability

---
 .../dynamix/styles/default-dynamix.css        | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-dynamix.css b/emhttp/plugins/dynamix/styles/default-dynamix.css
index 45d9a3417..9138a146a 100644
--- a/emhttp/plugins/dynamix/styles/default-dynamix.css
+++ b/emhttp/plugins/dynamix/styles/default-dynamix.css
@@ -127,30 +127,34 @@
     margin: 5px 0;
     text-align: left;
     border-radius: 6px;
-}
-.jGrowl-notification.alert {
-    color: var(--dynamix-jgrowl-alert-text-color);
-    background-color: var(--dynamix-jgrowl-alert-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-alert-border-color);
-    box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
-}
-.jGrowl-notification.warning {
-    color: var(--dynamix-jgrowl-warning-text-color);
-    background-color: var(--dynamix-jgrowl-warning-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-warning-border-color);
-    box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
-}
-.jGrowl-notification.normal {
-    color: var(--dynamix-jgrowl-normal-text-color);
-    background-color: var(--dynamix-jgrowl-normal-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-normal-border-color);
-    box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
-}
-.jGrowl-notification.default {
-    color: var(--dynamix-jgrowl-text-color);
-    background-color: var(--dynamix-jgrowl-bg-color);
-    border: 1px solid var(--dynamix-jgrowl-border-color);
-    box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+
+    &.alert {
+        color: var(--dynamix-jgrowl-alert-text-color);
+        background-color: var(--dynamix-jgrowl-alert-bg-color);
+        border: 1px solid var(--dynamix-jgrowl-alert-border-color);
+        box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+    }
+
+    &.warning {
+        color: var(--dynamix-jgrowl-warning-text-color);
+        background-color: var(--dynamix-jgrowl-warning-bg-color);
+        border: 1px solid var(--dynamix-jgrowl-warning-border-color);
+        box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+    }
+
+    &.normal {
+        color: var(--dynamix-jgrowl-normal-text-color);
+        background-color: var(--dynamix-jgrowl-normal-bg-color);
+        border: 1px solid var(--dynamix-jgrowl-normal-border-color);
+        box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+    }
+
+    &.default {
+        color: var(--dynamix-jgrowl-text-color);
+        background-color: var(--dynamix-jgrowl-bg-color);
+        border: 1px solid var(--dynamix-jgrowl-border-color);
+        box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
+    }
 }
 .jGrowl-notification .jGrowl-header {
     font-weight: bold;

From 16732d6a75e94f1be4425fa4c316e15997b2e85e Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 16:42:54 -0700
Subject: [PATCH 15/36] fix: add php-cs-fixer executable path to VSCode
 settings for improved code formatting

---
 .vscode/settings.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c92ef75ac..440e17605 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -82,5 +82,6 @@
     ],
     "search.exclude": {
         "emhttp/webGui/**/*": true,
-    }
+    },
+    "php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar"
 }

From b5e67b4293397a666a31b0d89ad65cc22bc60e71 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 16:43:56 -0700
Subject: [PATCH 16/36] refactor: update feedback script for improved
 readability and maintainability by standardizing PHP tags, restructuring CSS
 classes, and enhancing layout organization

---
 emhttp/plugins/dynamix/scripts/feedback | 181 +++++++++++++++++-------
 1 file changed, 126 insertions(+), 55 deletions(-)

diff --git a/emhttp/plugins/dynamix/scripts/feedback b/emhttp/plugins/dynamix/scripts/feedback
index 094e731c6..c824dd79e 100755
--- a/emhttp/plugins/dynamix/scripts/feedback
+++ b/emhttp/plugins/dynamix/scripts/feedback
@@ -1,5 +1,5 @@
 #!/usr/bin/php -q
-<?PHP
+<?php
 /* Copyright 2005-2024, Lime Technology
  * Copyright 2012-2024, Bergware International.
  *
@@ -13,7 +13,7 @@
 
 $docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
 require_once "$docroot/webGui/include/Helpers.php";
-extract(parse_plugin_cfg('dynamix',true));
+extract(parse_plugin_cfg('dynamix', true));
 
 // add translations
 $_SERVER['REQUEST_URI'] = '';
@@ -22,8 +22,8 @@ require_once "$docroot/webGui/include/Translations.php";
 
 $var = parse_ini_file('state/var.ini');
 $unraid = parse_ini_file('/etc/unraid-version');
-$keyfile = !empty(_var($var,'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
-$width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
+$keyfile = !empty(_var($var, 'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
+// $width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
 $feedback = '/webGui/images/feedback_';
 
 $diagn = _('Unable to generate system diagnostics');
@@ -31,61 +31,132 @@ $sorry = _('Sorry, an error occurred');
 $again = _('Please try again later');
 ?>
 <style>
-div.spinner.fixed{z-index:100000}
-div#control_panel{position:absolute;left:0;right:0;top:0;padding-top:8px;line-height:24px;white-space:nowrap}
-div.divide{text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
-div.divide label{margin-right:30px}
-div.allpanels{display:none;position:absolute;left:0;right:0;top:40px;bottom:0;overflow:auto}
-div#footer_panel{position:absolute;left:0;right:0;bottom:0;text-align:right}
-textarea.feedback{width:<?=$width?>;height:530px;margin:0;resize:none}
-@media(max-width:960px){textarea.feedback{height:330px}}
-@media(max-height:768px){textarea.feedback{height:330px}}
-input#email{float:left;padding-left:4px}
-p.note,label.note{font-size:1.1rem!important}
-span.spacer{margin:0 4px}
-img{display:inline-block;margin-bottom:30px}
-.center{text-align:center!important}
-.green-text{color:#4f8a10!important}
-.red-text{color:#f0000c!important}
+div.spinner.fixed {
+    z-index: 100000;
+}
+.feedback-control-panel {
+    padding-top: 8px;
+    line-height: 24px;
+    white-space: nowrap;
+    text-align: center;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+
+    label {
+        margin-right: 30px;
+    }
+}
+.feedback-panel {
+    display: none;
+}
+.feedback-panel-textarea {
+    width: 100%;
+    height: 530px;
+    margin: 0;
+    resize: none;
+    box-sizing: border-box;
+}
+@media (max-width: 960px) {
+    .feedback-panel-textarea {
+        height: 330px;
+    }
+}
+@media (max-height: 768px) {
+    .feedback-panel-textarea {
+        height: 330px;
+    }
+}
+.feedback-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  gap: 1rem;
+}
+.feedback-footer-nav {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.feedback-email-input {
+    padding-left: 4px;
+}
+.note {
+    font-size: 1.1rem !important;
+}
+img {
+    display: inline-block;
+    margin-bottom: 30px;
+}
+.center {
+    text-align: center !important;
+}
+.green-text {
+    color: var(--green-800) !important;
+}
+.red-text {
+    color: var(--red-600) !important;
+}
 </style>
 
 <div>
-<div id="control_panel" class="divide">
-<label for="opt_featurerequest"><input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked"><?=_('Product Suggestion')?></label>
-<label for="opt_bugreport"><input type="radio" name="mode" id="opt_bugreport" value="bugreport"><?=_('Bug Report')?></label>
-<label for="opt_troubleshoot"><input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot"><?=_('Troubleshoot')?></label>
-<label for="opt_comment"><input type="radio" name="mode" id="opt_comment" value="comment"><?=_('Other Comment')?></label>
-<hr>
-</div>
+  <div class="feedback-control-panel">
+    <label for="opt_featurerequest">
+      <input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked">
+      <?=_('Product Suggestion')?>
+    </label>
+    <label for="opt_bugreport">
+      <input type="radio" name="mode" id="opt_bugreport" value="bugreport">
+      <?=_('Bug Report')?>
+    </label>
+    <label for="opt_troubleshoot">
+      <input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot">
+      <?=_('Troubleshoot')?>
+    </label>
+    <label for="opt_comment">
+      <input type="radio" name="mode" id="opt_comment" value="comment">
+      <?=_('Other Comment')?>
+    </label>
+    <hr>
+  </div>
 
-<div id="result_panel" class="allpanels"></div>
+  <div id="result_panel" class="feedback-panel"></div>
 
-<div id="featurerequest_panel" class="allpanels">
-<textarea id="featurerequest" class="feedback"></textarea>
-</div>
+  <div id="featurerequest_panel" class="feedback-panel">
+    <textarea id="featurerequest" class="feedback-panel-textarea"></textarea>
+  </div>
 
-<div id="bugreport_panel" class="allpanels">
-<textarea id="bugreport" class="feedback"></textarea>
-<label class="note" for="anonymize_bugreport"><input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1"> <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
-<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
-</div>
+  <div id="bugreport_panel" class="feedback-panel">
+    <textarea id="bugreport" class="feedback-panel-textarea"></textarea>
+    <label class="note" for="anonymize_bugreport">
+      <input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1">
+      <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
+    </label>
+    <p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
+  </div>
 
-<div id="troubleshoot_panel" class="allpanels">
-<textarea id="troubleshoot" class="feedback"></textarea>
-<label class="note" for="anonymize_troubleshoot"><input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1"><?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
-<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
-</div>
+  <div id="troubleshoot_panel" class="feedback-panel">
+    <textarea id="troubleshoot" class="feedback-panel-textarea"></textarea>
+    <label class="note" for="anonymize_troubleshoot">
+      <input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1">
+      <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
+    </label>
+    <p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
+  </div>
 
-<div id="comment_panel" class="allpanels">
-<textarea id="comment" class="feedback"></textarea>
-</div>
+  <div id="comment_panel" class="feedback-panel">
+    <textarea id="comment" class="feedback-panel-textarea"></textarea>
+  </div>
 
-<div id="footer_panel">
-<input type="email" id="email" autocomplete="off" spellcheck="false">
-<a href="https://unraid.net" target="_blank"><?=_('Website')?></a><span class="spacer blue-text">|</span>
-<a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a><span class="spacer blue-text">|</span>
-<a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
-</div>
+  <div class="feedback-footer">
+    <input class="feedback-email-input" type="email" autocomplete="off" spellcheck="false">
+    <nav class="feedback-footer-nav">
+      <a href="https://unraid.net" target="_blank"><?=_('Website')?></a>
+      <a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a>
+      <a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
+    </nav>
+  </div>
 </div>
 
 <script>
@@ -136,7 +207,7 @@ String.prototype.md5 = function(){
 
 function validInput(input) {
   var validRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  var email = $('input#email');
+  var email = $('.feedback-email-input');
   return input.val().md5() == md5[input.prop('id')] || !(email.prop('required')===false || email.val().match(validRegex));
 }
 
@@ -173,7 +244,7 @@ function form_submit(url, params, tab, diagnostics) {
     return;
   }
   params.description = $(tab).val();
-  params.email = $('input#email').val();
+  params.email = $('.feedback-email-input').val();
   params.timestamp = "<?=time()?>";
   params.osversion = "<?=$unraid['version']?>";
   params.keyfile = "<?=$keyfile?>";
@@ -209,9 +280,9 @@ $(function(){
     var panel = tab+'_panel';
     var enter = ['#troubleshoot'].includes(tab);
     var email = "<?=_('Contact Email Address')?> ("+"<?=_('required')?>"+")";
-    $('input#email').prop('placeholder',email).prop('required','true');
+    $('.feedback-email-input').prop('placeholder',email).prop('required','true');
     $('#submit_button').prop('disabled',validInput($(tab)));
-    $('.allpanels').not(panel).fadeOut('fast');
+    $('.feedback-panel').not(panel).fadeOut('fast');
     $(panel).fadeIn('fast');
   });
 
@@ -219,7 +290,7 @@ $(function(){
     $('#submit_button').prop('disabled',validInput($(this)));
   });
 
-  $('input#email').on('input change',function(){
+  $('.feedback-email-input').on('input change',function(){
     var tab = '#'+$('input[name=mode]:checked').val();
     $('#submit_button').prop('disabled',validInput($(tab)));
   });

From 61dca4cd8439556da4f99882e53dae9863e17228 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 16:48:46 -0700
Subject: [PATCH 17/36] fix: update feedback script to use standardized CSS
 class for feedback images, improving consistency in error and success
 messages

---
 emhttp/plugins/dynamix/scripts/feedback | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/emhttp/plugins/dynamix/scripts/feedback b/emhttp/plugins/dynamix/scripts/feedback
index c824dd79e..8b596ad47 100755
--- a/emhttp/plugins/dynamix/scripts/feedback
+++ b/emhttp/plugins/dynamix/scripts/feedback
@@ -23,7 +23,6 @@ require_once "$docroot/webGui/include/Translations.php";
 $var = parse_ini_file('state/var.ini');
 $unraid = parse_ini_file('/etc/unraid-version');
 $keyfile = !empty(_var($var, 'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
-// $width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
 $feedback = '/webGui/images/feedback_';
 
 $diagn = _('Unable to generate system diagnostics');
@@ -85,7 +84,7 @@ div.spinner.fixed {
 .note {
     font-size: 1.1rem !important;
 }
-img {
+.feedback-submission-img {
     display: inline-block;
     margin-bottom: 30px;
 }
@@ -238,7 +237,7 @@ function form_submit(url, params, tab, diagnostics) {
     }).fail(function(){
       $('div.spinner.fixed').hide();
       panel.fadeOut('fast').find('textarea').prop('disabled',false);
-      var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$diagn. $again"?>.</p>";
+      var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$diagn. $again"?>.</p>";
       $('#result_panel').html(reply).fadeIn('fast');
     });
     return;
@@ -252,18 +251,18 @@ function form_submit(url, params, tab, diagnostics) {
   $.post(url, params, function(data){
     $('div.spinner.fixed').hide();
     if (data.error) {
-      var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
+      var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
       $('#result_panel').html(reply).fadeIn('fast');
     } else {
       var name = tab.substr(1).toLowerCase();
-      var reply = "<h2 class='center green-text'><?=_('Thank You')?></h2><p class='center'><img src='<?=$feedback?>"+name+".png'><br>"+(data.message||'')+"</p>";
+      var reply = "<h2 class='center green-text'><?=_('Thank You')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>"+name+".png'><br>"+(data.message||'')+"</p>";
       $('#result_panel').html(reply).fadeIn('fast');
     }
   }).fail(function(jqXHR, textStatus, errorThrown){
     if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
       errorThrown = jqXHR.responseJSON.error;
     }
-    var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
+    var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
     $('#result_panel').html(reply).fadeIn('fast');
   }).always(function(){
     $('#spinner_image').fadeOut('fast');

From 053116a047d87dc7ece4ae15f5cda2ff6cc4ac8b Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 17:10:09 -0700
Subject: [PATCH 18/36] fix: remove unnecessary whitespace in VSCode
 settings.json for cleaner configuration

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 440e17605..8bb0df453 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -81,7 +81,7 @@
         "libvirt-php"
     ],
     "search.exclude": {
-        "emhttp/webGui/**/*": true,
+        "emhttp/webGui/**/*": true
     },
     "php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar"
 }

From 260406f25c7510e790e248003143d0e45cb2480b Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 18:21:12 -0700
Subject: [PATCH 19/36] refactor: consolidate theme-specific CSS classes by
 removing redundant shade classes across multiple pages and updating styles
 for improved maintainability

---
 emhttp/plugins/dynamix/Eth0.page              |  6 ++---
 emhttp/plugins/dynamix/EthX.page              |  4 +--
 emhttp/plugins/dynamix/RoutingTable.page      |  2 +-
 emhttp/plugins/dynamix/ShareEdit.page         |  8 +++---
 emhttp/plugins/dynamix/WG0.page               |  4 +--
 emhttp/plugins/dynamix/WGX.page               |  4 +--
 emhttp/plugins/dynamix/Wireless.page          |  8 +++---
 emhttp/plugins/dynamix/sheets/Eth0.css        | 25 -----------------
 emhttp/plugins/dynamix/sheets/ShareEdit.css   | 27 -------------------
 emhttp/plugins/dynamix/sheets/WG0.css         | 26 ------------------
 .../plugins/dynamix/styles/default-base.css   |  6 +++++
 .../plugins/dynamix/styles/themes/azure.css   |  2 ++
 .../plugins/dynamix/styles/themes/black.css   |  2 ++
 emhttp/plugins/dynamix/styles/themes/gray.css |  2 ++
 .../plugins/dynamix/styles/themes/white.css   |  2 ++
 15 files changed, 32 insertions(+), 96 deletions(-)

diff --git a/emhttp/plugins/dynamix/Eth0.page b/emhttp/plugins/dynamix/Eth0.page
index 445930af7..bf077aefe 100644
--- a/emhttp/plugins/dynamix/Eth0.page
+++ b/emhttp/plugins/dynamix/Eth0.page
@@ -558,7 +558,7 @@ function networkInfo(port, vlan) {
 </script>
 
 <div class="title nocontrol shift">&nbsp;</div>
-<div class="shade-<?=$display['theme']?> uplift">
+<div class="shade uplift">
 <form name="dns_settings" onchange="signalRun(this,1)">
 <div markdown="1" id="dns4" class="hide">
 _(IPv4 DNS server assignment)_:
@@ -787,7 +787,7 @@ _(Enable VLANs)_:
 <div id="index-eth0-0"></div>
 <div id="vlan-list-eth0" class="hide">
 <?foreach ($vlan_eth0 as $i):?>
-<div markdown="1" id="index-eth0-<?=$i?>" class="access-eth0 shade-<?=$display['theme']?> hide">
+<div markdown="1" id="index-eth0-<?=$i?>" class="access-eth0 shade hide">
 _(Interface description)_:
 : <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($eth0,"DESCRIPTION:$i"))?>">
   <input type="button" class="form" value="_(Info)_" onclick="networkInfo('eth0',<?=_var($eth0,"VLANID:$i")?>)">
@@ -889,7 +889,7 @@ _(IPv6 privacy extensions)_:
 </form>
 
 <script markdown="1" type="text/html" id="network-template-eth0">
-<div markdown="1" id="index-eth0-INDEX" class="access-eth0 shade-<?=$display['theme']?>">
+<div markdown="1" id="index-eth0-INDEX" class="access-eth0 shade">
 _(Interface description)_:
 : <input type="text" name="DESCRIPTION:INDEX" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($eth0,"DESCRIPTION:INDEX"))?>">
 
diff --git a/emhttp/plugins/dynamix/EthX.page b/emhttp/plugins/dynamix/EthX.page
index 0d6fb874f..be1713f3b 100644
--- a/emhttp/plugins/dynamix/EthX.page
+++ b/emhttp/plugins/dynamix/EthX.page
@@ -249,7 +249,7 @@ _(Enable VLANs)_:
 <div id='index-ethX-0'></div>
 <div id="vlan-list-ethX" class="hide">
 <?foreach ($vlan_ethX as $i):?>
-<div markdown="1" id="index-ethX-<?=$i?>" class="access-ethX shade-<?=$display['theme']?> hide">
+<div markdown="1" id="index-ethX-<?=$i?>" class="access-ethX shade hide">
 _(Interface description)_:
 : <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($ethX,"DESCRIPTION:$i"))?>">
   <input type="button" class="form" value="_(Info)_" onclick="networkInfo('eth0',<?=_var($ethX,"VLANID:$i")?>)">
@@ -350,7 +350,7 @@ _(IPv6 privacy extensions)_:
 </form>
 
 <script markdown="1" type="text/html" id="network-template-ethX">
-<div markdown="1" id="index-ethX-INDEX" class="access-ethX shade-<?=$display['theme']?>">
+<div markdown="1" id="index-ethX-INDEX" class="access-ethX shade">
 _(Interface description)_:
 : <input type="text" name="DESCRIPTION:INDEX" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($ethX,"DESCRIPTION:INDEX"))?>">
 
diff --git a/emhttp/plugins/dynamix/RoutingTable.page b/emhttp/plugins/dynamix/RoutingTable.page
index 76ba85e23..2814cfb82 100644
--- a/emhttp/plugins/dynamix/RoutingTable.page
+++ b/emhttp/plugins/dynamix/RoutingTable.page
@@ -57,7 +57,7 @@ $(function(){
 <tbody id="route_list"></tbody>
 </table>
 
-<div class="shade-<?=$display['theme']?>" style="margin-top:12px;padding:12px 4px;">
+<div class="shade" style="margin-top:12px;padding:12px 4px;">
 <form markdown="1" name="add_routes" method="POST" action="/webGui/include/RoutingTable.php" target="progressFrame" onsubmit="setTimeout(resetTable,500)">
 _(Enter route + gateway + metric)_:
 : <input type="text" name="route" maxlength="39" value="" class="fixed" placeholder="_(IPv4/nn or IPv6/nn route)_" required>
diff --git a/emhttp/plugins/dynamix/ShareEdit.page b/emhttp/plugins/dynamix/ShareEdit.page
index 6eaedd4ef..8a00eb194 100644
--- a/emhttp/plugins/dynamix/ShareEdit.page
+++ b/emhttp/plugins/dynamix/ShareEdit.page
@@ -366,7 +366,7 @@ foreach ($rows as $row) echo $row;
 <input type="hidden" name="shareInclude" value="">
 <input type="hidden" name="shareExclude" value="">
 
-<div markdown="1" class="shade-<?=$display['theme']?>">
+<div markdown="1" class="shade">
 _(Share name)_:
 : <input type="text" id="shareName" name="shareName" maxlength="40" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars($name)?>" oninput="checkName(this.value)" title="_(Hidden share names are not allowed)_" pattern="^[^\.].*"><span id="zfs-name" class="orange-text"><i class="fa fa-warning"></i> _(Share name contains invalid characters for ZFS use)_</span>
 
@@ -417,7 +417,7 @@ _(Exclusive access)_:
 <?endif;?>
 </div>
 
-<div markdown="1" class="shade-<?=$display['theme']?>">
+<div markdown="1" class="shade">
 _(Primary storage (for new files and folders))_:
 : <select id="primary" name="shareCachePool" onchange="form.shareFloor.value='';updateScreen(z(4),'slow')">
   <?=mk_option(primary(), '', _('Array'),  $poolsOnly ? 'disabled' : '')?>
@@ -486,7 +486,7 @@ _(Excluded disk(s))_:
 </div>
 
 </div>
-<div markdown="1" id="secondaryStorage" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="secondaryStorage" class="shade">
 _(Secondary storage)_:
 : <select id="secondary" onchange="updateScreen(z(4),'slow')">
   <?=mk_option(secondary(),'0',_('None'))?>
@@ -545,7 +545,7 @@ _(Excluded disk(s))_:
 </div>
 
 </div>
-<div markdown="1" id="moverAction" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="moverAction" class="shade">
 <div markdown="1" id="moverDirection1">
 _(Mover action)_:
 : <span class="input"><select id="direction" onchange="updateScreen(z(3),'slow')">
diff --git a/emhttp/plugins/dynamix/WG0.page b/emhttp/plugins/dynamix/WG0.page
index 8518e796a..e21ac8820 100644
--- a/emhttp/plugins/dynamix/WG0.page
+++ b/emhttp/plugins/dynamix/WG0.page
@@ -1385,7 +1385,7 @@ _(DNS servers)_:
 
 <div id="peers-list-wg0" style="display:none"></div>
 <?foreach ($peer_wg0 as $i):?>
-<div markdown="1" id="index-wg0-<?=$i?>" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="index-wg0-<?=$i?>" class="shade">
 _(Peer name)_:
 : <span class="input"><input type="text" name="Name:<?=$i?>" class="wide" maxlength="99" value="<?=_var($wg0,"Name:$i")?>" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
   <input type="button" class="form" value="_(Delete Peer)_" onclick="delPeer($(document.wg0),'#index-wg0-<?=$i?>')">
@@ -1482,7 +1482,7 @@ _(Persistent keepalive)_:
 <small style="position:absolute;left:10px;top:30px">"WireGuard" and the "WireGuard" logo are registered trademarks of Jason A. Donenfeld</small>
 
 <script markdown="1" type="text/html" id="peer-template-wg0">
-<div markdown="1" id="index-wg0-INDEX" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="index-wg0-INDEX" class="shade">
 _(Peer name)_:
 : <span class="input"><input type="text" name="Name:INDEX" class="wide" maxlength="99" value="" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
   <span class="pin"><i class="fa fa-fw fa-eye eyeINDEX key-off" title="_(Show Peer Config)_"></i>
diff --git a/emhttp/plugins/dynamix/WGX.page b/emhttp/plugins/dynamix/WGX.page
index be3936c60..069f568ad 100644
--- a/emhttp/plugins/dynamix/WGX.page
+++ b/emhttp/plugins/dynamix/WGX.page
@@ -283,7 +283,7 @@ _(DNS servers)_:
 
 <div id="peers-list-wgX" style="display:none"></div>
 <?foreach ($peer_wgX as $i):?>
-<div markdown="1" id="index-wgX-<?=$i?>" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="index-wgX-<?=$i?>" class="shade">
 _(Peer name)_:
 : <span class="input"><input type="text" name="Name:<?=$i?>" class="wide" maxlength="99" value="<?=_var($wgX,"Name:$i")?>" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
   <input type="button" class="form" value="_(Delete Peer)_" onclick="delPeer($(document.wgX),'#index-wgX-<?=$i?>')">
@@ -378,7 +378,7 @@ _(Persistent keepalive)_:
 </form>
 
 <script markdown="1" type="text/html" id="peer-template-wgX">
-<div markdown="1" id="index-wgX-INDEX" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="index-wgX-INDEX" class="shade">
 _(Peer name)_:
 : <span class="input"><input type="text" name="Name:INDEX" class="wide" maxlength="99" value="" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
   <span class="pin"><i class="fa fa-fw fa-eye eyeINDEX key-off" title="_(Show Peer Config)_"></i>
diff --git a/emhttp/plugins/dynamix/Wireless.page b/emhttp/plugins/dynamix/Wireless.page
index a453763fa..793e1110b 100644
--- a/emhttp/plugins/dynamix/Wireless.page
+++ b/emhttp/plugins/dynamix/Wireless.page
@@ -49,23 +49,23 @@ _(Regulatory region)_:
 </form>
 
 <div id="wifi" class="hide">
-<div markdown="1" id="connected" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="connected" class="shade">
 _(Connected)_:
 : <i class="fa fa-spin fa-circle-o-notch"></i>
 
 </div>
-<div markdown="1" id="my_networks" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="my_networks" class="shade">
 _(My networks)_:
 : <i class="fa fa-spin fa-circle-o-notch"></i>
 
 </div>
-<div markdown="1" id="other_networks" class="shade-<?=$display['theme']?>">
+<div markdown="1" id="other_networks" class="shade">
 _(Other networks)_:
 : <i class="fa fa-spin fa-circle-o-notch"></i>
 
 </div>
 
-<div markdown="1" class="shade-<?=$display['theme']?>">
+<div markdown="1" class="shade">
 _(Add network)_:
 : <span class="wifi"><input name="CUSTOM" type="text" class="narrow" maxlength="32" autocomplete="off" spellcheck="false" value=""></span><i class="fa fa-wifi hand grey-text" onclick="manage_wifi(encodeURIComponent($('input[name=CUSTOM]').val()),3)" title="<?=$title?>"></i>
 
diff --git a/emhttp/plugins/dynamix/sheets/Eth0.css b/emhttp/plugins/dynamix/sheets/Eth0.css
index 4063ea75f..98f50b599 100644
--- a/emhttp/plugins/dynamix/sheets/Eth0.css
+++ b/emhttp/plugins/dynamix/sheets/Eth0.css
@@ -1,10 +1,4 @@
 :root {
-    /* Theme-specific shades */
-    --eth0-shade-azure: var(--theme-azure--gray-150);
-    --eth0-shade-gray: var(--theme-gray--black-alt);
-    --eth0-shade-white: var(--gray-150);
-    --eth0-shade-black: var(--gray-800);
-
     /* Input styles - default values (for azure/gray themes) */
     --eth0-narrow-input-width: 188px;
     --eth0-narrow-input-padding: 5px 6px;
@@ -47,25 +41,6 @@ input.form {
     margin-left: 10px;
 }
 
-/* Theme-specific background shades - consolidated margin/padding */
-div[class^="shade-"] {
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
-
-div.shade-white {
-    background-color: var(--eth0-shade-white);
-}
-div.shade-black {
-    background-color: var(--eth0-shade-black);
-}
-div.shade-azure {
-    background-color: var(--eth0-shade-azure);
-}
-div.shade-gray {
-    background-color: var(--eth0-shade-gray);
-}
-
 /* Utility classes */
 select.slim {
     min-width: 47px;
diff --git a/emhttp/plugins/dynamix/sheets/ShareEdit.css b/emhttp/plugins/dynamix/sheets/ShareEdit.css
index f398dce17..9d4e58aa7 100644
--- a/emhttp/plugins/dynamix/sheets/ShareEdit.css
+++ b/emhttp/plugins/dynamix/sheets/ShareEdit.css
@@ -1,30 +1,3 @@
-:root {
-    --share-edit-shade-azure: #edeaef;
-    --share-edit-shade-gray: #121510;
-    --share-edit-shade-white: var(--gray-150);
-    --share-edit-shade-black: var(--gray-800);
-}
-
-div.shade-white {
-    background-color: var(--share-edit-shade-white); /* Condensed from: #ededed */
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
-div.shade-black {
-    background-color: var(--share-edit-shade-black);
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
-div.shade-azure {
-    background-color: var(--share-edit-shade-azure);
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
-div.shade-gray {
-    background-color: var(--share-edit-shade-gray);
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
 #s1,
 #s2,
 #s3,
diff --git a/emhttp/plugins/dynamix/sheets/WG0.css b/emhttp/plugins/dynamix/sheets/WG0.css
index dd25ee5a3..fbfe1ad15 100644
--- a/emhttp/plugins/dynamix/sheets/WG0.css
+++ b/emhttp/plugins/dynamix/sheets/WG0.css
@@ -1,11 +1,6 @@
 :root {
     --wg0-span-hshift-margin-right: -7px;
     --wg0-span-label-margin-left: -12px;
-
-    --wg0-shade-azure: #edeaef;
-    --wg0-shade-gray: #121510;
-    --wg0-shade-white: var(--gray-150);
-    --wg0-shade-black: var(--gray-800);
 }
 
 .Theme--sidebar:root {
@@ -67,27 +62,6 @@ span.label {
     letter-spacing: 1px;
     margin-left: var(--wg0-span-label-margin-left);
 }
-
-div.shade-white {
-    background-color: var(--wg0-shade-white); /* Condensed from: #ededed */
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
-div.shade-black {
-    background-color: var(--wg0-shade-black);
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
-div.shade-azure {
-    background-color: var(--wg0-shade-azure);
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
-div.shade-gray {
-    background-color: var(--wg0-shade-gray);
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
-}
 div.title {
     margin-bottom: 10px !important;
 }
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 945dd0510..9900238b7 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -1507,6 +1507,12 @@ span#wlan0 {
     cursor: pointer;
 }
 
+.shade {
+    margin-top: 10px;
+    padding: 8px 0 3px 0;
+    background-color: var(--shade-bg-color);
+}
+
 /*
  * Using CSS Nesting, to narrow down the scope of the styles to the .Theme--sidebar class.
  * This allows us to have default-azure & default-gray set css variables
diff --git a/emhttp/plugins/dynamix/styles/themes/azure.css b/emhttp/plugins/dynamix/styles/themes/azure.css
index aa356bf33..5aaca08f5 100644
--- a/emhttp/plugins/dynamix/styles/themes/azure.css
+++ b/emhttp/plugins/dynamix/styles/themes/azure.css
@@ -85,6 +85,8 @@
 
     --input-bg-color: var(--mild-background-color);
     --focus-input-bg-color: var(--theme-azure--gray-150);
+
+    --shade-bg-color: var(--theme-azure--gray-150);
     /* /End vars used in default-base */
 
     /* Set vars for default-dynamix */
diff --git a/emhttp/plugins/dynamix/styles/themes/black.css b/emhttp/plugins/dynamix/styles/themes/black.css
index 5dbe5c11c..2fc8b5f2a 100644
--- a/emhttp/plugins/dynamix/styles/themes/black.css
+++ b/emhttp/plugins/dynamix/styles/themes/black.css
@@ -70,6 +70,8 @@
 
     --input-bg-color: transparent;
     --focus-input-bg-color: var(--mild-background-color);
+
+    --shade-bg-color: var(--gray-800);
     /* /End vars used in default-base */
 
     /* dynamix CSS var values set in default-dynamix.css */
diff --git a/emhttp/plugins/dynamix/styles/themes/gray.css b/emhttp/plugins/dynamix/styles/themes/gray.css
index 8953b13c2..16fe612b6 100644
--- a/emhttp/plugins/dynamix/styles/themes/gray.css
+++ b/emhttp/plugins/dynamix/styles/themes/gray.css
@@ -81,6 +81,8 @@
     --input-bg-color: var(--theme-gray--black-alt);
     --focus-input-border-color: var(--blue-700);
     --focus-input-background-color: var(--mild-background-color);
+
+    --shade-bg-color: var(--theme-gray--black-alt);
     /* /End vars used in default-base */
 
     /* Set vars for default-dynamix */
diff --git a/emhttp/plugins/dynamix/styles/themes/white.css b/emhttp/plugins/dynamix/styles/themes/white.css
index 4e15aba5a..4384ececa 100644
--- a/emhttp/plugins/dynamix/styles/themes/white.css
+++ b/emhttp/plugins/dynamix/styles/themes/white.css
@@ -71,6 +71,8 @@
 
     --input-bg-color: transparent;
     --focus-input-bg-color: var(--gray-150);
+
+    --shade-bg-color: var(--gray-150);
     /* /End vars used in default-base */
 
     /* Set vars for default-dynamix */

From d364973546308d2a5203d0bc40dd3df510b8b58d Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 18:31:32 -0700
Subject: [PATCH 20/36] refactor: update .shade class in default-base.css to
 use rem units for margin and padding, enhancing consistency and
 maintainability

---
 emhttp/plugins/dynamix/styles/default-base.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 9900238b7..f60aaffe1 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -1508,8 +1508,8 @@ span#wlan0 {
 }
 
 .shade {
-    margin-top: 10px;
-    padding: 8px 0 3px 0;
+    margin-top: 1rem;
+    padding: 1rem 0;
     background-color: var(--shade-bg-color);
 }
 

From d938bf1b6bbef84c7828f5dd0aab0762c604004b Mon Sep 17 00:00:00 2001
From: Squidly271 <unraidsquid@gmail.com>
Date: Fri, 4 Apr 2025 11:05:06 -0400
Subject: [PATCH 21/36] Refactor: Nchan OOM recovery - switch to nginx restart

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

diff --git a/emhttp/plugins/dynamix/include/publish.php b/emhttp/plugins/dynamix/include/publish.php
index 28f200485..7d4b9f090 100644
--- a/emhttp/plugins/dynamix/include/publish.php
+++ b/emhttp/plugins/dynamix/include/publish.php
@@ -49,7 +49,7 @@ function publish($endpoint, $message, $len=1) {
       my_logger("Nchan out of shared memory.  Reloading nginx");
       // prevent multiple attempts at restarting from other scripts using publish.php
       touch("/tmp/publishPaused");
-      exec("/etc/rc.d/rc.nginx reload");
+      exec("/etc/rc.d/rc.nginx restart");
       @unlink("/tmp/publishPaused");
     }
   }

From 8b90d7353f504732b293ed0bc9ab1252af5a6d26 Mon Sep 17 00:00:00 2001
From: Squidly271 <unraidsquid@gmail.com>
Date: Fri, 4 Apr 2025 13:13:44 -0400
Subject: [PATCH 22/36] Fix: Enable Apply button when adding a VLAN

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

diff --git a/emhttp/plugins/dynamix/Eth0.page b/emhttp/plugins/dynamix/Eth0.page
index bf077aefe..03393acda 100644
--- a/emhttp/plugins/dynamix/Eth0.page
+++ b/emhttp/plugins/dynamix/Eth0.page
@@ -468,6 +468,7 @@ function checkNetworkAccess(form) {
 }
 
 function addVLAN(port) {
+  $('input[value="<?=_("Apply")?>"],input[value="Apply"]').prop('disabled',false);
   var index = 1;
   while ($('#index-'+port+'-'+index).length) index++;
   var template = $($('<div/>').loadTemplate($('#network-template-'+port)).html().replace(/INDEX/g,index));

From 6c815194c40bbe763245c01da5684f894a953489 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 13:17:50 -0700
Subject: [PATCH 23/36] fix: ui-dropdownchecklist background

---
 emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
index 7a775f5f4..5492d8387 100644
--- a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
+++ b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
@@ -8,7 +8,7 @@
     --dynamix-jquery-ui-button-background-start: var(--red-800);
     --dynamix-jquery-ui-button-background-end: var(--orange-500);
     --dynamix-jquery-ui-button-hover-color: var(--gray-100);
-    --dynamix-jquery-ui-default-background: var(--gray-100);
+    --dynamix-jquery-ui-default-background: transparent;
     --dynamix-jquery-ui-border-color: var(--black);
     --dynamix-jquery-ui-header-background: var(--gray-150); /* Condensed from: #e3e3e3 */
     --dynamix-jquery-ui-header-color: var(--black);
@@ -28,7 +28,7 @@
     --dynamix-jquery-ui-button-background-start: var(--red-800);
     --dynamix-jquery-ui-button-background-end: var(--orange-500);
     --dynamix-jquery-ui-button-hover-color: var(--gray-100);
-    --dynamix-jquery-ui-default-background: var(--black);
+    --dynamix-jquery-ui-default-background: transparent;
     --dynamix-jquery-ui-border-color: var(--gray-200); /* Condensed from: #e5e5e5 */
     --dynamix-jquery-ui-header-background: var(--gray-800); /* Condensed from: #2b2b2b */
     --dynamix-jquery-ui-header-color: var(--gray-100);
@@ -119,6 +119,7 @@
     cursor: pointer;
     height: 2.2rem;
     line-height: 2.2rem;
+    padding: 0;
 }
 
 .ui-dropdownchecklist-group {

From c18870c0aa5a7f14189943e7de82dcdaba9e510f Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 15:05:59 -0700
Subject: [PATCH 24/36] refactor: consolidate and update ui-dropdownchecklist
 styles for improved maintainability and consistency

---
 .../dynamix/styles/default-dynamix.css        |  86 +----
 .../dynamix/styles/dynamix-jquery-ui.css      | 303 +++++++++++-------
 2 files changed, 191 insertions(+), 198 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-dynamix.css b/emhttp/plugins/dynamix/styles/default-dynamix.css
index 9138a146a..846934683 100644
--- a/emhttp/plugins/dynamix/styles/default-dynamix.css
+++ b/emhttp/plugins/dynamix/styles/default-dynamix.css
@@ -214,67 +214,7 @@
         display: none;
     }
 }
-.ui-dropdownchecklist {
-    background-color: transparent;
-    background-image: linear-gradient(66.6deg, transparent 60%, var(--dynamix-ui-dropdownchecklist-color) 40%),
-        linear-gradient(113.4deg, var(--dynamix-ui-dropdownchecklist-color) 40%, transparent 60%);
-    background-position: calc(100% - 4px), 100%;
-    background-size:
-        4px 6px,
-        4px 6px;
-    background-repeat: no-repeat;
-    border: none;
-    box-shadow: 0 1px 0 var(--dynamix-ui-dropdownchecklist-color);
-    outline: none;
-    height: 2.5rem;
-    line-height: 2.5rem;
-    cursor: pointer;
-}
-.ui-dropdownchecklist-selector {
-    border: none;
-    border-bottom: 1px solid var(--dynamix-ui-dropdownchecklist-color);
-    outline: none;
-    display: inline-block;
-    cursor: pointer;
-    padding: 1px 0;
-}
-.ui-dropdownchecklist-group {
-    font-weight: normal;
-    font-style: italic;
-    padding: 1px 0;
-}
-.ui-dropdownchecklist-selector-wrapper {
-    vertical-align: middle;
-    font-size: 0;
-}
-.ui-state-active {
-    background: transparent;
-}
-.ui-dropdownchecklist-dropcontainer {
-    color: var(--dynamix-ui-dropdownchecklist-color);
-    background-color: var(--dynamix-ui-dropdownchecklist-color-alt1);
-}
-.ui-state-disabled {
-    color: var(--dynamix-ui-dropdownchecklist-color);
-    border-bottom-color: var(--dynamix-ui-dropdownchecklist-color-alt2);
-    opacity: 0.5;
-    cursor: default;
-}
-.ui-dropdownchecklist-indent {
-    padding-left: 7px;
-}
-.ui-dropdownchecklist-text {
-    font-family: clear-sans;
-    font-size: 1.3rem;
-    color: var(--dynamix-ui-dropdownchecklist-color);
-}
-.ui-dropdownchecklist-item {
-    height: 2.2rem;
-    line-height: 2.2rem;
-}
-.ui-dropdownchecklist-item input {
-    vertical-align: top;
-}
+
 #sb-info-inner,
 #sb-loading-inner,
 div.sb-message {
@@ -1566,7 +1506,7 @@ div.icon-zip {
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector
  * @see https://caniuse.com/?search=nesting
  */
- .Theme--sidebar {
+.Theme--sidebar {
     .jGrowl.top-left {
         top: 90px;
     }
@@ -1579,28 +1519,6 @@ div.icon-zip {
     .jGrowl-notification {
         min-height: 4rem;
     }
-    .ui-dropdownchecklist {
-        height: 3rem;
-        line-height: 3rem;
-    }
-    .ui-dropdownchecklist-selector {
-        padding: 1px 14px 1px 6px;
-    }
-    .ui-dropdownchecklist-group {
-        padding: 1px 14px 1px 6px;
-    }
-    .ui-dropdownchecklist-dropcontainer {
-        border: 1px solid var(--dynamix-ui-dropdownchecklist-dropcontainer-border-color);
-    }
-    .ui-state-disabled {
-        opacity: 0.3;
-    }
-    .ui-dropdownchecklist-indent {
-        padding-left: 9px;
-    }
-    .ui-dropdownchecklist-text {
-        font-size: 1.2rem;
-    }
     table.tablesorter thead tr th {
         font-size: 1.3rem;
         padding: 5px 20px 5px 6px;
diff --git a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
index 5492d8387..ff810a63b 100644
--- a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
+++ b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
@@ -42,84 +42,118 @@
     --dynamix-jquery-ui-text-color: var(--gray-100);
 }
 
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
-    font-family: clear-sans;
-    font-size: 1.1rem;
-    font-weight: bold;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    margin: 10px 12px 10px 0;
-    padding: 9px 18px;
-    text-decoration: none;
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    border-radius: 4px;
-    border: 0;
-    color: var(--dynamix-jquery-ui-button-text-color);
-    background:
-        -webkit-gradient(
-                linear,
-                left top,
-                right top,
-                from(var(--dynamix-jquery-ui-button-background-start)),
-                to(var(--dynamix-jquery-ui-button-background-end))
-            )
-            0 0 no-repeat,
-        -webkit-gradient(
-                linear,
-                left top,
-                right top,
-                from(var(--dynamix-jquery-ui-button-background-start)),
-                to(var(--dynamix-jquery-ui-button-background-end))
-            ) 0 100% no-repeat,
-        -webkit-gradient(
-                linear,
-                left bottom,
-                left top,
-                from(var(--dynamix-jquery-ui-button-background-start)),
-                to(var(--dynamix-jquery-ui-button-background-start))
-            ) 0 100% no-repeat,
-        -webkit-gradient(
-                linear,
-                left bottom,
-                left top,
-                from(var(--dynamix-jquery-ui-button-background-end)),
-                to(var(--dynamix-jquery-ui-button-background-end))
-            ) 100% 100% no-repeat;
-    background:
-        linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 0 no-repeat,
-        linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 100% no-repeat,
-        linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-start)) 0 100% no-repeat,
-        linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-end) 0, var(--dynamix-jquery-ui-button-background-end)) 100% 100% no-repeat;
+.ui-dialog {
+    .ui-dialog-buttonpane {
+        .ui-dialog-buttonset {
+            button {
+                font-family: clear-sans;
+                font-size: 1.1rem;
+                font-weight: bold;
+                letter-spacing: 2px;
+                text-transform: uppercase;
+                margin: 10px 12px 10px 0;
+                padding: 9px 18px;
+                text-decoration: none;
+                white-space: nowrap;
+                cursor: pointer;
+                outline: none;
+                border-radius: 4px;
+                border: 0;
+                color: var(--dynamix-jquery-ui-button-text-color);
+                background:
+                    -webkit-gradient(
+                            linear,
+                            left top,
+                            right top,
+                            from(var(--dynamix-jquery-ui-button-background-start)),
+                            to(var(--dynamix-jquery-ui-button-background-end))
+                        )
+                        0 0 no-repeat,
+                    -webkit-gradient(
+                            linear,
+                            left top,
+                            right top,
+                            from(var(--dynamix-jquery-ui-button-background-start)),
+                            to(var(--dynamix-jquery-ui-button-background-end))
+                        ) 0 100% no-repeat,
+                    -webkit-gradient(
+                            linear,
+                            left bottom,
+                            left top,
+                            from(var(--dynamix-jquery-ui-button-background-start)),
+                            to(var(--dynamix-jquery-ui-button-background-start))
+                        ) 0 100% no-repeat,
+                    -webkit-gradient(
+                            linear,
+                            left bottom,
+                            left top,
+                            from(var(--dynamix-jquery-ui-button-background-end)),
+                            to(var(--dynamix-jquery-ui-button-background-end))
+                        ) 100% 100% no-repeat;
+                background:
+                    linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 0 no-repeat,
+                    linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 100% no-repeat,
+                    linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-start)) 0 100% no-repeat,
+                    linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-end) 0, var(--dynamix-jquery-ui-button-background-end)) 100% 100% no-repeat;
+                background-size:
+                    100% 2px,
+                    100% 2px,
+                    2px 100%,
+                    2px 100%;
+
+                &:hover {
+                    color: var(--dynamix-jquery-ui-button-hover-color);
+                    background: -webkit-gradient(
+                        linear,
+                        left top,
+                        right top,
+                        from(var(--dynamix-jquery-ui-button-background-start)),
+                        to(var(--dynamix-jquery-ui-button-background-end))
+                    );
+                    background: linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end));
+                }
+            }
+        }
+    }
+}
+
+/* Consolidated .ui-dropdownchecklist styles */
+.ui-dropdownchecklist {
+    background-color: transparent;
+    background-image: linear-gradient(66.6deg, transparent 60%, var(--input-border-color) 40%),
+        linear-gradient(113.4deg, var(--input-border-color) 40%, transparent 60%);
+    background-position: calc(100% - 4px), 100%;
     background-size:
-        100% 2px,
-        100% 2px,
-        2px 100%,
-        2px 100%;
-}
-
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
-    color: var(--dynamix-jquery-ui-button-hover-color);
-    background: -webkit-gradient(
-        linear,
-        left top,
-        right top,
-        from(var(--dynamix-jquery-ui-button-background-start)),
-        to(var(--dynamix-jquery-ui-button-background-end))
-    );
-    background: linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end));
-}
-
-.ui-dropdownchecklist .ui-state-default {
-    background: var(--dynamix-jquery-ui-default-background);
+        4px 6px,
+        4px 6px;
+    background-repeat: no-repeat;
     border: none;
-    box-shadow: none;
+    border-bottom: 1px solid var(--input-border-color);
     outline: none;
+    height: 2.5rem;
+    line-height: 2.5rem;
     cursor: pointer;
-    height: 2.2rem;
-    line-height: 2.2rem;
-    padding: 0;
+
+    .ui-state-default {
+        background: var(--dynamix-jquery-ui-default-background);
+        border: none;
+        box-shadow: none;
+        outline: none;
+        cursor: pointer;
+        height: 2.2rem;
+        line-height: 2.2rem;
+        padding: 0;
+    }
+
+    .ui-widget-content {
+        .ui-state-default {
+            background: var(--dynamix-jquery-ui-default-background);
+        }
+    }
+}
+
+.ui-dropdownchecklist-dropcontainer-wrapper {
+    transform: translateY(-1px);
 }
 
 .ui-dropdownchecklist-group {
@@ -129,10 +163,12 @@
 }
 
 .ui-dropdownchecklist-selector {
-    border: 1px solid var(--dynamix-jquery-ui-border-color);
+    border: none;
+    border-bottom: 1px solid var(--dynamix-ui-dropdownchecklist-color);
+    outline: none;
     display: inline-block;
     cursor: pointer;
-    padding: 1px 9px 1px 8px;
+    padding: 1px 0;
 }
 
 .ui-dropdownchecklist-selector-wrapper {
@@ -140,6 +176,68 @@
     font-size: 0;
 }
 
+.ui-dropdownchecklist-dropcontainer {
+    color: var(--dynamix-ui-dropdownchecklist-color);
+    background-color: var(--dynamix-ui-dropdownchecklist-color-alt1);
+    border: 1px solid var(--dynamix-jquery-ui-border-color);
+}
+
+.ui-state-disabled {
+    color: var(--dynamix-ui-dropdownchecklist-color);
+    border-bottom-color: var(--dynamix-ui-dropdownchecklist-color-alt2);
+    opacity: 0.5;
+    cursor: default;
+}
+
+.ui-dropdownchecklist-indent {
+    padding-left: 7px;
+}
+
+.ui-dropdownchecklist-text {
+    font-family: clear-sans;
+    font-size: 1.3rem;
+    color: var(--dynamix-ui-dropdownchecklist-color);
+}
+
+.ui-dropdownchecklist-item {
+    height: 2.2rem;
+    line-height: 2.2rem;
+
+    input {
+        vertical-align: top;
+    }
+}
+
+/* Theme-specific styles for sidebar */
+.Theme--sidebar {
+    .ui-dropdownchecklist {
+        height: 3rem;
+        line-height: 3rem;
+        border: 1px solid var(--border-color);
+        background-position: calc(100% - 7px), 99%;
+    }
+
+    .ui-dropdownchecklist-selector {
+        padding: 4px 6px 1px 6px;
+    }
+
+    .ui-dropdownchecklist-group {
+        padding: 1px 6px;
+    }
+
+    .ui-dropdownchecklist-dropcontainer {
+        border: 1px solid var(--dynamix-ui-dropdownchecklist-dropcontainer-border-color);
+    }
+
+    .ui-state-disabled {
+        opacity: 0.3;
+    }
+
+    .ui-dropdownchecklist-indent {
+        padding-left: 9px;
+    }
+}
+
 .ui-widget-header {
     border: none;
     background: var(--dynamix-jquery-ui-header-background);
@@ -157,44 +255,21 @@
     background: var(--dynamix-jquery-ui-active-background);
 }
 
-.ui-dropdownchecklist-dropcontainer {
-    background: var(--dynamix-jquery-ui-dropcontainer-background);
-    border: 1px solid var(--dynamix-jquery-ui-border-color);
-}
+.ui-tailscale {
+    &-row {
+        display: flex;
+        justify-content: space-between;
+        min-width: 300px;
+        width: 100%;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+    }
 
-.ui-state-disabled {
-    color: var(--dynamix-jquery-ui-disabled-color);
-    border-color: var(--dynamix-jquery-ui-disabled-border-color);
-    background: var(--dynamix-jquery-ui-disabled-background);
-    opacity: 0.5;
-}
+    &-label {
+        flex: 1;
+    }
 
-.ui-dropdownchecklist-indent {
-    padding-left: 7px;
-}
-
-.ui-dropdownchecklist-text {
-    color: var(--dynamix-jquery-ui-text-color);
-    font-size: 1.3rem;
-}
-
-.ui-dropdownchecklist .ui-widget-content .ui-state-default {
-    background: var(--dynamix-jquery-ui-default-background);
-}
-
-.ui-tailscale-row {
-    display: flex;
-    justify-content: space-between;
-    min-width: 300px;
-    width: 100%;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-}
-
-.ui-tailscale-label {
-    flex: 1;
-}
-
-.ui-tailscale-value {
-    flex: 3;
+    &-value {
+        flex: 3;
+    }
 }

From 5c917266269c12f132897e1c40455aa05ebb1c5e Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 15:44:57 -0700
Subject: [PATCH 25/36] fix: adjust background position for
 ui-dropdownchecklist to enhance layout consistency

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

diff --git a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
index ff810a63b..87adde284 100644
--- a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
+++ b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
@@ -214,7 +214,7 @@
         height: 3rem;
         line-height: 3rem;
         border: 1px solid var(--border-color);
-        background-position: calc(100% - 7px), 99%;
+        background-position: calc(100% - 8px), calc(100% - 4px);
     }
 
     .ui-dropdownchecklist-selector {

From b48ee4dd4578a86417d53d4ebd9ed5703d7bf640 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 16:37:43 -0700
Subject: [PATCH 26/36] docs: add comment to ui-dropdownchecklist styles
 explaining width adjustment rationale

---
 emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
index 87adde284..41af805e0 100644
--- a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
+++ b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css
@@ -219,6 +219,8 @@
 
     .ui-dropdownchecklist-selector {
         padding: 4px 6px 1px 6px;
+        /* 1px 14px 1px 6px makes the dropdown wider for the share read / write dropdown but
+        IMO not needed because it makes the dropdown too wide when accompany other select inputs */
     }
 
     .ui-dropdownchecklist-group {

From cd990c8f1af2a995886f1aba0ac9f3345d2bad10 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 17:49:04 -0700
Subject: [PATCH 27/36] Refactor: Simplify footer structure and encapsulate
 array status logic in a new function for improved readability and
 maintainability.

---
 .../dynamix/include/DefaultPageLayout.php     | 61 +++++++++++++------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
index 27e0151e1..09781b99f 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
@@ -861,25 +861,52 @@ unset($pages,$page,$pgs,$pg,$icon,$nchan,$running,$start,$stop,$row,$script,$opt
 <?
 // Build footer
 annotate('Footer');
-echo '<div id="footer"><span id="statusraid"><span id="statusbar">';
-$progress = (_var($var,'fsProgress')!='') ? "&bullet;<span class='blue strong tour'>{$var['fsProgress']}</span>" : "";
-switch (_var($var,'fsState')) {
-case 'Stopped':
-  echo "<span class='red strong'><i class='fa fa-stop-circle'></i> ",_('Array Stopped'),"</span>$progress"; break;
-case 'Starting':
-  echo "<span class='orange strong'><i class='fa fa-pause-circle'></i> ",_('Array Starting'),"</span>$progress"; break;
-case 'Stopping':
-  echo "<span class='orange strong'><i class='fa fa-pause-circle'></i> ",_('Array Stopping'),"</span>$progress"; break;
-default:
-  echo "<span class='green strong'><i class='fa fa-play-circle'></i> ",_('Array Started'),"</span>$progress"; break;
+
+function getArrayStatus($var) {
+    $progress = (_var($var,'fsProgress')!='') ? "&bullet;<span class='blue strong tour'>{$var['fsProgress']}</span>" : "";
+    
+    $statusMap = [
+        'Stopped' => ['class' => 'red', 'icon' => 'stop-circle', 'text' => _('Array Stopped')],
+        'Starting' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Starting')],
+        'Stopping' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Stopping')],
+        'default' => ['class' => 'green', 'icon' => 'play-circle', 'text' => _('Array Started')]
+    ];
+    
+    $state = _var($var,'fsState');
+    $status = $statusMap[$state] ?? $statusMap['default'];
+    
+    return sprintf(
+        "<span class='%s strong'><i class='fa fa-%s'></i> %s</span>%s",
+        $status['class'],
+        $status['icon'],
+        $status['text'],
+        $progress
+    );
 }
-echo "</span></span><span id='countdown'></span><span id='user-notice' class='red-text'></span>";
-if ($wlan0) echo "<span id='wlan0' class='grey-text' onclick='wlanSettings()'><i class='fa fa-wifi fa-fw'></i></span>";
-echo "<span id='copyright'>Unraid&reg; webGui &copy;2024, Lime Technology, Inc.";
-echo " <a href='https://docs.unraid.net/go/manual/' target='_blank' title=\""._('Online manual')."\"><i class='fa fa-book'></i> "._('manual')."</a>";
-echo "<unraid-theme-switcher current='$theme' themes='".htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')."'></unraid-theme-switcher>";
-echo "</span></div>";
+
 ?>
+<footer id="footer">
+    <span id="statusraid">
+        <span id="statusbar"><?= getArrayStatus($var) ?></span>
+    </span>
+    <span id="user-notice" class="red-text"></span>
+    <?php if ($wlan0): ?>
+        <span id="wlan0" class="grey-text" onclick="wlanSettings()">
+            <i class="fa fa-wifi fa-fw"></i>
+        </span>
+    <?php endif; ?>
+    <span id="copyright">
+        Unraid&reg; webGui &copy;2024, 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>
+</footer>
+
 <script>
 // Firefox specific workaround, not needed anymore in firefox version 100 and higher
 //if (typeof InstallTrigger!=='undefined') $('#nav-block').addClass('mozilla');

From d4480c366d808d43b646bd6c0de5e6ef3ba85659 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 17:53:09 -0700
Subject: [PATCH 28/36] Refactor: Update getArrayStatus function to return an
 associative array for better data handling and improve footer rendering
 logic.

---
 .../dynamix/include/DefaultPageLayout.php     | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
index 09781b99f..492c3016e 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
@@ -863,40 +863,47 @@ unset($pages,$page,$pgs,$pg,$icon,$nchan,$running,$start,$stop,$row,$script,$opt
 annotate('Footer');
 
 function getArrayStatus($var) {
-    $progress = (_var($var,'fsProgress')!='') ? "&bullet;<span class='blue strong tour'>{$var['fsProgress']}</span>" : "";
-    
+    $progress = (_var($var,'fsProgress')!='') ? $var['fsProgress'] : "";
+
     $statusMap = [
         'Stopped' => ['class' => 'red', 'icon' => 'stop-circle', 'text' => _('Array Stopped')],
         'Starting' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Starting')],
         'Stopping' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Stopping')],
         'default' => ['class' => 'green', 'icon' => 'play-circle', 'text' => _('Array Started')]
     ];
-    
+
     $state = _var($var,'fsState');
     $status = $statusMap[$state] ?? $statusMap['default'];
-    
-    return sprintf(
-        "<span class='%s strong'><i class='fa fa-%s'></i> %s</span>%s",
-        $status['class'],
-        $status['icon'],
-        $status['text'],
-        $progress
-    );
+
+    return [
+        'class' => $status['class'],
+        'icon' => $status['icon'],
+        'text' => $status['text'],
+        'progress' => $progress
+    ];
 }
 
 ?>
 <footer id="footer">
     <span id="statusraid">
-        <span id="statusbar"><?= getArrayStatus($var) ?></span>
+        <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>
     </span>
     <span id="user-notice" class="red-text"></span>
-    <?php if ($wlan0): ?>
+    <? if ($wlan0): ?>
         <span id="wlan0" class="grey-text" onclick="wlanSettings()">
             <i class="fa fa-wifi fa-fw"></i>
         </span>
-    <?php endif; ?>
+    <? endif; ?>
     <span id="copyright">
-        Unraid&reg; webGui &copy;2024, Lime Technology, Inc.
+        Unraid&reg; webGui &copy;<?=date('Y')?>, Lime Technology, Inc.
         <a href="https://docs.unraid.net/go/manual/" target="_blank" title="<?=_('Online manual')?>">
             <i class="fa fa-book"></i> <?=_('manual')?>
         </a>

From d11b22215f48902962d8c43bf5105e9001f37d9e Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 17:59:45 -0700
Subject: [PATCH 29/36] refactor: Move footer rendering logic and
 getArrayStatus function to a new Footer.php file for improved organization
 and maintainability.

---
 .../dynamix/include/DefaultPageLayout.php     | 55 +------------------
 .../include/DefaultPageLayout/Footer.php      | 52 ++++++++++++++++++
 2 files changed, 53 insertions(+), 54 deletions(-)
 create mode 100644 emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
index 492c3016e..e71f307c1 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
@@ -858,61 +858,8 @@ unset($pages,$page,$pgs,$pg,$icon,$nchan,$running,$start,$stop,$row,$script,$opt
 <div class="spinner fixed"></div>
 <form name="rebootNow" method="POST" action="/webGui/include/Boot.php"><input type="hidden" name="cmd" value="reboot"></form>
 <iframe id="progressFrame" name="progressFrame" frameborder="0"></iframe>
-<?
-// Build footer
-annotate('Footer');
 
-function getArrayStatus($var) {
-    $progress = (_var($var,'fsProgress')!='') ? $var['fsProgress'] : "";
-
-    $statusMap = [
-        'Stopped' => ['class' => 'red', 'icon' => 'stop-circle', 'text' => _('Array Stopped')],
-        'Starting' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Starting')],
-        'Stopping' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Stopping')],
-        'default' => ['class' => 'green', 'icon' => 'play-circle', 'text' => _('Array Started')]
-    ];
-
-    $state = _var($var,'fsState');
-    $status = $statusMap[$state] ?? $statusMap['default'];
-
-    return [
-        'class' => $status['class'],
-        'icon' => $status['icon'],
-        'text' => $status['text'],
-        'progress' => $progress
-    ];
-}
-
-?>
-<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']?>
-            </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>
-    <? endif; ?>
-    <span id="copyright">
-        Unraid&reg; webGui &copy;<?=date('Y')?>, 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>
-</footer>
+<? require_once "$docroot/webGui/include/DefaultPageLayout/Footer.php"; ?>
 
 <script>
 // Firefox specific workaround, not needed anymore in firefox version 100 and higher
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
new file mode 100644
index 000000000..ee7e03654
--- /dev/null
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -0,0 +1,52 @@
+<?
+function getArrayStatus($var) {
+    $progress = (_var($var,'fsProgress')!='') ? $var['fsProgress'] : "";
+
+    $statusMap = [
+        'Stopped' => ['class' => 'red', 'icon' => 'stop-circle', 'text' => _('Array Stopped')],
+        'Starting' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Starting')],
+        'Stopping' => ['class' => 'orange', 'icon' => 'pause-circle', 'text' => _('Array Stopping')],
+        'default' => ['class' => 'green', 'icon' => 'play-circle', 'text' => _('Array Started')]
+    ];
+
+    $state = _var($var,'fsState');
+    $status = $statusMap[$state] ?? $statusMap['default'];
+
+    return [
+        'class' => $status['class'],
+        'icon' => $status['icon'],
+        'text' => $status['text'],
+        'progress' => $progress
+    ];
+}
+?>
+
+<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']?>
+            </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>
+    <? endif; ?>
+    <span id="copyright">
+        Unraid&reg; webGui &copy;<?=date('Y')?>, 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>
+</footer>
\ No newline at end of file

From e6d4c8ca29d81113fea59d8749cdf80e3ae395be Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 18:36:46 -0700
Subject: [PATCH 30/36] feat: Add releaseDateYear function to dynamically
 display the copyright year in the footer based on the build timestamp

---
 .../include/DefaultPageLayout/Footer.php        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
index ee7e03654..5563991f7 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -1,4 +1,17 @@
 <?
+function releaseDateYear() {
+    global $var;
+
+    $timestamp = _var($var, 'regBuildTime', '');
+    if (!$timestamp) {
+        return '';
+    }
+
+    $date = new DateTime();
+    $date->setTimestamp($timestamp);
+    return $date->format('Y');
+}
+
 function getArrayStatus($var) {
     $progress = (_var($var,'fsProgress')!='') ? $var['fsProgress'] : "";
 
@@ -40,7 +53,7 @@ function getArrayStatus($var) {
         </span>
     <? endif; ?>
     <span id="copyright">
-        Unraid&reg; webGui &copy;<?=date('Y')?>, Lime Technology, Inc.
+        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>
@@ -49,4 +62,4 @@ function getArrayStatus($var) {
             themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
         </unraid-theme-switcher>
     </span>
-</footer>
\ No newline at end of file
+</footer>

From 18ea6d8e35048dc05fa787bf465afcb947a7cfde Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 18:39:26 -0700
Subject: [PATCH 31/36] fix: Correct logic in releaseDateYear function to only
 set timestamp if it exists, ensuring accurate year display in footer

---
 .../plugins/dynamix/include/DefaultPageLayout/Footer.php   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
index 5563991f7..26251b7f4 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -2,13 +2,12 @@
 function releaseDateYear() {
     global $var;
 
+    $date = new DateTime();
     $timestamp = _var($var, 'regBuildTime', '');
-    if (!$timestamp) {
-        return '';
+    if ($timestamp) {
+        $date->setTimestamp($timestamp);
     }
 
-    $date = new DateTime();
-    $date->setTimestamp($timestamp);
     return $date->format('Y');
 }
 

From d19f3d2a3a6909a3140b53016fa70d7b311f048c Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 20:53:22 -0700
Subject: [PATCH 32/36] chore: Add PHPDoc comments for releaseDateYear and
 getArrayStatus functions to improve code documentation and clarity.

---
 .../dynamix/include/DefaultPageLayout/Footer.php       | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
index 26251b7f4..80909394b 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -1,4 +1,8 @@
 <?
+/**
+ * Returns the release year based on regBuildTime or the current year if not available
+ * @return string Year in YYYY format
+ */
 function releaseDateYear() {
     global $var;
 
@@ -10,7 +14,11 @@ function releaseDateYear() {
 
     return $date->format('Y');
 }
-
+/**
+ * Returns array status information based on filesystem state
+ * @param array $var Global state variable containing filesystem information
+ * @return array Status with class, icon, text and progress information
+ */
 function getArrayStatus($var) {
     $progress = (_var($var,'fsProgress')!='') ? $var['fsProgress'] : "";
 

From 66aef25defcf58adcb2bdfc330ad7d50a597f907 Mon Sep 17 00:00:00 2001
From: bergware <bergware@users.noreply.github.com>
Date: Sat, 5 Apr 2025 11:09:33 +0200
Subject: [PATCH 33/36] Networking: fix duplicate metrics handling

---
 emhttp/plugins/dynamix/Eth0.page | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/emhttp/plugins/dynamix/Eth0.page b/emhttp/plugins/dynamix/Eth0.page
index 03393acda..7b4858ea9 100644
--- a/emhttp/plugins/dynamix/Eth0.page
+++ b/emhttp/plugins/dynamix/Eth0.page
@@ -162,13 +162,6 @@ function prepareSettings(form) {
   if (brnics.length > 1) form.BRSTP.value = 'yes';
   if ($(form).find('input[name="#arg[1]"]').val() == 'none') return true;
 
-  var metrics = [], metrics6 = [];
-  $(form).find('input[name^="METRIC:"]').each(function(){if($(this).val() > 0) metrics.push($(this).val());});
-  $(form).find('input[name^="METRIC6:"]').each(function(){if($(this).val() > 0) metrics6.push($(this).val());});
-  if (metrics.same() || metrics6.same()) {
-    swal({title:'Duplicate metrics', text:'List of default gateways contains duplicate metric values', animation:'none', type:'error', html:true, confirmButtonText:"_(Ok)_"});
-    return false;
-  }
   // enable form items for submission
   $(form).find('input,select').prop('disabled',false);
   if (form.TYPE.value == 'access') {
@@ -213,7 +206,6 @@ function prepareSettings(form) {
   $(form).find('select[name^="USE_DHCP:"]').each(function() {
     var i = $(this).prop('name').split(':')[1];
     var protocol = $(form).find('select[name="PROTOCOL:'+i+'"]').val() || 'ipv4';
-    var metric = $(form).find('input[name="METRIC:'+i+'"]').val();
     var gw4 = (port == 'eth0') ? true : $(form).find('input[name="USE_GW4:'+i+'"]').prop('checked');
     if (protocol != 'ipv6' && $(this).val() != 'no') {
       $(form).find('input[name="IPADDR:'+i+'"]').val('');
@@ -224,7 +216,6 @@ function prepareSettings(form) {
   $(form).find('select[name^="USE_DHCP6:"]').each(function() {
     var i = $(this).prop('name').split(':')[1];
     var protocol = $(form).find('select[name="PROTOCOL:'+i+'"]').val() || 'ipv4';
-    var metric = $(form).find('input[name="METRIC6:'+i+'"]').val();
     var gw6 = (port == 'eth0') ? true : $(form).find('input[name="USE_GW6:'+i+'"]').prop('checked');
     if (protocol != 'ipv4' && $(this).val() != 'no') {
       $(form).find('input[name="IPADDR6:'+i+'"]').val('');
@@ -240,6 +231,13 @@ function prepareSettings(form) {
       $(form).find('input[name="'+name+'"]').val(data);
     });
   }
+  var metrics = [], metrics6 = [];
+  $(form).find('input[name^="METRIC:"]').each(function(){if($(this).val() > 0) metrics.push($(this).val());});
+  $(form).find('input[name^="METRIC6:"]').each(function(){if($(this).val() > 0) metrics6.push($(this).val());});
+  if (metrics.same() || metrics6.same()) {
+    swal({title:"_(Duplicate metrics)_", text:"_(List of default gateways contains duplicate metric values)_", animation:'none', type:'error', html:true, confirmButtonText:"_(Ok)_"});
+    return false;
+  }
   // force default MTU if jumbo frames are not enabled
   if ($(form).find('input[name="USE_MTU"]').prop('checked') == false) $(form).find('input[name="MTU"]').val('');
   $(form).find('input[name="#arg[1]"]').val(arg1[port]);

From 2f780b1a91f272a71ddd1235c9313b0af9d678f6 Mon Sep 17 00:00:00 2001
From: bergware <bergware@users.noreply.github.com>
Date: Sun, 6 Apr 2025 01:13:39 +0200
Subject: [PATCH 34/36] Wireless: improved start / stop of wifi service

---
 etc/rc.d/rc.wireless | 85 ++++++++++++++++++++++----------------------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/etc/rc.d/rc.wireless b/etc/rc.d/rc.wireless
index 2a19d65ee..2e4d9f058 100755
--- a/etc/rc.d/rc.wireless
+++ b/etc/rc.d/rc.wireless
@@ -172,56 +172,57 @@ wifi_running(){
 wifi_start(){
   log "Starting $DAEMON..."
   local REPLY
-  if [[ -e $SYSTEM/$PORT ]]; then
-    LINK=shim-$PORT
-    [[ -e $SYSTEM/$LINK ]] || run ip link add link $PORT name $LINK type ipvtap mode l2 bridge
-    run ip link set $PORT up
-    run ip link set $LINK up
-    # set regulatory region (if set) upon start
-    REGION=$(grep -Pom1 '^REGION="\K[^"]+' $CFG)
-    REGION_XX=$(grep -Pom1 '^REGION_XX="\K[^"]+' $CFG)
-    [[ $REGION == '00' ]] && CC=$REGION_XX || CC=$REGION
-    [[ -n $CC ]] && run iw reg set $CC
-    # initialise openssl encryption parameters
-    $OPENSSL load
-    # start active SSID
-    $STARTWIFI
-    if ! carrier_up $PORT; then
-      # try the saved SSIDs
-      for SSID in $(grep -P '^\[.+\]$' $CFG 2>/dev/null | sed 1d | sed -r 's/\[|\]/"/g'); do
-        [[ -n $SSID ]] && $STARTWIFI "$SSID" || break
-        if carrier_up $PORT; then break; fi
-      done
-    fi
-    if wifi_running; then REPLY="Started"; else REPLY="Failed"; fi
-  else
-    REPLY="No Wifi present"
+  if [[ ! -e $SYSTEM/$PORT ]]; then
+    log "$DAEMON...  No Wifi present."
+    return
   fi
+  if [[ $(var WIFI $CFG) != yes ]]; then
+    log "$DAEMON...  Wifi not enabled."
+    return
+  fi
+  LINK=shim-$PORT
+  [[ -e $SYSTEM/$LINK ]] || run ip link add link $PORT name $LINK type ipvtap mode l2 bridge
+  # set regulatory region (if set) upon start
+  REGION=$(var REGION $CFG)
+  REGION_XX=$(var REGION_XX $CFG)
+  [[ $REGION == '00' ]] && CC=$REGION_XX || CC=$REGION
+  [[ -n $CC ]] && run iw reg set $CC
+  # initialise openssl encryption parameters
+  $OPENSSL load
+  # start active SSID
+  $STARTWIFI
+  if ! carrier_up $PORT; then
+    # try the saved SSIDs
+    for SSID in $(grep -P '^\[.+\]$' $CFG | sed 1d | sed -r 's/\[|\]/"/g'); do
+      [[ -n $SSID ]] && $STARTWIFI "$SSID" || break
+      if carrier_up $PORT; then break; fi
+    done
+  fi
+  if wifi_running; then REPLY="Started"; else REPLY="Failed"; fi
   log "$DAEMON...  $REPLY."
 }
 
 wifi_stop(){
   log "Stopping $DAEMON..."
   local REPLY
-  if [[ -e $SYSTEM/$PORT ]]; then
-    IP=ipv4
-    DHCP=$DHCP4
-    DNS=$DNS4
-    ipaddr_down
-    if [[ -n $DHCP6 ]]; then
-      IP=ipv6
-      DHCP=$DHCP6
-      DNS=$DNS6
-      ipaddr_down
-    fi
-    run pkill wpa_supplicant
-    run iw dev $PORT disconnect
-    run ip addr flush dev $PORT
-    run rm -f $INI
-    if ! wifi_running; then REPLY="Stopped"; else REPLY="Failed"; fi
-  else
-    REPLY="No Wifi present"
+  if [[ ! -e $SYSTEM/$PORT ]]; then
+    log "$DAEMON...  No Wifi present."
+    return
   fi
+  IP=ipv4
+  DHCP=$DHCP4
+  DNS=$DNS4
+  ipaddr_down
+  if [[ -n $DHCP6 ]]; then
+    IP=ipv6
+    DHCP=$DHCP6
+    DNS=$DNS6
+    ipaddr_down
+  fi
+  run pkill wpa_supplicant
+  run iw dev $PORT disconnect
+  run rm -f $INI
+  if ! wifi_running; then REPLY="Stopped"; else REPLY="Failed"; fi
   log "$DAEMON...  $REPLY."
 }
 

From bcc1287d53dcb37d48c8db57dc4c7903b25807b1 Mon Sep 17 00:00:00 2001
From: bergware <bergware@users.noreply.github.com>
Date: Mon, 7 Apr 2025 10:10:52 +0200
Subject: [PATCH 35/36] Update Wireless.php

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

diff --git a/emhttp/plugins/dynamix/include/Wireless.php b/emhttp/plugins/dynamix/include/Wireless.php
index 1dabe0757..5ffcb6c55 100644
--- a/emhttp/plugins/dynamix/include/Wireless.php
+++ b/emhttp/plugins/dynamix/include/Wireless.php
@@ -48,7 +48,7 @@ function scanWifi($port) {
       // store MAC address only
       $wlan[$network][0] = substr($wlan[$network][0],4,17);
       // identify open network
-      $wlan[$network][4] = $wlan[$network][4] ?? 'open';
+      $wlan[$network][4] ??= 'open';
     } else {
       // group radio frequencies
       $wlan[$network][1] .= ' '.$attr[1];

From f5b4145a2bb4eb6cc408931e22d42b0dd079f255 Mon Sep 17 00:00:00 2001
From: SimonFair <39065407+SimonFair@users.noreply.github.com>
Date: Mon, 7 Apr 2025 13:31:02 +0100
Subject: [PATCH 36/36] Fix to rc.libvirt

---
 etc/rc.d/rc.libvirt | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/etc/rc.d/rc.libvirt b/etc/rc.d/rc.libvirt
index 14128448d..ae1c88e7b 100755
--- a/etc/rc.d/rc.libvirt
+++ b/etc/rc.d/rc.libvirt
@@ -54,7 +54,7 @@ vmlist(){
   for ARG in ${@: 1}; do
     [[ $ARG == all ]] && STATE="$STATE --all" || STATE="$STATE --state-$ARG"
   done
-  virsh list --uuid $STATE | tail -n +3 | grep -v '^$'
+  virsh list --uuid $STATE | tail -n +1 | grep -v '^$'
 }
 
 waitfor(){
@@ -348,6 +348,9 @@ case "$1" in
 'status')
   libvirtd_status
   ;;
+'stopvm')
+  stop_running_machines
+  ;;
 *)
   echo "Usage: $BASENAME test|start|stop|restart|status"
   exit 1