Mobile/desktop web UI

[traines-source]

Moving from a discussion in the Transitous matrix channel. If I haven't overlooked anything, there is no issue yet on how to proceed with the UI.

There is the new Desktop-oriented Motis UI and @felixguendling has started work on a mobile-only UI at prima-mobile for a specific project independent from Transitous.

From previous discussion:

[@felixguendling] would propose to have one place (could be the motis/ui folder) where we have

• all reusable components (for place auto complete, display of trips, departure boards, etc.) in some kind of lib folder
• one path / +page.svelte for desktop putting together the reusable components in the "deskop way"
• one path / +page.svelte for mobile putting together the reusable components in the "mobile way"

Moving many (all?) existing components into motis/ui/lib sounds very reasonable to me, and adapting them to be more responsive.
However, I still think that at least for Transitous, we should aim for one single UI/page under one URL, because redirecting, whether based on user agent on the server side or based on viewport sizes within Svelte, is not very nice. At the same time, I think there is no point in separating the Transitous UI from the Motis default UI. This doesn't stop anyone (or us at a later stage) to build separate pages/UIs out of these components for specific use cases or projects.

From a UX perspective, while it is necessary to adapt the UI to the form factor, I personally believe in UIs being as similar as possible from phone to desktop, because one user will often use both. In that light, the biggest changes that I see for the current state of the UI are:

• the map should not be the center piece on mobile/be hidden unless shown with a button or by tapping on e.g. a transfer
• the search mask should be hidden on mobile as soon as a journey/itinerary is selected.

Everything else could stay very similar from my point of view.
I could look into that in the near future (starting with making the components more reusable on all form factors) – or what is the best way to coordinate/not duplicate work between prima-mobile and Motis itself/Transitous?
What do you think?

[felixguendling]

Another difference between mobile and desktop is that on mobile all apps I know of switch to a full-screen view for geocoding. Especially when you want to also display recently used PoIs or even PoIs the user configured ("home", "work", "uni", etc.) this makes sense. On desktop switching the view just because you click into an input field feels a bit weird and there's also enough space.

On mobile it's also more important to save transferred bytes. So serving the complete maplibre and deck.gl libraries but never using them is a bit of a waste.

prima-mobile was more or less an experiment (maybe one day of work) to see if mobile web yields a good enough experience (which it does I think). We will also add features that I'm not sure if Transitous wants or needs them. This could be handled with feature flags at build time - or it's just another app but uses the same widgets from $lib. Features include for example on-demand booking and a private ride-sharing (user management, chat, creating offers, etc.) that will both be integrated with the public transport search.