Plot panel UX (overlay GPX)

[AsturaPhoenix]

The plot panel could use a design pass. This panel manages track overlays. Currently, only GPS tracks from GPX files are supported. Eventually, it should also support tracks from Strava and plotting new routes. Paddle tracking will probably have its own button in the main app bar, as it warrants more prominent positioning than within the Plot tab.

While currently picking GPX files is the only supported method, eventually it may not be commonly used as it's not the most convenient.

Tracks from Strava would be added by authenticating with Strava once and then syncing automatically. Strava branding guidelines require that the authentication be triggered from a button that looks like this:

or

Eventually we'll probably expect list items to be sorted reverse-chronologically, like an activity feed. Whether this is by start or end time remains to be decided. Newly plotted routes could be sorted first; eventually they'll probably have times associated with them for tide/current planning. (However, some GPX files do not contain time information.)

Current version

The current layout, at high level a list, button, and graph, is okay for desktop:

but is a little awkward on mobile between using too much space and the list expanding from the middle of the panel when the sheet is expanded:

alpha2.mp4

The graph is hidden when no tracks are selected:

Landscape:

I suspect that instead, we'll want to have the list at the bottom so that it expands gracefully to reveal more items as the bottom sheet is dragged up. This would mean putting the graph first and figuring something different out for the button.

FAB

One design idiom we could apply is a Floating Action Button to add GPS overlays. This FAB would probably have to emit options like "Connect with Strava" or "Plot new route" in addition to "Add GPX". However, once Strava is connected, the number of options would drop to 2, which is below the recommended 3 for a FAB that emits options. Another consideration is that for users who never intend to Connect with Strava, we might not want to shove Strava down their throats every time they try to plot a route.

Having the FAB in its canonical bottom-right position puts it a bit too far from the list on desktop when the list doesn't have much content:

This could be addressed by putting it towards the end of the content rather than the end of the outer container (shrinking the scaffold), but is still strange if we expect list items to be sorted reverse-chronologically like a feed, where new additions would likely be at the top rather than at the bottom.

Docking the FAB onto the top of the list looks okay when the graph is shown:

but would need special handling when it is hidden:

Docking the FAB onto the border between the tab and the panel also has issues.

In the desktop layout, it encroaches too far into the tab bar and covers list UI when the graph is hidden (possibly addressable by making it a mini FAB):

and appears too far removed from the list when the graph is shown:

Additionally, when the bottom sheet is collapsed on mobile, the button is awkwardly still half on screen (addressable by hiding it for this case):