feat: improve the settings page

apps/oneclient/frontend/src/bindings.gen.ts

@@ -254,10 +254,8 @@ export type VersionType =
  */
 "old_beta"
 
-const ARGS_MAP = { 'oneclient':'{"openDevTools":[],"getClustersGroupedByMajor":[],"getBundlesFor":["cluster_id"]}', 'events':'{"process":["event"],"ingress":["event"],"message":["event"]}', 'core':'{"updateClusterById":["id","request"],"getRunningProcesses":[],"readSettings":[],"changeSkin":["access_token","skin_url","skin_variant"],"fetchMinecraftProfile":["uuid"],"uploadSkinBytes":["access_token","skin_data","image_format","skin_variant"],"searchPackages":["provider","query"],"getClusters":[],"getPackageBody":["provider","body"],"killProcess":["pid"],"createSettingsProfile":["name"],"installModpack":["modpack","cluster_id"],"getMultiplePackages":["provider","slugs"],"getUsers":[],"open":["input"],"getUsersFromAuthor":["provider","author"],"getUser":["uuid"],"launchCluster":["id","uuid"],"removeUser":["uuid"],"getLogByName":["id","name"],"getPackage":["provider","slug"],"downloadPackage":["provider","package_id","version_id","cluster_id","skip_compatibility"],"removeCape":["access_token"],"writeSettings":["setting"],"getClusterById":["id"],"getLoadersForVersion":["mc_version"],"openMsaLogin":[],"updateClusterProfile":["name","profile"],"isClusterRunning":["cluster_id"],"getScreenshots":["id"],"getGlobalProfile":[],"createCluster":["options"],"getLogs":["id"],"getRunningProcessesByClusterId":["cluster_id"],"getProfileOrDefault":["name"],"getGameVersions":[],"getWorlds":["id"],"getDefaultUser":["fallback"],"setDefaultUser":["uuid"],"getPackageVersions":["provider","slug","mc_version","loader","offset","limit"],"fetchLoggedInProfile":["access_token"],"changeCape":["access_token","cape_uuid"],"removeCluster":["id"],"convertUsernameUUID":["username_uuid"]}', 'folders':'{"fromCluster":["folder_name"],"openCluster":["folder_name"]}' }
-export type Router = { 'folders': { fromCluster: (folderName: string) => Promise<string>, 
-openCluster: (folderName: string) => Promise<null> },
-'core': { getClusters: () => Promise<ClusterModel[]>, 
+const ARGS_MAP = { 'events':'{"message":["event"],"ingress":["event"],"process":["event"]}', 'oneclient':'{"openDevTools":[],"getBundlesFor":["cluster_id"],"getClustersGroupedByMajor":[]}', 'folders':'{"openCluster":["folder_name"],"fromCluster":["folder_name"]}', 'core':'{"getWorlds":["id"],"fetchMinecraftProfile":["uuid"],"getProfileOrDefault":["name"],"removeCluster":["id"],"uploadSkinBytes":["access_token","skin_data","image_format","skin_variant"],"getLogByName":["id","name"],"searchPackages":["provider","query"],"getClusterById":["id"],"fetchLoggedInProfile":["access_token"],"changeCape":["access_token","cape_uuid"],"getRunningProcessesByClusterId":["cluster_id"],"getScreenshots":["id"],"createSettingsProfile":["name"],"launchCluster":["id","uuid"],"createCluster":["options"],"getLogs":["id"],"getRunningProcesses":[],"getPackage":["provider","slug"],"getUser":["uuid"],"getPackageBody":["provider","body"],"getDefaultUser":["fallback"],"isClusterRunning":["cluster_id"],"getGlobalProfile":[],"openMsaLogin":[],"getGameVersions":[],"getUsersFromAuthor":["provider","author"],"writeSettings":["setting"],"getPackageVersions":["provider","slug","mc_version","loader","offset","limit"],"getClusters":[],"removeUser":["uuid"],"killProcess":["pid"],"updateClusterById":["id","request"],"getLoadersForVersion":["mc_version"],"convertUsernameUUID":["username_uuid"],"getMultiplePackages":["provider","slugs"],"installModpack":["modpack","cluster_id"],"open":["input"],"readSettings":[],"downloadPackage":["provider","package_id","version_id","cluster_id","skip_compatibility"],"removeCape":["access_token"],"updateClusterProfile":["name","profile"],"setDefaultUser":["uuid"],"getUsers":[],"changeSkin":["access_token","skin_url","skin_variant"]}' }
+export type Router = { 'core': { getClusters: () => Promise<ClusterModel[]>, 
 getClusterById: (id: number) => Promise<ClusterModel | null>, 
 removeCluster: (id: number) => Promise<null>, 
 createCluster: (options: CreateCluster) => Promise<ClusterModel>, 
@@ -301,12 +299,14 @@ changeCape: (accessToken: string, capeUuid: string) => Promise<MojangFullPlayerP
 removeCape: (accessToken: string) => Promise<MojangFullPlayerProfile>, 
 convertUsernameUUID: (usernameUuid: string) => Promise<MowojangProfile>, 
 open: (input: string) => Promise<null> },
-'oneclient': { openDevTools: () => Promise<void>, 
-getClustersGroupedByMajor: () => Promise<Partial<{ [key in number]: ClusterModel[] }>>, 
-getBundlesFor: (clusterId: number) => Promise<ModpackArchive[]> },
 'events': { ingress: (event: IngressPayload) => Promise<void>, 
 message: (event: MessagePayload) => Promise<void>, 
-process: (event: ProcessPayload) => Promise<void> } };
+process: (event: ProcessPayload) => Promise<void> },
+'folders': { fromCluster: (folderName: string) => Promise<string>, 
+openCluster: (folderName: string) => Promise<null> },
+'oneclient': { openDevTools: () => Promise<void>, 
+getClustersGroupedByMajor: () => Promise<Partial<{ [key in number]: ClusterModel[] }>>, 
+getBundlesFor: (clusterId: number) => Promise<ModpackArchive[]> } };
 
 
 export type { InferCommandOutput }

apps/oneclient/frontend/src/routes/app/settings/appearance.tsx

@@ -18,7 +18,7 @@ function RouteComponent() {
 		<Sidebar.Page>
 			{/* <ScrollableContainer> */}
 			<div className="h-full">
-				<h1>Appearance</h1>
+				<h1 className="text-xl">Appearance</h1>
 
 				<div className="flex flex-row items-center gap-4">
 					<PrimaryThemeCard />

apps/oneclient/frontend/src/routes/app/settings/developer.tsx

@@ -16,7 +16,9 @@ function RouteComponent() {
 	return (
 		<Sidebar.Page>
 			<div className="h-full">
-				<h1>Onboarding</h1>
+				<h1 className="text-xl">Developer Options</h1>
+
+				<SettingsRow.Header>Onboarding</SettingsRow.Header>
 
 				<SettingsRow
 					description="Open Onboarding"

apps/oneclient/frontend/src/routes/app/settings/index.tsx

@@ -30,7 +30,7 @@ function RouteComponent() {
 	return (
 		<Sidebar.Page>
 			<div className="h-full">
-				<h1>General</h1>
+				<h1 className="text-xl">General</h1>
 
 				<SettingsRow
 					description="Enable Discord Rich Presence."

apps/oneclient/frontend/src/routes/app/settings/minecraft.tsx

@@ -28,7 +28,7 @@ function RouteComponent() {
 		<Sidebar.Page>
 			{/* <ScrollableContainer> */}
 			<div className="h-full">
-				<h1>Minecraft Settings</h1>
+				<h1 className="text-xl">Minecraft Settings</h1>
 
 				<GameSettings />
 

apps/oneclient/frontend/src/routes/app/settings/route.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from 'react';
+import { SheetPage } from '@/components';
 import { createFileRoute, Outlet, useNavigate, useRouterState } from '@tanstack/react-router';
 import { Brush01Icon, CodeSnippet02Icon, MessageTextSquare01Icon, RefreshCcw02Icon, Rocket02Icon, Sliders04Icon } from '@untitled-theme/icons-react';
 import { useEffect } from 'react';
@@ -7,46 +8,67 @@ export const Route = createFileRoute('/app/settings')({
 	component: RouteComponent,
 });
 
-function RouteComponent() {
+function HeaderLarge() {
 	return (
-		<div className="h-full flex flex-1 flex-row gap-x-7">
-			<div className="mt-8 flex flex-col justify-between">
-				<Sidebar
-					base="/app/settings"
-					links={{
-						'Launcher Settings': [
-							[<Rocket02Icon key="general" />, 'General', '/'],
-							[<Brush01Icon key="appearence" />, 'Appearance', '/appearance'],
-							// [<Key01Icon />, 'APIs', '/apis'],
-							// [<Globe01Icon />, 'Language', '/language'],
-						],
-						'Game Settings': [
-							[<Sliders04Icon key="mcsettings" />, 'Minecraft settings', '/minecraft'],
-						],
-						'About': [
-							[<RefreshCcw02Icon key="changelog" />, 'Changelog', '/changelog'],
-							[<MessageTextSquare01Icon key="feedback" />, 'Feedback', '/feedback'],
-							[<CodeSnippet02Icon key="dev" />, 'Developer Options', '/developer'],
-						],
-					}}
-				/>
-				{/* <Info /> */}
-			</div>
-
-			<div className="h-full w-full flex flex-col">
-				<Outlet />
+		<div className="flex flex-row justify-between items-end gap-8">
+			<div className="flex flex-col">
+				<h1 className="text-3xl font-semibold">Settings</h1>
+				<p className="text-md font-medium text-fg-secondary">Adjust the Launcher Settings</p>
 			</div>
 		</div>
 	);
 }
 
+function HeaderSmall() {
+	return <h1 className="text-2lg h-full font-medium">Settings</h1>;
+}
+
+function RouteComponent() {
+	return (
+		<SheetPage headerLarge={<HeaderLarge />} headerSmall={<HeaderSmall />}>
+
+			<div className="h-full flex flex-1 flex-row gap-x-7">
+				<div className="mt-8 flex flex-col justify-between">
+					<Sidebar
+						base="/app/settings"
+						exact
+						links={{
+							'Launcher Settings': [
+								[<Rocket02Icon key="general" />, 'General', '/'],
+								[<Brush01Icon key="appearence" />, 'Appearance', '/appearance'],
+							// [<Key01Icon />, 'APIs', '/apis'],
+							// [<Globe01Icon />, 'Language', '/language'],
+							],
+							'Game Settings': [
+								[<Sliders04Icon key="mcsettings" />, 'Minecraft settings', '/minecraft'],
+							],
+							'About': [
+								[<RefreshCcw02Icon key="changelog" />, 'Changelog', '/changelog'],
+								[<MessageTextSquare01Icon key="feedback" />, 'Feedback', '/feedback'],
+								[<CodeSnippet02Icon key="dev" />, 'Developer Options', '/developer'],
+							],
+						}}
+
+					/>
+					{/* <Info /> */}
+				</div>
+
+				<div className="h-full w-full flex flex-col">
+					<Outlet />
+				</div>
+			</div>
+		</SheetPage>
+	);
+}
+
 interface SidebarProps {
 	base: string;
 	links: Record<string, Array<[JSX.Element, string, string, URLSearchParams?] | undefined>>;
+	exact?: boolean;
 }
 
 function Sidebar(props: SidebarProps) {
-	const { base, links } = props;
+	const { base, links, exact } = props;
 
 	const navigate = useNavigate();
 	const routerState = useRouterState();
@@ -68,9 +90,11 @@ function Sidebar(props: SidebarProps) {
 		navigate({ to: url });
 	}
 
-	function isActive(link: string, params: URLSearchParams | undefined) {
+	function isActive(link: string, params: URLSearchParams | undefined, exact: boolean = false) {
 		const fullBasePath = `${base}${link}`;
-		const pathnameMatch = location.startsWith(fullBasePath) || `${location}/`.startsWith(fullBasePath);
+		const pathnameMatch = exact
+			? location === fullBasePath || `${location}/` === fullBasePath
+			: location.startsWith(fullBasePath) || `${location}/`.startsWith(fullBasePath);
 
 		if (!params)
 			return pathnameMatch;
@@ -99,7 +123,7 @@ function Sidebar(props: SidebarProps) {
 								return (
 									<a
 										className={
-											`px-3 py-1 rounded-md text-md border hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link, params) ? 'bg-component-bg border-component-bg-pressed' : 'border-transparent'}`
+											`px-3 py-1 rounded-md text-md border hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link, params, exact) ? 'bg-component-bg border-component-bg-pressed' : 'border-transparent'}`
 										}
 										key={link}
 										onClick={() => goto(link, params)}