modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

refactor(web): share screen fade-up animation with the monitoring column

Browse source 
Extract the primary pane's per-screen enter/exit transition into a shared
`ScreenStage` element (the `fade-up` Mantine Transition: incoming screen slides
up + fades in while the outgoing fades down + out, both absolutely positioned).
InspectorView now imports it (behavior unchanged), and the pinned monitoring
column uses it too — via a new `fill` variant that stretches the stage to the
column's height — so switching Logs/Protocol/Network animates the same way as
switching the main screens.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw
This commit is contained in:
cliffhall 2026-07-10 20:12:01 -04:00
commit 13a1d774de
1 changed files with 105 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

35
clients/web/src/components/views/InspectorView/InspectorView.tsx
View file

@ -8,7 +8,6 @@ import {
} from "react";
import {
AppShell,
Box,
Flex,
Group,
Stack,
@ -84,6 +83,7 @@ import {
type ConsoleUiState,
} from "../../screens/ConsoleScreen/ConsoleScreen";
import type { SortDirection } from "../../elements/SortToggle/SortToggle";
import { ScreenStage } from "../../elements/ScreenStage/ScreenStage";
import { MonitoringScreen } from "../../groups/MonitoringScreen/MonitoringScreen";
import { ResizeHandle } from "../../elements/ResizeHandle/ResizeHandle";
import { getServerType } from "@inspector/core/mcp/config.js";
@ -241,9 +241,6 @@ function serializeMonitorWidth(value: number): string {
return String(value);
}
const SCREEN_ENTER_MS = 350;
const SCREEN_EXIT_MS = 250;
// Relative-positioned wrapper for the absolutely-positioned `ScreenStage`
// children. `mih: "100%"` requires `AppShell.Main` to provide a definite
// height for the stack itself to fill — the absolute children render
@ -306,36 +303,6 @@ const MonitorColumnGroup = Group.withProps({
flex: "0 0 auto",
});
// Wraps each screen in a Mantine Transition. With Transition's default
// (`keepMounted={false}`), the outgoing screen unmounts after its exit
// animation — any local screen state (search filters, scroll position,
// expanded sections) is reset on tab switch.
function ScreenStage({
active,
children,
}: {
active: boolean;
children: ReactNode;
}) {
return (
<Transition
mounted={active}
transition="fade-up"
duration={SCREEN_ENTER_MS}
exitDuration={SCREEN_EXIT_MS}
timingFunction="ease"
>
{(styles) => (
// `style={styles}` is the runtime transition state from Mantine's
// Transition API — these are interpolated values, not static styling.
<Box style={styles} pos="absolute" top={0} left={0} right={0}>
{children}
</Box>
)}
</Transition>
);
}
export interface InspectorViewProps {
// Server list (static config; runtime connection state comes from the
// separate fields below and is merged into each card by this component).