Skip to content

feat: show new stop page layout & features - #3491

Open
thecristen wants to merge 15 commits into
mainfrom
cbj/liveview-embedded
Open

thecristen wants to merge 15 commits into
mainfrom
cbj/liveview-embedded

Conversation

@thecristen

@thecristen thecristen commented Sep 11, 2026

Copy link
Copy Markdown
Collaborator

Scope

Asana Ticket: TBA

Implementation

Using live_render/3 to embed LiveViews into a regular page

Note

This PR first fixes an issue where we couldn't use live_render/3. It turned out using different plugs for regular pages vs live view pages was making the root layout kind of confused and the security signature not matching, or something.
It's fixed by the first commit, which made the search bar break with a 403 error and necessitated the second commit:

All other POST requests seem to remain working as expected.

Kicking off the reworked Stop Page

  • Created a feature flag
  • Use the feature flag to toggle between old and new layouts

Changed in both versions: Some styling tweaks shared between both, mostly the heading sizes

Added in new layout

  • The basic side-by-side structure, with Upcoming Departures at top in the mobile breakpoint
  • Refactored the existing StopMapLive LiveView and added it to the new page where the map goes (thanks @joshlarson for the prior art in feat: Add a preview page with a stop map #2806 !)
  • Stubbed out another LiveView for the Upcoming Departures piece

Screenshots

Normal With Feature Flag
image image

How to test

Try with and without the feature flag


@thecristen
thecristen requested a review from a team as a code owner September 11, 2026 13:01
@thecristen
thecristen requested a review from jlucytan September 11, 2026 13:01

@joshlarson joshlarson left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! And I'm excited to build more on top of it!

One of the comments is blocking-ish, but I decided that ish isn't enough to stop me approving... it won't break anything, and is easy enough to address as a follow-up in case you'd rather roll forward without addressing it here.

@@ -0,0 +1,22 @@
defmodule DotcomWeb.Live.StopUpcomingArrivals do

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: Didn't we intentionally switch to a naming convention more akin to DotcomWeb.FooBarLive, as opposed to DotcomWeb.Live.FooBar?

I'm not overly attached to one or the other, but I do think it would be nice to be consistent.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated (in a newly consolidated LiveView)!

Comment thread lib/dotcom_web/live/stop_map_live.ex Outdated
|> Map.put(:zoom, 17)
end

defp zoom_to_stop(config, _), do: config

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue (blocking-ish): zoom_to_stop/2 can never be called with a second parameter that isn't a valid %Stop{} struct. While it is true that @stops_repo.get(stop_id) could return nil, the resulting stop is later called like so:

coordinates: [stop.longitude, stop.latitude]

...which means that when stop is nil, then we'll crash before we get to the zoom_to_stop/2 call.

And Elixir 1.20 is smart enough to figure all that out and warn about it!

So I vote we get rid of this clause in order to get rid of an annoying warning.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<div class={["container", @new_stop_page? && "lg:flex xl:gap-xl md:gap-lg"]}>
<div :if={@new_stop_page?} class="lg:w-2/5 lg:order-last">
<h2 class="mt-sm text-xl">{~t"Upcoming Departures"}</h2>
{live_render(@conn, DotcomWeb.Live.StopUpcomingArrivals, session: %{"stop_id" => @stop.id})}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: How come you decided to use separate LiveView's here, instead of putting the whole page into a single one? Do you envision combining them at some point, or keeping them separate?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They're now together!

|> Dotcom.StopAmenity.from_stop_facilities()

conn
|> assign(:new_stop_page?, Laboratory.enabled?(conn, :new_stop_page))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion/Comment (non-blocking): We have a nifty plug that puts all of the flags into the assigns already, so we can just give this flag the atom of :new_stop_page? instead of :new_stop_page and skip this assign statement.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! Thanks, I'd totally forgotten about that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants