make settings esc button navigate back to app rather than back page (#1607)
This commit is contained in:
committed by
GitHub
parent
12829c34c6
commit
377941a90c
@@ -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;
|
||||||
|
|||||||
28
frontend/src/hooks/usePreviousPath.ts
Normal file
28
frontend/src/hooks/usePreviousPath.ts
Normal 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]);
|
||||||
|
}
|
||||||
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user