Add the time, make better use of list headers on Wear (#1900)

wear/src/main/java/io/homeassistant/companion/android/home/views/HomeView.kt

@@ -1,8 +1,6 @@
 package io.homeassistant.companion.android.home.views
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -23,7 +21,6 @@ import io.homeassistant.companion.android.home.MainViewModel
 import io.homeassistant.companion.android.util.LocalRotaryEventDispatcher
 import io.homeassistant.companion.android.util.RotaryEventDispatcher
 import io.homeassistant.companion.android.util.RotaryEventHandlerSetup
-import io.homeassistant.companion.android.util.SetTitle
 import io.homeassistant.companion.android.util.setChipDefaults
 
 private const val SCREEN_LANDING = "landing"
@@ -39,15 +36,10 @@ fun LoadHomePage(
     val rotaryEventDispatcher = RotaryEventDispatcher()
     if (mainViewModel.entities.isNullOrEmpty() && mainViewModel.favoriteEntityIds.isNullOrEmpty()) {
         Column {
-            Spacer(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 10.dp)
-            )
-            SetTitle(id = R.string.loading)
+            ListHeader(id = R.string.loading)
             Chip(
                 modifier = Modifier
-                    .padding(top = 50.dp, start = 10.dp, end = 10.dp),
+                    .padding(top = 30.dp, start = 10.dp, end = 10.dp),
                 label = {
                     Text(
                         text = stringResource(R.string.loading_entities),

wear/src/main/java/io/homeassistant/companion/android/home/views/ListHeader.kt

@@ -27,3 +27,15 @@ fun ListHeader(
         }
     }
 }
+
+@Composable
+fun ListHeader(id: Int) {
+    ListHeader {
+        Row {
+            Text(
+                text = stringResource(id = id),
+                color = Color.White
+            )
+        }
+    }
+}

wear/src/main/java/io/homeassistant/companion/android/home/views/MainView.kt

@@ -15,19 +15,21 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.Chip
+import androidx.wear.compose.material.ExperimentalWearMaterialApi
 import androidx.wear.compose.material.PositionIndicator
 import androidx.wear.compose.material.Scaffold
 import androidx.wear.compose.material.ScalingLazyColumn
 import androidx.wear.compose.material.ScalingLazyListState
 import androidx.wear.compose.material.Text
+import androidx.wear.compose.material.TimeText
 import androidx.wear.compose.material.rememberScalingLazyListState
 import io.homeassistant.companion.android.R
 import io.homeassistant.companion.android.common.data.integration.Entity
 import io.homeassistant.companion.android.util.RotaryEventDispatcher
 import io.homeassistant.companion.android.util.RotaryEventState
-import io.homeassistant.companion.android.util.SetTitle
 import io.homeassistant.companion.android.util.setChipDefaults
 
+@ExperimentalWearMaterialApi
 @Composable
 fun MainView(
     entities: List<Entity<*>>,
@@ -60,6 +62,10 @@ fun MainView(
         positionIndicator = {
             if (scalingLazyListState.isScrollInProgress)
                 PositionIndicator(scalingLazyListState = scalingLazyListState)
+        },
+        timeText = {
+            if (!scalingLazyListState.isScrollInProgress)
+                TimeText()
         }
     ) {
         ScalingLazyColumn(
@@ -95,7 +101,7 @@ fun MainView(
             if (entities.isNullOrEmpty()) {
                 item {
                     Column {
-                        SetTitle(id = R.string.loading)
+                        ListHeader(id = R.string.loading)
                         Chip(
                             modifier = Modifier
                                 .padding(

wear/src/main/java/io/homeassistant/companion/android/home/views/OtherSection.kt

@@ -14,7 +14,6 @@ import androidx.wear.compose.material.Text
 import com.mikepenz.iconics.compose.Image
 import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
 import io.homeassistant.companion.android.R
-import io.homeassistant.companion.android.util.SetTitle
 
 @Composable
 fun OtherSection(
@@ -22,7 +21,7 @@ fun OtherSection(
     onLogoutClicked: () -> Unit
 ) {
     Column {
-        SetTitle(R.string.other)
+        ListHeader(id = R.string.other)
         Chip(
             modifier = Modifier
                 .fillMaxWidth()

wear/src/main/java/io/homeassistant/companion/android/home/views/SetFavoriteView.kt

@@ -12,9 +12,13 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.wear.compose.material.ExperimentalWearMaterialApi
+import androidx.wear.compose.material.PositionIndicator
+import androidx.wear.compose.material.Scaffold
 import androidx.wear.compose.material.ScalingLazyColumn
 import androidx.wear.compose.material.ScalingLazyListState
 import androidx.wear.compose.material.Text
+import androidx.wear.compose.material.TimeText
 import androidx.wear.compose.material.ToggleChip
 import androidx.wear.compose.material.ToggleChipDefaults
 import androidx.wear.compose.material.rememberScalingLazyListState
@@ -23,9 +27,9 @@ import com.mikepenz.iconics.typeface.library.community.material.CommunityMateria
 import io.homeassistant.companion.android.R
 import io.homeassistant.companion.android.common.data.integration.Entity
 import io.homeassistant.companion.android.util.RotaryEventState
-import io.homeassistant.companion.android.util.SetTitle
 import io.homeassistant.companion.android.util.getIcon
 
+@ExperimentalWearMaterialApi
 @Composable
 fun SetFavoritesView(
     validEntities: List<Entity<*>>,
@@ -34,58 +38,69 @@ fun SetFavoritesView(
 ) {
     val scalingLazyListState: ScalingLazyListState = rememberScalingLazyListState()
     RotaryEventState(scrollState = scalingLazyListState)
-    ScalingLazyColumn(
-        modifier = Modifier
-            .fillMaxSize(),
-        contentPadding = PaddingValues(
-            top = 10.dp,
-            start = 10.dp,
-            end = 10.dp,
-            bottom = 40.dp
-        ),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        state = scalingLazyListState
+    Scaffold(
+        positionIndicator = {
+            if (scalingLazyListState.isScrollInProgress)
+                PositionIndicator(scalingLazyListState = scalingLazyListState)
+        },
+        timeText = {
+            if (!scalingLazyListState.isScrollInProgress)
+                TimeText()
+        }
     ) {
-        items(validEntities.size) { index ->
-            val attributes = validEntities[index].attributes as Map<*, *>
-            val iconBitmap = getIcon(
-                attributes["icon"] as String?,
-                validEntities[index].entityId.split(".")[0],
-                LocalContext.current
-            )
-            if (index == 0)
-                SetTitle(id = R.string.set_favorite)
-
-            val entityId = validEntities[index].entityId
-            val checked = favoriteEntityIds.contains(entityId)
-            ToggleChip(
-                checked = checked,
-                onCheckedChange = {
-                    onFavoriteSelected(entityId, it)
-                },
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = if (index == 0) 30.dp else 10.dp),
-                appIcon = { Image(asset = iconBitmap ?: CommunityMaterial.Icon.cmd_cellphone) },
-                label = {
-                    Text(
-                        text = attributes["friendly_name"].toString(),
-                        maxLines = 2,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                },
-                toggleIcon = { ToggleChipDefaults.SwitchIcon(checked) },
-                colors = ToggleChipDefaults.toggleChipColors(
-                    checkedStartBackgroundColor = colorResource(id = R.color.colorAccent),
-                    checkedEndBackgroundColor = colorResource(id = R.color.colorAccent),
-                    uncheckedStartBackgroundColor = colorResource(id = R.color.colorAccent),
-                    uncheckedEndBackgroundColor = colorResource(id = R.color.colorAccent),
-                    checkedContentColor = Color.Black,
-                    uncheckedContentColor = Color.Black,
-                    checkedToggleIconTintColor = Color.Yellow,
-                    uncheckedToggleIconTintColor = Color.DarkGray
+        ScalingLazyColumn(
+            modifier = Modifier
+                .fillMaxSize(),
+            contentPadding = PaddingValues(
+                top = 10.dp,
+                start = 10.dp,
+                end = 10.dp,
+                bottom = 40.dp
+            ),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            state = scalingLazyListState
+        ) {
+            items(validEntities.size) { index ->
+                val attributes = validEntities[index].attributes as Map<*, *>
+                val iconBitmap = getIcon(
+                    attributes["icon"] as String?,
+                    validEntities[index].entityId.split(".")[0],
+                    LocalContext.current
                 )
-            )
+                if (index == 0)
+                    ListHeader(R.string.set_favorite)
+
+                val entityId = validEntities[index].entityId
+                val checked = favoriteEntityIds.contains(entityId)
+                ToggleChip(
+                    checked = checked,
+                    onCheckedChange = {
+                        onFavoriteSelected(entityId, it)
+                    },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = if (index == 0) 40.dp else 10.dp),
+                    appIcon = { Image(asset = iconBitmap ?: CommunityMaterial.Icon.cmd_cellphone) },
+                    label = {
+                        Text(
+                            text = attributes["friendly_name"].toString(),
+                            maxLines = 2,
+                            overflow = TextOverflow.Ellipsis
+                        )
+                    },
+                    toggleIcon = { ToggleChipDefaults.SwitchIcon(checked) },
+                    colors = ToggleChipDefaults.toggleChipColors(
+                        checkedStartBackgroundColor = colorResource(id = R.color.colorAccent),
+                        checkedEndBackgroundColor = colorResource(id = R.color.colorAccent),
+                        uncheckedStartBackgroundColor = colorResource(id = R.color.colorAccent),
+                        uncheckedEndBackgroundColor = colorResource(id = R.color.colorAccent),
+                        checkedContentColor = Color.Black,
+                        uncheckedContentColor = Color.Black,
+                        checkedToggleIconTintColor = Color.Yellow,
+                        uncheckedToggleIconTintColor = Color.DarkGray
+                    )
+                )
+            }
         }
     }
 }

wear/src/main/java/io/homeassistant/companion/android/home/views/SettingsView.kt

@@ -1,9 +1,7 @@
 package io.homeassistant.companion.android.home.views
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -16,7 +14,6 @@ import androidx.wear.compose.material.Text
 import com.mikepenz.iconics.compose.Image
 import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
 import io.homeassistant.companion.android.R
-import io.homeassistant.companion.android.util.SetTitle
 
 @Composable
 fun SettingsView(
@@ -25,12 +22,10 @@ fun SettingsView(
     onClearFavorites: () -> Unit
 ) {
     Column {
-        Spacer(modifier = Modifier.height(20.dp))
-        SetTitle(id = R.string.settings)
+        ListHeader(id = R.string.settings)
         Chip(
             modifier = Modifier
-                .fillMaxWidth()
-                .padding(top = 20.dp),
+                .fillMaxWidth(),
             icon = {
                 Image(asset = CommunityMaterial.Icon3.cmd_star)
             },

wear/src/main/java/io/homeassistant/companion/android/util/CommonFunctions.kt

@@ -1,35 +1,16 @@
 package io.homeassistant.companion.android.util
 
 import android.content.Context
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.unit.sp
 import androidx.wear.compose.material.ChipColors
 import androidx.wear.compose.material.ChipDefaults
-import androidx.wear.compose.material.Text
 import com.mikepenz.iconics.IconicsDrawable
 import com.mikepenz.iconics.typeface.IIcon
 import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
 import io.homeassistant.companion.android.R
 
-@Composable
-fun SetTitle(id: Int) {
-    Text(
-        text = stringResource(id = id),
-        textAlign = TextAlign.Center,
-        fontSize = 15.sp,
-        fontWeight = FontWeight.Bold,
-        modifier = Modifier
-            .fillMaxWidth()
-    )
-}
-
 @Composable
 fun setChipDefaults(): ChipColors {
     return ChipDefaults.primaryChipColors(