fix: Fix previous / cancel / backdrop ClusterCreationModal issues

apps/frontend/src/ui/components/overlay/Modal.tsx

@@ -35,15 +35,21 @@ export function ModalProvider(props: ParentProps) {
 		},
 
 		closeModal: (index?: number) => {
-			if (modals.length === 0 || modals.length <= (index || 0))
+			console.log('closeModal', index, modals.length);
+			if (modals.length === 0 || modals.length < (index || 0))
 				return;
 
-			if (index !== undefined) {
-				setModals(prev => prev.filter((_, i) => i !== index));
-				return;
-			}
+			setModals((prev) => {
+				if (index === undefined) {
+					const next = [...prev];
+					next.pop();
 
-			setModals(prev => prev.slice(0, -1));
+					return next;
+				}
+				else {
+					return prev.filter((_, i) => i !== index);
+				}
+			});
 		},
 
 		isVisible: (index) => {

apps/frontend/src/ui/components/overlay/cluster/ClusterCreationModal.tsx

@@ -1,4 +1,4 @@
-import { type Accessor, type Context, type JSX, type ParentProps, type Setter, Show, createContext, createEffect, createSignal, onMount, untrack, useContext } from 'solid-js';
+import { type Accessor, type Context, type JSX, type ParentProps, type Setter, Show, createContext, createSignal, untrack, useContext } from 'solid-js';
 import { ArrowRightIcon, Server01Icon } from '@untitled-theme/icons-solid';
 import { createStore } from 'solid-js/store';
 import HeaderImage from '../../../../assets/images/header.png';
@@ -19,7 +19,7 @@ type PartialClusterUpdateFunc = <K extends keyof PartialCluster>(key: K, value:
 
 interface ClusterModalController {
 	step: Accessor<CreationStage | undefined>;
-	setStep: (step: CreationStage | undefined) => void;
+	setStep: (step: CreationStage | number | undefined) => void;
 
 	partialCluster: Accessor<PartialCluster>;
 	setPartialCluster: Setter<PartialCluster>;
@@ -51,7 +51,13 @@ export function ClusterModalControllerProvider(props: ParentProps) {
 		setStep: (stage) => {
 			setSteps((prev) => {
 				if (stage === undefined)
-					return prev.slice(0, -1);
+					return [];
+
+				if (stage < 0) {
+					const next = [...prev];
+					next.pop();
+					return next;
+				}
 
 				return [...prev, stage];
 			});
@@ -71,14 +77,18 @@ export function ClusterModalControllerProvider(props: ParentProps) {
 		async start() {
 			setPartialCluster({});
 			controller.setStep(CreationStage.PROVIDER_SELECTION);
+			// eslint-disable-next-line ts/no-use-before-define -- It should still work
+			modal.show();
 		},
 
 		previous() {
-			controller.setStep(undefined);
+			controller.setStep(-1);
 		},
 
 		cancel() {
-			setSteps([]);
+			controller.setStep(undefined);
+			// eslint-disable-next-line ts/no-use-before-define -- It should still work
+			modal.hide();
 		},
 
 		async finish() {
@@ -102,16 +112,11 @@ export function ClusterModalControllerProvider(props: ParentProps) {
 	};
 
 	const modal = createModal(() => (
-		<>{stepComponents[controller.step()!]()}</>
+		<Show when={controller.step() !== undefined}>
+			<>{stepComponents[controller.step()!]()}</>
+		</Show>
 	));
 
-	createEffect(() => {
-		if (steps().length > 0)
-			modal.show();
-		else
-			modal.hide();
-	});
-
 	return (
 		<ClusterModalContext.Provider value={controller}>
 			{props.children}

apps/frontend/src/ui/components/overlay/cluster/ClusterProviderSelection.tsx

@@ -1,6 +1,6 @@
 import { Upload01Icon, User03Icon } from '@untitled-theme/icons-solid';
-import { Index, type JSX, createSignal } from 'solid-js';
-import { type ClusterStepProps, createClusterStep } from './ClusterCreationModal';
+import { Index, type JSX, createEffect, createSignal } from 'solid-js';
+import { type ClusterStepProps, CreationStage, createClusterStep } from './ClusterCreationModal';
 import ModrinthIcon from '~assets/logos/modrinth.svg?component-solid';
 import CurseforgeIcon from '~assets/logos/curseforge.svg?component-solid';
 
@@ -29,18 +29,21 @@ export default createClusterStep({
 	Component: ClusterProviderSelection,
 });
 
-function ClusterProviderSelection(_props: ClusterStepProps) {
+function ClusterProviderSelection(props: ClusterStepProps) {
 	const [selected, setSelected] = createSignal<number>();
 
-	// const check = () => {
-	// 	props.setCanGoForward(selected() !== undefined);
-	// };
+	const check = () => {
+		props.setCanGoForward(() => {
+			const isTrue = selected() !== undefined;
 
-	// createEffect(check);
-	// createEffect(on(() => props.isVisible(), (curr: boolean) => {
-	// 	if (curr)
-	// 		check();
-	// }));
+			if (isTrue)
+				props.setNextStage(CreationStage.GAME_SETUP);
+
+			return isTrue;
+		});
+	};
+
+	createEffect(check);
 
 	return (
 		<div class="grid grid-cols-3 gap-2">