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 { usePostHog } from 'posthog-js/react';
import { useAuth } from '@/hooks';
import { usePreviousPath } from '@/hooks/usePreviousPath';
import {
AgentSettings,
@@ -42,6 +43,9 @@ function AppContent() {
const posthog = usePostHog();
const { isSignedIn } = useAuth();
// Track previous path for back navigation
usePreviousPath();
// Handle opt-in/opt-out and user identification when config loads
useEffect(() => {
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 { Settings, Cpu, Server, X, FolderOpen, Building2 } from 'lucide-react';
import { cn } from '@/lib/utils';
@@ -7,6 +7,7 @@ import { useEffect } from 'react';
import { useHotkeysContext } from 'react-hotkeys-hook';
import { useKeyExit } from '@/keyboard/hooks';
import { Scope } from '@/keyboard/registry';
import { usePreviousPath } from '@/hooks/usePreviousPath';
const settingsNavigation = [
{
@@ -34,6 +35,7 @@ const settingsNavigation = [
export function SettingsLayout() {
const { t } = useTranslation('settings');
const { enableScope, disableScope } = useHotkeysContext();
const goToPreviousPath = usePreviousPath();
// Enable SETTINGS scope when component mounts
useEffect(() => {
@@ -43,13 +45,8 @@ export function SettingsLayout() {
};
}, [enableScope, disableScope]);
const navigate = useNavigate();
const handleBack = () => {
navigate(-1);
};
// Register ESC keyboard shortcut
useKeyExit(handleBack, { scope: Scope.SETTINGS });
useKeyExit(goToPreviousPath, { scope: Scope.SETTINGS });
return (
<div className="h-full overflow-auto">
@@ -61,7 +58,7 @@ export function SettingsLayout() {
</h1>
<Button
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"
>
<X className="h-4 w-4" />