authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-03-28 15:01:37-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-03-28 22:01:37+00:00
logc426452239e06417ec8e231b7883f9c2292df63c
tree34a2fe26c761c070ffc38e0645ee689b73e16319
parent73b2f255a9c81f1efaa4133bee581d071abe6841
signature Signed by PGP key B5690EEEBB952194

Tighten settings nav and add Escape back navigation (#1503)

2 files changed, 19 insertions(+), 4 deletions(-)

apps/web/src/components/settings/SettingsSidebarNav.tsx+3-3
......@@ -41,8 +41,8 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
4141 isActive={isActive}
4242 className={
4343 isActive
44 ? "gap-2 px-2 py-2 text-left text-sm text-foreground"
45 : "gap-2 px-2 py-2 text-left text-sm text-muted-foreground hover:text-foreground/80"
44 ? "gap-2 px-2 py-2 text-left text-xs text-foreground"
45 : "gap-2 px-2 py-2 text-left text-xs text-muted-foreground hover:text-foreground/80"
4646 }
4747 onClick={() => void navigate({ to: item.to, replace: true })}
4848 >
......@@ -68,7 +68,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
6868 <SidebarMenuItem>
6969 <SidebarMenuButton
7070 size="sm"
71 className="gap-2 px-2 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
71 className="gap-2 px-2 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
7272 onClick={() => window.history.back()}
7373 >
7474 <ArrowLeftIcon className="size-4" />
apps/web/src/routes/settings.tsx+16-1
......@@ -1,6 +1,6 @@
11import { RotateCcwIcon } from "lucide-react";
22import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
3import { useState } from "react";
3import { useEffect, useState } from "react";
44
55import { useSettingsRestore } from "../components/settings/SettingsPanels";
66import { Button } from "../components/ui/button";
......@@ -13,6 +13,21 @@ function SettingsContentLayout() {
1313 setRestoreSignal((value) => value + 1),
1414 );
1515
16 useEffect(() => {
17 const onKeyDown = (event: KeyboardEvent) => {
18 if (event.defaultPrevented) return;
19 if (event.key === "Escape") {
20 event.preventDefault();
21 window.history.back();
22 }
23 };
24
25 window.addEventListener("keydown", onKeyDown);
26 return () => {
27 window.removeEventListener("keydown", onKeyDown);
28 };
29 }, []);
30
1631 return (
1732 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
1833 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">