feat(Activity Center): Add support for preview images in chat mentions (#21150)

* fix `clojure.core/type` shadowed

* Remove comment about rn/delay-render

src/status_im/contexts/shell/activity_center/notification/mentions/view.cljs

@@ -9,25 +9,45 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
+(defn- mention-text
+  [literal]
+  (let [mention (rf/sub [:messages/resolve-mention literal])]
+    [quo/text
+     {:style style/mention-text
+      :size  :paragraph-1}
+     (str "@" mention)]))
+
+(defn- parsed-text->hiccup
+  [{:keys [literal destination] message-type :type}]
+  (case message-type
+    "mention" [mention-text literal]
+    "link"    destination
+    literal))
+
 (defn- message-body
-  [message]
+  [{:keys [container parsed-text]}]
-  (let [parsed-text          (get-in message [:content :parsed-text])
+  (into container (map parsed-text->hiccup) parsed-text))
-        parsed-text-children (:children (first parsed-text))]
+
-    (into [quo/text
+(defn- simple-message
+  [content]
+  (let [parsed-text (get-in content [:content :parsed-text 0 :children])]
+    [message-body
+     {:container   [quo/text
                     {:number-of-lines     1
                      :style               style/tag-text
                      :accessibility-label :activity-message-body
                      :size                :paragraph-1}]
-          (map-indexed (fn [index {:keys [type literal destination]}]
+      :parsed-text parsed-text}]))
-                         ^{:key index}
+
-                         (case type
+(defn- album-message
-                           "mention" [quo/text
+  [content]
-                                      {:style style/mention-text
+  (let [parsed-text (get-in content [0 :parsedText 0 :children])
-                                       :size  :paragraph-1}
+        images      (map :image content)]
-                                      (str "@" (rf/sub [:messages/resolve-mention literal]))]
+    [quo/activity-logs-photos
-                           "link"    destination
+     {:photos       images
-                           literal))
+      :message-text [message-body
-                       parsed-text-children))))
+                     {:container   [:<>]
+                      :parsed-text parsed-text}]}]))
 
 (defn- swipeable
   [{:keys [extra-fn]} child]
@@ -41,8 +61,8 @@
 
 (defn view
   [{:keys [notification extra-fn]}]
-  (let [{:keys [author chat-name community-id chat-id
+  (let [{:keys [author chat-name community-id chat-id message read timestamp
-                message read timestamp]} notification
+                album-messages]} notification
         community-chat?          (not (string/blank? community-id))
         community-name           (rf/sub [:communities/name community-id])
         community-logo           (rf/sub [:communities/logo community-id])
@@ -74,4 +94,6 @@
                                   :group-name chat-name
                                   :blur?      true
                                   :size       24}])]
-        :message             {:body (message-body message)}}]]]))
+        :message             {:body (if album-messages
+                                      [album-message album-messages]
+                                      [simple-message message])}}]]]))

src/status_im/contexts/shell/activity_center/view.cljs

@@ -24,35 +24,32 @@
     [utils.re-frame :as rf]))
 
 (defn notification-component
-  [{:keys [type] :as notification} index]
+  [{notification-type :type :as notification} index]
   (let [extra-fn (rn/use-callback
                   (fn []
                     {:notification notification})
                   [notification])
         props    {:notification notification
                   :extra-fn     extra-fn}]
-    ;; Notifications are expensive to render. Without `delay-render` the opening
-    ;; animation of the Activity Center can be clunky and the time to open the
-    ;; AC after pressing the bell icon can be high.
     [rn/view {:style (style/notification-container index)}
      (cond
-       (= type types/contact-verification)
+       (= notification-type types/contact-verification)
        [contact-verification/view props]
 
-       (= type types/contact-request)
+       (= notification-type types/contact-request)
        [contact-requests/view props]
 
-       (= type types/mention)
+       (= notification-type types/mention)
        [mentions/view props]
 
-       (= type types/reply)
+       (= notification-type types/reply)
        [reply/view props]
 
-       (= type types/admin)
+       (= notification-type types/admin)
        [admin/view props]
 
-       (some types/membership [type])
+       (types/membership notification-type)
-       (condp = type
+       (condp = notification-type
          types/private-group-chat [membership/view props]
          types/community-request  [community-request/view props]
          types/community-kicked   [community-kicked/view props]