Scrollable list of pinned messages (#15506)

* Scrollable list of pinned messages

* e2e: fix accessibility id

---------

Co-authored-by: pavloburykh <pavlo@status.im>

src/status_im2/common/bottom_sheet/sheets.cljs

@@ -7,7 +7,7 @@
             [status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
             [status-im.ui.screens.multiaccounts.recover.views :as recover.views]
             [status-im2.common.bottom-sheet.view :as bottom-sheet]
-            [status-im2.contexts.chat.messages.pin.list.view :as pin.list]
+            [status-im2.contexts.chat.menus.pinned-messages.view :as pinned-messages-menu]
             [react-native.core :as rn]))
 
 (defn bottom-sheet
@@ -50,7 +50,8 @@
           (merge key-storage/migrate-account-password)
 
           (= view :pinned-messages-list)
-          (merge {:content pin.list/pinned-messages-list}))]
+          (merge {:content                   pinned-messages-menu/pinned-messages
+                  :bottom-safe-area-spacing? false}))]
     [:f>
      (fn []
        (rn/use-effect (fn []

src/status_im2/contexts/chat/menus/pinned_messages/style.cljs

@@ -0,0 +1,44 @@
+(ns status-im2.contexts.chat.menus.pinned-messages.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def heading
+  {:margin-horizontal 20})
+
+(def heading-container
+  {:flex-direction    :row
+   :background-color  (colors/theme-colors colors/neutral-10 colors/neutral-80)
+   :border-radius     20
+   :align-items       :center
+   :align-self        :flex-start
+   :margin-horizontal 20
+   :padding           4
+   :margin-top        8})
+
+(def heading-text
+  {:margin-left  6
+   :margin-right 4})
+
+(def chat-name-text
+  {:margin-left  4
+   :margin-right 8})
+
+(defn list-footer
+  [bottom-inset]
+  {:height bottom-inset})
+
+(defn no-pinned-messages-container
+  [bottom-inset]
+  {:justify-content :center
+   :align-items     :center
+   :margin-top      20
+   :margin-bottom   bottom-inset})
+
+(def no-pinned-messages-icon
+  {:width           120
+   :height          120
+   :justify-content :center
+   :align-items     :center
+   :border-width    1})
+
+(def no-pinned-messages-text
+  {:margin-top 20})

src/status_im2/contexts/chat/menus/pinned_messages/view.cljs

@@ -0,0 +1,73 @@
+(ns status-im2.contexts.chat.menus.pinned-messages.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
+            [status-im2.contexts.chat.messages.content.view :as message]
+            [status-im2.contexts.chat.menus.pinned-messages.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(def list-key-fn #(or (:message-id %) (:value %)))
+
+(defn message-render-fn
+  [{:keys [deleted? deleted-for-me?] :as message} _ _ context]
+  ;; TODO (flexsurfer) probably we don't want reactions here
+  (if (or deleted? deleted-for-me?)
+    [content.deleted/deleted-message message context]
+    [message/message-with-reactions message context]))
+
+(defn pinned-messages
+  [chat-id]
+  (let [pinned-messages        (rf/sub [:chats/pinned-sorted-list chat-id])
+        render-data            (rf/sub [:chats/current-chat-message-list-view-context :in-pinned-view])
+        current-chat           (rf/sub [:chat-by-id chat-id])
+        {:keys [community-id]} current-chat
+        community              (rf/sub [:communities/community community-id])]
+    [safe-area/consumer
+     (fn [insets]
+       [:f>
+        (fn []
+          (let [{window-height :height} (rn/use-window-dimensions)
+                bottom-inset            (:bottom insets)]
+            [rn/scroll-view
+             {:style               {:max-height (- window-height (:top insets))}
+              :accessibility-label :pinned-messages-menu}
+             [:<>
+              [quo/text
+               {:size   :heading-1
+                :weight :semi-bold
+                :style  style/heading}
+               (i18n/label :t/pinned-messages)]
+              (when community
+                [rn/view
+                 {:style style/heading-container}
+                 [rn/text {:style style/heading-text} (:name community)]
+                 [quo/icon
+                  :i/chevron-right
+                  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
+                   :size  12}]
+                 [rn/text
+                  {:style style/chat-name-text}
+                  (str "# " (:chat-name current-chat))]])]
+             (if (pos? (count pinned-messages))
+               [rn/flat-list
+                {:data        pinned-messages
+                 :render-data render-data
+                 :render-fn   message-render-fn
+                 :footer      [rn/view {:style (style/list-footer bottom-inset)}]
+                 :key-fn      list-key-fn
+                 :separator   quo/separator}]
+               [rn/view {:style (style/no-pinned-messages-container bottom-inset)}
+                [rn/view {:style style/no-pinned-messages-icon}
+                 [quo/icon :i/placeholder]]
+                [quo/text
+                 {:weight :semi-bold
+                  :style  style/no-pinned-messages-text}
+                 (i18n/label :t/no-pinned-messages)]
+                [quo/text {:size :paragraph-2}
+                 (i18n/label
+                  (if community
+                    :t/no-pinned-messages-community-desc
+                    :t/no-pinned-messages-desc))]])]))])]))

src/status_im2/contexts/chat/messages/pin/list/view.cljs

@@ -1,77 +0,0 @@
-(ns status-im2.contexts.chat.messages.pin.list.view
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
-            [status-im2.contexts.chat.messages.content.view :as message]
-            [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
-
-(def list-key-fn #(or (:message-id %) (:value %)))
-
-(defn message-render-fn
-  [{:keys [deleted? deleted-for-me?] :as message} _ _ context]
-  ;; TODO (flexsurfer) probably we don't want reactions here
-  (if (or deleted? deleted-for-me?)
-    [content.deleted/deleted-message message context]
-    [message/message-with-reactions message context]))
-
-(defn pinned-messages-list
-  [chat-id]
-  (let [pinned-messages        (rf/sub [:chats/pinned-sorted-list chat-id])
-        render-data            (rf/sub [:chats/current-chat-message-list-view-context :in-pinned-view])
-        current-chat           (rf/sub [:chat-by-id chat-id])
-        {:keys [community-id]} current-chat
-        community              (rf/sub [:communities/community community-id])]
-    [rn/view {:accessibility-label :pinned-messages-list}
-     ;; TODO (flexsurfer) this should be a component in quo2
-     ;; https://github.com/status-im/status-mobile/issues/14529
-     [:<>
-      [quo/text
-       {:size   :heading-1
-        :weight :semi-bold
-        :style  {:margin-horizontal 20}}
-       (i18n/label :t/pinned-messages)]
-      (when community
-        [rn/view
-         {:style {:flex-direction    :row
-                  :background-color  (colors/theme-colors colors/neutral-10 colors/neutral-80)
-                  :border-radius     20
-                  :align-items       :center
-                  :align-self        :flex-start
-                  :margin-horizontal 20
-                  :padding           4
-                  :margin-top        8}}
-         [rn/text {:style {:margin-left 6 :margin-right 4}} (:name community)]
-         [quo/icon
-          :i/chevron-right
-          {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
-           :size  12}]
-         [rn/text
-          {:style {:margin-left  4
-                   :margin-right 8}}
-          (str "# " (:chat-name current-chat))]])]
-     (if (pos? (count pinned-messages))
-       [rn/flat-list
-        {:data        pinned-messages
-         :render-data render-data
-         :render-fn   message-render-fn
-         :key-fn      list-key-fn
-         :separator   quo/separator}]
-       [rn/view
-        {:style {:justify-content :center
-                 :align-items     :center
-                 :margin-top      20}}
-        [rn/view
-         {:style {:width           120
-                  :height          120
-                  :justify-content :center
-                  :align-items     :center
-                  :border-width    1}} [quo/icon :i/placeholder]]
-        [quo/text
-         {:weight :semi-bold
-          :style  {:margin-top 20}}
-         (i18n/label :t/no-pinned-messages)]
-        [quo/text {:size :paragraph-2}
-         (i18n/label
-          (if community :t/no-pinned-messages-community-desc :t/no-pinned-messages-desc))]])]))

test/appium/views/chat_view.py

@@ -637,7 +637,7 @@ class UnpinMessagePopUp(BaseElement):
 
 class PinnedMessagesList(BaseElement):
     def __init__(self, driver):
-        super().__init__(driver, xpath="//*[@content-desc='pinned-messages-list']")
+        super().__init__(driver, xpath="//*[@content-desc='pinned-messages-menu']")
 
     def get_pinned_messages_number(self):
         self.driver.info("Getting number of pinned messages inside pinned messages list element")