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 }) {...@@ -41,8 +41,8 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
41 isActive={isActive}41 isActive={isActive}
42 className={42 className={
43 isActive43 isActive
44 ? "gap-2 px-2 py-2 text-left text-sm text-foreground"44 ? "gap-2 px-2 py-2 text-left text-xs text-foreground"
45 : "gap-2 px-2 py-2 text-left text-sm text-muted-foreground hover:text-foreground/80"45 : "gap-2 px-2 py-2 text-left text-xs text-muted-foreground hover:text-foreground/80"
46 }46 }
47 onClick={() => void navigate({ to: item.to, replace: true })}47 onClick={() => void navigate({ to: item.to, replace: true })}
48 >48 >
...@@ -68,7 +68,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {...@@ -68,7 +68,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
68 <SidebarMenuItem>68 <SidebarMenuItem>
69 <SidebarMenuButton69 <SidebarMenuButton
70 size="sm"70 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"
72 onClick={() => window.history.back()}72 onClick={() => window.history.back()}
73 >73 >
74 <ArrowLeftIcon className="size-4" />74 <ArrowLeftIcon className="size-4" />
apps/web/src/routes/settings.tsx+16-1
...@@ -1,6 +1,6 @@...@@ -1,6 +1,6 @@
1import { RotateCcwIcon } from "lucide-react";1import { RotateCcwIcon } from "lucide-react";
2import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";2import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
3import { useState } from "react";3import { useEffect, useState } from "react";
44
5import { useSettingsRestore } from "../components/settings/SettingsPanels";5import { useSettingsRestore } from "../components/settings/SettingsPanels";
6import { Button } from "../components/ui/button";6import { Button } from "../components/ui/button";
...@@ -13,6 +13,21 @@ function SettingsContentLayout() {...@@ -13,6 +13,21 @@ function SettingsContentLayout() {
13 setRestoreSignal((value) => value + 1),13 setRestoreSignal((value) => value + 1),
14 );14 );
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
16 return (31 return (
17 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">32 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
18 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">33 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">