feat: add more checks and update data in context

apps/desktop/src/ui/components/base/SelectList.tsx

@@ -1,12 +1,18 @@
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
-import { type Context, type JSX, type ParentProps, type Signal, createContext, createSignal, splitProps, useContext } from 'solid-js';
+import { type Context, type JSX, type ParentProps, type Signal, createContext, createEffect, createSignal, splitProps, useContext } from 'solid-js';
 import styles from './SelectList.module.scss';
 
 type SelectListContextHelpers = Signal<number | undefined>;
 const SelectListContext = createContext<SelectListContextHelpers>() as Context<SelectListContextHelpers>;
 
-function SelectListContextProvider(props: ParentProps) {
-	const [selected, setSelected] = createSignal<number>();
+function SelectListContextProvider(props: ParentProps & {
+	onChanged?: ((index: number | undefined) => any) | undefined;
+}) {
+	const [selected, setSelected] = createSignal<number | undefined>();
+
+	createEffect(() => {
+		props.onChanged?.(selected());
+	});
 
 	return (
 		<SelectListContext.Provider value={[selected, setSelected]}>
@@ -19,12 +25,14 @@ function useSelectListContext() {
 	return useContext(SelectListContext);
 }
 
-export type SelectListProps = JSX.HTMLAttributes<HTMLDivElement>;
+export type SelectListProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+	onChange?: (index: number | undefined) => any;
+};
 
 function SelectList(props: SelectListProps) {
-	const [split, rest] = splitProps(props, ['class']);
+	const [split, rest] = splitProps(props, ['class', 'onChange']);
 	return (
-		<SelectListContextProvider>
+		<SelectListContextProvider onChanged={props.onChange}>
 			<div {...rest} class={`${styles.select_list} ${split.class || ''}`}>
 				<OverlayScrollbarsComponent class="max-h-full">
 					<div>

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

@@ -16,6 +16,7 @@ interface ClusterModalContextFunc {
 	setStep: Setter<number>;
 	partialCluster: Accessor<PartialCluster>;
 	setPartialCluster: Setter<PartialCluster>;
+	updatePartialCluster: <K extends keyof PartialCluster>(key: K, value: PartialCluster[K]) => any;
 	setVisible: Setter<boolean>;
 }
 
@@ -38,6 +39,14 @@ export function ClusterModalController(props: ParentProps) {
 		setStep,
 		partialCluster,
 		setPartialCluster,
+		updatePartialCluster(key, value) {
+			setPartialCluster((prev) => {
+				return {
+					...prev,
+					[key]: value,
+				};
+			});
+		},
 		setVisible,
 	};
 

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

@@ -1,8 +1,6 @@
-import { Camera01Icon, FilterFunnel01Icon, TextInputIcon } from '@untitled-theme/icons-solid';
-import { For, Index, type JSX, Show, createEffect, createMemo, createSignal, on, onMount, splitProps } from 'solid-js';
-import { Select } from '@thisbeyond/solid-select';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
-import type { ClusterStepProps } from './ClusterCreationModal';
+import { TextInputIcon } from '@untitled-theme/icons-solid';
+import { For, Index, type JSX, type Setter, Show, createEffect, createSignal, on, splitProps, untrack } from 'solid-js';
+import { type ClusterStepProps, useClusterModalController } from './ClusterCreationModal';
 import Dropdown from '~ui/components/base/Dropdown';
 import TextField from '~ui/components/base/TextField';
 import VanillaImage from '~assets/logos/vanilla.png';
@@ -11,12 +9,9 @@ import ForgeImage from '~assets/logos/forge.png';
 import QuiltImage from '~assets/logos/quilt.png';
 import useCommand from '~ui/hooks/useCommand';
 import { bridge } from '~imports';
-import Button from '~ui/components/base/Button';
-import Tooltip from '~ui/components/base/Tooltip';
 import SelectList from '~ui/components/base/SelectList';
 import Checkbox from '~ui/components/base/Checkbox';
-import { getEnumMembers } from '~utils/primitives';
-import type { VersionType } from '~bindings';
+import type { Loader, VersionType } from '~bindings';
 import { formatVersionRelease } from '~utils/helpers';
 
 const loaders: {
@@ -42,12 +37,14 @@ const loaders: {
 ];
 
 export function ClusterStepTwo(props: ClusterStepProps) {
-	const [name, setName] = createSignal('');
+	const { partialCluster, updatePartialCluster } = useClusterModalController();
 
 	const check = () => {
-		const hasName = name().length > 0;
+		const hasName = (partialCluster().name?.length ?? 0) > 0;
+		const hasVersion = (partialCluster().mc_version?.length ?? 0) > 0;
+		const hasLoader = (partialCluster().mod_loader?.length ?? 0) > 0;
 
-		props.setCanGoForward(hasName);
+		props.setCanGoForward(hasName && hasVersion && hasLoader);
 	};
 
 	createEffect(check);
@@ -56,6 +53,10 @@ export function ClusterStepTwo(props: ClusterStepProps) {
 			check();
 	}));
 
+	const setName = (name: string) => updatePartialCluster('name', name);
+	const setVersion = (version: string) => updatePartialCluster('mc_version', version);
+	const setLoader = (loader: string) => updatePartialCluster('mod_loader', loader.toLowerCase() as Loader);
+
 	return (
 		<div class="flex flex-col gap-y-4">
 			<Option header="Name">
@@ -67,11 +68,11 @@ export function ClusterStepTwo(props: ClusterStepProps) {
 			</Option>
 
 			<Option header="Versions">
-				<VersionSelector />
+				<VersionSelector setVersion={setVersion} />
 			</Option>
 
 			<Option header="Loader">
-				<Dropdown>
+				<Dropdown onChange={index => setLoader(loaders[index]?.name || 'vanilla')}>
 					<For each={loaders}>
 						{loader => (
 							<Dropdown.Row>
@@ -94,7 +95,7 @@ type VersionReleaseFilters = {
 	[key in VersionType]: boolean;
 };
 
-function VersionSelector() {
+function VersionSelector(props: { setVersion: (version: string) => any }) {
 	const [versions] = useCommand(bridge.commands.getMinecraftVersions);
 	const [filteredVersions, setFilteredVersions] = createSignal<bridge.Version[]>([]);
 	const [filters, setFilters] = createSignal<VersionReleaseFilters>({
@@ -124,6 +125,17 @@ function VersionSelector() {
 		});
 	}
 
+	function setVersion(index: number | undefined) {
+		if (index === undefined)
+			return;
+
+		const versions = untrack(() => filteredVersions);
+		const version = versions()[index];
+
+		if (version)
+			props.setVersion(version.id);
+	}
+
 	createEffect(() => {
 		const list = versions();
 		if (list !== undefined)
@@ -136,7 +148,10 @@ function VersionSelector() {
 
 	return (
 		<div class="flex flex-row flex-1 gap-2">
-			<SelectList class="max-h-40 min-w-3/5">
+			<SelectList
+				class="max-h-40 min-w-3/5"
+				onChange={setVersion}
+			>
 				<Show when={filteredVersions() !== undefined}>
 					<Index each={filteredVersions()}>
 						{(version, index) => (