From 1c47bfbf4426a5f72eb05e804c54dd1191ac60f0 Mon Sep 17 00:00:00 2001
From: Stanislav Dmitrenko <7953703+avently@users.noreply.github.com>
Date: Wed, 25 Jan 2023 20:43:02 +0000
Subject: [PATCH] android: better user picker layout (#1842)

* android: multiuser-fixes

* update paddings

* progressIndicator

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
---
 .../java/chat/simplex/app/model/ChatModel.kt  |  1 +
 .../app/views/chatlist/ChatListView.kt        |  2 +-
 .../simplex/app/views/chatlist/UserPicker.kt  | 46 +++++++++++++++----
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/apps/android/app/src/main/java/chat/simplex/app/model/ChatModel.kt b/apps/android/app/src/main/java/chat/simplex/app/model/ChatModel.kt
index 2778a8012c..d8411ecc3d 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/model/ChatModel.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/model/ChatModel.kt
@@ -255,6 +255,7 @@ class ChatModel(val controller: ChatController) {
     if (indexInUsers != -1) {
       users[indexInUsers] = UserInfo(updated, users[indexInUsers].unreadCount)
     }
+    currentUser.value = updated
   }
 
   suspend fun addLiveDummy(chatInfo: ChatInfo): ChatItem {
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt
index b2bb7733e3..d3d3d23534 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt
@@ -243,7 +243,7 @@ private fun UserProfileButton(image: String?, allRead: Boolean, onButtonClicked:
     Box {
       ProfileImage(
         image = image,
-        size = 36.dp
+        size = 37.dp
       )
       if (!allRead) {
         unreadBadge()
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/UserPicker.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/UserPicker.kt
index f90a47bc21..605dc117d7 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/UserPicker.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/UserPicker.kt
@@ -25,8 +25,9 @@ import chat.simplex.app.R
 import chat.simplex.app.TAG
 import chat.simplex.app.model.ChatModel
 import chat.simplex.app.model.UserInfo
-import chat.simplex.app.ui.theme.DEFAULT_PADDING
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.*
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.*
 import kotlinx.coroutines.launch
 import kotlin.math.roundToInt
@@ -37,6 +38,15 @@ fun UserPicker(chatModel: ChatModel, userPickerState: MutableStateFlow<AnimatedV
   var newChat by remember { mutableStateOf(userPickerState.value) }
   val users by remember { derivedStateOf { chatModel.users.sortedByDescending { it.user.activeUser } } }
   val animatedFloat = remember { Animatable(if (newChat.isVisible()) 0f else 1f) }
+  var progressIndicator by remember { mutableStateOf(false) }
+  if (progressIndicator) {
+    Box(
+      Modifier.fillMaxSize().clickable(enabled = false, onClick = {}),
+      contentAlignment = Alignment.Center
+    ) {
+      ProgressIndicator()
+    }
+  }
   LaunchedEffect(Unit) {
     launch {
       userPickerState.collect {
@@ -99,9 +109,16 @@ fun UserPicker(chatModel: ChatModel, userPickerState: MutableStateFlow<AnimatedV
         users.forEachIndexed { i, u ->
           UserProfilePickerItem(u) {
             userPickerState.value = AnimatedViewState.HIDING
-            scope.launch {
-              if (!u.user.activeUser) {
+            if (!u.user.activeUser) {
+              chatModel.chats.clear()
+              scope.launch {
+                val job = launch {
+                  delay(500)
+                  progressIndicator = true
+                }
                 chatModel.controller.changeActiveUser(u.user.userId)
+                job.cancel()
+                progressIndicator = false
               }
             }
           }
@@ -121,16 +138,16 @@ fun UserPicker(chatModel: ChatModel, userPickerState: MutableStateFlow<AnimatedV
 
 @Composable
 private fun UserProfilePickerItem(u: UserInfo, onClick: () -> Unit) {
-  SectionItemViewSpaceBetween(onClick, padding = PaddingValues(start = 8.dp, end = 8.dp)) {
+  SectionItemViewSpaceBetween(onClick, padding = PaddingValues(start = 8.dp, end = DEFAULT_PADDING)) {
     Row(
       Modifier
         .widthIn(max = LocalConfiguration.current.screenWidthDp.dp * 0.7f)
-        .padding(top = 8.dp, bottom = 8.dp),
+        .padding(vertical = 8.dp),
       verticalAlignment = Alignment.CenterVertically
     ) {
       ProfileImage(
         image = u.user.image,
-        size = 60.dp
+        size = 54.dp
       )
       Text(
         u.user.chatViewName,
@@ -153,13 +170,15 @@ private fun UserProfilePickerItem(u: UserInfo, onClick: () -> Unit) {
         textAlign = TextAlign.Center,
         maxLines = 1
       )
+    } else {
+      Box(Modifier.size(20.dp))
     }
   }
 }
 
 @Composable
 private fun SettingsPickerItem(onClick: () -> Unit) {
-  SectionItemViewSpaceBetween(onClick, minHeight = 60.dp) {
+  SectionItemViewSpaceBetween(onClick, minHeight = 68.dp) {
     val text = generalGetString(R.string.settings_section_title_settings).lowercase().capitalize(Locale.current)
     Text(
       text,
@@ -167,4 +186,15 @@ private fun SettingsPickerItem(onClick: () -> Unit) {
     )
     Icon(Icons.Outlined.Settings, text, Modifier.size(20.dp), tint = MaterialTheme.colors.onBackground)
   }
-}
\ No newline at end of file
+}
+
+@Composable
+private fun ProgressIndicator() {
+  CircularProgressIndicator(
+    Modifier
+      .padding(horizontal = 2.dp)
+      .size(30.dp),
+    color = HighOrLowlight,
+    strokeWidth = 2.5.dp
+  )
+}