[#16481] Fix unread badge in group chats (#16610)

* Small refactor & add customization color to `info-count` component
* Fix notification mark in group chats for no mentions, also notification alignment styles in the component
* Code style: `change > 0` for `pos?`

src/quo2/components/notifications/info_count.cljs

@@ -3,22 +3,27 @@
             [quo2.foundations.typography :as typography]
             [react-native.core :as rn]))
 
-(defn info-count
-  ([amount]
-   (info-count {} amount))
-  ([props amount]
-   (when (> amount 0)
-     [rn/view
-      (merge props
-             {:style (merge {:width            16
+(defn- counter-style
+  [customization-color overwritten-styles]
+  (merge {:width            16
           :height           16
           :position         :absolute
           :right            22
           :border-radius    6
           :justify-content  :center
           :align-items      :center
-                             :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
-                            (:style props))})
+          :background-color (colors/custom-color-by-theme customization-color 50 60)}
+         overwritten-styles))
+
+(defn info-count
+  ([amount]
+   (info-count {} amount))
+  ([{:keys [customization-color style]
+     :or   {customization-color :blue}
+     :as   props}
+    amount]
+   (when (pos? amount)
+     [rn/view (assoc props :style (counter-style customization-color style))
       [rn/text
        {:style (merge typography/font-medium
                       typography/label

src/status_im2/contexts/chat/home/chat_list_item/style.cljs

@@ -21,15 +21,31 @@
    :top              16
    :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})
 
-(def muted-icon
-  {:position :absolute
-   :right    19
-   :top      16})
-
 (defn timestamp
   [muted?]
-  {:color       (or (when muted?
-                      colors/neutral-50)
+  {:color       (if muted?
+                  colors/neutral-50
                   (colors/theme-colors colors/neutral-50 colors/neutral-40))
    :margin-top  3
    :margin-left 8})
+
+(def chat-data-container
+  {:flex         1
+   :margin-left  8
+   :margin-right 16})
+
+(def notification-container
+  {:margin-left     :auto
+   :height          20
+   :width           20
+   :justify-content :center
+   :align-items     :center})
+
+;; TODO: duplicate of `quo2.components.common.unread-grey-dot.style`
+;; Replace it when this component is defined as part of `quo2.components`
+(defn grey-dot
+  []
+  {:width            8
+   :height           8
+   :border-radius    4
+   :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

@@ -208,16 +208,42 @@
      {:color color
       :size  :medium}]))
 
+(defn notification
+  [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]
+  (let [customization-color (rf/sub [:profile/customization-color])
+        unread-messages?    (pos? unviewed-messages-count)
+        unread-mentions?    (pos? unviewed-mentions-count)]
+    [rn/view {:style style/notification-container}
+     (cond
+       muted
+       [icons/icon :i/muted {:color colors/neutral-40}]
+
+       (and group-chat unread-mentions?)
+       [quo/info-count
+        {:style               {:position :relative :right 0}
+         :customization-color customization-color
+         :accessibility-label :new-message-counter}
+        unviewed-mentions-count]
+
+       ;; TODO: use the grey-dot component when chat-list-item is moved to quo2.components
+       (and group-chat unread-messages?)
+       [rn/view {:style (style/grey-dot)}]
+
+       unread-messages?
+       [quo/info-count
+        {:style               {:position :relative :right 0}
+         :customization-color customization-color
+         :accessibility-label :new-message-counter}
+        unviewed-messages-count])]))
+
 (defn chat-list-item
-  [{:keys [chat-id group-chat color name unviewed-messages-count
-           timestamp last-message muted]
+  [{:keys [chat-id group-chat color name timestamp last-message muted]
     :as   item}]
   (let [display-name (if group-chat
                        name
                        (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
         contact      (when-not group-chat
-                             (rf/sub [:contacts/contact-by-address chat-id]))
-        show-unread-badge? (and (not muted) (> unviewed-messages-count 0))]
+                       (rf/sub [:contacts/contact-by-address chat-id]))]
     [rn/touchable-opacity
      {:style         (style/container)
       :on-press      (open-chat chat-id)
@@ -229,16 +255,7 @@
        :full-name display-name
        :color     color
        :muted?    muted}]
-     [rn/view {:style {:margin-left 8}}
+     [rn/view {:style style/chat-data-container}
       [name-view display-name contact timestamp muted]
       [last-message-preview group-chat last-message muted]]
-     (if-not muted
-       (when show-unread-badge?
-         [quo/info-count
-          {:style               {:top   16
-                                 :right 16}
-           :accessibility-label :new-message-counter}
-          unviewed-messages-count])
-       [icons/icon :i/muted
-        {:color           colors/neutral-40
-         :container-style style/muted-icon}])]))
+     [notification item]]))