💄 Redesign stop search menu to follow the passage display style

frontend/src/passagesDisplay.tsx

@@ -5,19 +5,12 @@ 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';
 
-
-
-type PositionnedPanel = {
-	position: number;
-	// TODO: Should be PassagesPanelComponent ?
-	panel: JSX.Element;
-};
 import "./passagesDisplay.scss";
 
 
@@ -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) => {
 
@@ -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;
@@ -249,7 +240,7 @@ const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: numbe
 				setPanels([]);
 
 				let newPanels = [];
-				let positioneds: PositionnedPanel[] = [];
+				let positioneds: PositionedPanel[] = [];
 				let index = 0;
 
 				let lineIds: string[] = [];