diff --git a/src/App.tsx b/src/App.tsx index 6c88969d..d328b025 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -60,6 +60,8 @@ import { } from './lib/shortcuts'; import { resolvedBindings, loadKeybindings, dismissMigrationBanner } from './store/keybindings'; import { setupAutosave } from './store/autosave'; +import { osIsDark } from './lib/os-appearance'; +import { applyAppearanceMode } from './store/store'; import { isMac, mod } from './lib/platform'; import { createCtrlWheelZoomHandler } from './lib/wheelZoom'; import { ArenaOverlay } from './arena/ArenaOverlay'; @@ -242,7 +244,13 @@ function App() { void syncWindowMaximized(); }; - // Sync theme preset to so Portal content inherits CSS variables + // Re-derive effective theme whenever OS dark mode or appearance mode/slots change + createEffect(() => { + osIsDark(); // reactive dependency + applyAppearanceMode(); + }); + + // Sync theme to so Portal content (dialogs, tooltips) inherits CSS variables createEffect(() => { document.documentElement.dataset.look = store.themePreset; }); diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx index d6eb9892..1949d5f9 100644 --- a/src/components/SettingsDialog.tsx +++ b/src/components/SettingsDialog.tsx @@ -6,12 +6,12 @@ import { getTerminalFontFamily, LIGATURE_FONTS, } from '../lib/fonts'; -import { LOOK_PRESETS } from '../lib/look'; +import { presetsForTone } from '../lib/look'; +import type { AppearanceMode } from '../lib/look'; import { theme, sectionLabelStyle } from '../lib/theme'; import { store, setTerminalFont, - setThemePreset, setAutoTrustFolders, setShowPlans, setShowPromptInput, @@ -26,6 +26,9 @@ import { setShareDockerAgentAuth, setAskCodeProvider, setMinimaxApiKey, + setAppearanceMode, + setLightTheme, + setDarkTheme, } from '../store/store'; import { CustomAgentEditor } from './CustomAgentEditor'; import { mod } from '../lib/platform'; @@ -41,9 +44,12 @@ function ensureSelectedFont(available: string[]): string[] { return [store.terminalFont, ...available]; } +type SettingsTab = 'general' | 'themes'; + export function SettingsDialog(props: SettingsDialogProps) { const titleId = createUniqueId(); const [fonts, setFonts] = createSignal(ensureSelectedFont(getAvailableTerminalFonts())); + const [activeTab, setActiveTab] = createSignal('general'); // Fetch system fonts when the dialog opens createEffect( @@ -120,603 +126,756 @@ export function SettingsDialog(props: SettingsDialogProps) { -
-
- Theme -
-
- - {(preset) => ( - - )} - -
-
- -
-
- Behavior -
- - - - - - - -
- -
-
- Editor -
-
-
-
+
- Ask about Code -
-
- + - + setShowPlans(e.currentTarget.checked)} + style={{ 'accent-color': theme.accent, cursor: 'pointer' }} + /> +
+ Show plans + + Display Claude Code plan files in a tab next to Notes + +
+ - - - {store.askCodeProvider === 'minimax' - ? 'Uses MiniMax M2.7 (204K context) via the OpenAI-compatible API — no Claude Code CLI required.' - : 'Uses the claude CLI to answer questions about selected code. Requires Claude Code to be installed.'} - -
-
- - -
-
- Docker Isolation -
-
+ + + - - Docker image used when "Run in Docker container" is enabled for a task. The agent runs - inside the container with only the project directory mounted. - -
- Projects with a{' '} - - {PROJECT_DOCKERFILE_RELATIVE_PATH} - {' '} - will use a project-specific image instead. -
-
- - - This font includes ligatures which may impact rendering performance. - - -
+ -
-
Diagnostics
-