[#10089] Override the behaviour of public chat' unread messages indicator

src/status_im/chat/models.cljs

@@ -124,7 +124,8 @@
   {:db (assoc-in db [:chats chat-id :unviewed-messages-count] 0)})
 
 (fx/defn handle-mark-all-read
-  {:events [:chat.ui/mark-all-read-pressed]}
+  {:events [:chat.ui/mark-all-read-pressed
+            :chat.ui/mark-public-all-read]}
   [{:keys [db] :as cofx} chat-id]
   {::json-rpc/call [{:method (json-rpc/call-ext-method "markAllRead")
                      :params [chat-id]

src/status_im/subs.cljs

@@ -846,13 +846,6 @@
        :empty
        :messages))))
 
-(re-frame/reg-sub
- :chats/unviewed-messages-count
- (fn [[_ chat-id]]
-   (re-frame/subscribe [:chats/chat chat-id]))
- (fn [{:keys [unviewed-messages-count]}]
-   unviewed-messages-count))
-
 (re-frame/reg-sub
  :chats/photo-path
  :<- [:contacts/contacts]
@@ -867,7 +860,9 @@
  :chats/unread-messages-number
  :<- [:chats/active-chats]
  (fn [chats _]
-   (apply + (map :unviewed-messages-count (vals chats)))))
+   (let [grouped-chats (group-by :public? (vals chats))]
+     {:public (apply + (map :unviewed-messages-count (get grouped-chats true)))
+      :other (apply + (map :unviewed-messages-count (get grouped-chats false)))})))
 
 (re-frame/reg-sub
  :chats/cooldown-enabled?

src/status_im/ui/components/tabbar/core.cljs

@@ -6,7 +6,6 @@
    [status-im.ui.components.react :as react]
    [status-im.utils.platform :as platform]
    [status-im.ui.components.icons.vector-icons :as vector-icons]
-   [status-im.ui.components.common.common :as components.common]
    [status-im.ui.components.badge :as badge]
    [status-im.i18n :as i18n]
    [re-frame.core :as re-frame]))
@@ -67,11 +66,16 @@
       [react/view
        {:style tabs.styles/icon-container}
        [vector-icons/icon icon (tabs.styles/icon active?)]
-       (when (pos? (if count @count 0))
+       (when count
-         [react/view {:style (if (= nav-stack :chat-stack)
+         (cond
-                               tabs.styles/message-counter
+           (or (pos? @count) (pos? (:other @count)))
-                               tabs.styles/counter)}
+           [react/view {:style (if (= nav-stack :chat-stack)
-          [badge/message-counter @count true]])]
+                                 tabs.styles/message-counter
+                                 tabs.styles/counter)}
+            [badge/message-counter (or (:other @count) @count) true]]
+           (pos? (:public @count))
+           [react/view {:style tabs.styles/counter-public-container}
+            [react/view {:style tabs.styles/counter-public}]]))]
       (when-not platform/desktop?
         [react/view {:style tabs.styles/tab-title-container}
          [react/text {:style (tabs.styles/new-tab-title active?)}

src/status_im/ui/components/tabbar/styles.cljs

@@ -46,6 +46,23 @@
    :top      0
    :position :absolute})
 
+(def counter-public-container
+  {:right            2
+   :top              0
+   :position         :absolute
+   :border-radius    8
+   :width            16
+   :height           16
+   :justify-content  :center
+   :align-items      :center
+   :background-color :white})
+
+(def counter-public
+  {:background-color colors/blue
+   :width            12
+   :border-radius    6
+   :height           12})
+
 ;; NOTE: Extra padding to allow badge width to be up to 42 (in case of 99+)
 ;; 42 Max allowed width, 24 icon width as per spec, 16 left pos as per spec.
 (def ^:private message-counter-left (+ (/ (- 42 24) 2) 16))

src/status_im/ui/screens/home/styles.cljs

@@ -23,6 +23,14 @@
    :color       colors/gray
    :desktop     {:max-height 20}})
 
+(def public-unread
+  {:background-color colors/blue
+   :border-radius    6
+   :margin-right     5
+   :margin-bottom    5
+   :width            12
+   :height           12})
+
 (def search-container
   (merge
    search-input.styles/search-container

src/status_im/ui/screens/home/views/inner_item.cljs

@@ -46,9 +46,11 @@
      (string/upper-case (time/to-short-str timestamp))]))
 
 (defview unviewed-indicator [chat-id]
-  (letsubs [unviewed-messages-count [:chats/unviewed-messages-count chat-id]]
+  (letsubs [{:keys [unviewed-messages-count public?]} [:chats/chat chat-id]]
     (when (pos? unviewed-messages-count)
-      [badge/message-counter unviewed-messages-count])))
+      (if public?
+        [react/view {:style styles/public-unread}]
+        [badge/message-counter unviewed-messages-count]))))
 
 (defn home-list-item [[_ home-item]]
   (let [{:keys
@@ -82,7 +84,9 @@
       :on-press                  #(do
                                     (re-frame/dispatch [:dismiss-keyboard])
                                     (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
-                                    (re-frame/dispatch [:chat.ui/mark-messages-seen :chat]))
+                                    (if public?
+                                      (re-frame/dispatch [:chat.ui/mark-public-all-read chat-id])
+                                      (re-frame/dispatch [:chat.ui/mark-messages-seen :chat])))
       :on-long-press             #(re-frame/dispatch [:bottom-sheet/show-sheet
                                                       {:content (fn []
                                                                   [sheets/actions home-item])