feat: Disable buttons if the setup isn't ready

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

@@ -26,6 +26,7 @@ type ClusterModalStagesLength = UnionToArray<keyof typeof ClusterModalStages>['l
 export function ClusterModalController(props: ParentProps) {
 	const [step, setStep] = createSignal<number>(ClusterModalStages.STAGE_1_PROVIDER);
 	const [visible, setVisible] = createSignal(false);
+	const [canGoForward, setCanGoForward] = createSignal(false);
 
 	const stepper: ClusterModalContextFunc = [
 		step,
@@ -51,9 +52,12 @@ export function ClusterModalController(props: ParentProps) {
 				setVisible={setVisible}
 				step={step}
 				setStep={setStep}
+				canGoForward={canGoForward}
 				buttonIsNext={step() !== ((Object.keys(ClusterModalStages).length / 2) - 1)}
 			>
-				{(stepComponents[step()]!)()}
+				{(stepComponents[step()]!({
+					canGoForward, setCanGoForward,
+				}))}
 			</ClusterCreationModal>
 		</ClusterModalContext.Provider>
 	);
@@ -63,10 +67,16 @@ export function useClusterModalController() {
 	return useContext(ClusterModalContext);
 }
 
+export interface ClusterStepProps {
+	canGoForward: Accessor<boolean>;
+	setCanGoForward: Setter<boolean>;
+};
+
 type ClusterCreationModalProps = FullscreenOverlayProps & {
 	step: Accessor<number>;
 	setStep: Setter<number>;
 	buttonIsNext: boolean;
+	canGoForward: Accessor<boolean>;
 };
 
 function ClusterCreationModal(props: ClusterCreationModalProps) {
@@ -76,13 +86,6 @@ function ClusterCreationModal(props: ClusterCreationModalProps) {
 		'Game Setup',
 	];
 
-	let content!: HTMLDivElement;
-
-	// TODO: For animation
-	function updateHeight() {
-		// content.
-	}
-
 	return (
 		<FullscreenOverlay
 			visible={props.visible}
@@ -108,7 +111,7 @@ function ClusterCreationModal(props: ClusterCreationModalProps) {
 						</div>
 					</div>
 					<div class="flex flex-col border border-white/5 rounded-b-lg">
-						<div ref={content} class="p-3">
+						<div class="p-3">
 							{props.children}
 						</div>
 
@@ -135,6 +138,7 @@ function ClusterCreationModal(props: ClusterCreationModalProps) {
 									<Button
 										children="Next"
 										buttonStyle="primary"
+										disabled={!props.canGoForward()}
 										iconRight={<ArrowRightIcon />}
 										onClick={() => props.setStep(prev => prev + 1)}
 									/>
@@ -143,6 +147,7 @@ function ClusterCreationModal(props: ClusterCreationModalProps) {
 									<Button
 										children="Create"
 										buttonStyle="primary"
+										disabled={!props.canGoForward()}
 										iconRight={<ArrowRightIcon />}
 									/>
 								</Match>

apps/desktop/src/ui/components/overlay/cluster/ClusterStepOne.tsx

@@ -1,9 +1,10 @@
 import { User03Icon } from '@untitled-theme/icons-solid';
-import { For, type JSX } from 'solid-js';
+import { Index, type JSX, createEffect, createSignal } from 'solid-js';
+import type { ClusterStepProps } from './ClusterCreationModal';
 import ModrinthIcon from '~assets/logos/modrinth.svg?component-solid';
 import CurseforgeIcon from '~assets/logos/curseforge.svg?component-solid';
 
-const providers: ProviderCardProps[] = [
+const providers: Omit<ProviderCardProps, 'selected' | 'setSelected'>[] = [
 	{
 		name: 'New',
 		icon: <User03Icon />,
@@ -30,12 +31,24 @@ const providers: ProviderCardProps[] = [
 	},
 ];
 
-export default function ClusterStepOne() {
+export default function ClusterStepOne(props: ClusterStepProps) {
+	const [selected, setSelected] = createSignal<number>();
+
+	createEffect(() => {
+		props.setCanGoForward(selected() !== undefined);
+	});
+
 	return (
 		<div class="grid grid-cols-3 gap-2">
-			<For each={providers}>
-				{provider => <ProviderCard {...provider} />}
-			</For>
+			<Index each={providers}>
+				{(provider, index) => (
+					<ProviderCard
+						{...provider()}
+						selected={index === selected()}
+						setSelected={() => setSelected(index)}
+					/>
+				)}
+			</Index>
 		</div>
 	);
 }
@@ -43,11 +56,16 @@ export default function ClusterStepOne() {
 interface ProviderCardProps {
 	icon: JSX.Element;
 	name: string;
+	setSelected: () => any;
+	selected: boolean;
 };
 
 function ProviderCard(props: ProviderCardProps) {
 	return (
-		<div class="flex flex-col justify-center items-center gap-y-2 py-2 px-4 hover:bg-component-bg-hover active:bg-component-bg-pressed rounded-lg">
+		<div
+			onClick={() => props.setSelected()}
+			class={`flex flex-col justify-center items-center gap-y-2 py-2 px-4 hover:bg-component-bg-hover active:bg-component-bg-pressed rounded-lg ${props.selected ? 'bg-component-bg' : ''}`}
+		>
 			<div class="[&>svg]:(w-8 h-8)">
 				{props.icon}
 			</div>