feat: oneclient onboarding transition animation (#398)

Closes: https://github.com/Polyfrost/OneLauncher/issues/387

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

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

apps/oneclient/frontend/src/routes/onboarding/route.tsx

@@ -6,9 +6,10 @@ import { Stepper } from '@/components/Stepper';
 import { bindings } from '@/main';
 import { useCommandSuspense } from '@onelauncher/common';
 import { Button } from '@onelauncher/common/components';
-import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
+import { createFileRoute, Link, Outlet, useLocation } from '@tanstack/react-router';
 import { Window } from '@tauri-apps/api/window';
 import { MinusIcon, SquareIcon, XCloseIcon } from '@untitled-theme/icons-react';
+import { motion } from 'motion/react';
 import { MouseParallax } from 'react-just-parallax';
 
 export const Route = createFileRoute('/onboarding')({
@@ -83,13 +84,33 @@ function getLinearSteps(steps: Array<OnboardingStep>): Array<Omit<OnboardingStep
 const LINEAR_ONBOARDING_STEPS = getLinearSteps(ONBOARDING_STEPS);
 
 function RouteComponent() {
+	const location = useLocation();
+
 	return (
 		// <LoaderSuspense spinner={{ size: 'large' }}>
 		<AppShell>
 			<div className="h-full w-full">
 				<LoaderSuspense spinner={{ size: 'large' }}>
 					<Navbar />
-					<Outlet />
+
+					<motion.div
+						animate={{
+							bottom: 0,
+							opacity: 1,
+						}}
+						exit={{
+							opacity: 0,
+						}}
+						initial={{
+							opacity: 0,
+						}}
+						key={location.pathname}
+						transition={{ duration: 0.25 }}
+					>
+
+						<Outlet />
+
+					</motion.div>
 
 					<OnboardingNavigation />
 				</LoaderSuspense>