diff --git a/src/App.tsx b/src/App.tsx index c2f1e69b..6b750dc4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -274,13 +274,18 @@ function AppInner() { // An observer opens its dashboard; a packet it was inspected from moves into the side drawer beside it. const viewObserver = useCallback((id: string, packet?: { hash: string; observationId?: number }) => { setPanels([]); - const next = observerDestination(searchParams, id); + const origin = new URLSearchParams(searchParams); if (packet) { - next.set("hash", packet.hash); next.set("analyze", "1"); next.delete("path"); - if (packet.observationId != null) next.set("observation", String(packet.observationId)); else next.delete("observation"); + origin.set("hash", packet.hash); origin.set("analyze", "1"); origin.delete("path"); + if (packet.observationId != null) origin.set("observation", String(packet.observationId)); else origin.delete("observation"); } - if (isMobile) next.delete("analyze"); - navigate({ search: "?" + next.toString() }); + const next = observerDestination(origin, id); + if (isMobile) { + // The dashboard covers the screen on mobile, so its Close steps back to the packet instead. + if (packet) navigate({ search: "?" + origin.toString() }, { replace: true }); + next.delete("analyze"); + } + navigate({ search: "?" + next.toString() }, { state: { inspected: isMobile } }); }, [navigate, searchParams, setPanels, isMobile]); useEffect(() => { diff --git a/src/features/observers/ObserverPage.tsx b/src/features/observers/ObserverPage.tsx index f1cd0c42..5bc0833e 100644 --- a/src/features/observers/ObserverPage.tsx +++ b/src/features/observers/ObserverPage.tsx @@ -1,5 +1,5 @@ import { lazy, Suspense, useState, useMemo } from "react"; -import { useSearchParams } from "react-router-dom"; +import { useLocation, useNavigate, useSearchParams } from "react-router-dom"; import { useQuery } from "@tanstack/react-query"; import { useTranslation } from "react-i18next"; import { getBrokers } from "../../api/client"; @@ -25,6 +25,8 @@ export function ObserverPage({ wsManager, onAnalyzePacket }: { wsManager: WsMana const { t } = useTranslation(); const now = useTick(60_000); const id = params.get("observer"); + const navigate = useNavigate(); + const inspected = (useLocation().state as { inspected?: boolean } | null)?.inspected; const [actionTime, setActionTime] = useState(() => Date.now()); const hourAt = (time: number) => Math.floor(time / 3_600_000) * 3_600_000; const comparing = params.has("compareWith"); @@ -91,7 +93,7 @@ export function ObserverPage({ wsManager, onAnalyzePacket }: { wsManager: WsMana {t("observerPage.detail")}