From 5b40991722c8f0f5137c6ab7f89b5a52ff3d6b14 Mon Sep 17 00:00:00 2001
From: Sean Hagstrom <sean@seanhagstrom.com>
Date: Mon, 1 Apr 2024 13:35:17 +0100
Subject: [PATCH] fix: adjust layout of home chat-list-item when displaying
 notification counter

---
 .../chat/home/chat_list_item/view.cljs        | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/status_im/contexts/chat/home/chat_list_item/view.cljs b/src/status_im/contexts/chat/home/chat_list_item/view.cljs
index 6b0454201ead..351b9d6545bb 100644
--- a/src/status_im/contexts/chat/home/chat_list_item/view.cljs
+++ b/src/status_im/contexts/chat/home/chat_list_item/view.cljs
@@ -184,38 +184,44 @@
      {:customization-color color
       :size                :size-32}]))
 
+(defn- notification-layout
+  [child]
+  (when (seq child)
+    [rn/view
+     {:style {:flex-grow       1
+              :justify-content :center
+              :margin-left     8}}
+     (into [rn/view {:style style/notification-container}] [child])]))
+
 (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 {:flex-grow 1
-                      :justify-content :center
-                      :margin-left 8}}
-     [rn/view {:style style/notification-container}
-      (cond
-        muted
-        [quo/icon :i/muted {:color colors/neutral-40}]
+    [notification-layout
+     (cond
+       muted
+       [quo/icon :i/muted {:color colors/neutral-40}]
 
-        (and group-chat unread-mentions?)
-        [quo/counter
-         {:container-style     {:position :relative :right 0}
-          :customization-color customization-color
-          :accessibility-label :new-message-counter}
-         unviewed-mentions-count]
+       (and group-chat unread-mentions?)
+       [quo/counter
+        {:container-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 quo.components
-        (and group-chat unread-messages?)
-        [rn/view
-         {:style               (style/grey-dot)
-          :accessibility-label :unviewed-messages-public}]
+       (and group-chat unread-messages?)
+       [rn/view
+        {:style               (style/grey-dot)
+         :accessibility-label :unviewed-messages-public}]
 
-        unread-messages?
-        [quo/counter
-         {:container-style     {:position :relative :right 0}
-          :customization-color customization-color
-          :accessibility-label :new-message-counter}
-         unviewed-messages-count])]]))
+       unread-messages?
+       [quo/counter
+        {:container-style     {:position :relative :right 0}
+         :customization-color customization-color
+         :accessibility-label :new-message-counter}
+        unviewed-messages-count])]))
 
 (defn chat-item
   [{:keys [chat-id group-chat color name last-message timestamp muted]