Add initial layout of AccountTab

appcompose/src/main/java/com/readrops/app/compose/account/AccountTab.kt

@@ -1,25 +1,42 @@
 package com.readrops.app.compose.account
 
+import androidx.compose.foundation.Image
+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.size
-import androidx.compose.material3.Button
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccountCircle
+import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import cafe.adriel.voyager.navigator.LocalNavigator
 import cafe.adriel.voyager.navigator.currentOrThrow
 import cafe.adriel.voyager.navigator.tab.Tab
 import cafe.adriel.voyager.navigator.tab.TabOptions
+import com.readrops.app.compose.R
 import com.readrops.app.compose.account.selection.AccountSelectionScreen
+import com.readrops.app.compose.util.components.SelectableIconText
+import com.readrops.app.compose.util.theme.LargeSpacer
+import com.readrops.app.compose.util.theme.MediumSpacer
+import com.readrops.app.compose.util.theme.spacing
 import org.koin.androidx.compose.getViewModel
 
 object AccountTab : Tab {
@@ -28,7 +45,7 @@ object AccountTab : Tab {
         @Composable
         get() = TabOptions(
             index = 3u,
-            title = "Account"
+            title = stringResource(R.string.account)
         )
 
     @OptIn(ExperimentalMaterial3Api::class)
@@ -36,7 +53,9 @@ object AccountTab : Tab {
     override fun Content() {
         val navigator = LocalNavigator.currentOrThrow
         val viewModel = getViewModel<AccountViewModel>()
+
         val closeHome by viewModel.closeHome.collectAsStateWithLifecycle()
+        val state by viewModel.accountState.collectAsStateWithLifecycle()
 
         if (closeHome) {
             navigator.replaceAll(AccountSelectionScreen())
@@ -44,31 +63,82 @@ object AccountTab : Tab {
 
         Scaffold(
             topBar = {
-                TopAppBar(title = { Text(text = "Account") })
+                TopAppBar(
+                    title = { Text(text = stringResource(R.string.account)) },
+                    actions = {
+                        IconButton(
+                            onClick = { }
+                        ) {
+                            Icon(
+                                imageVector = Icons.Default.MoreVert,
+                                contentDescription = null
+                            )
+                        }
+                    }
+                )
+            },
+            floatingActionButton = {
+                FloatingActionButton(
+                    onClick = {}
+                ) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_add_account),
+                        contentDescription = null
+                    )
+                }
             }
         ) { paddingValues ->
             Column(
-                modifier = Modifier.padding(paddingValues)
+                modifier = Modifier
+                    .padding(paddingValues)
             ) {
-                Row {
-                    Button(onClick = { viewModel.deleteAccount() }) {
-                        Text(
-                            text = "Delete"
-                        )
-                    }
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center,
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.ic_freshrss),
+                        contentDescription = null,
+                        modifier = Modifier.size(48.dp)
+                    )
 
-                    Spacer(modifier = Modifier.size(16.dp))
+                    MediumSpacer()
 
-                    Button(onClick = { navigator.push(AccountSelectionScreen()) }) {
-                        Text(
-                            text = "New"
-                        )
-                    }
+                    Text(
+                        text = state.account.accountName!!,
+                        style = MaterialTheme.typography.titleLarge
+                    )
                 }
+
+                LargeSpacer()
+
+                SelectableIconText(
+                    icon = painterResource(id = R.drawable.ic_add_account),
+                    text = stringResource(R.string.credentials),
+                    style = MaterialTheme.typography.titleMedium,
+                    padding = MaterialTheme.spacing.mediumSpacing,
+                    onClick = { }
+                )
+
+                SelectableIconText(
+                    icon = painterResource(id = R.drawable.ic_notifications),
+                    text = stringResource(R.string.notifications),
+                    style = MaterialTheme.typography.titleMedium,
+                    padding = MaterialTheme.spacing.mediumSpacing,
+                    onClick = { }
+                )
+
+                SelectableIconText(
+                    icon = rememberVectorPainter(image = Icons.Default.AccountCircle),
+                    text = stringResource(R.string.delete_account),
+                    style = MaterialTheme.typography.titleMedium,
+                    padding = MaterialTheme.spacing.mediumSpacing,
+                    color = MaterialTheme.colorScheme.error,
+                    tint = MaterialTheme.colorScheme.error,
+                    onClick = { /*viewModel.deleteAccount()*/ }
+                )
             }
         }
-
-
     }
-
 }

appcompose/src/main/java/com/readrops/app/compose/account/AccountViewModel.kt

@@ -1,8 +1,10 @@
 package com.readrops.app.compose.account
 
-import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import com.readrops.app.compose.base.TabViewModel
 import com.readrops.db.Database
+import com.readrops.db.entities.account.Account
+import com.readrops.db.entities.account.AccountType
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -11,11 +13,26 @@ import kotlinx.coroutines.launch
 
 class AccountViewModel(
     private val database: Database
-) : ViewModel()  {
+) : TabViewModel(database)  {
 
     private val _closeHome = MutableStateFlow(false)
     val closeHome = _closeHome.asStateFlow()
 
+    private val _accountState = MutableStateFlow(AccountState())
+    val accountState = _accountState.asStateFlow()
+
+    init {
+        viewModelScope.launch(Dispatchers.IO) {
+            accountEvent.collect { account ->
+                _accountState.update {
+                    it.copy(
+                        account = account
+                    )
+                }
+            }
+        }
+    }
+
 
     fun deleteAccount() {
         viewModelScope.launch(Dispatchers.IO) {
@@ -25,5 +42,9 @@ class AccountViewModel(
             _closeHome.update { true }
         }
     }
+}
 
-}
+data class AccountState(
+    val account: Account = Account(accountName = "account", accountType = AccountType.LOCAL),
+    val dialog: Unit = Unit,
+)

appcompose/src/main/java/com/readrops/app/compose/util/components/IconText.kt

@@ -1,8 +1,11 @@
 package com.readrops.app.compose.util.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 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.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
@@ -25,6 +28,7 @@ fun IconText(
     text: String,
     style: TextStyle,
     modifier: Modifier = Modifier,
+    color: Color = LocalContentColor.current,
     tint: Color = LocalContentColor.current,
     padding: Dp = MaterialTheme.spacing.veryShortSpacing,
     onClick: (() -> Unit)? = null,
@@ -45,6 +49,42 @@ fun IconText(
         Text(
             text = text,
             style = style,
+            color = color,
         )
     }
+}
+
+@Composable
+fun SelectableIconText(
+    icon: Painter,
+    text: String,
+    style: TextStyle,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    color: Color = LocalContentColor.current,
+    tint: Color = LocalContentColor.current,
+    padding: Dp = MaterialTheme.spacing.veryShortSpacing,
+) {
+    Box(
+        modifier = modifier.clickable { onClick() }
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(
+                    horizontal = MaterialTheme.spacing.mediumSpacing,
+                    vertical = MaterialTheme.spacing.mediumSpacing
+                )
+        ) {
+            IconText(
+                icon = icon,
+                text = text,
+                style = style,
+                padding = padding,
+                tint = tint,
+                color = color
+            )
+        }
+    }
 }

appcompose/src/main/res/drawable/ic_add_account.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M13,8c0,-2.21 -1.79,-4 -4,-4S5,5.79 5,8s1.79,4 4,4S13,10.21 13,8zM15,10v2h3v3h2v-3h3v-2h-3V7h-2v3H15zM1,18v2h16v-2c0,-2.66 -5.33,-4 -8,-4S1,15.34 1,18z"/>
+</vector>

appcompose/src/main/res/drawable/ic_notifications.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z"/>
+</vector>