From d9e9f7d7547af2474e8f653346903b1f2dffe06d Mon Sep 17 00:00:00 2001
From: stefanodangelo <61756862+stefanodangelo@users.noreply.github.com>
Date: Mon, 19 Oct 2026 18:45:57 +0200
Subject: [PATCH] feat: render the top bar from a navItems list

Replace the hand-written tab buttons with one list (navItems) that the
top bar renders. Same tabs, same order, same conditions, no visual
change. A feature adds its tab by adding one entry to the list instead
of editing the markup.
---
 multiace/web/frontend/app.js     | 22 ++++++++++++++++++++++
 multiace/web/frontend/index.html | 13 ++-----------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/multiace/web/frontend/app.js b/multiace/web/frontend/app.js
index d4997cc..aa31130 100644
--- a/multiace/web/frontend/app.js
+++ b/multiace/web/frontend/app.js
@@ -51,6 +51,27 @@ createApp({
         }
       }
     }
+    // The navigation entries, in order. The top bar renders this list, so
+    // a feature adds a tab by adding one entry here instead of editing the
+    // markup.
+    const navItems = computed(() => {
+      const items = [];
+      if (state.mode !== "normal") {
+        items.push({key: "dashboard", label: t("ui.tabs.dashboard")});
+      }
+      items.push({key: "spools", label: t("ui.tabs.spools")});
+      items.push({key: "config", label: t("ui.tabs.config")});
+      // Calibration hangs off Config: shown only while one of the two is
+      // open, so it cannot vanish under the user once selected.
+      if (CALIBRATION_TAB && state.mode !== "normal"
+          && (tab.value === "config" || tab.value === "calibration")) {
+        items.push({key: "calibration", label: t("ui.tabs.calibration")});
+      }
+      for (const p of plugins.items) {
+        items.push({key: "plugin:" + p.name, label: p.label});
+      }
+      return items;
+    });
     function pluginIframeSrc(p) {
       const u = (p && p.ui_url) || "/";
       return `/plugin/${p.name}${u.startsWith("/") ? u : "/" + u}`;
@@ -7414,6 +7435,7 @@ createApp({
       headPlanMapping, multiTopology, slotHead, pinLabel,
       updateState, updateCheck, updateApply,
       debugState, debugEnable, debugDisable,
+      navItems,
       plugins, refreshPlugins, pluginIframeSrc,
       notifications, notifWarnOnly, notifTime, dismissNotification, dismissAllNotifications,
       confirmDialog, okConfirm, altConfirm, cancelConfirm, confirmInputError,
diff --git a/multiace/web/frontend/index.html b/multiace/web/frontend/index.html
index 81ccd59..be857a8 100644
--- a/multiace/web/frontend/index.html
+++ b/multiace/web/frontend/index.html
@@ -311,17 +311,8 @@ <h1>m<span class="hl">U</span>lt<span class="hl">1</span>ACE
              :title="t('ui.common.firmware') + ' ' + printerFw">· {{ printerName }}</small>
     </h1>
     <nav>
-      <button v-if="state.mode !== 'normal'"
-              :class="{active: tab==='dashboard'}" @click="tab='dashboard'">{{ t('ui.tabs.dashboard') }}</button>
-      <button :class="{active: tab==='spools'}" @click="tab='spools'">{{ t('ui.tabs.spools') }}</button>
-      <button :class="{active: tab==='config'}" @click="tab='config'">{{ t('ui.tabs.config') }}</button>
-      <!-- Calibration hangs off Config: shown only while one of the two is
-           open, so it cannot vanish under the user once selected. -->
-      <button v-if="CALIBRATION_TAB && state.mode !== 'normal' && (tab==='config' || tab==='calibration')"
-              :class="{active: tab==='calibration'}" @click="tab='calibration'">{{ t('ui.tabs.calibration') }}</button>
-      <button v-for="p in plugins.items" :key="p.name"
-              :class="{active: tab===('plugin:'+p.name)}"
-              @click="tab='plugin:'+p.name">{{ p.label }}</button>
+      <button v-for="it in navItems" :key="it.key"
+              :class="{active: tab===it.key}" @click="tab=it.key">{{ it.label }}</button>
     </nav>
     <input ref="uploadInput" type="file" accept=".gcode,.gco,.g"
            class="upload-input" @change="onUploadGcode($event.target.files)">