feat: MultiProvider for Contexts

apps/frontend/src/ui/App.tsx

@@ -7,6 +7,7 @@ import AnimatedRoutes from './components/AnimatedRoutes';
 import NotificationOverlay from './components/overlay/notifications/NotificationOverlay';
 import { SettingsProvider } from './hooks/useSettings';
 import { ClusterModalController } from './components/overlay/cluster/ClusterCreationModal';
+import { MultiProvider } from './components/MultiProvider';
 import { AppInfo } from '~utils/program-info';
 
 function App(props: ParentProps) {
@@ -44,12 +45,14 @@ function App(props: ParentProps) {
 export default App;
 
 function GlobalContexts(props: ParentProps) {
-	// TODO(refactor): Something something lots of nesting will look awful soon
 	return (
-		<SettingsProvider>
-			<ClusterModalController>
-				{props.children}
-			</ClusterModalController>
-		</SettingsProvider>
+		<MultiProvider
+			values={[
+				SettingsProvider,
+				ClusterModalController,
+			]}
+		>
+			{props.children}
+		</MultiProvider>
 	);
 }

apps/frontend/src/ui/components/MultiProvider.tsx

@@ -0,0 +1,41 @@
+/**
+ * Taken from https://github.com/solidjs-community/solid-primitives/blob/main/packages/context/src/index.ts
+ * MIT LICENSE
+ */
+/* eslint-disable solid/reactivity -- . */
+import { type Context, type ContextProviderComponent, type FlowComponent, type JSX, createComponent } from 'solid-js';
+
+export function MultiProvider<T extends readonly [unknown?, ...unknown[]]>(props: {
+	values: {
+		[K in keyof T]:
+			| readonly [
+				Context<T[K]> | ContextProviderComponent<T[K]>,
+				[T[K]][T extends unknown ? 0 : never],
+			]
+			| FlowComponent;
+	};
+	children: JSX.Element;
+}): JSX.Element {
+	const { values } = props;
+	const fn = (i: number) => {
+		let item: any = values[i];
+
+		if (!item)
+			return props.children;
+
+		const ctxProps: { value?: any; children: JSX.Element } = {
+			get children() {
+				return fn(i + 1);
+			},
+		};
+		if (Array.isArray(item)) {
+			ctxProps.value = item[1];
+			item = item[0];
+			if (typeof item !== 'function')
+				item = item.Provider;
+		}
+
+		return createComponent(item, ctxProps);
+	};
+	return fn(0);
+}