fix members lists, add background

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/group/ChannelMembersView.kt

@@ -5,7 +5,6 @@ import SectionItemView
 import SectionView
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.foundation.background
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -35,7 +34,7 @@ fun ChannelMembersView(
           && m.memberRole != GroupMemberRole.Relay
     }
 
-  ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
+  ColumnWithScrollBar {
     val title = if (groupInfo.isOwner) {
       generalGetString(MR.strings.channel_members_title_subscribers)
     } else {
@@ -45,7 +44,7 @@ fun ChannelMembersView(
 
     if (groupInfo.isOwner) {
       val subscriberCount = groupInfo.groupSummary.publicMemberCount ?: (members.size + 1).toLong()
-      SectionView(title = subscriberCountStr(subscriberCount), card = true) {
+      SectionView(title = subscriberCountStr(subscriberCount)) {
         SectionItemView(minHeight = 54.dp, padding = PaddingValues(horizontal = DEFAULT_PADDING)) {
           ChannelMemberRow(groupInfo.membership, user = true, showRole = true)
         }
@@ -62,7 +61,7 @@ fun ChannelMembersView(
       }
     } else {
       val owners = members.filter { it.memberRole >= GroupMemberRole.Owner }
-      SectionView(title = generalGetString(MR.strings.channel_members_section_owners), card = true) {
+      SectionView(title = generalGetString(MR.strings.channel_members_section_owners)) {
         owners.forEachIndexed { index, member ->
           if (index > 0) {
             Divider()

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/group/GroupChatInfoView.kt

@@ -1,5 +1,6 @@
 package chat.simplex.common.views.chat.group
 
+import CARD_PADDING
 import InfoRow
 import SectionBottomSpacer
 import SectionItemView
@@ -15,6 +16,9 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -703,7 +707,7 @@ fun ModalData.GroupChatInfoLayout(
       SectionSpacer()
 
       if (!groupInfo.nextConnectPrepared && !groupInfo.useRelays) {
-        SectionView(title = String.format(generalGetString(MR.strings.group_info_section_title_num_members), activeSortedMembers.count() + 1), card = true) {
+        SectionView(title = String.format(generalGetString(MR.strings.group_info_section_title_num_members), activeSortedMembers.count() + 1), card = true, cardShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)) {
           if (groupInfo.canAddMembers) {
             val onAddMembersClick = if (chat.chatInfo.incognito) ::cantInviteIncognitoAlert else addMembers
             val tint = if (chat.chatInfo.incognito) MaterialTheme.colors.secondary else MaterialTheme.colors.primary
@@ -726,32 +730,36 @@ fun ModalData.GroupChatInfoLayout(
       }
     }
     if (!groupInfo.nextConnectPrepared && !groupInfo.useRelays) {
-      items(filteredMembers.value, key = { it.groupMemberId }) { member ->
-        Divider()
-        val showMenu = remember { mutableStateOf(false) }
-        val canBeSelected = groupInfo.membership.memberRole >= member.memberRole && member.memberRole < GroupMemberRole.Moderator
-        SectionItemViewLongClickable(
-          click = {
-            if (selectedItems.value != null) {
-              if (canBeSelected) {
-                toggleItemSelection(member.groupMemberId, selectedItems)
+      itemsIndexed(filteredMembers.value, key = { _, m -> m.groupMemberId }) { index, member ->
+        val isLast = index == filteredMembers.value.lastIndex
+        val shape = if (isLast) RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp) else RectangleShape
+        Column(Modifier.padding(horizontal = CARD_PADDING).fillMaxWidth().clip(shape).background(sectionCardColor())) {
+          Divider()
+          val showMenu = remember { mutableStateOf(false) }
+          val canBeSelected = groupInfo.membership.memberRole >= member.memberRole && member.memberRole < GroupMemberRole.Moderator
+          SectionItemViewLongClickable(
+            click = {
+              if (selectedItems.value != null) {
+                if (canBeSelected) {
+                  toggleItemSelection(member.groupMemberId, selectedItems)
+                }
+              } else {
+                showMemberInfo(member, null)
+              }
+            },
+            longClick = { showMenu.value = true },
+            minHeight = 54.dp,
+            padding = PaddingValues(horizontal = DEFAULT_PADDING)
+          ) {
+            Box(contentAlignment = Alignment.CenterStart) {
+              androidx.compose.animation.AnimatedVisibility(selectedItems.value != null, enter = fadeIn(), exit = fadeOut()) {
+                SelectedListItem(Modifier.alpha(if (canBeSelected) 1f else 0f).padding(start = 2.dp), member.groupMemberId, selectedItems)
+              }
+              val selectionOffset by animateDpAsState(if (selectedItems.value != null) 20.dp + 22.dp * fontSizeMultiplier else 0.dp)
+              DropDownMenuForMember(chat.remoteHostId, member, groupInfo, selectedItems, showMenu)
+              Box(Modifier.padding(start = selectionOffset)) {
+                MemberRow(member)
               }
-            } else {
-              showMemberInfo(member, null)
-            }
-          },
-          longClick = { showMenu.value = true },
-          minHeight = 54.dp,
-          padding = PaddingValues(horizontal = DEFAULT_PADDING)
-        ) {
-          Box(contentAlignment = Alignment.CenterStart) {
-            androidx.compose.animation.AnimatedVisibility(selectedItems.value != null, enter = fadeIn(), exit = fadeOut()) {
-              SelectedListItem(Modifier.alpha(if (canBeSelected) 1f else 0f).padding(start = 2.dp), member.groupMemberId, selectedItems)
-            }
-            val selectionOffset by animateDpAsState(if (selectedItems.value != null) 20.dp + 22.dp * fontSizeMultiplier else 0.dp)
-            DropDownMenuForMember(chat.remoteHostId, member, groupInfo, selectedItems, showMenu)
-            Box(Modifier.padding(start = selectionOffset)) {
-              MemberRow(member)
             }
           }
         }

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chatlist/ServersSummaryView.kt

@@ -631,7 +631,7 @@ fun ModalData.DetailedXFTPStatsView(
   ModalView(
     close = close
   ) {
-    ColumnWithScrollBar {
+    ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
       Box(contentAlignment = Alignment.Center) {
         val bottomPadding = DEFAULT_PADDING
         AppBarTitle(
@@ -655,7 +655,7 @@ fun ModalData.DetailedSMPStatsView(
   ModalView(
     close = close
   ) {
-    ColumnWithScrollBar {
+    ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
       Box(contentAlignment = Alignment.Center) {
         val bottomPadding = DEFAULT_PADDING
         AppBarTitle(
@@ -679,7 +679,7 @@ fun ModalData.XFTPServerSummaryView(
   ModalView(
     close = close
   ) {
-    ColumnWithScrollBar {
+    ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
       Box(contentAlignment = Alignment.Center) {
         val bottomPadding = DEFAULT_PADDING
         AppBarTitle(
@@ -695,7 +695,7 @@ fun ModalData.XFTPServerSummaryView(
 
 @Composable
 fun ModalData.ServersSummaryView(rh: RemoteHostInfo?, serversSummary: MutableState<PresentedServersSummary?>) {
-  ColumnWithScrollBar {
+  ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
     var showUserSelection by remember { mutableStateOf(false) }
     val selectedUserCategory =
       remember { stateGetOrPut("selectedUserCategory") { PresentedUserCategory.ALL_USERS } }

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/helpers/Section.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
@@ -34,6 +35,7 @@ val CARD_ITEM_PADDING = CARD_PADDING - 1.dp
 @Composable
 private fun CardColumnLayout(
   contentPadding: PaddingValues = PaddingValues(),
+  cardShape: Shape = SectionCardShape,
   content: @Composable () -> Unit
 ) {
   val dividerColor = canvasColorForCurrentTheme()
@@ -44,7 +46,7 @@ private fun CardColumnLayout(
     modifier = Modifier
       .padding(horizontal = CARD_PADDING)
       .fillMaxWidth()
-      .clip(SectionCardShape)
+      .clip(cardShape)
       .background(sectionCardColor())
       .padding(contentPadding)
       .drawBehind {
@@ -75,17 +77,18 @@ private fun CardColumnLayout(
 private fun CardColumn(
   card: Boolean,
   contentPadding: PaddingValues = PaddingValues(),
+  cardShape: Shape = SectionCardShape,
   content: @Composable () -> Unit
 ) {
   if (card) {
-    CardColumnLayout(contentPadding, content)
+    CardColumnLayout(contentPadding, cardShape, content)
   } else {
     Column(Modifier.padding(contentPadding).fillMaxWidth()) { content() }
   }
 }
 
 @Composable
-fun SectionView(title: String? = null, contentPadding: PaddingValues = PaddingValues(), headerBottomPadding: Dp = DEFAULT_PADDING, card: Boolean = false, content: (@Composable ColumnScope.() -> Unit)) {
+fun SectionView(title: String? = null, contentPadding: PaddingValues = PaddingValues(), headerBottomPadding: Dp = DEFAULT_PADDING, card: Boolean = false, cardShape: Shape = SectionCardShape, content: (@Composable ColumnScope.() -> Unit)) {
   Column {
     if (title != null) {
       Text(
@@ -95,7 +98,7 @@ fun SectionView(title: String? = null, contentPadding: PaddingValues = PaddingVa
         fontWeight = if (card) FontWeight.Medium else FontWeight.Normal
       )
     }
-    CardColumn(card, contentPadding) { content() }
+    CardColumn(card, contentPadding, cardShape) { content() }
   }
 }
 

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/ChooseServerOperators.kt

@@ -360,7 +360,7 @@ private fun enabledOperators(operators: List<ServerOperator>, selectedOperatorId
 
 @Composable
 private fun ChooseServerOperatorsInfoView() {
-  ColumnWithScrollBar {
+  ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
     AppBarTitle(stringResource(MR.strings.onboarding_network_operators))
 
     Column(

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/remote/ConnectDesktopView.kt

@@ -407,7 +407,7 @@ private fun DesktopAddressView(sessionAddress: MutableState<String>) {
 
 @Composable
 private fun LinkedDesktopsView(remoteCtrls: SnapshotStateList<RemoteCtrlInfo>) {
-  ColumnWithScrollBar {
+  ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
     AppBarTitle(stringResource(MR.strings.linked_desktops))
     SectionView(stringResource(MR.strings.desktop_devices), card = true) {
       remoteCtrls.forEach { rc ->

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/PrivacySettings.kt

@@ -561,7 +561,7 @@ fun SimplexLockView(
     }
   }
 
-  ColumnWithScrollBar {
+  ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
     AppBarTitle(stringResource(MR.strings.chat_lock))
     SectionView(card = true) {
       EnableLock(remember { appPrefs.performLA.state }) { performLAToggle ->

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/UserAddressView.kt

@@ -497,7 +497,7 @@ private fun ModalData.UserAddressSettings(
   }
 
   ModalView(close = { onClose(close) }) {
-    ColumnWithScrollBar {
+    ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
       AppBarTitle(stringResource(MR.strings.address_settings), hostDevice(user?.remoteHostId))
       Column(
         Modifier.fillMaxWidth().padding(bottom = DEFAULT_PADDING_HALF),

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/networkAndServers/NetworkAndServers.kt

@@ -465,7 +465,7 @@ fun SocksProxySettings(
       }
     },
   ) {
-    ColumnWithScrollBar {
+    ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
       AppBarTitle(generalGetString(MR.strings.network_socks_proxy_settings))
       SectionView(stringResource(MR.strings.network_socks_proxy), card = true) {
         Column(Modifier.padding(horizontal = DEFAULT_PADDING)) {

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/networkAndServers/OperatorView.kt

@@ -477,7 +477,7 @@ fun OperatorViewLayout(
 
 @Composable
 fun OperatorInfoView(serverOperator: ServerOperator) {
-  ColumnWithScrollBar {
+  ColumnWithScrollBar(Modifier.background(canvasColorForCurrentTheme())) {
     AppBarTitle(stringResource(MR.strings.operator_info_title))
 
     SectionView(card = true) {