Fix notification mark in group chats for no mentions

Also notification alignment styles in the component

Author: ulisesmac

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)
-                    (colors/theme-colors colors/neutral-50 colors/neutral-40))
+  {: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,40 @@
      {: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?    (> unviewed-messages-count 0)
+        unread-mentions?    (> unviewed-mentions-count 0)]
+    [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}
+        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}
+        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))]
+  (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]))]
     [rn/touchable-opacity
      {:style         (style/container)
       :on-press      (open-chat chat-id)
@@ -229,15 +253,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}}
-          unviewed-messages-count])
-       [icons/icon :i/muted
-        {:color           colors/neutral-40
-         :container-style style/muted-icon}])]))
+     [notification item]]))