Merge branch 'idfm-style-for-search-display' into develop

💄 Redesign stop search menu to follow the passage display style
💄 Replace css files with scss and factorize CSS rules
2023-03-05 13:51:03 +01:00 · 2023-03-05 13:46:25 +01:00 · 2023-03-05 12:49:20 +01:00
18 changed files with 981 additions and 434 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
    "date-fns": "^2.29.3",
    "leaflet": "^1.9.3",
    "matrix-widget-api": "^1.1.1",
+    "sass": "^1.58.3",
    "solid-js": "^1.6.6",
    "solid-transition-group": "^0.0.10"
  }
--- a/frontend/src/App.module.css
+++ b/frontend/src/App.module.css
@@ -10,12 +10,14 @@

 	display: flex;
 	text-align: center;
-}

-.panel {
+	.panel {
 		min-width: 100%;
 		height: inherit;
 		width: inherit;

 		scroll-snap-align: center;
+
+		background-color: var(--idfm-black);
+	}
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,11 +3,12 @@ import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWid
 import { HopeProvider } from "@hope-ui/solid";

 import { BusinessDataProvider } from './businessData';
-import { SearchProvider } from './search';
-import { PassagesDisplay } from './passagesDisplay';
-import { StopsManager } from './stopsManager';
+import { AppContextProvider } from './appContext';

-import styles from './App.module.css';
+import { PassagesDisplay } from './passagesDisplay';
+import { StopsSearchMenu } from './stopsSearchMenu';
+
+import "./App.scss";


 function parseFragment() {
@@ -44,18 +45,18 @@ const App: Component = () => {

 	return (
 		<BusinessDataProvider>
-			<SearchProvider>
+			<AppContextProvider>
 				<HopeProvider>
-					<div class={styles.App} data-panelsnap-id="1">
-						<div class={styles.panel}>
-							<StopsManager />
+					<div class="App">
+						<div class="panel">
+							<StopsSearchMenu />
 						</div>
-						<div class={styles.panel}>
+						<div class="panel">
 							<PassagesDisplay />
 						</div>
 					</div>
 				</HopeProvider>
-			</SearchProvider>
+			</AppContextProvider>
 		</BusinessDataProvider>
 	);
 };
--- a/frontend/src/passagesDisplay.module.css
+++ b/frontend/src/passagesDisplay.module.css
@@ -1,5 +1,5 @@
 /* Idfm: 1860x1080px */
-.passagesDisplay {
+%widget {
 	aspect-ratio: 16/9;
 	--reverse-aspect-ratio: 9/16;
 	/* height is set according to the aspect-ratio, don´t touch it */
@@ -7,8 +7,6 @@

 	display: flex;
 	flex-direction: column;
-
-	background-color: var(--idfm-black);
 }

 /* Idfm: 1800x100px (margin: 17px 60px) */
@@ -25,54 +23,18 @@
 	font-family: IDFVoyageur-bold;
 }

-.header .transportMode {
-	aspect-ratio: 1/1;
-	height: 100%;
-	margin: 0;
-	margin-right: calc(23/1920*100%);
-}
-
-.header .title {
+// .header .title {
+%title {
 	height: 50%;
 	width: 70%;

 	margin-right: auto;
 }

-.header .menu {
-	height: calc(80/100*100%);
-	aspect-ratio: 1;
-	margin-right: calc(30/1920*100%);
-}

-.header .menu button {
-	height: 100%;
-	aspect-ratio: 1;
-
-	background-color: var(--idfm-black);
-	border: solid var(--idfm-white) 3px;
-	border-radius: calc(9/86*100%);
-}
-
-.header .clock {
-	width: calc(175/1920*100%);
-	height: calc(80/100*100%);
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	
-	border:solid var(--idfm-white) 3px;
-	border-radius: calc(9/86*100%);
-}
-
-.header .clock svg {
-	aspect-ratio: 2.45;
-	height: calc(0.7*100%);
-}

 /* Idfm: 1860x892px (margin: 0px 30px) */
-.panelsContainer {
+%body {
 	width: calc(1860/1920*100%);
 	height: calc(892/1080*100%);
 	margin: 0 calc(30/1920*100%);
@@ -83,10 +45,13 @@
 	background-color: white;

 	border-collapse:separate;
-	border:solid var(--idfm-black) 1px;
+	// border:solid var(--idfm-black) 1px;
 	border-radius: calc(15/1920*100%);
 }

+
+
+
 /* Idfm: 1800x54px (margin: 0px 50px) */
 .footer {
 	width: calc(1820/1920*100%);
--- a/frontend/src/_utils.scss
+++ b/frontend/src/_utils.scss
@@ -0,0 +1,31 @@
+%transportMode {
+	aspect-ratio : 1 / 1;
+}
+
+%linePicto {
+	font-family: IDFVoyageur-bold;
+}
+
+%tramLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%trainLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%metroLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%busLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 2.25;
+}
--- a/frontend/src/appContext.tsx
+++ b/frontend/src/appContext.tsx
@@ -0,0 +1,43 @@
+import { createContext, JSX } from 'solid-js';
+import { createStore } from "solid-js/store";
+
+import { Stop } from './types';
+
+export interface AppContextStore {
+	getDisplayedStops: () => Stop[];
+	setDisplayedStops: (stops: Stop[]) => void;
+};
+
+export const AppContextContext = createContext<AppContextStore>();
+
+export function AppContextProvider(props: { children: JSX.Element }) {
+
+	type Store = {
+		displayedStops: Stop[];
+	};
+
+	const [store, setStore] = createStore<Store>({
+		displayedStops: [],
+	});
+
+	const getDisplayedStops = (): Stop[] => {
+		return store.displayedStops;
+	}
+
+	const setDisplayedStops = (stops: Stop[]): void => {
+		console.log("setDisplayedStops=", stops);
+		// setStore((s: Store) => {
+		setStore('displayedStops', stops);
+		// 	return s;
+		// });
+	}
+
+	return (
+		<AppContextContext.Provider value={{
+			getDisplayedStops, setDisplayedStops,
+		}}>
+			{props.children}
+		</AppContextContext.Provider>
+	);
+
+};
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,7 +1,7 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';

-import './index.css';
+import './index.scss';
 import App from './App';

 render(() => (<App/>), document.getElementById('root') as HTMLElement);
--- a/frontend/src/passagesDisplay.scss
+++ b/frontend/src/passagesDisplay.scss
@@ -0,0 +1,60 @@
+@use "_common";
+@use "_utils";
+
+.passagesDisplay {
+	@extend %widget;
+
+	.header {
+		$header-element-height: calc(80/100*100%);
+		$component-border: solid var(--idfm-white) calc(0.25*1vh);
+		$component-border-radius: calc(9/86*100%);
+		.transportMode {
+			@extend %transportMode;
+
+			height: 100%;
+			margin: 0;
+			margin-right: calc(23/1920*100%);
+		}
+
+		.title {
+			@extend %title;
+		}
+
+		.menu {
+			height: $header-element-height;
+			aspect-ratio: 1;
+			margin-right: calc(30/1920*100%);
+			margin-left: auto;
+
+			button {
+				height: 100%;
+				aspect-ratio: 1;
+
+				background-color: var(--idfm-black);
+				border: $component-border;
+				border-radius: $component-border-radius;
+			}
+		}
+
+		.clock {
+			width: calc(175/1920*100%);
+			height: $header-element-height;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			border: $component-border;
+			border-radius: $component-border-radius;
+
+			svg {
+				aspect-ratio: 2.45;
+				height: calc(0.7*100%);
+			}
+		}
+	}
+
+	.body {
+		@extend %body
+	}
+}
--- a/frontend/src/passagesDisplay.tsx
+++ b/frontend/src/passagesDisplay.tsx
@@ -5,20 +5,13 @@ import { IconButton, Menu, MenuTrigger, MenuContent, MenuItem } from "@hope-ui/s
 import { format } from "date-fns";

 import { BusinessDataContext, BusinessDataStore } from "./businessData";
-import { SearchContext, SearchStore } from "./search";
+import { AppContextContext, AppContextStore } from "./appContext";

-import { getTransportModeSrc } from "./utils";
+import { getTransportModeSrc, PositionedPanel } from "./utils";
 import { PassagesPanel } from "./passagesPanel";
 import { IconHamburgerMenu } from './extra/iconHamburgerMenu';

-import styles from "./passagesDisplay.module.css";
-
-
-type PositionnedPanel = {
-	position: number;
-	// TODO: Should be PassagesPanelComponent ?
-	panel: JSX.Element;
-};
+import "./passagesDisplay.scss";


 interface PassagesDisplayStore {
@@ -27,8 +20,8 @@ interface PassagesDisplayStore {
 	disablePassagesRefresh: () => void;
 	togglePassagesRefresh: () => void;

-	getPanels: () => Array<PositionnedPanel>;
-	setPanels: (panels: Array<PositionnedPanel>) => void;
+	getPanels: () => PositionedPanel[];
+	setPanels: (panels: PositionedPanel[]) => void;

 	getDisplayedPanelId: () => number;
 	setDisplayedPanelId: (panelId: number) => void;
@@ -40,7 +33,7 @@ function PassagesDisplayProvider(props: { children: JSX.Element }) {

 	type Store = {
 		refreshEnabled: boolean;
-		panels: Array<PositionnedPanel>;
+		panels: PositionedPanel[];
 		displayedPanelId: number;
 	};

@@ -62,10 +55,10 @@ function PassagesDisplayProvider(props: { children: JSX.Element }) {
 		setStore('refreshEnabled', !store.refreshEnabled);
 	}

-	const getPanels = (): Array<PositionnedPanel> => {
+	const getPanels = (): PositionedPanel[] => {
 		return store.panels;
 	}
-	const setPanels = (panels: Array<PositionnedPanel>): void => {
+	const setPanels = (panels: PositionedPanel[]): void => {
 		setStore('panels', panels);
 	}

@@ -88,7 +81,6 @@ function PassagesDisplayProvider(props: { children: JSX.Element }) {
 	);
 }

-
 // TODO: Sort transport modes by weight
 const Header: VoidComponent<{ title: string }> = (props) => {

@@ -122,24 +114,24 @@ const Header: VoidComponent<{ title: string }> = (props) => {
 	});

 	return (
-		<div class={styles.header}>
+		<div class="header">
 			<Show when={transportModeUrls() !== undefined} >
 				<For each={transportModeUrls()}>
 					{(url) =>
-						<div class={styles.transportMode}>
+						<div class="transportMode">
 							<img src={url} />
 						</div>
 					}
 				</For>
 			</Show>
-			<div class={styles.title}>
+			<div class="title">
 				<svg viewBox="0 0 1260 50">
 					<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
 						{props.title}
 					</text>
 				</svg>
 			</div>
-			<div class={styles.menu}>
+			<div class="menu">
 				<Menu>
 					<MenuTrigger
 						as={IconButton}
@@ -150,7 +142,7 @@ const Header: VoidComponent<{ title: string }> = (props) => {
 					</MenuContent>
 				</Menu>
 			</div>
-			<div class={styles.clock}>
+			<div class="clock">
 				<svg viewBox="0 0 115 43">
 					<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
 						{format(dateNow(), "HH:mm")}
@@ -171,7 +163,7 @@ const Footer: VoidComponent<{}> = () => {
 	const { getDisplayedPanelId, getPanels } = passagesDisplayStore;

 	return (
-		<div class={styles.footer}>
+		<div class="footer">
 			<For each={getPanels()}>
 				{(panel) => {
 					const position = panel.position;
@@ -193,17 +185,16 @@ const Footer: VoidComponent<{}> = () => {
 const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: number, panelSwitchPeriodMsec: number }> = (props) => {

 	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
 	const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
-	// TODO: Use props instead
-	const searchStore: SearchStore | undefined = useContext(SearchContext);

-	if (businessDataStore === undefined || passagesDisplayStore === undefined || searchStore === undefined) {
+	if (businessDataStore === undefined || appContextStore === undefined || passagesDisplayStore === undefined) {
 		return <div />;
 	}

 	const { getLineDestinations, passages, getPassagesLineIds, clearPassages, refreshPassages } = businessDataStore;
 	const { isPassagesRefreshEnabled, getDisplayedPanelId, setDisplayedPanelId, getPanels, setPanels } = passagesDisplayStore;
-	const { getDisplayedStops } = searchStore;
+	const { getDisplayedStops } = appContextStore;

 	setInterval(() => {
 		let nextPanelId = getDisplayedPanelId() + 1;
@@ -244,12 +235,12 @@ const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: numbe
 	});

 	return (
-		<div class={styles.panelsContainer}>
+		<div class="body">
 			{() => {
 				setPanels([]);

 				let newPanels = [];
-				let positioneds: PositionnedPanel[] = [];
+				let positioneds: PositionedPanel[] = [];
 				let index = 0;

 				let lineIds: string[] = [];
@@ -296,7 +287,7 @@ export const PassagesDisplay: ParentComponent = () => {
 	const panelSwitchPeriodMsec = 4 * 1000;

 	return (
-		<div class={styles.passagesDisplay}>
+		<div class="passagesDisplay">
 			<PassagesDisplayProvider>
 				<Header title="Prochains passages" />
 				<Body maxPassagesPerPanel={MAX_PASSAGES_PER_PANEL} syncPeriodMsec={syncPeriodMsec} panelSwitchPeriodMsec={panelSwitchPeriodMsec} />
--- a/frontend/src/passagesPanel.module.css
+++ b/frontend/src/passagesPanel.module.css
@@ -1,3 +1,5 @@
+@use "_utils.scss";
+
 .passagesContainer {
 	height: 100%;
 	width: 100%;
@@ -40,13 +42,15 @@

 /* Idfm: 100x100px (margin: 0px 15px) */
 .transportMode {
-	aspect-ratio : 1 / 1;
+	@extend %transportMode;
+
 	height: calc(100/176*100%);
 	margin: 0 calc(15/1920*100%);
 }

 .busLinePicto {
-	aspect-ratio : 2.25;
+	@extend %busLinePicto;
+
 	height: calc(70/176*100%);
 	margin-right: calc(23/1920*100%);
 }
@@ -127,71 +131,75 @@
 	font-family: IDFVoyageur-regular;
 }

-.withPlatformFirstPassage {
+%withPlatformPassage {
 	height: calc(120/176*100%);
-	aspect-ratio: 250/120;

 	display: flex;
 	flex-direction: column;
-
-	padding-right: calc(30/1920*100%);
-
-	/* TODO: compute the border weight according to the parent width */
-	border-right: solid calc(5px);
 }

-.withPlatformFirstPassage .passage {
+.withPlatformFirstPassage {
+	@extend %withPlatformPassage;
+
+	aspect-ratio: 250/120;
+
+	padding-right: calc(30/1920*100%);
+	/* TODO: compute the border weight according to the parent width */
+	border-right: solid calc(5px);
+
+	.passage {
 		aspect-ratio: 215/50;
 		height: calc(1/2*100%);

 		font-family: IDFVoyageur-bold;
 		margin-top: calc(5/176*100%);
-}
+	}

-.platform {
+	.platform {
 		margin-top: auto;
 		margin-bottom: calc(5/176*100%);
-}

-.withPlatformFirstPassage .platform rect {
+		rect {
 			background-color: var(--idfm-black);
-}
+		}

-.withPlatformFirstPassage .platform text {
+		text {
 			vertical-align: middle;
 			font-family: IDFVoyageur-bold;
+		}
+	}
 }

 .withPlatformSecondPassage {
-	height: calc(120/176*100%);
+	@extend %withPlatformPassage;
+
 	aspect-ratio: 215/120;

-	display: flex;
 	align-items: end;
 	justify-content: center;
-	flex-direction: column;

 	margin-right: calc(30/1920*100%);
-}

-
-.withPlatformSecondPassage .passage {
+	.passage {
 		aspect-ratio: 215/45;
 		height: calc(45/120*100%);
 		/* 5px + (first passage font size - second passage font size/2) to align passages... */
 		/* There must exist a better way to align them. */
 		margin-top: calc(7.5/176*100%);
-}
+	}

-.withPlatformSecondPassage svg {
+	svg {
 		font-family: IDFVoyageur-regular;
-}
+	}

-.withPlatformSecondPassage .platform rect {
+	.platform {
+		rect {
 			background-color: var(--idfm-black);
-}
+		}

-.withPlatformSecondPassage .platform text {
+		text {
 			vertical-align: middle;
 			font-family: IDFVoyageur-bold;
+		}
+	}
 }
--- a/frontend/src/passagesPanel.tsx
+++ b/frontend/src/passagesPanel.tsx
@@ -9,7 +9,7 @@ import { Line, TrafficStatus } from './types';
 import { renderLineTransportMode, renderLinePicto } from './utils';
 import { BusinessDataContext, BusinessDataStore } from "./businessData";

-import styles from './passagesPanel.module.css';
+import "./passagesPanel.scss";


 const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
@@ -45,7 +45,7 @@ const Platform: VoidComponent<{ name: string }> = (props) => {
 	});

 	return (
-		<svg class={styles.platform} viewBox={`0 0 ${viewBoxWidthPx} 40`}>
+		<svg class="platform" viewBox={`0 0 ${viewBoxWidthPx} 40`}>
 			<rect ref={rectRef} x="0" y="0" height="100%" rx="9" ry="9" />
 			<text ref={textRef} x="100%" y="55%" dominant-baseline="middle" text-anchor="end" font-size="25" style={{ fill: "#ffffff" }}>
 				QUAI {props.name}
@@ -77,7 +77,7 @@ const TtwPassage: VoidComponent<{
 		const ttwRepr = ttwSec < 3600 ? `${Math.floor(ttwSec / 60).toString().padStart(2, "0")} min` : format(refTs * 1000, "HH:mm");
 		const isApproaching = ttwSec <= 60;

-		const text = <svg class={styles.passage} viewBox={`0 0 215 ${props.fontSize}`}>
+		const text = <svg class="passage" viewBox={`0 0 215 ${props.fontSize}`}>
 			<Motion.text
 				x="100%" y="55%"
 				dominant-baseline="middle" text-anchor="end"
@@ -142,12 +142,12 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 	});

 	return (
-		<div class={styles.line}>
-			<div class={styles.transportMode}>
+		<div class="line">
+			<div class="transportMode">
 				{renderLineTransportMode(props.line)}
 			</div>
-			{renderLinePicto(props.line, styles)}
-			<div class={styles.destination}>
+			{renderLinePicto(props.line)}
+			<div class="destination">
 				<svg ref={destinationViewboxRef} viewBox="0 0 600 40">
 					<text ref={destinationTextRef} x="0" y="50%"
 						dominant-baseline="middle"
@@ -157,17 +157,17 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 					</text>
 				</svg>
 			</div>
-			<div class={styles.trafficStatus}>
+			<div class="trafficStatus">
 				<svg viewBox="0 0 51 51">
 					<circle cx="50%" cy="50%" r="24" stroke="#231f20" stroke-width="3" style={trafficStatusStyle} />
 				</svg>
 			</div>
 			<TtwPassage line={props.line} destination={props.destination} index={0}
-				style={styles.firstPassage} withPlatformStyle={styles.withPlatformFirstPassage}
-				fontSize={50} fallbackStyle={styles.unavailableFirstPassage} />
+				style="firstPassage" withPlatformStyle="withPlatformFirstPassage"
+				fontSize={50} fallbackStyle="unavailableFirstPassage" />
 			<TtwPassage line={props.line} destination={props.destination} index={1}
-				style={styles.secondPassage} withPlatformStyle={styles.withPlatformSecondPassage}
-				fontSize={45} fallbackStyle={styles.unavailableSecondPassage} />
+				style="secondPassage" withPlatformStyle="withPlatformSecondPassage"
+				fontSize={45} fallbackStyle="unavailableSecondPassage" />
 		</div >
 	);
 }
@@ -189,15 +189,13 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
 	const [lines] = createResource<Line[], string[]>(props.lineIds, getLines);

 	return (
-		<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
+		<div classList={{ ["passagesContainer"]: true, ["displayed"]: props.show }} >
 			<Show when={lines() !== undefined} >
 				<For each={lines()}>
 					{(line) =>
 						<Show when={getLineDestinations(line.id) !== undefined}>
 							<For each={getLineDestinations(line.id)}>
-								{(destination) =>
-									<DestinationPassages line={line} destination={destination} />
-								}
+								{(destination) => <DestinationPassages line={line} destination={destination} />}
 							</For>
 						</Show>
 					}
--- a/frontend/src/search.tsx
+++ b/frontend/src/search.tsx
@@ -1,13 +1,16 @@
-import { createContext, JSX } from 'solid-js';
+import { batch, createContext, JSX } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { Marker as LeafletMarker } from 'leaflet';

-import { Stop } from './types';
+import { Stop, Stops } from './types';


 export type ByStopIdMarkers = Record<number, LeafletMarker[] | undefined>;

 export interface SearchStore {
+	getFoundStops: () => Stop[];
+	setFoundStops: (stops: Stop[]) => void;
+
 	getDisplayedStops: () => Stop[];
 	setDisplayedStops: (stops: Stop[]) => void;

@@ -19,12 +22,20 @@ export const SearchContext = createContext<SearchStore>();
 export function SearchProvider(props: { children: JSX.Element }) {

 	type Store = {
-		stops: Record<number, Stop | undefined>;
+		foundStops: Stop[];
 		markers: ByStopIdMarkers;
 		displayedStops: Stop[];
 	};

-	const [store, setStore] = createStore<Store>({ stops: {}, markers: {}, displayedStops: [] });
+	const [store, setStore] = createStore<Store>({ foundStops: [], markers: {}, displayedStops: [] });
+
+	const getFoundStops = (): Stop[] => {
+		return store.foundStops;
+	}
+
+	const setFoundStops = (stops: Stop[]): void => {
+		setStore('foundStops', stops);
+	}

 	const getDisplayedStops = (): Stop[] => {
 		return store.displayedStops;
@@ -42,7 +53,7 @@ export function SearchProvider(props: { children: JSX.Element }) {
 	}

 	return (
-		<SearchContext.Provider value={{ getDisplayedStops, setDisplayedStops, addMarkers }}>
+		<SearchContext.Provider value={{ getFoundStops, setFoundStops, getDisplayedStops, setDisplayedStops, addMarkers }}>
 			{props.children}
 		</SearchContext.Provider>
 	);
--- a/frontend/src/stopManager.module.css
+++ b/frontend/src/stopManager.module.css
@@ -1,33 +0,0 @@
-svg {
-	font-family: IDFVoyageur-bold;
-}
-
-.transportMode {
-	aspect-ratio : 1 / 1;
-	height: 70%;
-	margin-left: 1%;
-}
-
-.tramLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.trainLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.metroLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.busLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 2.25;
-}
--- a/frontend/src/stopsManager.tsx
+++ b/frontend/src/stopsManager.tsx
@@ -1,228 +0,0 @@
-import { createEffect, createResource, createSignal, For, JSX, onMount, Show, useContext, VoidComponent } from 'solid-js';
-
-import { Box, Button, Input, InputLeftAddon, InputGroup, HStack, List, ListItem, Progress, ProgressIndicator, VStack } from "@hope-ui/solid";
-import 'leaflet/dist/leaflet.css';
-
-import {
-	featureGroup as leafletFeatureGroup, LatLngLiteral as LeafletLatLngLiteral, Map as LeafletMap,
-	Marker as LeafletMarker, tileLayer as leafletTileLayer
-} from 'leaflet';
-
-import { BusinessDataContext, BusinessDataStore } from "./businessData";
-import { SearchContext, SearchStore } from './search';
-
-import { Stop } from './types';
-import { renderLineTransportMode, renderLinePicto, TransportModeWeights } from './utils';
-
-import styles from './stopManager.module.css';
-
-
-const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
-
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	if (businessDataStore === undefined)
-		return <div />;
-
-	const { getLine } = businessDataStore;
-
-	const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
-		const reprs = [];
-		for (const lineId of lineIds) {
-			const line = await getLine(lineId);
-			if (line !== undefined) {
-				reprs.push(<div class={styles.transportMode}>{renderLineTransportMode(line)}</div>);
-				reprs.push(renderLinePicto(line, styles));
-			}
-		}
-		return reprs;
-	}
-
-	const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
-
-	return (
-		<HStack height="100%">
-			{props.stop.name}
-			<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
-		</HStack>
-	);
-}
-
-const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
-
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	if (businessDataStore === undefined)
-		return <div />;
-
-	const { getLine } = businessDataStore;
-
-	type ByTransportModeReprs = {
-		mode: JSX.Element | undefined;
-		[key: string]: JSX.Element | JSX.Element[] | undefined;
-	};
-
-	const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element[]> => {
-		const lineIds = new Set(stop.lines);
-		const stops = stop.stops;
-		for (const stop of stops) {
-			stop.lines.forEach(lineIds.add, lineIds);
-		}
-
-		const byModeReprs: Record<string, ByTransportModeReprs> = {};
-		for (const lineId of lineIds) {
-			const line = await getLine(lineId);
-			if (line !== undefined) {
-				if (!(line.transportMode in byModeReprs)) {
-					byModeReprs[line.transportMode] = {
-						mode: <div class={styles.transportMode}>{renderLineTransportMode(line)}</div>
-					};
-				}
-				byModeReprs[line.transportMode][line.shortName] = renderLinePicto(line, styles);
-			}
-		}
-
-		const reprs = [];
-		const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] < TransportModeWeights[y] ? 1 : -1);
-		for (const transportMode of sortedTransportModes) {
-			const lines = byModeReprs[transportMode];
-			const repr = [lines.mode];
-			delete lines.mode;
-			for (const lineId of Object.keys(lines).sort((x, y) => x.localeCompare(y))) {
-				repr.push(lines[lineId]);
-			}
-			reprs.push(repr);
-		}
-		return reprs;
-	}
-
-	const [lineReprs] = createResource(props.stop, fetchLinesRepr);
-
-	return (
-		<HStack height="100%">
-			{props.stop.name}
-			<For each={lineReprs()}>{(line) => line}</For>
-		</HStack>
-	);
-}
-
-
-const Map: VoidComponent<{ stops: Stop[] }> = (props) => {
-
-	const mapCenter: LeafletLatLngLiteral = { lat: 48.853, lng: 2.35 };
-
-	const searchStore: SearchStore | undefined = useContext(SearchContext);
-	if (searchStore === undefined)
-		return <div />;
-
-	const { addMarkers } = searchStore;
-
-
-	let mapDiv: any;
-	let map: LeafletMap | undefined = undefined;
-	const stopsLayerGroup = leafletFeatureGroup();
-
-	const buildMap = (div: HTMLDivElement) => {
-		map = new LeafletMap(div).setView(mapCenter, 11);
-		leafletTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-		}).addTo(map);
-		stopsLayerGroup.addTo(map);
-	}
-
-	const setMarker = (stop: Stop): L.Marker[] => {
-		const markers = [];
-		if (stop.lat !== undefined && stop.lon !== undefined) {
-			/* TODO: Add stop lines representation to popup. */
-			markers.push(new LeafletMarker([stop.lat, stop.lon]).bindPopup(`${stop.name}`).openPopup());
-		}
-		else {
-			for (const _stop of stop.stops) {
-				markers.push(...setMarker(_stop));
-			}
-		}
-		return markers;
-	}
-
-	onMount(() => buildMap(mapDiv));
-
-	createEffect(() => {
-		/* TODO: Avoid to clear all layers... */
-		stopsLayerGroup.clearLayers();
-
-		for (const stop of props.stops) {
-			const markers = setMarker(stop);
-			addMarkers(stop.id, markers);
-			for (const marker of markers) {
-				stopsLayerGroup.addLayer(marker);
-			}
-		}
-
-		const stopsBound = stopsLayerGroup.getBounds();
-		if (map !== undefined && Object.keys(stopsBound).length) {
-			map.fitBounds(stopsBound);
-		}
-	});
-
-	return <div ref={mapDiv} id='main-map' style={{ width: "100%", height: "100%" }} />;
-}
-
-export const StopsManager: VoidComponent = () => {
-
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	const searchStore: SearchStore | undefined = useContext(SearchContext);
-
-	if (businessDataStore === undefined || searchStore === undefined)
-		return <div />;
-
-	const { searchStopByName } = businessDataStore;
-	const { setDisplayedStops } = searchStore;
-
-	// TODO: Use props instead
-	const [minCharactersNb] = createSignal<number>(4);
-
-	const [inProgress, setInProgress] = createSignal<boolean>(false);
-	const [foundStops, setFoundStops] = createSignal<Stop[]>([]);
-
-	const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
-		/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
-		const stopName = event.currentTarget.value;
-		if (stopName.length >= minCharactersNb()) {
-			console.log(`Fetching data for ${stopName}`);
-			setInProgress(true);
-			const stopsById = await searchStopByName(stopName);
-			setFoundStops(Object.values(stopsById));
-			setInProgress(false);
-		}
-	}
-
-	return (
-		<VStack h="100%">
-			<InputGroup w="50%" h="5%">
-				<InputLeftAddon>🚉 🚏</InputLeftAddon>
-				<Input onInput={onStopNameInput} readOnly={inProgress()} placeholder="Stop name..." />
-			</InputGroup>
-			<Progress size="xs" w="50%" indeterminate={inProgress()}>
-				<ProgressIndicator striped animated />
-			</Progress>
-			<Box w="100%" h="40%" borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" overflow="scroll" marginBottom="2px">
-				<List width="100%" height="100%">
-					<For each={foundStops().sort((x, y) => x.name.localeCompare(y.name))}>
-						{(stop) =>
-							<ListItem borderWidth="1px" mb="0px" color="var(--idfm-black)" borderRadius="$lg">
-								<Button fullWidth="true" color="var(--idfm-black)" bg="white" onClick={() => setDisplayedStops([stop])}>
-									<Box w="100%" h="100%">
-										<Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
-											<StopAreaRepr stop={stop} />
-										</Show>
-									</Box>
-								</Button>
-							</ListItem>
-						}
-					</For>
-				</List>
-			</Box>
-			<Box borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" h="55%" w="100%" overflow="scroll">
-				<Map stops={foundStops()} />
-			</Box>
-		</VStack>
-	);
-};
--- a/frontend/src/stopsSearchMenu.scss
+++ b/frontend/src/stopsSearchMenu.scss
@@ -0,0 +1,242 @@
+@use "_common";
+@use "_utils";
+
+.stopSearchMenu {
+	@extend %widget;
+
+	.inputGroup {
+		width: 50%;
+		// height: 5%;
+
+		// TODO: Setup hop-ui to avoid to have to overrride rules.
+		input {
+			color: var(--idfm-white);
+			font-family: IDFVoyageur-regular;
+		}
+	}
+
+	.title {
+		@extend %title;
+
+		display: flex;
+		justify-content: center;
+	}
+
+	.body {
+		@extend %body;
+
+		flex-direction: row;
+
+		.stopsPanels {
+			width: 50%;
+			height: 100%;
+
+			scroll-snap-type: y mandatory;
+			overflow-y: scroll;
+
+			.stopPanel {
+				// display: None;
+				scroll-snap-align: center;
+
+				.stop {
+					width: calc(1880/1920*100%);
+					height: calc(100% / 5);
+					// margin: 0 calc(20/1920*100%);
+					margin: 0 calc(10/1920*100%);
+
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+
+					/* TODO: compute the border weight according to the parent height */
+					/* TODO: Disable border-bottom for the last .line  */
+					border-bottom: solid calc(2px);
+
+					.name {
+						width: 60%;
+
+						font-family: IDFVoyageur-bold;
+					}
+
+					.lineRepr {
+						// height: 100%;
+						width: 40%;
+						aspect-ratio: 2.5;
+						// margin-left: auto;
+
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						align-items: center;
+
+						.transportMode {
+							@extend %transportMode;
+
+							height: 50%;
+						}
+
+						.break {
+							flex-basis: 100%;
+							height: 0;
+						}
+
+						.linesRepresentationMatrix {
+							@extend %busLinePicto; // Use the larger picto aspect-ratio
+							width: 75%;
+							aspect-ratio: 3;
+
+							display: flex;
+							flex-flow: row;
+							flex-wrap: wrap;
+							// justify-content: space-around;
+
+							// .break {
+							// 	flex-basis: 100%;
+							// 	height: 0;
+							// }
+
+ 							%picto {
+								margin-left: 1%;
+								align-self: center;
+								justify-self: center;
+							}
+
+							%singleLinePicto {
+								@extend %picto;
+
+								height: 80%;
+							}
+
+							.transportMode {
+								@extend %transportMode;
+								@extend %picto;
+							}
+
+							.tramLinePicto {
+								@extendnd %tramLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.trainLinePicto {
+								@extend %trainLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.metroLinePicto {
+								@extendnd %metroLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.busLinePicto {
+								@extend %busLinePicto;
+								@extend %picto;
+							}
+						}
+					}
+				}
+				// .stop:last-child {
+				// 	border-bottom: 0;
+				// 	/* to make up for the bottom border deletion */
+				// 	padding-bottom: calc(2px);
+				// }
+			}
+			.displayed {
+				display: block;
+			}
+		}
+
+		.map {
+			height: 100%;
+			width: 50%;
+		}
+	}
+
+	// .lineTable {
+	// 	height: 100%;
+	// 	width: 50%;
+
+	// 	tr {
+	// 		height: 100%;
+
+	// 		display: flex;
+	// 		flex-flow: row;
+	// 	}
+
+	// 	td {
+	// 		height: 100%;
+
+	// 		display: flex;
+	// 		flex-flow: row;
+	// 	}
+	// }
+
+	// .stop {
+	// 	height: 100%;
+
+	// 	display: flex;
+	// 	flex-direction: row;
+	// 	align-items: center;
+
+	// 	.lineRepr {
+	// 		height: 100%;
+	// 		aspect-ratio: 5;
+
+	// 		display: flex;
+	// 		flex-direction: row;
+	// 		flex-wrap: wrap;
+	// 		align-items: center;
+
+	// 		.break {
+	// 			flex-basis: 100%;
+	// 			height: 0;
+	// 		}
+
+
+	// 		.linesRepresentationMatrix {
+	// 			@extend %busLinePicto; // Use the larger picto aspect-ratio
+	// 			height: 100%;
+	// 			aspect-ratio: 3;
+
+	// 			display: flex;
+	// 			flex-flow: row;
+	// 			flex-wrap: wrap;
+
+	// 			.break {
+	// 				flex-basis: 100%;
+	// 				height: 0;
+	// 			}
+
+ 	// 			%picto {
+	// 				margin-left: 1%;
+	// 				align-self: center;
+	// 				justify-self: center;
+	// 			}
+
+	// 			.transportMode {
+	// 				@extend %transportMode;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.tramLinePicto {
+	// 				@extendnd %tramLinePicto;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.trainLinePicto {
+	// 				@extend %trainLinePicto;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.metroLinePicto {
+	// 				@extendnd %metroLinePicto;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.busLinePicto {
+	// 				@extend %busLinePicto;
+	// 				@extend %picto;
+	// 			}
+	// 		}
+	// 	}
+	// }
+}
--- a/frontend/src/stopsSearchMenu.tsx
+++ b/frontend/src/stopsSearchMenu.tsx
@@ -0,0 +1,442 @@
+import { createContext, createEffect, createResource, For, JSX, onMount, ParentComponent, Show, useContext, VoidComponent } from 'solid-js';
+import { createStore } from "solid-js/store";
+import { createScrollPosition } from "@solid-primitives/scroll";
+
+import { Input, InputLeftAddon, InputGroup } from "@hope-ui/solid";
+import {
+	featureGroup as leafletFeatureGroup, LatLngLiteral as LeafletLatLngLiteral, Map as LeafletMap,
+	Marker as LeafletMarker, tileLayer as leafletTileLayer
+} from 'leaflet';
+
+import { Stop } from './types';
+import { PositionedPanel, renderLineTransportMode, renderLinePicto, TransportModeWeights } from './utils';
+
+import { AppContextContext, AppContextStore } from "./appContext";
+import { BusinessDataContext, BusinessDataStore } from "./businessData";
+
+import "leaflet/dist/leaflet.css";
+import "./stopsSearchMenu.scss";
+
+
+type ByStopIdMarkers = Record<number, LeafletMarker[] | undefined>;
+
+interface SearchStore {
+
+	getSearchText: () => string;
+	setSearchText: (text: string, businessDataStore: BusinessDataStore) => Promise<void>;
+	isSearchInProgress: () => boolean;
+
+	getFoundStops: () => Stop[];
+	setFoundStops: (stops: Stop[]) => void;
+
+	getDisplayedPanelId: () => number;
+	setDisplayedPanelId: (panelId: number) => void;
+
+	addMarkers: (stopId: number, markers: LeafletMarker[]) => void;
+
+	getPanels: () => PositionedPanel[];
+	setPanels: (panels: PositionedPanel[]) => void;
+};
+
+const SearchContext = createContext<SearchStore>();
+
+function SearchProvider(props: { children: JSX.Element }) {
+
+	type Store = {
+		searchText: string;
+		searchInProgress: boolean;
+		foundStops: Stop[];
+		markers: ByStopIdMarkers;
+		displayedPanelId: number;
+		panels: PositionedPanel[];
+	};
+
+	const [store, setStore] = createStore<Store>({
+		searchText: "", searchInProgress: false, foundStops: [], markers: {}, displayedPanelId: 0, panels: []
+	});
+
+	const getSearchText = (): string => {
+		return store.searchText;
+	}
+
+	const setSearchText = async (text: string, businessDataStore: BusinessDataStore): Promise<void> => {
+		setStore('searchInProgress', true);
+
+		setStore('searchText', text);
+
+		const { searchStopByName } = businessDataStore;
+		console.log("store.searchText=", store.searchText);
+		const stopsById = await searchStopByName(store.searchText);
+		console.log("stopsById=", stopsById);
+		setFoundStops(Object.values(stopsById));
+
+		setStore('searchInProgress', false);
+	}
+
+	const isSearchInProgress = (): boolean => {
+		return store.searchInProgress;
+	}
+
+	const getFoundStops = (): Stop[] => {
+		return store.foundStops;
+	}
+
+	const setFoundStops = (stops: Stop[]): void => {
+		setStore('foundStops', stops);
+	}
+
+	const getDisplayedPanelId = (): number => {
+		return store.displayedPanelId;
+	}
+
+	const setDisplayedPanelId = (panelId: number): void => {
+		setStore('displayedPanelId', panelId);
+	}
+
+	const addMarkers = (stopId: number, markers: L.Marker[]): void => {
+		setStore('markers', stopId, markers);
+	}
+
+	const getPanels = (): PositionedPanel[] => {
+		return store.panels;
+	}
+	const setPanels = (panels: PositionedPanel[]): void => {
+		setStore('panels', panels);
+	}
+
+	return (
+		<SearchContext.Provider value={{
+			getSearchText, setSearchText, isSearchInProgress,
+			getFoundStops, setFoundStops,
+			getDisplayedPanelId, setDisplayedPanelId,
+			addMarkers,
+			getPanels, setPanels
+		}}>
+			{props.children}
+		</SearchContext.Provider>
+	);
+}
+
+
+const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) => {
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (businessDataStore === undefined || searchStore === undefined)
+		return <div />;
+
+	const { isSearchInProgress, setSearchText } = searchStore;
+
+	const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
+		/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
+		const stopName = event.currentTarget.value;
+		if (stopName.length >= props.minCharsNb) {
+			console.log(`Fetching data for "${stopName}" stop name`);
+			await setSearchText(stopName, businessDataStore);
+		}
+	}
+
+	return (
+		<div class="header">
+			<div class="title">
+				<svg viewBox="0 0 1260 50">
+					<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
+						{props.title}
+					</text>
+				</svg>
+			</div>
+			<div class="inputGroup">
+				<InputGroup >
+					<InputLeftAddon>🚉 🚏</InputLeftAddon>
+					<Input onInput={onStopNameInput} readOnly={isSearchInProgress()} placeholder="Stop name..." />
+				</InputGroup>
+			</div>
+		</div >
+	);
+};
+
+
+const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	if (businessDataStore === undefined)
+		return <div />;
+
+	const { getLine } = businessDataStore;
+
+	const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
+		const reprs = [];
+		for (const lineId of lineIds) {
+			const line = await getLine(lineId);
+			if (line !== undefined) {
+				reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
+				reprs.push(renderLinePicto(line));
+			}
+		}
+		return reprs;
+	}
+
+	const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
+
+	return (
+		<div class="stop">
+			<div class="name">{props.stop.name}</div>
+			<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
+		</div>
+	);
+}
+
+
+type ByTransportModeReprs = {
+	mode: JSX.Element | undefined;
+	lines: Record<string, JSX.Element | JSX.Element[] | undefined>;
+};
+
+
+const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
+	if (businessDataStore === undefined || appContextStore === undefined)
+		return <div />;
+
+	const { getLine } = businessDataStore;
+	const { setDisplayedStops } = appContextStore;
+
+	const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element> => {
+		const lineIds = new Set(stop.lines);
+		const stops = stop.stops;
+		for (const stop of stops) {
+			stop.lines.forEach(lineIds.add, lineIds);
+		}
+
+		const byModeReprs: Record<string, ByTransportModeReprs> = {};
+		for (const lineId of lineIds) {
+			const line = await getLine(lineId);
+			if (line !== undefined) {
+				if (!(line.transportMode in byModeReprs)) {
+					byModeReprs[line.transportMode] = {
+						mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
+						lines: {}
+					};
+				}
+				byModeReprs[line.transportMode].lines[line.shortName] = renderLinePicto(line);
+			}
+		}
+
+		const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] <
+			TransportModeWeights[y] ? 1 : -1);
+
+		return (
+			<div class="lineRepr">
+				<For each={sortedTransportModes}>{(transportMode) => {
+					const reprs = byModeReprs[transportMode];
+					const lineNames = Object.keys(reprs.lines).sort((x, y) => x.localeCompare(y));
+					return <>
+						{reprs.mode}
+						<div class="linesRepresentationMatrix">
+							<For each={lineNames}>{(lineName) => reprs.lines[lineName]}</For>
+						</div>
+					</>
+				}}
+				</For>
+			</div >
+		);
+	}
+	const [lineReprs] = createResource(props.stop, fetchLinesRepr);
+
+	return (
+		<div class="stop" onClick={() => setDisplayedStops([props.stop])}>
+			<div class="name">{props.stop.name}</div>
+			{lineReprs()}
+		</div>
+	);
+}
+
+const StopsPanel: ParentComponent<{ stops: Stop[], show: boolean }> = (props) => {
+	return (
+		<div classList={{ ["stopPanel"]: true, ["displayed"]: props.show }}>
+			<For each={props.stops.sort((x, y) => x.name.localeCompare(y.name))}>
+				{(stop) => {
+					return <Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
+						<StopAreaRepr stop={stop} />
+					</Show>;
+				}}
+			</For>
+		</div>
+	);
+}
+
+const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (searchStore === undefined) {
+		return <div />;
+	}
+
+	const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore;
+
+	let stopsPanelsRef: HTMLDivElement | undefined = undefined
+	const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef);
+	const yStopsPanelsScroll = () => stopsPanelsScroll.y;
+
+	createEffect(() => {
+		yStopsPanelsScroll();
+
+		for (const panel of Object.values(getPanels())) {
+			if (panel.panel) {
+				const panelDiv = panel.panel();
+				const panelDivClientRect = panelDiv.getBoundingClientRect();
+				if (panelDivClientRect.y > 0) {
+					setDisplayedPanelId(panel.position);
+					break;
+				}
+			}
+		}
+	});
+
+	return (
+		<div ref={stopsPanelsRef} class="stopsPanels">
+			{() => {
+				setPanels([]);
+
+				let newPanels = [];
+				let positioneds: PositionedPanel[] = [];
+
+				let stops: Stop[] = [];
+
+				for (const stop of getFoundStops()) {
+					if (stops.length < props.maxStopsPerPanel) {
+						stops.push(stop);
+					}
+					else {
+						const panelId = newPanels.length;
+						const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
+						newPanels.push(panel);
+						positioneds.push({ position: panelId, panel: panel });
+						stops = [stop];
+					}
+				}
+				if (stops.length) {
+					const panelId = newPanels.length;
+					const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
+					newPanels.push(panel);
+					positioneds.push({ position: panelId, panel: panel });
+				}
+
+				setPanels(positioneds);
+
+				return newPanels;
+			}}
+		</div>
+	);
+}
+
+const Map: VoidComponent<{}> = () => {
+
+	const mapCenter: LeafletLatLngLiteral = { lat: 48.853, lng: 2.35 };
+
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+	if (searchStore === undefined)
+		return <div />;
+
+	const { addMarkers, getFoundStops } = searchStore;
+
+
+	let mapDiv: any;
+	let map: LeafletMap | undefined = undefined;
+	const stopsLayerGroup = leafletFeatureGroup();
+
+	const buildMap = (div: HTMLDivElement) => {
+		map = new LeafletMap(div).setView(mapCenter, 11);
+		leafletTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(map);
+		stopsLayerGroup.addTo(map);
+	}
+
+	const setMarker = (stop: Stop): L.Marker[] => {
+		const markers = [];
+		if (stop.lat !== undefined && stop.lon !== undefined) {
+			/* TODO: Add stop lines representation to popup. */
+			markers.push(new LeafletMarker([stop.lat, stop.lon]).bindPopup(`${stop.name}`).openPopup());
+		}
+		else {
+			for (const _stop of stop.stops) {
+				markers.push(...setMarker(_stop));
+			}
+		}
+		return markers;
+	}
+
+	onMount(() => buildMap(mapDiv));
+
+	createEffect(() => {
+		/* TODO: Avoid to clear all layers... */
+		stopsLayerGroup.clearLayers();
+
+		for (const stop of getFoundStops()) {
+			const markers = setMarker(stop);
+			addMarkers(stop.id, markers);
+			for (const marker of markers) {
+				stopsLayerGroup.addLayer(marker);
+			}
+		}
+
+		const stopsBound = stopsLayerGroup.getBounds();
+		if (map !== undefined && Object.keys(stopsBound).length) {
+			map.fitBounds(stopsBound);
+		}
+	});
+
+	return <div ref={mapDiv} class="map" id="main-map" />;
+}
+
+const Footer: VoidComponent<{}> = () => {
+
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (searchStore === undefined) {
+		return <div />;
+	}
+
+	const { getDisplayedPanelId, getPanels } = searchStore;
+
+	return (
+		<div class="footer">
+			<For each={getPanels()}>
+				{(panel) => {
+					const position = panel.position;
+					return (
+						<div>
+							<svg viewBox="0 0 29 29">
+								<circle cx="50%" cy="50%" r="13" stroke="#ffffff" stroke-width="3"
+									style={{ fill: `var(--idfm-${position == getDisplayedPanelId() ? "white" : "black"})` }}
+								/>
+							</svg>
+						</div>
+					);
+				}}
+			</For>
+		</div>
+	);
+}
+
+export const StopsSearchMenu: VoidComponent = () => {
+
+	const MAX_STOPS_PER_PANEL = 5;
+
+	return (
+		<div class="stopSearchMenu">
+			<SearchProvider>
+				<Header title="Recherche de l'arrêt..." minCharsNb={4} />
+				<div class="body">
+					<StopsPanels maxStopsPerPanel={MAX_STOPS_PER_PANEL} />
+					<Map />
+				</div>
+				<Footer />
+			</SearchProvider>
+		</div>
+	);
+};
--- a/frontend/src/utils.tsx
+++ b/frontend/src/utils.tsx
@@ -2,6 +2,13 @@ import { JSX } from 'solid-js';

 import { Line } from './types';

+// Thanks to https://dev.to/ycmjason/how-to-create-range-in-javascript-539i
+export function* range(start: number, end: number): Generator<number> {
+	for (let i = start; i <= end; i++) {
+		yield i;
+	}
+}
+
 const validTransportModes = ["bus", "tram", "metro", "rer", "transilien", "funicular", "ter", "unknown"];

 export const TransportModeWeights: Record<string, number> = {
@@ -27,9 +34,9 @@ export function renderLineTransportMode(line: Line): JSX.Element {
 	return <img src={getTransportModeSrc(line.transportMode)} />
 }

-function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderBusLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.busLinePicto}>
+		<div class="busLinePicto">
 			<svg viewBox="0 0 31.5 14">
 				<rect x="0" y="0" width="31.5" height="14" rx="1.5" ry="1.5" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -45,10 +52,10 @@ function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
 	);
 }

-function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderTramLinePicto(line: Line): JSX.Element {
 	const lineStyle = { fill: `#${line.backColorHexa}` };
 	return (
-		<div class={styles.tramLinePicto}>
+		<div class="tramLinePicto">
 			<svg viewBox="0 0 20 20">
 				<rect x="0" y="0" width="20" height="3" rx="1" ry="1" style={lineStyle} />
 				<rect x="0" y="17" width="20" height="3" rx="1" ry="1" style={lineStyle} />
@@ -65,9 +72,9 @@ function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }

-function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderMetroLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.metroLinePicto}>
+		<div class="metroLinePicto">
 			<svg viewBox="0 0 20 20">
 				<circle cx="10" cy="10" r="10" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -82,9 +89,9 @@ function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }

-function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderTrainLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.trainLinePicto}>
+		<div class="trainLinePicto">
 			<svg viewBox="0 0 20 20">
 				<rect x="0" y="0" width="20" height="20" rx="4.5" ry="4.5" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -100,19 +107,25 @@ function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }

-export function renderLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+export function renderLinePicto(line: Line): JSX.Element {
 	switch (line.transportMode) {
 		case "bus":
 		case "funicular":
-			return renderBusLinePicto(line, styles);
+			return renderBusLinePicto(line);
 		case "tram":
-			return renderTramLinePicto(line, styles);
+			return renderTramLinePicto(line);
 		/* case "val": */
 		case "metro":
-			return renderMetroLinePicto(line, styles);
+			return renderMetroLinePicto(line);
 		case "transilien":
 		case "rer":
 		case "ter":
-			return renderTrainLinePicto(line, styles);
+			return renderTrainLinePicto(line);
 	}
 }
+
+export type PositionedPanel = {
+	position: number;
+	// TODO: Should be PassagesPanelComponent ?
+	panel: JSX.Element;
+};
Author	SHA1	Message	Date
Adrien	546ec5a89f	Merge branch 'idfm-style-for-search-display' into develop	2023-03-05 13:51:03 +01:00
Adrien	4a2fadb5b3	💄 Redesign stop search menu to follow the passage display style	2023-03-05 13:46:25 +01:00
Adrien	f09ba4cc58	💄 Replace css files with scss and factorize CSS rules	2023-03-05 12:49:20 +01:00