From 098b5fe1e5b8c050dacd6c7c1c1917647a3af56b Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Wed, 8 Oct 2025 01:44:02 +0100
Subject: [PATCH] add tool picker mode to config

---
 .../config/configSections/GeneralSection.tsx  | 20 ++++++++++++++++++-
 frontend/src/contexts/ToolWorkflowContext.tsx | 13 +++++++++++-
 frontend/src/services/preferencesService.ts   |  2 ++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/shared/config/configSections/GeneralSection.tsx b/frontend/src/components/shared/config/configSections/GeneralSection.tsx
index 07f71c484..48421d872 100644
--- a/frontend/src/components/shared/config/configSections/GeneralSection.tsx
+++ b/frontend/src/components/shared/config/configSections/GeneralSection.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Stack, Switch, Text, Tooltip, NumberInput } from '@mantine/core';
+import { Paper, Stack, Switch, Text, Tooltip, NumberInput, SegmentedControl } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { usePreferences } from '../../../../contexts/PreferencesContext';
 
@@ -26,6 +26,24 @@ const GeneralSection: React.FC = () => {
 
       <Paper withBorder p="md" radius="md">
         <Stack gap="md">
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div>
+              <Text fw={500} size="sm">
+                {t('settings.general.defaultToolPickerMode', 'Default tool picker mode')}
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {t('settings.general.defaultToolPickerModeDescription', 'Choose whether the tool picker opens in fullscreen or sidebar by default')}
+              </Text>
+            </div>
+            <SegmentedControl
+              value={preferences.defaultToolPanelMode}
+              onChange={(val) => updatePreference('defaultToolPanelMode', val as any)}
+              data={[
+                { label: t('settings.general.mode.sidebar', 'Sidebar'), value: 'sidebar' },
+                { label: t('settings.general.mode.fullscreen', 'Fullscreen'), value: 'fullscreen' },
+              ]}
+            />
+          </div>
           <Tooltip
             label={t('settings.general.autoUnzipTooltip', 'Automatically extract ZIP files returned from API operations. Disable to keep ZIP files intact. This does not affect automation workflows.')}
             multiline
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 72c3e4fc1..3d07392b5 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -3,7 +3,7 @@
  * Eliminates prop drilling with a single, simple context
  */
 
-import React, { createContext, useContext, useReducer, useCallback, useMemo } from 'react';
+import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react';
 import { useToolManagement } from '../hooks/useToolManagement';
 import { PageEditorFunctions } from '../types/pageEditor';
 import { ToolRegistryEntry, ToolRegistry } from '../data/toolsTaxonomy';
@@ -22,6 +22,7 @@ import {
   toolWorkflowReducer,
   ToolPanelMode,
 } from './toolWorkflow/state';
+import { usePreferences } from '../contexts/PreferencesContext';
 
 // State interface
 // Types and reducer/state moved to './toolWorkflow/state'
@@ -79,6 +80,7 @@ interface ToolWorkflowProviderProps {
 
 export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   const [state, dispatch] = useReducer(toolWorkflowReducer, undefined, createInitialState);
+  const { preferences } = usePreferences();
 
   // Store reset functions for tools
   const [toolResetFunctions, setToolResetFunctions] = React.useState<Record<string, () => void>>({});
@@ -154,6 +156,15 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     window.localStorage.setItem(TOOL_PANEL_MODE_STORAGE_KEY, state.toolPanelMode);
   }, [state.toolPanelMode]);
 
+  // Initialize tool panel mode from user preferences if no explicit localStorage preference exists yet
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const stored = window.localStorage.getItem(TOOL_PANEL_MODE_STORAGE_KEY);
+    if (stored === null && preferences?.defaultToolPanelMode && state.toolPanelMode !== preferences.defaultToolPanelMode) {
+      dispatch({ type: 'SET_TOOL_PANEL_MODE', payload: preferences.defaultToolPanelMode });
+    }
+  }, [preferences?.defaultToolPanelMode]);
+
   React.useEffect(() => {
     if (typeof window === 'undefined') {
       return;
diff --git a/frontend/src/services/preferencesService.ts b/frontend/src/services/preferencesService.ts
index b7c22094e..992fe9f2f 100644
--- a/frontend/src/services/preferencesService.ts
+++ b/frontend/src/services/preferencesService.ts
@@ -3,11 +3,13 @@ import { indexedDBManager, DATABASE_CONFIGS } from './indexedDBManager';
 export interface UserPreferences {
   autoUnzip: boolean;
   autoUnzipFileLimit: number;
+  defaultToolPanelMode: 'sidebar' | 'fullscreen';
 }
 
 export const DEFAULT_PREFERENCES: UserPreferences = {
   autoUnzip: true,
   autoUnzipFileLimit: 4,
+  defaultToolPanelMode: 'sidebar',
 };
 
 class PreferencesService {