fix(desktop): Settings sidebar redirected to /chats instead of scrolling

App uses HashRouter, so an <a href="#profile"> changes the routing
hash and the router can't find a match — it falls back to /chats.
Replace anchors with buttons that scroll the target section via
scrollIntoView and update the active highlight optimistically.
This commit is contained in:
byGalax
2026-05-16 01:12:50 +02:00
parent 12e4b597a0
commit fc9f1ec143
+16 -4
View File
@@ -159,11 +159,23 @@ export function SettingsPage() {
{sections.map(({ id, label, Icon }) => { {sections.map(({ id, label, Icon }) => {
const active = activeId === id; const active = activeId === id;
return ( return (
<a // NOTE: must NOT be an `<a href="#id">` — the app uses
// HashRouter where the URL hash IS the route. Anchor links
// would navigate away from /settings instead of scrolling.
// We scroll the section into view programmatically and
// optimistically set activeId so the click feels instant.
<button
key={id} key={id}
href={'#' + id} type="button"
onClick={() => {
const el = document.getElementById(id);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
setActiveId(id);
}
}}
className={ className={
'flex cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' + 'flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
(active (active
? 'bg-accent/15 text-fg' ? 'bg-accent/15 text-fg'
: 'text-fg-muted hover:bg-surface-2 hover:text-fg') : 'text-fg-muted hover:bg-surface-2 hover:text-fg')
@@ -175,7 +187,7 @@ export function SettingsPage() {
} }
/> />
<span className="truncate">{label}</span> <span className="truncate">{label}</span>
</a> </button>
); );
})} })}
</nav> </nav>