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

Merge improvement/settings-panel-trim: tidy Settings height, drop native unload prompt

Browse source
This commit is contained in:
npeter83 2026-06-19 00:04:19 +02:00
commit e94dde1950
2 changed files with 11 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/App.tsx
View file

@ -374,17 +374,9 @@ export default function App() {
confirmRef.current = confirm;
pageRef.current = page;
});
// Warn on a hard navigation (reload / tab close) while preference changes are unsaved.
useEffect(() => {
if (!prefsDirty) return;
const handler = (e: BeforeUnloadEvent) => {
e.preventDefault();
e.returnValue = "";
};
window.addEventListener("beforeunload", handler);
return () => window.removeEventListener("beforeunload", handler);
}, [prefsDirty]);
// No beforeunload guard: a reload/close can only raise the browser's own native prompt
// (we can't show our in-app confirm there), and unsaved prefs are local-only — they
// revert to the saved server baseline on the next load — so there's nothing to lose.
if (meQuery.isLoading)
return (

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

@ -92,22 +92,14 @@ export default function SettingsPanel({
})}
</nav>
{/* All tabs stacked in one grid cell so the panel sizes to the tallest tab
(stable height, no jump on switch); the active one is shown on top. */}
<div className="grid flex-1 min-w-0">
{TABS.map((tabItem) => (
<div
key={tabItem.id}
className={`[grid-area:1/1] p-4 ${
tab === tabItem.id ? "" : "invisible pointer-events-none"
}`}
>
{tabItem.id === "appearance" && <Appearance prefs={prefs} />}
{tabItem.id === "notifications" && <Notifications prefs={prefs} />}
{tabItem.id === "sync" && <Sync me={me} />}
{tabItem.id === "account" && <Account me={me} onOpenWizard={onOpenWizard} />}
</div>
))}
{/* Render only the active tab so the panel sizes to its actual content. (Stacking
every tab in one grid cell made the whole panel as tall as the tallest tab —
Account — leaving the short tabs with dead space and a needless scrollbar.) */}
<div className="flex-1 min-w-0 p-4">
{tab === "appearance" && <Appearance prefs={prefs} />}
{tab === "notifications" && <Notifications prefs={prefs} />}
{tab === "sync" && <Sync me={me} />}
{tab === "account" && <Account me={me} onOpenWizard={onOpenWizard} />}
</div>
</div>