Chore: Using common Component to structure Settings page

vrc-get · Apr 6, 2024 · c96adad · c96adad
1 parent 00d5596
commit c96adad
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 87 deletions.
diff --git a/vrc-get-gui/app/log/page.tsx b/vrc-get-gui/app/log/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {Card, Typography} from "@material-tailwind/react";
-import {HNavBar, VStack} from "@/components/layout";
+import {HNavBar, VStack, HSection} from "@/components/layout";
 import React, {useEffect} from "react";
 import {LogEntry, utilGetLogEntries} from "@/lib/bindings";
 import {notoSansMono} from "@/app/fonts";
@@ -39,17 +39,17 @@ export default function Page() {
 	}, []);
 
 	return (
-		<VStack className={"m-4"}>
+		<VStack>
 			<HNavBar className={"flex-shrink-0"}>
 				<Typography className="cursor-pointer py-1.5 font-bold flex-grow-0">
 					{tc("logs")}
 				</Typography>
 			</HNavBar>
-			<main className="flex-shrink overflow-hidden flex flex-grow">
-				<Card className={`w-full overflow-x-auto overflow-y-scroll p-2 whitespace-pre ${notoSansMono.className} shadow-none`}>
-					{logEntries.map((entry) => logEntryToText(entry)).join("\n")}
-				</Card>
-			</main>
+			<HSection
+				contentClassName={`w-full overflow-x-auto overflow-y-scroll p-2 whitespace-pre ${notoSansMono.className} shadow-none`}
+			>
+				{logEntries.map((entry) => logEntryToText(entry)).join("\n")}
+			</HSection>
 		</VStack>
 	);
 }

diff --git a/vrc-get-gui/app/projects/manage/page.tsx b/vrc-get-gui/app/projects/manage/page.tsx
@@ -411,7 +411,7 @@ function PageBody() {
 	}
 
 	return (
-		<VStack className={"m-4"}>
+		<VStack>
 			<ProjectViewHeader className={"flex-shrink-0"} projectName={projectName} projectPath={projectPath}
 												 onRemove={onRemoveProject} onBackup={onBackupProject}/>
 			<Card className={"flex-shrink-0 p-2 flex flex-row"}>

diff --git a/vrc-get-gui/app/projects/page.tsx b/vrc-get-gui/app/projects/page.tsx
@@ -94,7 +94,7 @@ export default function Page() {
 	const loading = result.isFetching || loadingOther;
 
 	return (
-		<VStack className={"m-4"}>
+		<VStack>
 			<ProjectViewHeader className={"flex-shrink-0"}
 												 refresh={() => result.refetch()}
 												 startCreateProject={startCreateProject}

diff --git a/vrc-get-gui/app/repositories/page.tsx b/vrc-get-gui/app/repositories/page.tsx
@@ -142,7 +142,7 @@ function PageBody() {
 		<Dialog handler={nop} open><DialogHeader>{tc("add repository")}</DialogHeader>{dialogBody}</Dialog> : null;
 
 	return (
-		<VStack className={"p-4 overflow-y-auto"}>
+		<VStack>
 			<HNavBar className={"flex-shrink-0"}>
 				<Typography className="cursor-pointer py-1.5 font-bold flex-grow-0">
 					{tc("community repositories")}

diff --git a/vrc-get-gui/app/settings/page.tsx b/vrc-get-gui/app/settings/page.tsx
@@ -13,7 +13,7 @@ import {
 	environmentSetShowPrereleasePackages,
 	TauriEnvironmentSettings
 } from "@/lib/bindings";
-import {HNavBar, VStack} from "@/components/layout";
+import {HNavBar, VStack, HSection} from "@/components/layout";
 import React from "react";
 import {toastError, toastSuccess, toastThrownError} from "@/lib/toast";
 import i18next, {languages, tc, tt} from "@/lib/i18n";
@@ -42,7 +42,7 @@ export default function Page() {
 	}
 
 	return (
-		<VStack className={"p-4"}>
+		<VStack>
 			<HNavBar className={"flex-shrink-0"}>
 				<Typography className="cursor-pointer py-1.5 font-bold flex-grow-0">
 					{tc("settings")}
@@ -67,6 +67,13 @@ function Settings(
 	const [pickProjectDefaultPath, projectDefaultDialog] = useFilePickerFunction(environmentPickProjectDefaultPath);
 	const [pickProjectBackupPath, projectBackupDialog] = useFilePickerFunction(environmentPickProjectBackupPath);
 
+	const pageDialogs = (<>
+		{unityDialog}
+		{unityHubDialog}
+		{projectDefaultDialog}
+		{projectBackupDialog}
+	</>)
+
 	const selectUnityHub = async () => {
 		try {
 			const result = await pickUnityHub();
@@ -190,93 +197,81 @@ function Settings(
 	};
 
 	return (
-		<main className="flex flex-col gap-2 flex-shrink overflow-y-auto flex-grow">
-			<Card className={"flex-shrink-0 p-4"}>
-				<h2 className={"pb-2"}>{tc("unity hub")}</h2>
-				<div className={"flex gap-1"}>
-					{
-						settings.unity_hub
-							? <Input className="flex-auto" value={settings.unity_hub} disabled/>
-							: <Input value={"Unity Hub Not Found"} disabled className={"flex-auto text-red-900"}/>
-					}
-					<Button className={"flex-none px-4"} onClick={selectUnityHub}>{tc("select")}</Button>
-				</div>
-			</Card>
-			<Card className={"flex-shrink-0 p-4"}>
-				<div className={"pb-2 flex align-middle"}>
-					<div className={"flex-grow flex items-center"}>
-						<h2>{tc("unity installations")}</h2>
-					</div>
-					<Button onClick={addUnity} size={"sm"} className={"m-1"}>{tc("add unity")}</Button>
-				</div>
-				<Card className="w-full overflow-x-auto overflow-y-scroll min-h-[20vh]">
+		<>
+			<HSection
+				sectionTitle={tc("unity hub")}
+			>
+				{ settings.unity_hub ?
+					<Input className="flex-auto" value={settings.unity_hub} disabled/> :
+					<Input value={"Unity Hub Not Found"} disabled className={"flex-auto text-red-900"}/>
+				}
+				<Button className={"flex-none px-4"} onClick={selectUnityHub}>{tc("select")}</Button>
+			</HSection>
+			<HSection
+				sectionTitle={tc("unity installations")}
+				sectionOptions={(<Button onClick={addUnity} size={"sm"} className={"m-1"}>{tc("add unity")}</Button>)}
+			>
+				<Card className="w-full overflow-x-auto overflow-y-auto min-h-[20vh] max-h-[25vh]">
 					<UnityTable unityPaths={settings.unity_paths}/>
 				</Card>
-			</Card>
-			<Card className={"flex-shrink-0 p-4"}>
-				<h2>{tc("default project path")}</h2>
-				<Typography className={"whitespace-normal"}>
-					{tc("the default project path is the directory where new projects are created in.")}
-				</Typography>
-				<div className={"flex gap-1"}>
-					<Input className="flex-auto" value={settings.default_project_path} disabled/>
-					<Button className={"flex-none px-4"} onClick={selectProjectDefaultFolder}>{tc("select")}</Button>
-				</div>
-			</Card>
-			<Card className={"flex-shrink-0 p-4"}>
-				<h2>{tc("backup")}</h2>
-				<h3>{tc("backup path")}</h3>
-				<Typography className={"whitespace-normal"}>
-					{tc("the backup path is the directory where vrc-get-gui will create backup zips of the projects.")}
-				</Typography>
-				<div className={"flex gap-1"}>
+			</HSection>
+			<HSection
+				sectionTitle={tc("default project path")}
+				sectionDescription={tc("the backup path is the directory where vrc-get-gui will create backup zips of the projects.")}
+			>
+				<Input className="flex-auto" value={settings.default_project_path} disabled/>
+				<Button className={"flex-none px-4"} onClick={selectProjectDefaultFolder}>{tc("select")}</Button>
+			</HSection>
+			<HSection
+				sectionTitle={tc("backup")}
+				contentClassName="flex-col"
+			>
+				<HSection
+					sectionTitle={tc("backup path")}
+					sectionDescription={tc("the backup path is the directory where vrc-get-gui will create backup zips of the projects.")}
+				>
 					<Input className="flex-auto" value={settings.project_backup_path} disabled/>
 					<Button className={"flex-none px-4"} onClick={selectProjectBackupFolder}>{tc("select")}</Button>
-				</div>
-				<label className={"flex items-center"}>
-					<h3>{tc("backup archive format:")}</h3>
+				</HSection>
+				<HSection
+					sectionTitle={tc("backup archive format:")}
+				>
 					<VGSelect value={tc("backup_format:" + settings.backup_format)} onChange={setBackupFormat}>
 						<VGOption value={"default"}>{tc("backup_format:default")}</VGOption>
 						<VGOption value={"zip-store"}>{tc("backup_format:zip-store")}</VGOption>
 						<VGOption value={"zip-fast"}>{tc("backup_format:zip-fast")}</VGOption>
 						<VGOption value={"zip-best"}>{tc("backup_format:zip-best")}</VGOption>
 					</VGSelect>
-				</label>
-			</Card>
-			<Card className={"flex-shrink-0 p-4"}>
-				<Typography className={"whitespace-normal"}>
-					{tc("description for show prerelease packages")}
-				</Typography>
+				</HSection>
+			</HSection>
+			<HSection
+				sectionDescription={tc("description for show prerelease packages")}
+			>
 				<label className={"flex items-center"}>
 					<Checkbox checked={settings.show_prerelease_packages} onChange={toggleShowPrereleasePackages}/>
 					{tc("show prerelease packages")}
 				</label>
-			</Card>
-			<Card className={"flex-shrink-0 p-4"}>
-				<label className={"flex items-center"}>
-					<h2>{tc("language")}: </h2>
-					<VGSelect value={tc("langName")} onChange={changeLanguage} menuClassName={"w-96"}>
-						{
-							languages.map((lang) => (
-								<VGOption key={lang} value={lang}>{tc("langName", {lng: lang})}</VGOption>
-							))
-						}
-					</VGSelect>
-				</label>
-			</Card>
-			{unityDialog}
-			{unityHubDialog}
-			{projectDefaultDialog}
-			{projectBackupDialog}
-			<Card className={"flex-shrink-0 p-4"}>
-				<h2>{tc("licenses")}</h2>
-				<Typography className={"whitespace-normal"}>
-					{tc("click <l>here</l> to view licenses of the projects used in vrc-get-gui", {}, {
-						components: {l: <Link href={"/settings/licenses"} className={"underline"}/>}
-					})}
-				</Typography>
-			</Card>
-		</main>
+			</HSection>
+			<HSection
+				sectionTitle={tc("language")}
+			>
+				<VGSelect value={tc("langName")} onChange={changeLanguage} menuClassName={"w-96"}>
+					{
+						languages.map((lang) => (
+							<VGOption key={lang} value={lang}>{tc("langName", {lng: lang})}</VGOption>
+						))
+					}
+				</VGSelect>
+			</HSection>
+			<HSection
+				sectionTitle={tc("licenses")}
+			>
+				{tc("click <l>here</l> to view licenses of the projects used in vrc-get-gui", {}, {
+					components: {l: <Link href={"/settings/licenses"} className={"underline"}/>}
+				})}
+			</HSection>
+			{pageDialogs}
+		</>
 	)
 }
 

diff --git a/vrc-get-gui/components/layout.tsx b/vrc-get-gui/components/layout.tsx
@@ -1,16 +1,24 @@
 "use client"
 
 import React from "react";
-import {Navbar} from "@material-tailwind/react";
+import {Navbar, Card, Typography} from "@material-tailwind/react";
 
+/**
+ * Vertical Stack Component
+ * Root Display Container
+ */
 export function VStack({className, children}: { className?: string, children: React.ReactNode }) {
 	return (
-		<div className={`flex flex-col overflow-hidden w-full gap-3 ${className}`}>
+		<div className={`flex flex-col overflow-hidden w-full gap-3 p-4 overflow-y-auto ${className}`}>
 			{children}
 		</div>
 	);
 }
 
+/**
+ * Horizontal NavBar
+ * Display for Top Heading Component
+ */
 export function HNavBar({className, children}: { className?: string, children: React.ReactNode }) {
 	return (
 		<Navbar className={`${className} mx-auto px-4 py-2`}>
@@ -20,3 +28,40 @@ export function HNavBar({className, children}: { className?: string, children: R
 		</Navbar>
 	)
 }
+
+/**
+ * Horizontal Section
+ * Display for Content Component
+ */
+export function HSection(
+	{
+		className,
+		sectionTitle,
+		sectionOptions,
+		sectionDescription,
+		contentClassName,
+		children
+	}: {
+		className?: string,
+		sectionTitle?: React.ReactNode,
+		sectionOptions? : React.ReactNode,
+		sectionDescription?: React.ReactNode,
+		contentClassName?: string,
+		children?: React.ReactNode
+	}
+) {
+	return (
+		<Card className={`flex-shrink-0 p-4 ${className}`}>
+			{(sectionTitle || sectionOptions || sectionDescription) && (
+				<div className={"mb-4"}>
+					<div className="flex">
+						<div className={"text-lg flex-auto flex items-center"}>{sectionTitle}</div>
+						<div className={"flex-none"}>{sectionOptions}</div>
+					</div>
+					<div className="text-sm text-wrap">{sectionDescription}</div>
+				</div>
+			)}
+			{children && (<div className={`flex gap-2 ${contentClassName}`}>{children}</div>)}
+		</Card>
+	)
+}