From a4d07d3fa309f5f36b02c8d4767f7e3cca61bc9b Mon Sep 17 00:00:00 2001 From: Jacob Date: Sat, 15 Nov 2025 07:00:44 +0000 Subject: [PATCH] fix: OneClient Onboarding Stepper (#409) --- apps/oneclient/frontend/src/bindings.gen.ts | 16 ++-- .../frontend/src/components/Stepper.tsx | 77 ++++--------------- .../frontend/src/routes/onboarding/route.tsx | 30 +++++--- 3 files changed, 41 insertions(+), 82 deletions(-) diff --git a/apps/oneclient/frontend/src/bindings.gen.ts b/apps/oneclient/frontend/src/bindings.gen.ts index 7d6e4880..f5ae906a 100644 --- a/apps/oneclient/frontend/src/bindings.gen.ts +++ b/apps/oneclient/frontend/src/bindings.gen.ts @@ -255,8 +255,13 @@ export type VersionType = */ "old_beta" -const ARGS_MAP = { 'oneclient':'{"getClustersGroupedByMajor":[],"openDevTools":[],"getBundlesFor":["cluster_id"]}', 'core':'{"downloadPackage":["provider","package_id","version_id","cluster_id","skip_compatibility"],"getRunningProcesses":[],"getClusters":[],"updateClusterById":["id","request"],"getGameVersions":[],"getLoadersForVersion":["mc_version"],"getUsers":[],"setDefaultUser":["uuid"],"changeSkin":["access_token","skin_url","skin_variant"],"getWorlds":["id"],"fetchLoggedInProfile":["access_token"],"createCluster":["options"],"getScreenshots":["id"],"searchPackages":["provider","query"],"installModpack":["modpack","cluster_id"],"changeCape":["access_token","cape_uuid"],"getLogs":["id"],"readSettings":[],"getRunningProcessesByClusterId":["cluster_id"],"getUsersFromAuthor":["provider","author"],"createSettingsProfile":["name"],"getPackageBody":["provider","body"],"convertUsernameUUID":["username_uuid"],"getClusterById":["id"],"getUser":["uuid"],"launchCluster":["id","uuid"],"getLogByName":["id","name"],"openMsaLogin":[],"getPackage":["provider","slug"],"getDefaultUser":["fallback"],"updateClusterProfile":["name","profile"],"open":["input"],"getGlobalProfile":[],"isClusterRunning":["cluster_id"],"removeCluster":["id"],"killProcess":["pid"],"writeSettings":["setting"],"removeUser":["uuid"],"getPackageVersions":["provider","slug","mc_version","loader","offset","limit"],"getMultiplePackages":["provider","slugs"],"fetchMinecraftProfile":["uuid"],"uploadSkinBytes":["access_token","skin_data","image_format","skin_variant"],"removeCape":["access_token"],"getProfileOrDefault":["name"]}', 'events':'{"message":["event"],"ingress":["event"],"process":["event"]}', 'folders':'{"fromCluster":["folder_name"],"openCluster":["folder_name"]}' } -export type Router = { 'core': { getClusters: () => Promise, +const ARGS_MAP = { 'oneclient':'{"getBundlesFor":["cluster_id"],"openDevTools":[],"getClustersGroupedByMajor":[]}', 'events':'{"ingress":["event"],"process":["event"],"message":["event"]}', 'core':'{"removeUser":["uuid"],"updateClusterProfile":["name","profile"],"readSettings":[],"getRunningProcesses":[],"isClusterRunning":["cluster_id"],"openMsaLogin":[],"writeSettings":["setting"],"removeCluster":["id"],"getPackageBody":["provider","body"],"getClusterById":["id"],"getLogs":["id"],"getLoadersForVersion":["mc_version"],"setDefaultUser":["uuid"],"fetchMinecraftProfile":["uuid"],"getScreenshots":["id"],"getGameVersions":[],"searchPackages":["provider","query"],"uploadSkinBytes":["access_token","skin_data","image_format","skin_variant"],"changeSkin":["access_token","skin_url","skin_variant"],"removeCape":["access_token"],"convertUsernameUUID":["username_uuid"],"getProfileOrDefault":["name"],"updateClusterById":["id","request"],"getWorlds":["id"],"getGlobalProfile":[],"getUsersFromAuthor":["provider","author"],"changeCape":["access_token","cape_uuid"],"createCluster":["options"],"getClusters":[],"launchCluster":["id","uuid"],"getMultiplePackages":["provider","slugs"],"getPackage":["provider","slug"],"getUsers":[],"installModpack":["modpack","cluster_id"],"createSettingsProfile":["name"],"getLogByName":["id","name"],"getUser":["uuid"],"downloadPackage":["provider","package_id","version_id","cluster_id","skip_compatibility"],"fetchLoggedInProfile":["access_token"],"getDefaultUser":["fallback"],"open":["input"],"killProcess":["pid"],"getRunningProcessesByClusterId":["cluster_id"],"getPackageVersions":["provider","slug","mc_version","loader","offset","limit"]}', 'folders':'{"fromCluster":["folder_name"],"openCluster":["folder_name"]}' } +export type Router = { 'events': { ingress: (event: IngressPayload) => Promise, +message: (event: MessagePayload) => Promise, +process: (event: ProcessPayload) => Promise }, +'folders': { fromCluster: (folderName: string) => Promise, +openCluster: (folderName: string) => Promise }, +'core': { getClusters: () => Promise, getClusterById: (id: number) => Promise, removeCluster: (id: number) => Promise, createCluster: (options: CreateCluster) => Promise, @@ -302,12 +307,7 @@ convertUsernameUUID: (usernameUuid: string) => Promise, open: (input: string) => Promise }, 'oneclient': { openDevTools: () => Promise, getClustersGroupedByMajor: () => Promise>, -getBundlesFor: (clusterId: number) => Promise }, -'folders': { fromCluster: (folderName: string) => Promise, -openCluster: (folderName: string) => Promise }, -'events': { ingress: (event: IngressPayload) => Promise, -message: (event: MessagePayload) => Promise, -process: (event: ProcessPayload) => Promise } }; +getBundlesFor: (clusterId: number) => Promise } }; export type { InferCommandOutput } diff --git a/apps/oneclient/frontend/src/components/Stepper.tsx b/apps/oneclient/frontend/src/components/Stepper.tsx index 1010ba04..68e04bab 100644 --- a/apps/oneclient/frontend/src/components/Stepper.tsx +++ b/apps/oneclient/frontend/src/components/Stepper.tsx @@ -1,75 +1,24 @@ import type { OnboardingStep } from '@/routes/onboarding/route'; +import { twMerge } from 'tailwind-merge'; interface VerticalStepperProps { steps: Array; - currentLinearIndex: number; - linearSteps: Array>; + currentStepIndex: number; }; -export function Stepper({ steps, linearSteps, currentLinearIndex }: VerticalStepperProps) { - // const matchRoute = useMatchRoute(); - - // const currentLinearIndex = linearSteps.findIndex(step => - // matchRoute({ to: step.path })); - - const progressHeight = currentLinearIndex >= 0 ? `${Math.min((currentLinearIndex + 0.5) / (linearSteps.length - 1), 1) * 100}%` : '0%'; - - // const nextStep = () => { - // if (currentStep < steps.length - 1) - // setCurrentStep(currentStep + 1); - // }; - - // const prevStep = () => { - // if (currentStep > 0) - // setCurrentStep(currentStep - 1); - // }; - - // const goToStep = (stepIndex: number) => { - // setCurrentStep(stepIndex); - // }; - +export function Stepper({ steps, currentStepIndex }: VerticalStepperProps) { return ( -
-
-
-
- -
-
- -
    - {steps.map((step, index) => ( -
  • goToStep(index)} - > -
    - - {step.title} - -
    -
    • - ))} -
+
+ {steps.map((step, index) => ( +
+ {step.title}
-
+ ))}
); } diff --git a/apps/oneclient/frontend/src/routes/onboarding/route.tsx b/apps/oneclient/frontend/src/routes/onboarding/route.tsx index ef70ec84..8d0f91ef 100644 --- a/apps/oneclient/frontend/src/routes/onboarding/route.tsx +++ b/apps/oneclient/frontend/src/routes/onboarding/route.tsx @@ -15,24 +15,34 @@ import { MouseParallax } from 'react-just-parallax'; export const Route = createFileRoute('/onboarding')({ component: RouteComponent, loader: ({ location }) => { - const currentStepIndex = LINEAR_ONBOARDING_STEPS.findIndex( + const currentStepIndex = ONBOARDING_STEPS.findIndex((step) => { + if (step.path === location.pathname) + return true; + + if (step.subSteps) + return step.subSteps.some(sub => sub.path === location.pathname); + + return false; + }); + const currentLinearStepIndex = LINEAR_ONBOARDING_STEPS.findIndex( step => step.path === location.pathname, ); - const isFirstStep = currentStepIndex === 0; - const isLastStep = currentStepIndex === LINEAR_ONBOARDING_STEPS.length - 1; + const isFirstStep = currentLinearStepIndex === 0; + const isLastStep = currentLinearStepIndex === LINEAR_ONBOARDING_STEPS.length - 1; return { isFirstStep, isLastStep, previousPath: - currentStepIndex > 0 - ? LINEAR_ONBOARDING_STEPS[currentStepIndex - 1]?.path + currentLinearStepIndex > 0 + ? LINEAR_ONBOARDING_STEPS[currentLinearStepIndex - 1]?.path : undefined, nextPath: - currentStepIndex < LINEAR_ONBOARDING_STEPS.length - 1 - ? LINEAR_ONBOARDING_STEPS[currentStepIndex + 1]?.path + currentLinearStepIndex < LINEAR_ONBOARDING_STEPS.length - 1 + ? LINEAR_ONBOARDING_STEPS[currentLinearStepIndex + 1]?.path : undefined, + currentLinearStepIndex, currentStepIndex, }; }, @@ -138,7 +148,7 @@ function AppShell({
@@ -198,9 +208,9 @@ function BackgroundGradient() { } export function OnboardingNavigation() { - const { isFirstStep, previousPath, nextPath, currentStepIndex } = Route.useLoaderData(); + const { isFirstStep, previousPath, nextPath, currentLinearStepIndex } = Route.useLoaderData(); const { data: currentAccount } = useCommandSuspense(['getDefaultUser'], () => bindings.core.getDefaultUser(true)); - const forceLoginDisable = currentStepIndex === 2 && currentAccount === null; + const forceLoginDisable = currentLinearStepIndex === 2 && currentAccount === null; return (