refactor: move preference props directly to QuickSettingsPanel and MainContent

src/App.jsx

@@ -61,7 +61,7 @@ function AppContent() {
   const [settingsInitialTab, setSettingsInitialTab] = useState('agents');
   
   const { preferences, setPreference } = useUiPreferences();
-  const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter, sidebarVisible } = preferences;
+  const { sidebarVisible } = preferences;
   // Session Protection System: Track sessions with active conversations to prevent
   // automatic project updates from interrupting ongoing chats. When a user sends
   // a message, the session is marked as "active" and project updates are paused
@@ -692,11 +692,7 @@ function AppContent() {
           onReplaceTemporarySession={replaceTemporarySession}
           onNavigateToSession={(sessionId) => navigate(`/session/${sessionId}`)}
           onShowSettings={() => setShowSettings(true)}
-          autoExpandTools={autoExpandTools}
-          showRawParameters={showRawParameters}
-          showThinking={showThinking}
-          autoScrollToBottom={autoScrollToBottom}
-          sendByCtrlEnter={sendByCtrlEnter}
+
           externalMessageUpdate={externalMessageUpdate}
         />
       </div>
@@ -711,19 +707,7 @@ function AppContent() {
       )}
       {/* Quick Settings Panel - Only show on chat tab */}
       {activeTab === 'chat' && (
-        <QuickSettingsPanel
-          autoExpandTools={autoExpandTools}
-          onAutoExpandChange={(value) => setPreference('autoExpandTools', value)}
-          showRawParameters={showRawParameters}
-          onShowRawParametersChange={(value) => setPreference('showRawParameters', value)}
-          showThinking={showThinking}
-          onShowThinkingChange={(value) => setPreference('showThinking', value)}
-          autoScrollToBottom={autoScrollToBottom}
-          onAutoScrollChange={(value) => setPreference('autoScrollToBottom', value)}
-          sendByCtrlEnter={sendByCtrlEnter}
-          onSendByCtrlEnterChange={(value) => setPreference('sendByCtrlEnter', value)}
-          isMobile={isMobile}
-        />
+        <QuickSettingsPanel isMobile={isMobile} />
       )}
 
       {/* Settings Modal */}

src/components/MainContent.jsx

@@ -29,6 +29,8 @@ import { useTaskMaster } from '../contexts/TaskMasterContext';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
 import { api } from '../utils/api';
 
+import { useUiPreferences } from '../hooks/useUiPreferences';
+
 function MainContent({
   selectedProject,
   selectedSession,
@@ -52,11 +54,6 @@ function MainContent({
   onReplaceTemporarySession, // Replace temporary session ID with real session ID from WebSocket
   onNavigateToSession,    // Navigate to a specific session (for Claude CLI session duplication workaround)
   onShowSettings,         // Show tools settings panel
-  autoExpandTools,        // Auto-expand tool accordions
-  showRawParameters,      // Show raw parameters in tool accordions
-  showThinking,           // Show thinking/reasoning sections
-  autoScrollToBottom,     // Auto-scroll to bottom when new messages arrive
-  sendByCtrlEnter,        // Send by Ctrl+Enter mode for East Asian language input
   externalMessageUpdate   // Trigger for external CLI updates to current session
 }) {
   const { t } = useTranslation();
@@ -67,7 +64,10 @@ function MainContent({
   const [isResizing, setIsResizing] = useState(false);
   const [editorExpanded, setEditorExpanded] = useState(false);
   const resizeRef = useRef(null);
-  
+
+  const { preferences } = useUiPreferences();
+  const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;
+
   // PRD Editor state
   const [showPRDEditor, setShowPRDEditor] = useState(false);
   const [selectedPRD, setSelectedPRD] = useState(null);

src/components/QuickSettingsPanel.jsx

@@ -17,22 +17,13 @@ import {
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import DarkModeToggle from './DarkModeToggle';
+
+import { useUiPreferences } from '../hooks/useUiPreferences';
 import { useTheme } from '../contexts/ThemeContext';
 import LanguageSelector from './LanguageSelector';
 
-const QuickSettingsPanel = ({
-  autoExpandTools,
-  onAutoExpandChange,
-  showRawParameters,
-  onShowRawParametersChange,
-  showThinking,
-  onShowThinkingChange,
-  autoScrollToBottom,
-  onAutoScrollChange,
-  sendByCtrlEnter,
-  onSendByCtrlEnterChange,
-  isMobile
-}) => {
+
+const QuickSettingsPanel = ({ isMobile }) => {
   const { t } = useTranslation('settings');
   const [ isOpen, setIsOpen ] = useState(false); 
   const [localIsOpen, setLocalIsOpen] = useState(false); // ! Is this necessary? Can we just use isOpen?
@@ -41,6 +32,9 @@ const QuickSettingsPanel = ({
   });
   const { isDarkMode } = useTheme();
 
+  const { preferences, setPreference } = useUiPreferences();
+  const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;
+
   // Draggable handle state
   const [handlePosition, setHandlePosition] = useState(() => {
     const saved = localStorage.getItem('quickSettingsHandlePosition');
@@ -291,7 +285,7 @@ const QuickSettingsPanel = ({
                 <input
                   type="checkbox"
                   checked={autoExpandTools}
-                  onChange={(e) => onAutoExpandChange(e.target.checked)}
+                  onChange={(e) => setPreference('autoExpandTools', e.target.checked)}
                   className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
                 />
               </label>
@@ -304,7 +298,7 @@ const QuickSettingsPanel = ({
                 <input
                   type="checkbox"
                   checked={showRawParameters}
-                  onChange={(e) => onShowRawParametersChange(e.target.checked)}
+                  onChange={(e) => setPreference('showRawParameters', e.target.checked)}
                   className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
                 />
               </label>
@@ -317,7 +311,7 @@ const QuickSettingsPanel = ({
                 <input
                   type="checkbox"
                   checked={showThinking}
-                  onChange={(e) => onShowThinkingChange(e.target.checked)}
+                  onChange={(e) => setPreference('showThinking', e.target.checked)}
                   className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
                 />
               </label>
@@ -334,7 +328,7 @@ const QuickSettingsPanel = ({
                 <input
                   type="checkbox"
                   checked={autoScrollToBottom}
-                  onChange={(e) => onAutoScrollChange(e.target.checked)}
+                  onChange={(e) => setPreference('autoScrollToBottom', e.target.checked)}
                   className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
                 />
               </label>
@@ -352,7 +346,7 @@ const QuickSettingsPanel = ({
                 <input
                   type="checkbox"
                   checked={sendByCtrlEnter}
-                  onChange={(e) => onSendByCtrlEnterChange(e.target.checked)}
+                  onChange={(e) => setPreference('sendByCtrlEnter', e.target.checked)}
                   className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
                 />
               </label>