change 9+ to actual count of unread messages

unread-messages-count fn, based off Maciej's comment on #6749

adding test, some difficulty running the test suite locally via clj

actually use the new functionality for displaying on desktop

first pass at updated styling for unread count chat icons

styling pass 2: finer attention to detail for the purple/blue icons

a bit more padding bloat to accomodate for the number 1, which occurs
frequently :)

remove counter from "home" icon on desktop

Signed-off-by: Vitaliy Vlasov <siphiuel@gmail.com>

src/status_im/ui/components/desktop/tabs.cljs

@@ -26,13 +26,6 @@
               :icon-active   :icons/profile-active}
     :count-subscription  :get-profile-unread-messages-number}])
 
-(defn- counter [cnt]
-  (let [[unviewed-messages-label large?] (if (< 9 cnt)
-                                           ["9+" true]
-                                           [cnt false])]
-    [react/view {:style tabs.styles/unread-messages-icon}
-     [react/text {:style (tabs.styles/unread-messages-text large?)} unviewed-messages-label]]))
-
 (defn- tab-content [{:keys [title icon-active icon-inactive]}]
   (fn [active? cnt]
     [react/view {:style tabs.styles/tab-container}
@@ -41,9 +34,7 @@
         [icons/icon icon {:style {:tint-color (if active? colors/blue colors/black)}}]])
      [react/view
       [react/text {:style (tabs.styles/tab-title active?)}
-       title]]
-     (when (pos? cnt)
-       [counter cnt])]))
+       title]]]))
 
 (def tabs-list-indexed (map-indexed vector (map #(update % :content tab-content) tabs-list-data)))
 

src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs

@@ -30,12 +30,11 @@
    :margin-right  16})
 
 (def unread-messages-icon
-  {:position         :absolute
-   :width            22
-   :height           22
-   :border-radius    22
-   :left             28
-   :top              10
+  {:padding-left     6
+   :padding-right    6
+   :margin-top       2
+   :height           15
+   :border-radius    8
    :justify-content  :center
    :align-items      :center
    :background-color colors/blue})

src/status_im/ui/screens/desktop/main/tabs/home/views.cljs

@@ -27,9 +27,7 @@
                   {:keys [content] :as last-message} [:chats/last-message chat-id]]
     (let [name (or chat-name
                    (gfycat/generate-gfy public-key))
-          [unviewed-messages-label large?] (if (< 9 unviewed-messages-count)
-                                             ["9+" true]
-                                             [unviewed-messages-count false])
+          [unviewed-messages-label large?] [(utils/unread-messages-count unviewed-messages-count) true]
           current? (= current-chat-id chat-id)]
       [react/view {:style (styles/chat-list-item current?)}
        [react/view {:style styles/img-container}
@@ -38,10 +36,7 @@
            [react/text {:style styles/topic-text}
             (string/capitalize (second name))]]
           [react/image {:style styles/chat-icon
-                        :source {:uri photo-path}}])
-        (when (pos? unviewed-messages-count)
-          [react/view {:style styles/unread-messages-icon}
-           [react/text {:style (styles/unread-messages-text large?)} unviewed-messages-label]])]
+                        :source {:uri photo-path}}])]
        [react/view {:style styles/chat-name-last-msg-box}
         [react/view {:style styles/chat-name-box}
          (when (and group-chat (not public?))
@@ -60,7 +55,10 @@
            (or (:text content)
                (i18n/label :no-messages-yet)))]]
        [react/view {:style styles/timestamp}
-        [chat-item/message-timestamp (:timestamp last-message)]]])))
+        [chat-item/message-timestamp (:timestamp last-message)]
+        (when (pos? unviewed-messages-count)
+          [react/view {:style styles/unread-messages-icon}
+           [react/text {:style (styles/unread-messages-text large?)} unviewed-messages-label]])]])))
 
 (defn chat-list-item [[chat-id
                        {:keys [group-chat public?] :as chat}]]

src/status_im/utils/utils.cljs

@@ -60,6 +60,18 @@
 (defn set-timeout [cb ms]
   (.setTimeout rn-dependencies/background-timer cb ms))
 
+(defn unread-messages-count
+  "display actual # if less than 1K, round to the lowest thousand if between 1 and 10K, otherwise 10K+ for anything larger"
+  [messages-count]
+  (let [round-to-lowest-single-thousand #(-> %
+                                             (/ 1000)
+                                             (Math/floor)
+                                             (str "K+"))]
+    (cond
+      (< messages-count 1000)        (str messages-count)
+      (<= 1000 messages-count 10000) (round-to-lowest-single-thousand messages-count)
+      (> messages-count 10000)       "10K+")))
+
 ;; same as re-frame dispatch-later but using background timer for long
 ;; running timeouts
 (re-frame/reg-fx

test/cljs/status_im/test/utils/utils.cljs

@@ -1,6 +1,7 @@
 (ns status-im.test.utils.utils
   (:require [cljs.test :refer-macros [deftest is]]
-            [status-im.utils.core :as u]))
+            [status-im.utils.core :as u]
+            [status-im.utils.utils :as uu]))
 
 (deftest truncate-str-test
   (is (= (u/truncate-str "Long string" 7) "Long...")) ; threshold is less then string length
@@ -8,6 +9,15 @@
   (is (= (u/truncate-str "Long string" 11) "Long string")) ; threshold is the same as string length
   (is (= (u/truncate-str "Long string" 20) "Long string"))) ; threshold is more then string length
 
+(deftest unread-messages-count-test
+  (is (= (uu/unread-messages-count 2) "2"))
+  (is (= (uu/unread-messages-count 12) "12"))
+  (is (= (uu/unread-messages-count 400) "400"))
+  (is (= (uu/unread-messages-count 1220) "1K+"))
+  (is (= (uu/unread-messages-count 4353) "4K+"))
+  (is (= (uu/unread-messages-count 4999) "4K+"))
+  (is (= (uu/unread-messages-count 11000) "10K+")))
+
 (deftest clean-text-test
   (is (= (u/clean-text "Hello! \n\r") "Hello!")
       (= (u/clean-text "Hello!") "Hello!")))