feat(settings): add toggle for dialog backdrop blur

New setting to enable/disable the backdrop blur effect when dialogs
are open. Defaults to enabled (existing behavior). Persisted across
restarts.

Author: maskar

src/components/Dialog.tsx

@@ -3,6 +3,7 @@ import { Portal } from 'solid-js/web';
 import { createFocusRestore } from '../lib/focus-restore';
 import { createFocusTrap } from '../lib/focus-trap';
 import { theme } from '../lib/theme';
+import { store } from '../store/store';
 
 interface DialogProps {
   open: boolean;
@@ -67,7 +68,7 @@ export function Dialog(props: DialogProps) {
     <Portal>
       <Show when={props.open}>
         <div
-          class="dialog-overlay"
+          class={`dialog-overlay${store.dialogBlur ? ' dialog-blur' : ''}`}
           style={{
             position: 'fixed',
             inset: '0',

src/components/SettingsDialog.tsx

@@ -12,6 +12,7 @@ import {
   store,
   setTerminalFont,
   setThemePreset,
+  setDialogBlur,
   setAutoTrustFolders,
   setShowPlans,
   setDesktopNotificationsEnabled,
@@ -216,6 +217,33 @@ export function SettingsDialog(props: SettingsDialogProps) {
             </span>
           </div>
         </label>
+        <label
+          style={{
+            display: 'flex',
+            'align-items': 'center',
+            gap: '10px',
+            cursor: 'pointer',
+            padding: '8px 12px',
+            'border-radius': '8px',
+            background: theme.bgInput,
+            border: `1px solid ${theme.border}`,
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={store.dialogBlur}
+            onChange={(e) => setDialogBlur(e.currentTarget.checked)}
+            style={{ 'accent-color': theme.accent, cursor: 'pointer' }}
+          />
+          <div style={{ display: 'flex', 'flex-direction': 'column', gap: '2px' }}>
+            <span style={{ 'font-size': '13px', color: theme.fg }}>
+              Blur background when dialogs are open
+            </span>
+            <span style={{ 'font-size': '11px', color: theme.fgSubtle }}>
+              Apply a backdrop blur effect behind dialog overlays
+            </span>
+          </div>
+        </label>
       </div>
 
       <div style={{ display: 'flex', 'flex-direction': 'column', gap: '10px' }}>

src/store/core.ts

@@ -38,6 +38,7 @@ export const [store, setStore] = createStore<AppStore>({
   mergedLinesRemoved: 0,
   terminalFont: DEFAULT_TERMINAL_FONT,
   themePreset: 'minimal',
+  dialogBlur: true,
   windowState: null,
   autoTrustFolders: false,
   showPlans: true,

src/store/persistence.ts

@@ -48,6 +48,7 @@ export async function saveState(): Promise<void> {
     mergedLinesRemoved: store.mergedLinesRemoved,
     terminalFont: store.terminalFont,
     themePreset: store.themePreset,
+    dialogBlur: store.dialogBlur,
     windowState: store.windowState ? { ...store.windowState } : undefined,
     autoTrustFolders: store.autoTrustFolders,
     showPlans: store.showPlans,
@@ -187,6 +188,7 @@ interface LegacyPersistedState {
   mergedLinesRemoved?: unknown;
   terminalFont?: unknown;
   themePreset?: unknown;
+  dialogBlur?: unknown;
   windowState?: unknown;
   autoTrustFolders?: unknown;
   showPlans?: unknown;
@@ -297,6 +299,7 @@ export async function loadState(): Promise<void> {
           ? raw.terminalFont
           : DEFAULT_TERMINAL_FONT;
       s.themePreset = isLookPreset(raw.themePreset) ? raw.themePreset : 'minimal';
+      s.dialogBlur = typeof raw.dialogBlur === 'boolean' ? raw.dialogBlur : true;
       s.windowState = parsePersistedWindowState(raw.windowState);
       s.autoTrustFolders = typeof raw.autoTrustFolders === 'boolean' ? raw.autoTrustFolders : false;
       s.showPlans = typeof raw.showPlans === 'boolean' ? raw.showPlans : true;

src/store/store.ts

@@ -94,6 +94,7 @@ export {
   toggleArena,
   setTerminalFont,
   setThemePreset,
+  setDialogBlur,
   setAutoTrustFolders,
   setShowPlans,
   setDesktopNotificationsEnabled,

src/store/types.ts

@@ -119,6 +119,7 @@ export interface PersistedState {
   mergedLinesRemoved?: number;
   terminalFont?: string;
   themePreset?: LookPreset;
+  dialogBlur?: boolean;
   windowState?: PersistedWindowState;
   autoTrustFolders?: boolean;
   showPlans?: boolean;
@@ -183,6 +184,7 @@ export interface AppStore {
   mergedLinesRemoved: number;
   terminalFont: string;
   themePreset: LookPreset;
+  dialogBlur: boolean;
   windowState: PersistedWindowState | null;
   autoTrustFolders: boolean;
   showPlans: boolean;

src/store/ui.ts

@@ -78,6 +78,10 @@ export function setThemePreset(themePreset: LookPreset): void {
   setStore('themePreset', themePreset);
 }
 
+export function setDialogBlur(enabled: boolean): void {
+  setStore('dialogBlur', enabled);
+}
+
 export function setAutoTrustFolders(autoTrustFolders: boolean): void {
   setStore('autoTrustFolders', autoTrustFolders);
 }

src/styles.css

@@ -645,6 +645,10 @@ textarea::placeholder {
 .dialog-overlay {
   animation: fadeIn 0.16s ease;
   background: color-mix(in srgb, #000 44%, transparent);
+  backdrop-filter: saturate(1.15);
+}
+
+.dialog-overlay.dialog-blur {
   backdrop-filter: blur(6px) saturate(1.15);
 }