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

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

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