From cc87f1e1ff3d461c938aeaab4105d668141b5f71 Mon Sep 17 00:00:00 2001
From: Maxim <74974283+maximka76667@users.noreply.github.com>
Date: Mon, 16 Feb 2026 20:22:37 +0100
Subject: [PATCH] feat(testing-view): add mode switcher toggle in dev mode

---
 .../ui/src/icons/accessibility.ts             |  2 +-
 .../src/components/devTools/ModeSwitcher.tsx  |  9 +++--
 .../src/components/leftSidebar/AppSidebar.tsx |  7 ++++
 .../components/leftSidebar/DevToolsItem.tsx   | 35 +++++++++++++++++++
 .../testing-view/src/store/slices/appSlice.ts |  9 +++++
 5 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 frontend/testing-view/src/components/leftSidebar/DevToolsItem.tsx

diff --git a/frontend/frontend-kit/ui/src/icons/accessibility.ts b/frontend/frontend-kit/ui/src/icons/accessibility.ts
index 8740ecc74..2a80f32ba 100644
--- a/frontend/frontend-kit/ui/src/icons/accessibility.ts
+++ b/frontend/frontend-kit/ui/src/icons/accessibility.ts
@@ -1 +1 @@
-export { SunMoon } from "lucide-react";
+export { Eye, EyeOff, SunMoon } from "lucide-react";
diff --git a/frontend/testing-view/src/components/devTools/ModeSwitcher.tsx b/frontend/testing-view/src/components/devTools/ModeSwitcher.tsx
index 04745b2d7..c25c69428 100644
--- a/frontend/testing-view/src/components/devTools/ModeSwitcher.tsx
+++ b/frontend/testing-view/src/components/devTools/ModeSwitcher.tsx
@@ -14,12 +14,17 @@ export const ModeSwitcher = () => {
   const modeOverride = useStore((s) => s.modeOverride);
   const setModeOverride = useStore((s) => s.setModeOverride);
   const currentMode = useStore((s) => s.appMode);
+  const isDevToolsVisible = useStore((s) => s.isDevToolsVisible);
 
   // Only show in development
-  if (!import.meta.env.DEV && !import.meta.env.VITE_FORCE_DEV) return null;
+  if (
+    (!import.meta.env.DEV && !import.meta.env.VITE_FORCE_DEV) ||
+    !isDevToolsVisible
+  )
+    return null;
 
   return (
-    <div className="bg-background text-foreground fixed bottom-10 right-1/2 z-50 flex translate-x-1/2 flex-col gap-2 rounded-lg border p-3 shadow-lg">
+    <div className="bg-background text-foreground fixed right-1/2 bottom-10 z-50 flex translate-x-1/2 flex-col gap-2 rounded-lg border p-3 shadow-lg">
       <div className="text-muted-foreground text-xs font-semibold">
         Dev Mode Switcher
       </div>
diff --git a/frontend/testing-view/src/components/leftSidebar/AppSidebar.tsx b/frontend/testing-view/src/components/leftSidebar/AppSidebar.tsx
index 4df0e11e6..35940ea2e 100644
--- a/frontend/testing-view/src/components/leftSidebar/AppSidebar.tsx
+++ b/frontend/testing-view/src/components/leftSidebar/AppSidebar.tsx
@@ -8,6 +8,7 @@ import {
 import { PAGES_ARRAY } from "../../constants/pages";
 import ColorSchemeToggle from "./ColorSchemeToggle";
 import ConnectionStatusGroup from "./ConnectionStatusGroup";
+import DevToolsItem from "./DevToolsItem";
 import Logo from "./Logo";
 import NavigationGroup from "./NavigationGroup";
 import SettingsItem from "./SettingsItem";
@@ -27,8 +28,14 @@ const AppSidebar = ({ backendConnected, ...props }: AppSidebarProps) => {
         <NavigationGroup items={PAGES_ARRAY} />
       </SidebarContent>
       <SidebarFooter>
+        {/* Only visible in dev mode */}
+        <DevToolsItem />
+
+        <div className="my-2" />
+
         <ConnectionStatusGroup backendConnected={backendConnected} />
         <div className="my-2" />
+
         <ColorSchemeToggle />
         <ThemeToggleItem />
         <SettingsItem />
diff --git a/frontend/testing-view/src/components/leftSidebar/DevToolsItem.tsx b/frontend/testing-view/src/components/leftSidebar/DevToolsItem.tsx
new file mode 100644
index 000000000..95e2dff3d
--- /dev/null
+++ b/frontend/testing-view/src/components/leftSidebar/DevToolsItem.tsx
@@ -0,0 +1,35 @@
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenuButton,
+} from "@workspace/ui";
+import { Eye, EyeOff } from "@workspace/ui/icons";
+import { useStore } from "../../store/store";
+
+const DevToolsItem = () => {
+  const toggleDevToolsVisible = useStore((s) => s.toggleDevToolsVisible);
+  const isVisible = useStore((s) => s.isDevToolsVisible);
+
+  const isDev = import.meta.env.DEV || import.meta.env.VITE_FORCE_DEV;
+
+  if (!isDev) return null;
+
+  return (
+    <SidebarGroup className="p-0">
+      <SidebarGroupLabel>Dev mode</SidebarGroupLabel>
+      <SidebarMenuButton
+        tooltip="Toggle mode switcher"
+        onClick={() => toggleDevToolsVisible()}
+      >
+        {isVisible ? (
+          <Eye className="h-4 w-4" />
+        ) : (
+          <EyeOff className="h-4 w-4" />
+        )}
+        <span>Toggle mode switcher</span>
+      </SidebarMenuButton>
+    </SidebarGroup>
+  );
+};
+
+export default DevToolsItem;
diff --git a/frontend/testing-view/src/store/slices/appSlice.ts b/frontend/testing-view/src/store/slices/appSlice.ts
index 7afc5a42f..8d9251000 100644
--- a/frontend/testing-view/src/store/slices/appSlice.ts
+++ b/frontend/testing-view/src/store/slices/appSlice.ts
@@ -45,6 +45,10 @@ export interface AppSlice {
   setConfig: (config: ConfigData | null) => void;
   isLoadingConfig: boolean;
   setIsLoadingConfig: (loading: boolean) => void;
+
+  // Dev mode
+  isDevToolsVisible: boolean;
+  toggleDevToolsVisible: () => void;
 }
 
 export const createAppSlice: StateCreator<Store, [], [], AppSlice> = (set) => ({
@@ -96,4 +100,9 @@ export const createAppSlice: StateCreator<Store, [], [], AppSlice> = (set) => ({
   setConfig: (config: ConfigData | null) => set({ config }),
   isLoadingConfig: false,
   setIsLoadingConfig: (loading: boolean) => set({ isLoadingConfig: loading }),
+
+  // Dev mode
+  isDevToolsVisible: false,
+  toggleDevToolsVisible: () =>
+    set((state) => ({ isDevToolsVisible: !state.isDevToolsVisible })),
 });