Add missing scroll bar to remaining screens

[dshokouhi]

Summary

We had a play store review failure. One of the failing items was missing scroll bars when a user is scrolling.

To fix this I am adding Scaffold to ThemeLazyColumn to ensure we always show the scroll bars and time

Screenshots

Link to pull request in Documentation repository

Documentation: home-assistant/companion.home-assistant#

Any other notes

[jpelgrom]

When adding a Scaffold anywhere we use a ThemeLazyColumn, doesn't it make more sense to create a new Composable with Scaffold + ThemeLazyColumn?

[dshokouhi]

When adding a Scaffold anywhere we use a ThemeLazyColumn, doesn't it make more sense to create a new Composable with Scaffold + ThemeLazyColumn?

Honestly I thought about adding the Scaffold to the Lazy Column as we should always use the 2 together no matter what. In reality WearAppTheme + Scaffold + ThemeLazyColumn should always be used together right?

Not sure if we should combine them or just continue to keep it separate but IMO we use it as a theme to show the scroll bar and time in the lazy column while scrolling so the 3 feel very much related.

[jpelgrom]

WearAppTheme is not always followed by a scaffold (eg navigation), but it's a function so you can create multiple and use them as needed :) Combining Scaffold + ThemeLazyColumn would make sense because they both use the same state for the scroll indicator.

[dshokouhi]

Combining Scaffold + ThemeLazyColumn would make sense because they both use the same state for the scroll indicator.

completed in the latest commit

[jpelgrom]

A general pattern for composables is:

val scalingLazyListState = rememberScalingLazyListState()
WearAppTheme {
    ThemeLazyColumn(state = scalingLazyListState) {
        ...
    }
}

But as the ThemeLazyColumn now includes a Scaffold, which was almost always the only reason to get the state in a variable, can't it be removed in a lot of places?

[dshokouhi]

A general pattern for composables is:

val scalingLazyListState = rememberScalingLazyListState()
WearAppTheme {
    ThemeLazyColumn(state = scalingLazyListState) {
        ...
    }
}

But as the ThemeLazyColumn now includes a Scaffold, which was almost always the only reason to get the state in a variable, can't it be removed in a lot of places?

Do you mean to stick with the default which also gets the latest state? I think so but was used to always grabbing the state and sending it in :)

[jpelgrom]

Do you mean to stick with the default which also gets the latest state? I think so but was used to always grabbing the state and sending it in :)

I think simply putting ThemeLazyColumn { ... } (using the default parameter) would work.

[jpelgrom]

Installed and tested, I think you got all screens now. Love how simple something like the sensor list is with these changes.