diff --git a/v2/src/lib/components/Workspace/SettingsTab.svelte b/v2/src/lib/components/Workspace/SettingsTab.svelte index 6210caf..e36bdef 100644 --- a/v2/src/lib/components/Workspace/SettingsTab.svelte +++ b/v2/src/lib/components/Workspace/SettingsTab.svelte @@ -45,6 +45,7 @@ let termFont = $state(''); let termFontSize = $state(''); let projectMaxAspect = $state('1.0'); + let filesSaveOnBlur = $state(false); let selectedTheme = $state(getCurrentTheme()); // Dropdown open states @@ -104,7 +105,7 @@ ); onMount(async () => { - const [shell, cwd, font, size, tfont, tsize, aspect] = await Promise.all([ + const [shell, cwd, font, size, tfont, tsize, aspect, saveOnBlur] = await Promise.all([ getSetting('default_shell'), getSetting('default_cwd'), getSetting('ui_font_family'), @@ -112,6 +113,7 @@ getSetting('term_font_family'), getSetting('term_font_size'), getSetting('project_max_aspect'), + getSetting('files_save_on_blur'), ]); defaultShell = shell ?? ''; defaultCwd = cwd ?? ''; @@ -120,6 +122,7 @@ termFont = tfont ?? ''; termFontSize = tsize ?? ''; projectMaxAspect = aspect ?? '1.0'; + filesSaveOnBlur = saveOnBlur === 'true'; applyAspectRatio(projectMaxAspect); selectedTheme = getCurrentTheme(); @@ -480,6 +483,25 @@ + +

Editor

+
+
+ + Auto-save files when the editor loses focus +
+
@@ -1321,4 +1343,55 @@ color: var(--ctp-text); background: var(--ctp-surface1); } + + .subsection-title { + font-size: 0.725rem; + font-weight: 600; + color: var(--ctp-subtext1); + margin: 0.75rem 0 0.5rem; + } + + .setting-hint { + font-size: 0.625rem; + color: var(--ctp-overlay0); + } + + .toggle-label { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + } + + .toggle-switch { + position: relative; + width: 2rem; + height: 1.125rem; + border: none; + border-radius: 0.5625rem; + background: var(--ctp-surface1); + cursor: pointer; + transition: background 0.2s; + padding: 0; + flex-shrink: 0; + } + + .toggle-switch.on { + background: var(--ctp-blue); + } + + .toggle-thumb { + position: absolute; + top: 0.125rem; + left: 0.125rem; + width: 0.875rem; + height: 0.875rem; + border-radius: 50%; + background: var(--ctp-text); + transition: transform 0.2s; + } + + .toggle-switch.on .toggle-thumb { + transform: translateX(0.875rem); + }