🤖 fix: add manual theme toggle for storybook

Author: ammar-agent

.storybook/preview.tsx

@@ -2,10 +2,37 @@ import React from "react";
 import type { Preview } from "@storybook/react-vite";
 import {
   ThemeProvider,
+  useTheme,
   type ThemeMode,
 } from "../src/browser/contexts/ThemeContext";
 import "../src/browser/styles/globals.css";
 
+const ThemeToggle = () => {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <button
+      onClick={toggleTheme}
+      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: {
@@ -27,6 +54,7 @@ const preview: Preview = {
       return (
         <ThemeProvider forcedTheme={mode}>
           <Story />
+          {!mode && <ThemeToggle />}
         </ThemeProvider>
       );
     },