feature: Optimize Views for Landscape

[wba2hi]

Interesting lectures and documentation:

• https://www.youtube.com/watch?v=m7OL-mVh1E8
• https://www.youtube.com/watch?v=fQjDtCtri4s
• https://m3.material.io/foundations/layout/understanding-layout/overview

What did I use:

• WindowSizeClass to differentiate between Layout and Portrait mode
• FlowRow and FlowColumn Views for "better flow" on changing screens

What did I not use:

• A Canonical Layout. Feed does not fit, List-Detail also does not fit. Supporting Pane could fit, however the RamsesView can only "shrink" in size, it can not "increase" in size 100*100 -> 100*50 works but 100*50 -> 100*100 (due to expanding shrinking does not work). Therefore we need something to overlay our view and not to reduce it's size. An element which can expand and shrink again. So I added a custom BottomSheet -> I added AdaptiveViews, which based on the windowSizeClasses show different content (e.g. horizontal orientation instead of vertical), e.g. an AdaptiveNavigation consists of a HorizontalNavigation and a VerticalNavigation which both take there data from the same dataset.

Why AdaptiveViews? Why 2 Views and not if-else? I tried to keep everything in one view, see AdaptiveSheet. However when switching from Portrait to Landscape a lot of parameter change. When setting the width in Portrait, we need to set the Height in Landscape for example. However we can not easily use kotlins .apply {} or .also {} scope when working with the modifier. It adds a lot of complexity (if portrait use width, else use height) to each view if it tries to do both. I tried to find the best way by adding two separate views, which are "simpler" and "more maintainable" over one view which tries to do both but is error-prone hard to read and less maintainable.

I tried to move all "AdaptiveView"-logic inside the AdaptiveScreen I moved the settings from being a FloatingActionButton inside the RamsesView to an element inside the NavigationBar

Closes: #20

[Chrylo]

Regarding the custom BottomSheet. I really liked how the bottom sheet felt. Can we maybe revert to that one and use a Sidesheet like in the link?

https://m2.material.io/components/sheets-bottom#behavior

Another idea would be to use an expanding Action Button like this: https://stackoverflow.com/questions/75933627/how-to-expand-fab-into-a-sheet-in-jetpack-compose

[Chrylo]

Functional:

• I would not expect that a reconnection (unsubscribe / disconnect etc.) happens during a rotation because only the views should be rebuild. Probably not easy to fix if something is a bit too entangled here. Lets discuss this.
• The current tab is not saved when rotating
• The Tab bar has now more height since the settings button was added there. Is it possible to reduce that again? Is it possible to add some kind of line divider between the settings and the previous button? To show some visual decoupling?

[wba2hi]

• I would not expect that a reconnection (unsubscribe / disconnect etc.) happens during a rotation because only the views should be rebuild. Probably not easy to fix if something is a bit too entangled here. Lets discuss this.

Fixed

• The current tab is not saved when rotating

Fixed

• The Tab bar has now more height since the settings button was added there. Is it possible to reduce that again? Is it possible to add some kind of line divider between the settings and the previous button? To show some visual decoupling?

Previously we used a TabHost, now we use a NavigationBar which has a well-defined height. Therefore the new height is intended. Increased the Icon size a bit to compensate for the height of the NavigationBar.

[Chrylo]

LGTM

• Tested all views in both landscape + portrait.
• Tested connection to the Databroker while rotating the views
• Tested new Sidesheet element
• Tested state restoration while rotating the views

This was a big task so some improvements will be made in follow up tickets like #55.

known issues:

• The settings view may be squeezed for some text boxes depending on the phone
• The app resubscribes to all properties on orientation change: #55
• The temperature view can't be dragged in landscape mode because the event is overridden by the Sidesheet