From 402d6d6041cfd895139f88843940de507efda383 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:22:09 +0200
Subject: [PATCH] feat: More settings

---
 desktop/src/globals.css                       |  6 +-
 desktop/src/ui/components/SettingsRow.tsx     | 21 ++++---
 desktop/src/ui/components/base/TextField.tsx  |  2 +-
 .../src/ui/pages/settings/SettingsRoot.tsx    |  4 +-
 .../settings/about/SettingsDeveloper.tsx      | 56 +++++++++++++++++++
 .../pages/settings/game/SettingsMinecraft.tsx | 42 ++++++++++++--
 .../settings/launcher/SettingsAppearance.tsx  |  4 +-
 .../settings/launcher/SettingsGeneral.tsx     | 45 ++++++++++++++-
 8 files changed, 157 insertions(+), 23 deletions(-)
 create mode 100644 desktop/src/ui/pages/settings/about/SettingsDeveloper.tsx

diff --git a/desktop/src/globals.css b/desktop/src/globals.css
index 86523798..bb9d797a 100644
--- a/desktop/src/globals.css
+++ b/desktop/src/globals.css
@@ -73,7 +73,7 @@ h4 { @apply text-lg font-medium; }
     transform: translateX(0);
 }
 
-body.reduce-motion * {
-    transition-duration: 0.0001ms !important;
-    animation-duration: 0.0001ms !important;
+body.reduce-motion *, body.reduce-motion *::after, body.reduce-motion *::before {
+    transition-duration: 0.00001ms !important;
+    animation-duration: 0.00001ms !important;
 }
diff --git a/desktop/src/ui/components/SettingsRow.tsx b/desktop/src/ui/components/SettingsRow.tsx
index d71f430b..d5bb35c1 100644
--- a/desktop/src/ui/components/SettingsRow.tsx
+++ b/desktop/src/ui/components/SettingsRow.tsx
@@ -1,17 +1,18 @@
-import { type JSX, type ParentProps, createEffect } from 'solid-js';
+import type { JSX, ParentProps } from 'solid-js';
 
 type SettingsRowProps = ParentProps & {
-	title: string;
-	description: string;
+	title: JSX.Element;
+	description: JSX.Element;
 	icon: JSX.Element;
-	clickable?: () => any;
+	onClick?: () => any;
 };
 
 function SettingsRow(props: SettingsRowProps) {
-	const interactableClass = createEffect(() => props.clickable ? 'hover:bg-component-bg-hover active:bg-component-bg-pressed' : '');
-
 	return (
-		<div class={`flex flex-row bg-component-bg rounded-xl gap-3.5 p-4 ${interactableClass} items-center`}>
+		<div
+			class={`flex flex-row bg-component-bg rounded-xl gap-3.5 p-4 ${props.onClick ? 'hover:bg-component-bg-hover active:bg-component-bg-pressed' : ''} items-center`}
+			{...(props.onClick ? { onClick: props.onClick } : {})}
+		>
 			<div class="flex justify-center items-center h-8 w-8">
 				{props.icon}
 			</div>
@@ -21,11 +22,15 @@ function SettingsRow(props: SettingsRowProps) {
 				<p class="text-wrap text-sm">{props.description}</p>
 			</div>
 
-			<div class="">
+			<div>
 				{props.children}
 			</div>
 		</div>
 	);
 }
 
+SettingsRow.Header = (props: JSX.HTMLAttributes<HTMLHeadingElement>) => {
+	return <h3 class={`mt-4 mb-1 ml-2 text-md text-fg-secondary uppercase ${props.class || ''}`} {...props} />;
+};
+
 export default SettingsRow;
diff --git a/desktop/src/ui/components/base/TextField.tsx b/desktop/src/ui/components/base/TextField.tsx
index 2d9b42eb..1ca3e993 100644
--- a/desktop/src/ui/components/base/TextField.tsx
+++ b/desktop/src/ui/components/base/TextField.tsx
@@ -1,5 +1,5 @@
 import type { JSX } from 'solid-js';
-import { createEffect, createSignal, createUniqueId, splitProps } from 'solid-js';
+import { createSignal, createUniqueId, splitProps } from 'solid-js';
 import styles from './TextField.module.scss';
 
 type TextFieldProps = {
diff --git a/desktop/src/ui/pages/settings/SettingsRoot.tsx b/desktop/src/ui/pages/settings/SettingsRoot.tsx
index 751e2880..08f460ab 100644
--- a/desktop/src/ui/pages/settings/SettingsRoot.tsx
+++ b/desktop/src/ui/pages/settings/SettingsRoot.tsx
@@ -6,6 +6,7 @@ import SettingsGeneral from './launcher/SettingsGeneral';
 import SettingsAppearance from './launcher/SettingsAppearance';
 import SettingsAccounts from './game/SettingsAccounts';
 import SettingsMinecraft from './game/SettingsMinecraft';
+import SettingsDeveloper from './about/SettingsDeveloper';
 import AnimatedRoutes from '~ui/components/AnimatedRoutes';
 import ErrorBoundary from '~ui/components/ErrorBoundary';
 
@@ -21,6 +22,7 @@ function SettingsRoutes() {
 			<Route path="/accounts" component={SettingsAccounts} />
 
 			{/* About */}
+			<Route path="/developer" component={SettingsDeveloper} />
 		</>
 	);
 }
@@ -44,9 +46,9 @@ function SettingsRoot(props: ParentProps) {
 							[<Users01Icon />, 'Accounts', '/accounts'],
 						],
 						'About': [
-							[<CodeSnippet02Icon />, 'Developer Options', '/developer'],
 							[<RefreshCcw02Icon />, 'Changelog', '/changelog'],
 							[<MessageTextSquare01Icon />, 'Feedback', '/feedback'],
+							[<CodeSnippet02Icon />, 'Developer Options', '/developer'],
 						],
 					}}
 				/>
diff --git a/desktop/src/ui/pages/settings/about/SettingsDeveloper.tsx b/desktop/src/ui/pages/settings/about/SettingsDeveloper.tsx
new file mode 100644
index 00000000..2e61d784
--- /dev/null
+++ b/desktop/src/ui/pages/settings/about/SettingsDeveloper.tsx
@@ -0,0 +1,56 @@
+import { CodeBrowserIcon, GitMergeIcon, LinkExternal01Icon, RefreshCcw05Icon } from '@untitled-theme/icons-solid';
+import Button from '~ui/components/base/Button';
+import Toggle from '~ui/components/base/Toggle';
+import ScrollableContainer from '~ui/components/ScrollableContainer';
+import SettingsRow from '~ui/components/SettingsRow';
+import Sidebar from '~ui/components/Sidebar';
+import useSettingsContext from '~ui/hooks/useSettings';
+
+function SettingsDeveloper() {
+	const settings = useSettingsContext();
+
+	return (
+		<Sidebar.Page>
+			<h1>Developer Options</h1>
+			<p class="mb-2">You probably shouldn't mess with any of these if you don't know what you're doing!</p>
+			<ScrollableContainer>
+				<SettingsRow
+					title="Open Dev Tools"
+					description="Opens the browser developer tools."
+					icon={<CodeBrowserIcon />}
+				>
+					<Button
+						iconLeft={<LinkExternal01Icon />}
+						children="Open"
+					/>
+				</SettingsRow>
+
+				<SettingsRow
+					title="Debug mode"
+					description="Enables debug mode."
+					icon={<GitMergeIcon />}
+				>
+					<Toggle
+						defaultChecked={settings.debug_mode ?? false}
+						onChecked={value => settings.debug_mode = value}
+					/>
+				</SettingsRow>
+
+				<SettingsRow
+					title="Reload"
+					description="Reloads the launcher frontend."
+					icon={<RefreshCcw05Icon />}
+				>
+					<Button
+						iconLeft={<RefreshCcw05Icon />}
+						onClick={() => location.href = '/'}
+						children="Reload"
+					/>
+				</SettingsRow>
+
+			</ScrollableContainer>
+		</Sidebar.Page>
+	);
+}
+
+export default SettingsDeveloper;
diff --git a/desktop/src/ui/pages/settings/game/SettingsMinecraft.tsx b/desktop/src/ui/pages/settings/game/SettingsMinecraft.tsx
index bc1e2aa0..e547cbba 100644
--- a/desktop/src/ui/pages/settings/game/SettingsMinecraft.tsx
+++ b/desktop/src/ui/pages/settings/game/SettingsMinecraft.tsx
@@ -1,4 +1,5 @@
-import { LayoutTopIcon, Maximize01Icon, XIcon } from '@untitled-theme/icons-solid';
+import { EyeIcon, LayoutTopIcon, Maximize01Icon, XIcon } from '@untitled-theme/icons-solid';
+import Dropdown from '~ui/components/base/Dropdown';
 import TextField from '~ui/components/base/TextField';
 import Toggle from '~ui/components/base/Toggle';
 import ScrollableContainer from '~ui/components/ScrollableContainer';
@@ -11,12 +12,12 @@ function SettingsMinecraft() {
 
 	return (
 		<Sidebar.Page>
-			<h1>Global Game Settings</h1>
+			<h1>Global Minecraft Settings</h1>
 			<ScrollableContainer>
 
 				<SettingsRow
 					title="Force Fullscreen"
-					description="Force Minecraft to start in fullscreen mode"
+					description="Force Minecraft to start in fullscreen mode."
 					icon={<Maximize01Icon />}
 				>
 					<Toggle
@@ -27,18 +28,21 @@ function SettingsMinecraft() {
 
 				<SettingsRow
 					title="Resolution"
-					description="The game window resolution"
+					description="The game window resolution in pixels."
 					icon={<LayoutTopIcon />}
 				>
-					<div class="grid grid-justify-center grid-items-center grid-cols-[70px_24px_70px]">
+					<div class="grid grid-justify-center grid-items-center gap-2 grid-cols-[70px_16px_70px]">
 						<TextField.Number
+							class="text-center"
 							value={settings.resolution[0]}
 							onValidSubmit={(value) => {
 								settings.resolution = [Number.parseInt(value), settings.resolution[1]];
 							}}
 						/>
-						<XIcon />
+						<XIcon class="w-4 h-4" />
 						<TextField.Number
+							class="text-center"
+							value={settings.resolution[1]}
 							onValidSubmit={(value) => {
 								settings.resolution = [settings.resolution[0], Number.parseInt(value)];
 							}}
@@ -46,6 +50,32 @@ function SettingsMinecraft() {
 					</div>
 				</SettingsRow>
 
+				<SettingsRow
+					title="Launcher Visibility"
+					description="Set the launcher visibility whenever you start a game."
+					icon={<EyeIcon />}
+				>
+					<Dropdown
+						class="w-32!"
+						onChange={(selected) => {
+							switch (selected) {
+								case 0:
+									settings.hide_on_launch = false;
+									break;
+								case 1:
+									settings.hide_on_launch = true;
+									break;
+								case 2:
+									break;
+							}
+						}}
+					>
+						<Dropdown.Row>Visible</Dropdown.Row>
+						<Dropdown.Row>Hide</Dropdown.Row>
+						<Dropdown.Row>Close (// TODO)</Dropdown.Row>
+					</Dropdown>
+				</SettingsRow>
+
 			</ScrollableContainer>
 		</Sidebar.Page>
 	);
diff --git a/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx b/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx
index 424485df..b116f41a 100644
--- a/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx
+++ b/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx
@@ -26,8 +26,8 @@ function SettingsAppearance() {
 				</SettingsRow>
 
 				<SettingsRow
-					title="Animations"
-					description="Toggle all animations in the launcher."
+					title="Disable Animations"
+					description="Disables all animations in the launcher."
 					icon={<Speedometer04Icon />}
 				>
 					<Toggle
diff --git a/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx b/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx
index e4dc61ff..1e8395bc 100644
--- a/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx
+++ b/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx
@@ -1,9 +1,11 @@
-import { XIcon } from '@untitled-theme/icons-solid';
+import { AlertSquareIcon, FolderIcon, LinkExternal01Icon, XIcon } from '@untitled-theme/icons-solid';
+import { open } from '@tauri-apps/plugin-shell';
 import SettingsRow from '../../../components/SettingsRow';
 import ScrollableContainer from '~ui/components/ScrollableContainer';
 import Toggle from '~ui/components/base/Toggle';
 import Sidebar from '~ui/components/Sidebar';
 import useSettingsContext from '~ui/hooks/useSettings';
+import Button from '~ui/components/base/Button';
 
 function SettingsGeneral() {
 	const settings = useSettingsContext();
@@ -13,9 +15,20 @@ function SettingsGeneral() {
 			<h1>General</h1>
 			<ScrollableContainer>
 
+				<SettingsRow
+					title="Discord RPC"
+					description="Enable Discord Rich Presence."
+					icon={<XIcon />}
+				>
+					<Toggle
+						defaultChecked={!(settings.disable_discord ?? false)}
+						onChecked={value => settings.disable_discord = !value}
+					/>
+				</SettingsRow>
+
 				<SettingsRow
 					title="Hide Close Dialog"
-					description="Hide the close confirmation dialog when closing the launcher."
+					description="Hide the confirmation dialog when closing the launcher."
 					icon={<XIcon />}
 				>
 					<Toggle
@@ -24,6 +37,34 @@ function SettingsGeneral() {
 					/>
 				</SettingsRow>
 
+				<SettingsRow
+					title="Error Analytics"
+					description="Sends errors and crash logs using Sentry to help developers fix issues. (// TODO)"
+					icon={<AlertSquareIcon />}
+				>
+					<Toggle
+						defaultChecked={!(settings.disable_analytics ?? false)}
+						onChecked={value => settings.disable_analytics = !value}
+					/>
+				</SettingsRow>
+
+				<SettingsRow.Header>Folders and Files</SettingsRow.Header>
+
+				<SettingsRow
+					title="Launcher Directory"
+					description={settings.config_dir || 'UNKNOWN'}
+					icon={<FolderIcon />}
+				>
+					<Button
+						iconLeft={<LinkExternal01Icon />}
+						children="Open"
+						onClick={() => {
+							if (settings.config_dir)
+								open(settings.config_dir);
+						}}
+					/>
+				</SettingsRow>
+
 			</ScrollableContainer>
 		</Sidebar.Page>
 	);