🎨 Replace for loop with a <For/> control flow for PassagesPanel component

frontend/src/passagesPanel.tsx

@@ -1,4 +1,4 @@
-import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
+import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
 import { createDateNow, getTime } from '@solid-primitives/date';
 import { AnimationOptions } from '@motionone/types';
 import { Motion } from "@motionone/solid";
@@ -123,18 +123,17 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
 	return (
 		<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
 			<Show when={lines() !== undefined} >
-				{() => {
+				<For each={lines()}>
-					const ret = [];
+					{(line) =>
-					for (const line of lines()) {
+						<Show when={props.passages[line.id]}>
-						const byLinePassages = props.passages[line.id];
+							<For each={Object.keys(props.passages[line.id])}>
-						if (byLinePassages !== undefined) {
+								{(destination) =>
-							for (const destination of Object.keys(byLinePassages)) {
+									<DestinationPassages passages={props.passages[line.id][destination]} line={line} destination={destination} />
-								ret.push(<DestinationPassages passages={byLinePassages[destination]} line={line} destination={destination} />);
+								}
-							}
+							</For>
-						}
+						</Show>
 					}
-					return ret;
+				</For>
-				}}
 			</Show>
 		</div >
 	);