[#22404] [News Feed] Implement News AC component

Author: flexsurfer

resources/images/icons2/20x20/[email protected] renamed to resources/images/icons2/20x20/[email protected]

@@ -0,0 +1 @@
+(ns status-im.contexts.shell.activity-center.notification.news.style)

resources/images/icons2/20x20/[email protected] renamed to resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,95 @@
+(ns status-im.contexts.shell.activity-center.notification.news.view
+  (:require [promesa.core :as promesa]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.contexts.shell.activity-center.notification.common.view :as common]
+            [utils.datetime :as datetime]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn auto-resized-image
+  [{:keys [url]}]
+  (let [[height set-height] (rn/use-state nil)
+        window-width        (- (:width (rn/get-window)) 40)]
+    (rn/use-effect #(-> (rn/image-get-size url)
+                        (promesa/then (fn [[w h]]
+                                        (let [scale      (/ window-width w)
+                                              new-height (* h scale)]
+                                          (set-height new-height))))))
+    (if height
+      [rn/image
+       {:resize-mode :contain
+        :style       {:width         window-width
+                      :height        height
+                      :align-self    :center
+                      :border-radius 12}
+        :source      url}]
+      [rn/view {:style {:height 200 :align-items :center :justify-content :center}}
+       [rn/activity-indicator]])))
+
+(defn sheet
+  [{:keys [image title content link link-label]} timestamp]
+  (let [customization-color (rf/sub [:profile/customization-color])]
+    [:<>
+     [quo/drawer-top {:title title :description timestamp}]
+     [rn/scroll-view {:style {:flex 1}}
+      (when image
+        [auto-resized-image image])
+      [quo/text
+       {:style {:padding-horizontal 20
+                :padding-vertical   8}}
+       content]]
+     (when (and link link-label)
+       [quo/bottom-actions
+        {:button-one-label link-label
+         :button-one-props {:customization-color
+                            customization-color
+                            :icon-right :i/external
+                            :on-press
+                            (fn []
+                              (rf/dispatch [:hide-bottom-sheet]))}}])]))
+
+;;TODO REMOVE
+#_(rf/dispatch
+   [:activity-center.notifications/reconcile
+    [{:id 0x1
+      :timestamp (datetime/timestamp)
+      :type types/news-feed
+      :title "Swaps around the corner! Loooong Looong TITLE"
+      :description
+      "Status Mobile's next release brings the app up-to-speed with Status Desktop.\u2028That means: SWAPS!"
+      :content
+      "Philosophers meticulously investigate existential dilemmas, scrutinizing metaphysical concepts and epistemological theories, seeking profound insights into consciousness, morality, and the enigmatic nature of existence through rigorous intellectual contemplation and debate."
+      :link "https://our.status.im/"
+      :link-label "Let's go"
+      :image {:url "https://our.status.im/content/images/2025/03/Blog_-_cover_-_32.png"}}]])
+
+(defn view
+  [{:keys [notification extra-fn]}]
+  (let [customization-color                   (rf/sub [:profile/customization-color])
+        {:keys [title description timestamp]} notification
+        timestamp                             (datetime/timestamp->relative timestamp)]
+    [common/swipeable
+     {:left-button    common/swipe-button-read-or-unread
+      :left-on-press  common/swipe-on-press-toggle-read
+      :right-button   common/swipe-button-delete
+      :right-on-press common/swipe-on-press-delete
+      :extra-fn       extra-fn}
+     [quo/activity-log
+      {:title               title
+       :customization-color customization-color
+       :icon                :i/status-logo-bw
+       :timestamp           timestamp
+       :context             [[quo/text {} description]]
+       :items               [{:type                :button
+                              :subtype             :primary
+                              :key                 :button-reply
+                              :customization-color customization-color
+                              :label               (i18n/label :t/read-more)
+                              :accessibility-label :read-more
+                              :on-press            #(rf/dispatch
+                                                     [:show-bottom-sheet
+                                                      {:theme :dark
+                                                       :content
+                                                       (fn []
+                                                         [sheet notification timestamp])}])}]}]]))

src/status_im/contexts/shell/activity_center/notification/news/style.cljs

@@ -12,6 +12,7 @@
 (def ^:const contact-verification 10)
 (def ^:const new-installation-received 23)
 (def ^:const new-installation-created 24)
+(def ^:const news-feed 29)
 
 (def ^:const all-supported
   #{one-to-one-chat
@@ -24,7 +25,8 @@
     community-kicked
     contact-verification
     new-installation-received
-    new-installation-created})
+    new-installation-created
+    news-feed})
 
 ;; TODO: Replace with correct enum values once status-go implements them.
 (def ^:const tx 66612)

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

@@ -29,6 +29,11 @@
       :default-active      filter-type
       :data                [{:id    types/no-type
                              :label (i18n/label :t/all)}
+                            {:id                  types/news-feed
+                             :label               (i18n/label :t/news)
+                             :accessibility-label :tab-news
+                             :notification-dot?   (when-not is-mark-all-as-read-undoable?
+                                                    (contains? types-with-unread types/news-feed))}
                             {:id                  types/admin
                              :label               (i18n/label :t/admin)
                              :accessibility-label :tab-admin

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

@@ -18,6 +18,7 @@
      contact-verification]
     [status-im.contexts.shell.activity-center.notification.membership.view :as membership]
     [status-im.contexts.shell.activity-center.notification.mentions.view :as mentions]
+    [status-im.contexts.shell.activity-center.notification.news.view :as news]
     [status-im.contexts.shell.activity-center.notification.reply.view :as reply]
     [status-im.contexts.shell.activity-center.notification.syncing.view :as syncing]
     [status-im.contexts.shell.activity-center.style :as style]
@@ -55,6 +56,9 @@
        (= notification-type types/new-installation-created)
        [syncing/installation-created-view props]
 
+       (= notification-type types/news-feed)
+       [news/view props]
+
        (types/membership notification-type)
        (condp = notification-type
          types/private-group-chat [membership/view props]
@@ -69,7 +73,6 @@
 (defn view
   []
   (let [notifications    (rf/sub [:activity-center/notifications])
-
         ;; We globally control the active swipeable for all notifications
         ;; because when a swipe left/right gesture initiates, the previously
         ;; active swiped notification (if any) must be removed & closed with

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

@@ -1793,6 +1793,7 @@
   "new-tab": "New tab",
   "new-to-status": "I’m new to Status",
   "new-ui": "New UI",
+  "news": "News",
   "next": "Next",
   "next-you-will": "Next, you will be asked to confirm the position of certain words in your recovery phrase",
   "NFT": "NFT",