make settings esc button navigate back to app rather than back page (#1607)

This commit is contained in:
Gabriel Gordon-Hall
2025-12-18 18:00:28 +00:00
committed by GitHub
parent 12829c34c6
commit 377941a90c
3 changed files with 37 additions and 8 deletions

View File

@@ -8,6 +8,7 @@ import { FullAttemptLogsPage } from '@/pages/FullAttemptLogs';
import { NormalLayout } from '@/components/layout/NormalLayout'; import { NormalLayout } from '@/components/layout/NormalLayout';
import { usePostHog } from 'posthog-js/react'; import { usePostHog } from 'posthog-js/react';
import { useAuth } from '@/hooks'; import { useAuth } from '@/hooks';
import { usePreviousPath } from '@/hooks/usePreviousPath';
import { import {
AgentSettings, AgentSettings,
@@ -42,6 +43,9 @@ function AppContent() {
const posthog = usePostHog(); const posthog = usePostHog();
const { isSignedIn } = useAuth(); const { isSignedIn } = useAuth();
// Track previous path for back navigation
usePreviousPath();
// Handle opt-in/opt-out and user identification when config loads // Handle opt-in/opt-out and user identification when config loads
useEffect(() => { useEffect(() => {
if (!posthog || !analyticsUserId) return; if (!posthog || !analyticsUserId) return;

View File

@@ -0,0 +1,28 @@
import { useCallback, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
const globalVisited: string[] = [];
export function usePreviousPath() {
const navigate = useNavigate();
const location = useLocation();
// Track pathnames as user navigates
useEffect(() => {
if (globalVisited[globalVisited.length - 1] !== location.pathname) {
globalVisited.push(location.pathname);
// Keep only last 50 entries to prevent memory bloat
if (globalVisited.length > 50) {
globalVisited.splice(0, globalVisited.length - 50);
}
}
}, [location]);
return useCallback(() => {
// Find last non-settings route in history
const lastNonSettingsPath = [...globalVisited]
.reverse()
.find((p) => !p.startsWith('/settings'));
navigate(lastNonSettingsPath || '/');
}, [navigate]);
}

View File

@@ -1,4 +1,4 @@
import { NavLink, Outlet, useNavigate } from 'react-router-dom'; import { NavLink, Outlet } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Settings, Cpu, Server, X, FolderOpen, Building2 } from 'lucide-react'; import { Settings, Cpu, Server, X, FolderOpen, Building2 } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@@ -7,6 +7,7 @@ import { useEffect } from 'react';
import { useHotkeysContext } from 'react-hotkeys-hook'; import { useHotkeysContext } from 'react-hotkeys-hook';
import { useKeyExit } from '@/keyboard/hooks'; import { useKeyExit } from '@/keyboard/hooks';
import { Scope } from '@/keyboard/registry'; import { Scope } from '@/keyboard/registry';
import { usePreviousPath } from '@/hooks/usePreviousPath';
const settingsNavigation = [ const settingsNavigation = [
{ {
@@ -34,6 +35,7 @@ const settingsNavigation = [
export function SettingsLayout() { export function SettingsLayout() {
const { t } = useTranslation('settings'); const { t } = useTranslation('settings');
const { enableScope, disableScope } = useHotkeysContext(); const { enableScope, disableScope } = useHotkeysContext();
const goToPreviousPath = usePreviousPath();
// Enable SETTINGS scope when component mounts // Enable SETTINGS scope when component mounts
useEffect(() => { useEffect(() => {
@@ -43,13 +45,8 @@ export function SettingsLayout() {
}; };
}, [enableScope, disableScope]); }, [enableScope, disableScope]);
const navigate = useNavigate();
const handleBack = () => {
navigate(-1);
};
// Register ESC keyboard shortcut // Register ESC keyboard shortcut
useKeyExit(handleBack, { scope: Scope.SETTINGS }); useKeyExit(goToPreviousPath, { scope: Scope.SETTINGS });
return ( return (
<div className="h-full overflow-auto"> <div className="h-full overflow-auto">
@@ -61,7 +58,7 @@ export function SettingsLayout() {
</h1> </h1>
<Button <Button
variant="ghost" variant="ghost"
onClick={handleBack} onClick={goToPreviousPath}
className="h-8 px-2 rounded-none border border-foreground/20 hover:border-foreground/30 transition-all hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex items-center gap-1.5" className="h-8 px-2 rounded-none border border-foreground/20 hover:border-foreground/30 transition-all hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex items-center gap-1.5"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />