feat: Close confirmation dialog setting

desktop/src/ui/components/WindowFrame.tsx

@@ -4,6 +4,7 @@ import type { JSX } from 'solid-js';
 import { createSignal, onMount } from 'solid-js';
 import Modal from './overlay/Modal';
 import Button from './base/Button';
+import appSettings from '~ui/state/appSettings';
 
 interface TitlebarButtonProps {
 	icon: (any: any) => JSX.Element;
@@ -25,12 +26,15 @@ function WindowFrame() {
 	const [isModalVisible, setModalVisible] = createSignal(false);
 
 	const minimize = () => Window.getCurrent().minimize();
-	const quit = () => Window.getCurrent().destroy();
+	const quit = () => Window.getCurrent().close();
+	// const kill = () => Window.getCurrent().destroy();
 
 	onMount(() => {
 		Window.getCurrent().onCloseRequested((event) => {
-			event.preventDefault();
-			setModalVisible(true);
+			if (appSettings.settings.closeDialog) {
+				event.preventDefault();
+				setModalVisible(true);
+			}
 		});
 	});
 
@@ -42,7 +46,7 @@ function WindowFrame() {
 
 			<div class="flex flex-row items-center justify-end">
 				<TitlebarButton icon={MinusIcon} onClick={() => minimize()} />
-				<TitlebarButton icon={XCloseIcon} onClick={() => setModalVisible(true)} danger />
+				<TitlebarButton icon={XCloseIcon} onClick={() => quit()} danger />
 			</div>
 
 			<Modal

desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx

@@ -3,10 +3,10 @@ import SettingsRow from '../components';
 import ScrollableContainer from '~ui/components/ScrollableContainer';
 import Button from '~ui/components/base/Button';
 import Toggle from '~ui/components/base/Toggle';
-import reducedMotionTracker from '~ui/state/reducedMotionTracker';
+import appSettings from '~ui/state/appSettings';
 
 function SettingsAppearance() {
-	const { reducedMotion, setReducedMotion } = reducedMotionTracker;
+	const { settings, setSettings } = appSettings;
 
 	return (
 		<ScrollableContainer title="Appearance">
@@ -28,9 +28,9 @@ function SettingsAppearance() {
 				icon={<Speedometer04Icon />}
 			>
 				<Toggle
-					defaultChecked={reducedMotion()}
+					defaultChecked={settings.reducedMotion}
 					onChecked={(checked) => {
-						setReducedMotion(checked);
+						setSettings('reducedMotion', checked);
 					}}
 				/>
 			</SettingsRow>

desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx

@@ -1,11 +1,24 @@
-import { Code01Icon } from '@untitled-theme/icons-solid';
+import { XIcon } from '@untitled-theme/icons-solid';
 import SettingsRow from '../components';
 import ScrollableContainer from '~ui/components/ScrollableContainer';
+import Toggle from '~ui/components/base/Toggle';
+import appSettings from '~ui/state/appSettings';
 
 function SettingsGeneral() {
 	return (
 		<ScrollableContainer title="General">
-			<SettingsRow title="Title" description="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the" icon={<Code01Icon />} />
+			<SettingsRow
+                title='Show Close Dialog'
+                description='Show a confirmation dialog when closing the launcher.'
+                icon={<XIcon />}
+            >
+                <Toggle
+                    defaultChecked={appSettings.settings.closeDialog}
+                    onChecked={(checked) => {
+                        appSettings.setSettings('closeDialog', checked);
+                    }}
+                />
+            </SettingsRow>
 		</ScrollableContainer>
 	);
 }

desktop/src/ui/state/appSettings.ts

@@ -0,0 +1,37 @@
+import { createEffect, createRoot, onMount } from 'solid-js';
+import { createStore } from 'solid-js/store';
+
+export interface AppSettingsStore {
+	reducedMotion: boolean;
+	closeDialog: boolean;
+};
+
+function globalStore() {
+	// TODO: Much better management of this, currently temporary
+	const [settings, setSettings] = createStore<AppSettingsStore>({
+		reducedMotion: false,
+		closeDialog: true,
+	});
+
+	function set<K extends keyof AppSettingsStore>(key: K, value: AppSettingsStore[K]) {
+		window.localStorage.setItem(key, value.toString());
+	}
+
+	onMount(() => {
+		setSettings('reducedMotion', window.localStorage.getItem('reducedMotion') === 'true');
+		setSettings('closeDialog', window.localStorage.getItem('closeDialog') === 'true');
+	});
+
+	createEffect(() => {
+		// Reduced Motion
+		set('reducedMotion', settings.reducedMotion);
+		document.body.classList.toggle('reduce-motion', settings.reducedMotion);
+
+		// Close Dialog
+		set('closeDialog', settings.closeDialog);
+	});
+
+	return { settings, setSettings };
+}
+
+export default createRoot(globalStore);

desktop/src/ui/state/reducedMotionTracker.ts

@@ -1,20 +0,0 @@
-import { createEffect, createRoot, createSignal, onMount } from 'solid-js';
-
-function createReducedMotionTracker() {
-	const [reducedMotion, setReducedMotion] = createSignal(false);
-
-	onMount(() => {
-		const enabled = window.localStorage.getItem('reduced-motion') === 'true';
-		setReducedMotion(enabled);
-	});
-
-	createEffect(() => {
-		const enabled = reducedMotion();
-		document.body.classList.toggle('reduce-motion', enabled);
-		window.localStorage.setItem('reduced-motion', enabled.toString());
-	});
-
-	return { reducedMotion, setReducedMotion };
-}
-
-export default createRoot(createReducedMotionTracker);