Animate InspectorView screen transitions and refactor App.tsx

- InspectorView: wrap each screen in a Mantine `Transition` (`fade-up`,
  350ms). Outgoing screens fade out and slide down 30px; incoming screens
  fade in and slide up to meet the ViewHeader. A `pos: "relative"` Stack
  container holds the screens so the absolute-positioned `Transition`
  wrappers stack in the same area without pushing layout.
- InspectorView: reorder ALL_TABS so Logs sits beside History at the end:
  Servers · Tools · Prompts · Resources · Tasks · Logs · History.
- App.tsx: refactor to AGENTS.md guidelines — extract `PageContainer`,
  `PageStack`, `ThemeToggle`, `SubtitleText` as `.withProps()`
  subcomponents; replace inline unicode glyphs with `MdLightMode` /
  `MdDarkMode` icons (matches the ViewHeader pattern); convert the click
  handler to a `function` declaration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

clients/web/src/App.tsx

@@ -1,41 +1,59 @@
 import {
-  Title,
-  Text,
-  Container,
-  Stack,
-  useMantineColorScheme,
-  useComputedColorScheme,
   ActionIcon,
+  Container,
   Group,
+  Stack,
+  Text,
+  Title,
+  useComputedColorScheme,
+  useMantineColorScheme,
 } from "@mantine/core";
+import { MdDarkMode, MdLightMode } from "react-icons/md";
+
+const PageContainer = Container.withProps({
+  size: "sm",
+  py: "xl",
+});
+
+const PageStack = Stack.withProps({
+  align: "center",
+  gap: "md",
+});
+
+const ThemeToggle = ActionIcon.withProps({
+  variant: "default",
+  size: "lg",
+  "aria-label": "Toggle color scheme",
+});
+
+const SubtitleText = Text.withProps({
+  c: "var(--inspector-text-secondary)",
+});
 
 function App() {
   const { setColorScheme } = useMantineColorScheme();
   const computedColorScheme = useComputedColorScheme("light");
+  const isDark = computedColorScheme === "dark";
+  const ThemeIcon = isDark ? MdLightMode : MdDarkMode;
 
-  const toggleColorScheme = () => {
-    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
-  };
+  function toggleColorScheme() {
+    setColorScheme(isDark ? "light" : "dark");
+  }
 
   return (
-    <Container size="sm" py="xl">
-      <Stack align="center" gap="md">
+    <PageContainer>
+      <PageStack>
         <Group>
           <Title order={1}>MCP Inspector</Title>
-          <ActionIcon
-            onClick={toggleColorScheme}
-            variant="default"
-            size="lg"
-            aria-label="Toggle color scheme"
-          >
-            {computedColorScheme === "dark" ? "\u2600" : "\u263E"}
-          </ActionIcon>
+          <ThemeToggle onClick={toggleColorScheme}>
+            <ThemeIcon size={20} />
+          </ThemeToggle>
         </Group>
-        <Text c="var(--inspector-text-secondary)">
+        <SubtitleText>
           Web client for the Model Context Protocol Inspector
-        </Text>
-      </Stack>
-    </Container>
+        </SubtitleText>
+      </PageStack>
+    </PageContainer>
   );
 }