From 3d6e278dd858165dd2f8277a781b1f4e9aa85703 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Wed, 17 Jun 2026 14:30:56 +0200 Subject: [PATCH] fix(settings): persist the active tab across reloads The Settings tab was local React state, so F5 always snapped back to Appearance. Persist it in localStorage (siftlode.settingsTab), validated against the tab list. --- frontend/src/components/SettingsPanel.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx index 653dc2b..47b44b1 100644 --- a/frontend/src/components/SettingsPanel.tsx +++ b/frontend/src/components/SettingsPanel.tsx @@ -24,6 +24,14 @@ const TABS: { id: TabId; icon: typeof Monitor }[] = [ { id: "account", icon: User }, ]; +// Persist the active tab so a reload (F5) keeps the user where they were instead of +// snapping back to "appearance". +const SETTINGS_TAB_KEY = "siftlode.settingsTab"; +function loadSettingsTab(): TabId { + const v = localStorage.getItem(SETTINGS_TAB_KEY); + return TABS.some((tabItem) => tabItem.id === v) ? (v as TabId) : "appearance"; +} + // Settings as a page (Design B): rendered in the main content area, not an overlay. It keeps // the frosted `.glass` surface so it still refracts the ambient backdrop. The page title is // shown by the Header; the tab rail stays as in-page sub-navigation. @@ -43,7 +51,11 @@ export default function SettingsPanel({ onOpenWizard: () => void; }) { const { t } = useTranslation(); - const [tab, setTab] = useState("appearance"); + const [tab, setTabState] = useState(loadSettingsTab); + const setTab = (id: TabId) => { + setTabState(id); + localStorage.setItem(SETTINGS_TAB_KEY, id); + }; return (