[WIP] Settings Acount Card

android/shared/build.gradle.kts

@@ -53,6 +53,7 @@ kotlin {
             //XXX: Workaround for https://github.com/Kotlin/kotlinx-atomicfu/issues/469
             implementation(libs.jetbrains.kotlinx.atomicfu)
             implementation(libs.koin.compose)
+            implementation(libs.koin.compose.viewmodel)
             implementation(libs.uuid)
             implementation(libs.kotlinx.serialization.json)
             implementation(libs.kotlinx.datetime)

android/shared/src/androidMain/kotlin/io/rebble/cobble/shared/di/koin.android.kt

@@ -14,7 +14,8 @@ fun initKoin(context: Context) {
             dataStoreModule,
             androidModule,
             libpebbleModule,
-            dependenciesModule
+            dependenciesModule,
+            viewModelModule,
         )
     }
 }

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/di/DependenciesModule.kt

@@ -6,6 +6,7 @@ import io.ktor.client.plugins.cache.storage.CacheStorage
 import io.ktor.client.plugins.contentnegotiation.ContentNegotiation
 import io.ktor.serialization.kotlinx.json.json
 import io.rebble.cobble.shared.PlatformContext
+import io.rebble.cobble.shared.api.RWS
 import io.rebble.cobble.shared.errors.GlobalExceptionHandler
 import org.koin.dsl.module
 
@@ -22,6 +23,10 @@ val dependenciesModule = module {
     }
 
     single { GlobalExceptionHandler() }
+
+    factory {
+        RWS
+    }
 }
 
 expect fun makePlatformCacheStorage(platformContext: PlatformContext): CacheStorage

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/di/ViewModelModule.kt

@@ -0,0 +1,10 @@
+package io.rebble.cobble.shared.di
+
+import io.rebble.cobble.shared.ui.viewmodel.SettingsAccountCardViewModel
+import org.koin.core.module.dsl.viewModelOf
+import org.koin.dsl.module
+
+
+val viewModelModule = module {
+    viewModelOf(::SettingsAccountCardViewModel)
+}

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/ui/nav/Routes.kt

@@ -4,6 +4,7 @@ object Routes {
     const val DIALOG_APP_INSTALL = "dialog_app_install"
     object Home {
         const val LOCKER_APPS = "locker_apps"
+        const val SETTINGS = "settings"
         const val LOCKER_WATCHFACES = "locker_watchfaces"
         const val TEST_PAGE = "test_page"
     }

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/ui/view/MainView.kt

@@ -5,7 +5,6 @@ import androidx.compose.foundation.text.selection.DisableSelection
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.navigation.NamedNavArgument
 import androidx.navigation.NavHostController
 import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
@@ -46,6 +45,9 @@ fun MainView(navController: NavHostController = rememberNavController()) {
                         composable(Routes.Home.TEST_PAGE) {
                             HomeScaffold(HomePage.TestPage, onNavChange = navController::navigate)
                         }
+                        composable(Routes.Home.SETTINGS) {
+                            HomeScaffold(HomePage.Settings, onNavChange = navController::navigate)
+                        }
                         dialog("${Routes.DIALOG_APP_INSTALL}?uri={uri}", arguments = listOf(navArgument("uri") {
                             nullable = false
                             type = NavType.StringType

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/ui/view/home/settings/Settings.kt

@@ -0,0 +1,51 @@
+package io.rebble.cobble.shared.ui.view.home.settings
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
+import io.rebble.cobble.shared.ui.common.RebbleIcons
+import io.rebble.cobble.shared.ui.viewmodel.SettingsViewModel
+
+
+@Composable
+fun Settings(viewModel: SettingsViewModel = viewModel(), onNavigate: (String) -> Unit, modifier: Modifier = Modifier) {
+    Settings(settings = viewModel.settings, onNavigate = { /* TODO setup navigation in later PR */ }, modifier = modifier)
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun Settings(settings: List<SettingsViewModel.SettingsNavigationItem>, onNavigate: (String) -> Unit, modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+        CenterAlignedTopAppBar(title = { Text("Settings") })
+        Column(modifier.verticalScroll(rememberScrollState())) {
+            SettingsAccountCard(modifier = Modifier.padding(16.dp))
+            settings.forEach { item ->
+                if (item.icon == SettingsViewModel.SettingsNavigationItem.SettingsIcons.DEVELOPER) {
+                    HorizontalDivider(thickness = 2.dp)
+                }
+                SettingsNavigableListItem(
+                        icon = {
+                            when (item.icon) {
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.NOTIFICATIONS -> RebbleIcons.notification()
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.HEALTH -> RebbleIcons.healthHeart()
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.CALENDAR -> RebbleIcons.calendar()
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.MESSAGES -> RebbleIcons.smsMessages()
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.LANGUAGE -> RebbleIcons.systemLanguage()
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.ANALYTICS -> RebbleIcons.analytics()
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.ABOUT -> RebbleIcons.aboutApp()
+                                SettingsViewModel.SettingsNavigationItem.SettingsIcons.DEVELOPER -> RebbleIcons.developerSettings()
+                            }
+                        },
+                        title = item.title,
+                        onClick = { onNavigate(item.navigation) }
+                )
+            }
+            Spacer(modifier = Modifier.fillMaxWidth().height(16.dp))
+        }
+    }
+}

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/ui/view/home/settings/SettingsAccountCard.kt

@@ -0,0 +1,149 @@
+package io.rebble.cobble.shared.ui.view.home.settings
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.rebble.cobble.shared.ui.common.RebbleIcons
+import io.rebble.cobble.shared.ui.viewmodel.SettingsAccountCardViewModel
+import org.koin.compose.viewmodel.koinViewModel
+
+@Composable
+internal fun SettingsAccountCard(
+    viewModel: SettingsAccountCardViewModel = koinViewModel(),
+    modifier: Modifier = Modifier,
+) {
+    val state by viewModel.state.collectAsState()
+    SettingsAccountCard(
+        state = state,
+        onAction = viewModel::onAction,
+        modifier = modifier
+    )
+}
+
+@Composable
+private fun SettingsAccountCard(
+    state: SettingsAccountCardViewModel.State,
+    onAction: (SettingsAccountCardViewModel.Action) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    ElevatedCard(modifier = modifier) {
+        when (state) {
+            is SettingsAccountCardViewModel.State.Loading -> LoadingAccountCard()
+            is SettingsAccountCardViewModel.State.SignedOut -> SignedOutAccountCard(onClick = {
+                onAction(
+                    SettingsAccountCardViewModel.Action.SignIn
+                )
+            })
+
+            is SettingsAccountCardViewModel.State.UntrustedBootUrl -> UntrustedAccountCard(
+                onReset = { onAction(SettingsAccountCardViewModel.Action.Reset) },
+                onCopyUrl = { onAction(SettingsAccountCardViewModel.Action.CopyUrl) }
+            )
+
+            is SettingsAccountCardViewModel.State.SignedIn -> SignedInAccountCard(
+                state = state,
+                onSignOut = { onAction(SettingsAccountCardViewModel.Action.SignOut) },
+                onManageAccount = { onAction(SettingsAccountCardViewModel.Action.ManageAccount) },
+            )
+        }
+    }
+}
+
+@Composable
+private fun LoadingAccountCard(modifier: Modifier = Modifier) {
+    Column(modifier) {
+        ListItem(
+            headlineContent = { Text("Loading...") },
+        )
+    }
+}
+
+
+@Composable
+private fun SignedOutAccountCard(modifier: Modifier = Modifier, onClick: () -> Unit) {
+    Row(modifier) {
+        ListItem(
+            modifier = Modifier.clickable(onClick = onClick),
+            leadingContent = { RebbleIcons.rebbleStore() },
+            headlineContent = { Text("Sign in to Rebble") },
+            trailingContent = { RebbleIcons.caretRight() }
+        )
+    }
+}
+
+@Composable
+private fun UntrustedAccountCard(
+    onReset: () -> Unit,
+    onCopyUrl: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier) {
+        ListItem(
+            headlineContent = { Text("Untrusted boot URL") },
+            leadingContent = { RebbleIcons.rocket() },
+        )
+        ListItem(
+            headlineContent = { Text("Tap to reveal...") },
+            leadingContent = { RebbleIcons.aboutApp() },
+        )
+        Row {
+            Text("Reset", modifier = Modifier.clickable(onClick = onReset))
+            Text("Copy URL", modifier = Modifier.clickable(onClick = onCopyUrl))
+        }
+    }
+}
+
+@Composable
+private fun SignedInAccountCard(
+    state: SettingsAccountCardViewModel.State.SignedIn,
+    onSignOut: () -> Unit,
+    onManageAccount: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier) {
+        ListItem(
+            headlineContent = { Text("Rebble account") },
+            supportingContent = { Text(state.accountName) },
+            leadingContent = {
+                RebbleIcons.rebbleStore()
+            }
+        )
+        ListItem(
+            headlineContent = { Text("Voice and weather subscription") },
+            supportingContent = { Text(state.weatherVoiceSubscriptionStatus) },
+            leadingContent = {
+                RebbleIcons.dictationMicrophone()
+            }
+        )
+        ListItem(
+            headlineContent = { Text("Timeline sync") },
+            supportingContent = { Text(state.timelineSyncInterval) },
+            leadingContent = {
+                RebbleIcons.timelinePin()
+            }
+        )
+        Row(
+            horizontalArrangement = Arrangement.End,
+            modifier = Modifier.fillMaxWidth().background(MaterialTheme.colorScheme.surface).padding(12.dp)
+        ) {
+            Text("Sign Out", modifier = Modifier.clickable(onClick = onSignOut))
+            Spacer(Modifier.width(40.dp))
+            Text("Manage account", Modifier.clickable(onClick = onManageAccount))
+        }
+    }
+}

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/ui/view/home/settings/SettingsNavigableListItem.kt

@@ -0,0 +1,23 @@
+package io.rebble.cobble.shared.ui.view.home.settings
+
+import androidx.compose.foundation.clickable
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import io.rebble.cobble.shared.ui.common.RebbleIcons
+
+@Composable
+internal fun SettingsNavigableListItem(
+        icon: @Composable () -> Unit,
+        title: String,
+        onClick: () -> Unit,
+        modifier: Modifier = Modifier
+) {
+    ListItem(
+            modifier = modifier.clickable(onClick = onClick),
+            leadingContent = icon,
+            headlineContent = { Text(text = title) },
+            trailingContent = { RebbleIcons.caretRight() }
+    )
+}

android/shared/src/commonMain/kotlin/io/rebble/cobble/shared/ui/viewmodel/SettingsAccountCardViewModel.kt

@@ -0,0 +1,71 @@
+package io.rebble.cobble.shared.ui.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import io.rebble.cobble.shared.api.RWS
+import io.rebble.cobble.shared.domain.api.auth.RWSAccount
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+
+class SettingsAccountCardViewModel(rws: RWS) : ViewModel() {
+    sealed interface State {
+        data object Loading : State
+        data object SignedOut : State
+        data object UntrustedBootUrl : State
+        data class SignedIn(
+                val accountName: String,
+                val weatherVoiceSubscriptionStatus: String,
+                val timelineSyncInterval: String,
+        ) : State
+    }
+
+    sealed interface Action {
+        data object SignIn: Action
+        data object SignOut : Action
+        data object ManageAccount : Action
+        data object Reset : Action
+        data object CopyUrl : Action
+    }
+
+    private val authClient = rws.authClient
+    private val _state = MutableStateFlow<State>(State.Loading)
+
+    val state = _state.asStateFlow()
+
+    init {
+        viewModelScope.launch {
+            if (authClient == null) {
+                _state.update { State.SignedOut }
+                return@launch
+            }
+
+            try {
+                val user = authClient.getCurrentAccount()
+                _state.update { user.toState() }
+            } catch (e: IllegalStateException) {
+                _state.update {
+                    State.UntrustedBootUrl
+                }
+            }
+        }
+    }
+
+    fun onAction(action: Action) {
+        println(action)
+//        when (action) {
+//            Action.CopyUrl -> TODO()
+//            Action.ManageAccount -> TODO()
+//            Action.Reset -> TODO()
+//            Action.SignOut -> TODO()
+//            Action.SignIn -> TODO()
+//        }
+    }
+
+    private fun RWSAccount.toState(): State.SignedIn = State.SignedIn(
+            accountName = name,
+            weatherVoiceSubscriptionStatus = if (isSubscribed) "Subscribed!" else "Not Subscribed",
+            timelineSyncInterval = if (hasTimeline) "Every $timelineTtl minutes" else "Every 2 hours"
+    )
+}