From a444de453a0ef30169cfe70b0dc570d2c58c49f8 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 20 Jan 2026 16:08:26 +0000
Subject: [PATCH] fix(ui): Fix Proxmox settings tab selection not updating
 visually. Related to #1127

SolidJS requires reactive comparisons inside For loops to use getter
functions. Changed isActive from a static value to a getter function
in both SettingsSectionNav.tsx and Settings.tsx mobile tabs.
---
 frontend-modern/src/components/Settings/Settings.tsx      | 4 ++--
 .../src/components/Settings/SettingsSectionNav.tsx        | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx
index bb60e4710..de4eb897a 100644
--- a/frontend-modern/src/components/Settings/Settings.tsx
+++ b/frontend-modern/src/components/Settings/Settings.tsx
@@ -2545,7 +2545,7 @@ const Settings: Component<SettingsProps> = (props) => {
                 >
                   <For each={flatTabs}>
                     {(tab) => {
-                      const isActive = activeTab() === tab.id;
+                      const isActive = () => activeTab() === tab.id;
                       const disabled = tab.disabled;
                       return (
                         <button
@@ -2553,7 +2553,7 @@ const Settings: Component<SettingsProps> = (props) => {
                           disabled={disabled}
                           class={`px-3 py-2 text-xs font-medium border-b-2 transition-colors whitespace-nowrap ${disabled
                             ? 'opacity-60 cursor-not-allowed text-gray-400 dark:text-gray-600 border-transparent'
-                            : isActive
+                            : isActive()
                               ? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
                               : 'text-gray-600 dark:text-gray-400 border-transparent hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
                             }`}
diff --git a/frontend-modern/src/components/Settings/SettingsSectionNav.tsx b/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
index f390c051b..5fdfb00c4 100644
--- a/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
+++ b/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
@@ -42,8 +42,8 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
     <div class={`flex flex-wrap items-center gap-2 sm:gap-4 ${props.class ?? ''}`} aria-label="Settings sections">
       <For each={allSections}>
         {(section) => {
-          const isActive = section.id === props.current;
-          const classes = isActive
+          const isActive = () => section.id === props.current;
+          const classes = () => isActive()
             ? `${baseClasses} text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400`
             : `${baseClasses} hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50`;
 
@@ -52,9 +52,9 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
           return (
             <button
               type="button"
-              class={classes}
+              class={classes()}
               onClick={() => props.onSelect(section.id)}
-              aria-pressed={isActive}
+              aria-pressed={isActive()}
             >
               <Icon size={14} stroke-width={2} class="sm:w-4 sm:h-4" />
               <span class="whitespace-nowrap">{section.label}</span>