vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-05-20 01:01:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(ui): Fix Proxmox settings tab selection not updating visually. Related to #1127

Browse source 
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.
This commit is contained in:
rcourtman 2026-01-20 16:08:26 +00:00
parent a6413b7346
commit a444de453a
2 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend-modern/src/components/Settings/Settings.tsx
View file

@ -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'
}`}

8
frontend-modern/src/components/Settings/SettingsSectionNav.tsx
View file

@ -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>