🤖 refactor(storybook): remove manual theme toggle button

Removes the floating StorybookThemeToggle button that was added as a
workaround. The native Storybook toolbar already provides a theme
switcher via the globalTypes configuration.

This simplifies the code by removing:
- StorybookThemeToggle component (40 lines)
- isE2ETestEnv() utility (7 lines)
- Conditional rendering logic in decorator (3 lines)

Users can now toggle themes using the standard Storybook toolbar
(mirror icon at the top), which provides a cleaner, more consistent UX.

Net: -52 lines

Author: ethanndickson

.storybook/preview.tsx

@@ -3,13 +3,6 @@ import type { Preview } from "@storybook/react-vite";
 import { ThemeProvider, type ThemeMode } from "../src/browser/contexts/ThemeContext";
 import { getStorageChangeEvent } from "@/common/constants/events";
 import { UI_THEME_KEY } from "@/common/constants/storage";
-
-// Utility: detect e2e/test contexts where UI should be hidden (Chromatic, SB test-runner)
-const isE2ETestEnv = () => {
-  if (typeof window !== "undefined" && (window as any).CHROMATIC) return true;
-  if (typeof navigator !== "undefined" && /StorybookTestRunner/i.test(navigator.userAgent)) return true;
-  return false;
-};
 import "../src/browser/styles/globals.css";
 
 const applyStorybookTheme = (mode: ThemeMode) => {
@@ -51,47 +44,6 @@ const syncStorybookTheme = (mode?: ThemeMode): ThemeMode => {
   return resolved;
 };
 
-const StorybookThemeToggle: React.FC<{ initialTheme: ThemeMode }> = ({ initialTheme }) => {
-  const [theme, setTheme] = React.useState(initialTheme);
-
-  React.useEffect(() => {
-    setTheme(initialTheme);
-  }, [initialTheme]);
-
-  const handleToggle = () => {
-    const next = theme === "dark" ? "light" : "dark";
-    applyStorybookTheme(next);
-    setTheme(next);
-  };
-
-  if (typeof window === "undefined") {
-    return null;
-  }
-
-  return (
-    <button
-      onClick={handleToggle}
-      style={{
-        position: "fixed",
-        bottom: "1rem",
-        right: "1rem",
-        zIndex: 9999,
-        padding: "0.5rem 1rem",
-        background: theme === "dark" ? "#f5f6f8" : "#1e1e1e",
-        color: theme === "dark" ? "#1e1e1e" : "#f5f6f8",
-        border: "1px solid #777",
-        borderRadius: "4px",
-        cursor: "pointer",
-        fontFamily: "system-ui, sans-serif",
-        fontSize: "12px",
-        boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
-      }}
-    >
-      {theme === "dark" ? "☀️ Light" : "🌙 Dark"}
-    </button>
-  );
-};
-
 const preview: Preview = {
   globalTypes: {
     theme: {
@@ -110,13 +62,10 @@ const preview: Preview = {
   decorators: [
     (Story, context) => {
       const mode = context.globals.theme as ThemeMode | undefined;
-      const resolved = syncStorybookTheme(mode);
+      syncStorybookTheme(mode);
       return (
         <ThemeProvider>
           <Story />
-          {!mode && !isE2ETestEnv() && (
-            <StorybookThemeToggle initialTheme={resolved} />
-          )}
         </ThemeProvider>
       );
     },