d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-02-14 20:57:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move preference props directly to QuickSettingsPanel and MainContent

Browse Source
This commit is contained in:
Haileyesus
2026-02-06 12:08:00 +03:00
parent abcd239f25
commit 98e16714d2
3 changed files with 21 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/MainContent.jsx
View File

@@ -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);

30
src/components/QuickSettingsPanel.jsx
View File

@@ -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>