ui: highlight the chat list filter button while this profile has unread

The unread filter button looked identical whether or not there was anything
to filter for, so nothing suggested that switching it on would show
something.

Tint it with the accent colour while the current profile's unread count is
above zero - the same per-profile count the profile picker shows - and give
it the pill the active state already draws, as a 12% accent fill behind a 40%
accent hairline ring. The three states then read as one progression: grey
strokes, accent strokes on a faint pill, solid accent pill when the filter is
on. Tinting alone was too easy to miss on 16sp strokes, and adding the pill
outline gives the change a shape rather than only a hue.

On iOS the ring comes from the SF Symbol variants, so the button steps
through line.3.horizontal.decrease, .circle and .circle.fill.

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

@@ -709,6 +709,7 @@ private fun BoxScope.unreadBadge(text: String? = "") {
 @Composable
 private fun ToggleFilterEnabledButton() {
   val showUnread = remember { chatModel.activeChatTagFilter }.value == ActiveFilter.Unread
+  val currentUserUnread = chatModel.users.any { it.user.activeUser && it.unreadCount > 0 }
 
   IconButton(onClick = {
     if (showUnread) {
@@ -718,14 +719,30 @@ private fun ToggleFilterEnabledButton() {
     }
   }) {
     val sp16 = with(LocalDensity.current) { 16.sp.toDp() }
+    val primary = MaterialTheme.colors.primary
+    val tint = when {
+      showUnread -> MaterialTheme.colors.background
+      currentUserUnread -> primary
+      else -> MaterialTheme.colors.secondary
+    }
+    val fill = when {
+      showUnread -> primary
+      currentUserUnread -> primary.copy(alpha = 0.12f)
+      else -> Color.Unspecified
+    }
+    val stroke = when {
+      showUnread -> primary
+      currentUserUnread -> primary.copy(alpha = 0.4f)
+      else -> Color.Unspecified
+    }
     Icon(
       painterResource(MR.images.ic_filter_list),
       null,
-      tint = if (showUnread) MaterialTheme.colors.background else MaterialTheme.colors.secondary,
+      tint = tint,
       modifier = Modifier
         .padding(3.dp)
-        .background(color = if (showUnread) MaterialTheme.colors.primary else Color.Unspecified, shape = RoundedCornerShape(50))
-        .border(width = 1.dp, color = if (showUnread) MaterialTheme.colors.primary else Color.Unspecified, shape = RoundedCornerShape(50))
+        .background(color = fill, shape = RoundedCornerShape(50))
+        .border(width = 1.dp, color = stroke, shape = RoundedCornerShape(50))
         .padding(3.dp)
         .size(sp16)
     )

apps/multiplatform/product/views/chat-list.md

@@ -44,7 +44,7 @@ The toolbar supports two layout modes controlled by `appPrefs.oneHandUI`:
 |---|---|
 | Search icon | Magnifying glass icon at leading edge |
 | Text field | `SearchTextField` with placeholder "Search or paste SimpleX link" |
-| Filter button | `ToggleFilterEnabledButton` (filter icon) toggles unread-only filter; shown when search text is empty |
+| Filter button | `ToggleFilterEnabledButton` (filter icon) toggles unread-only filter, highlighted while the current profile has unread; shown when search text is empty |
 | Clear button | Appears when text is entered; `BackHandler` clears search on back |
 
 Behavior: