add line filtering for alert places

[panentheos]

Asana task: Screenplay: Sort/filter stations in Posted Alerts

This adds the line/mode filter to the places list on the alert detail page. The filter defaults to a certain line if all places are on the same line, and uses the corresponding station sort order. Otherwise, it defaults to All, and uses alphabetical sorting. In either case, the filter can be changed to see a subset of the impacted places.

Note that several pages now wait until the places and alerts are loaded before displaying their content, which is necessary to properly initialize the defaults, and has the side effect of removing some flashes of empty content, e.g. the erroneous "not found" message on the alert details page.

[rwaskiewicz]

When testing this out, it looked like "Ferry" was auto selected as filter, which doesn't seem to be happening on main. Could you take a look?

Screen.Recording.2026-07-15.at.10.10.02.mov

[rwaskiewicz]

Does it make sense to hoist the letter cahnge above the definition of foundAlert? That would eliminate the need for the change to add nullish coalescing to alerts (Note: GitHub is rendering this suggestion in a nonsensical way on my end, hopefully it comes out the other side looking better):

Suggested change

	if (!alerts || !places) {
	return null;
	}
	const foundAlert = alerts.find((alert) => alert.id === id);
	useEffect(() => {
	if (foundAlert) {
	setSelectedAlert(foundAlert);
	}
	}, [foundAlert]);
	const validAlertId = id && allAPIAlertIds.includes(id) ? id : undefined;

[panentheos]

Unfortunately we can't do that because that would conditionally short-circuit the useEffect, which isn't allowed.

[rwaskiewicz]

No action required - FWIW, we could accomplish this without lodash (but would require us to update our TS config for 2024's Set methods):

  const allPlaceRoutes = new Set(places.flatMap(({ routes }) => routes));
  const modeOptions = MODES_AND_LINES.filter(({ ids }) => {
    return ids[0] === "All" || allPlaceRoutes.intersection(new Set(ids)).size > 0;
  });

[rwaskiewicz]

No action required - Similar comment above RE doing this in vanilla JS:

    ? PLACES_PAGE_MODES_AND_LINES.toReversed().find(
        ({ ids }) =>
          ids[0] === "All" ||
          places.every(
            (place) =>
              new Set(ids).intersection(new Set(place.routes)).size > 0,
          ),
      )!;

[panentheos]

Ah, that Ferry behavior is happening because the list of places is empty, so the every check succeeds on the first reversed (e.g. last) filter option. I'll add a conditional to choose "All" in that case, which seems like the sensible choice.