feat(header): gate consolidated <unraid-header> on Unraid 7.3+

emhttp/plugins/dynamix/DisplaySettings.page

@@ -260,6 +260,12 @@ _(Dynamix color theme)_:
   <?endforeach; // $themeHelper set in DefaultPageLayout.php ?>
   </select>
 
+_(Header logo style)_:
+: <select name="headerLogo">
+  <?=mk_option($display['headerLogo'] ?? "", "", _('Gradient'))?>
+  <?=mk_option($display['headerLogo'] ?? "", "theme", _('Theme adaptive'))?>
+  </select>
+
 _(Used / Free columns)_:
 : <select name="text">
   <?=mk_option($display['text'], "0", _('Text'))?>

emhttp/plugins/dynamix/default.cfg

@@ -29,6 +29,7 @@ hotssd="60"
 maxssd="70"
 power=""
 theme="white"
+headerLogo=""
 locale=""
 raw=""
 rtl=""

emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php

@@ -1,7 +1,55 @@
-<div id="header" class="<?=$display['banner']?>">
+<?php
+// Unraid 7.3+ ships a single consolidated header web component (<unraid-header>)
+// that owns the whole header and its responsive layout. Older releases keep the
+// legacy multi-component header (logo/version + user profile) as a fallback.
+$headerOsVersion = @parse_ini_file('/etc/unraid-version')['version'] ?? '0';
+$headerUseConsolidated = version_compare($headerOsVersion, '7.3', '>=');
+$headerClass = trim($display['banner'] . ($headerUseConsolidated ? ' unraid-consolidated-header' : ''));
+?>
+<div id="header" class="<?=$headerClass?>">
+<?php if ($headerUseConsolidated): ?>
+    <?php
+        require_once "$docroot/plugins/dynamix.my.servers/include/state.php";
+        $headerServerState = new ServerState();
+    ?>
+    <script>
+    window.LOCALE = <?= json_encode($_SESSION['locale'] ?? 'en_US', JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
+    </script>
+    <?php
+        // The consolidated header owns the array-usage bar for sidebar themes,
+        // where the legacy #array-usage-sidenav widget used to be injected.
+        $headerShowArrayUsage = ($display['usage'] && $themeHelper->isSidebarTheme()) ? 'true' : 'false';
+        $headerLogoStyle = (($display['headerLogo'] ?? '') === 'theme') ? 'theme' : '';
+    ?>
+    <style>
+        /* Light-DOM fallback: paint the logo before <unraid-header> mounts so the
+           header does not pop in on page load. #header is already
+           display:flex; align-items:center, so the logo lands left + vertically
+           centered where the mounted logo sits. The mount engine calls
+           replaceChildren(), so this markup is discarded when the component
+           upgrades. */
+        #header.unraid-consolidated-header .unraid-header-boot-logo {
+            display: inline-flex;
+            align-items: center;
+        }
+        #header.unraid-consolidated-header .unraid-header-boot-logo img {
+            width: 14rem;
+            max-width: 100%;
+            max-height: 3rem;
+            height: auto;
+            object-fit: contain;
+        }
+    </style>
+    <unraid-header
+        server="<?= $headerServerState->getServerStateJsonForHtmlAttr() ?>"
+        show-array-usage="<?= $headerShowArrayUsage ?>"
+        header-logo-style="<?= $headerLogoStyle ?>"
+    ><a class="unraid-header-boot-logo" href="https://unraid.net" target="_blank" rel="noopener" aria-label="Unraid"><img src="/webGui/images/UN-logotype-gradient.svg" alt="Unraid" /></a></unraid-header>
+<?php else: ?>
     <unraid-header-os-version></unraid-header-os-version>
     <? if ($display['usage'] && $themeHelper->isSidebarTheme()): ?>
         <span id='array-usage-sidenav'></span>
     <? endif; ?>
     <?include "$docroot/plugins/dynamix.my.servers/include/myservers2.php"?>
+<?php endif; ?>
 </div>

emhttp/plugins/dynamix/styles/default-base.css

@@ -476,6 +476,33 @@ textarea:where(:not(.unapi *)) {
     align-self: stretch;
 }
 
+#header.unraid-consolidated-header {
+    align-items: stretch;
+    gap: 0;
+    min-height: 86px;
+    padding-left: 0;
+    background-size: 100% 86px;
+}
+
+#header.unraid-consolidated-header unraid-header {
+    align-self: stretch;
+    display: block;
+    width: 100%;
+}
+
+#header.unraid-consolidated-header #UnraidHeader {
+    min-height: inherit;
+    padding: .5rem 1rem;
+}
+
+#header.unraid-consolidated-header .block {
+    background-color: transparent;
+    float: none;
+    margin: 0;
+    padding: 0;
+    text-align: inherit;
+}
+
 /**
  * Tools page, rotate the Downgrade icon to prevent needing to add a new icon to the icon font.
  * The pseudo element is targeted here otherwise the rotation of the span would mess up spacing with the text.
@@ -2407,6 +2434,15 @@ div#title.ud {
         padding-left: 80px;
     }
 
+    #header.unraid-consolidated-header {
+        padding-left: 0;
+    }
+
+    #header.unraid-consolidated-header #UnraidHeader {
+        padding-left: calc(64px + 1rem);
+        padding-right: 1rem;
+    }
+
     #header .logo {
         margin-left: 0;
         color: var(--brand-red);
@@ -2814,4 +2850,4 @@ div#title.ud {
     label.checkbox input:checked ~ .checkmark {
         background-color: var(--brand-orange);
     }
-}
+}