fix: adjust layout of home chat-list-item when displaying notificatio…

…n counter
status-im · Apr 1, 2024 · 5b40991 · 5b40991
1 parent 6322cea
commit 5b40991
Showing 1 changed file with 29 additions and 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
@@ -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]