peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(settings): persist the active tab across reloads

Browse source 
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.
This commit is contained in:
npeter83 2026-06-17 14:30:56 +02:00
parent 9a9d700cf3
commit 3d6e278dd8
1 changed files with 13 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/SettingsPanel.tsx
View file

@ -24,6 +24,14 @@ const TABS: { id: TabId; icon: typeof Monitor }[] = [
{ id: "account", icon: User }, { 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 // 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 // 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. // shown by the Header; the tab rail stays as in-page sub-navigation.
@ -43,7 +51,11 @@ export default function SettingsPanel({
onOpenWizard: () => void; onOpenWizard: () => void;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [tab, setTab] = useState<TabId>("appearance"); const [tab, setTabState] = useState<TabId>(loadSettingsTab);
const setTab = (id: TabId) => {
setTabState(id);
localStorage.setItem(SETTINGS_TAB_KEY, id);
};
return ( return (
<div className="p-4 max-w-3xl w-full mx-auto"> <div className="p-4 max-w-3xl w-full mx-auto">