Fix drawer message according to desings (#19056)

* fix: bottom-sheet's selected-item was not visible

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: drawer message spacings and removed emojis & identicon

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: bottom-sheet use-callback dependencies

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: added :profile/public-key sub

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* test: added :profile/public-key sub test

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: spacings & added reactions to message drawer

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

---------

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

src/status_im/common/bottom_sheet/view.cljs

@@ -66,26 +66,35 @@
            gradient-cover? customization-color hide-handle? blur-radius]
     :or   {border-radius 12}}]
   (let [theme                             (quo.theme/use-theme-value)
-        sheet-height                      (rn/use-ref-atom 0)
+        [sheet-height set-sheet-height]   (rn/use-state 0)
-        item-height                       (rn/use-ref-atom 0)
+        handle-sheet-height               (rn/use-callback (fn [e]
-        set-sheet-height                  (rn/use-callback #(reset! sheet-height (get-layout-height %)))
+                                                             (when (= sheet-height 0)
-        set-item-height                   (rn/use-callback #(reset! item-height (get-layout-height %)))
+                                                               (set-sheet-height
+                                                                (get-layout-height e))))
+                                                           [sheet-height])
+        [item-height set-item-height]     (rn/use-state 0)
+        handle-item-height                (rn/use-callback (fn [e]
+                                                             (when (= item-height 0)
+                                                               (set-item-height
+                                                                (get-layout-height e))))
+                                                           [item-height])
         {window-height :height}           (rn/get-window)
         bg-opacity                        (reanimated/use-shared-value 0)
         translate-y                       (reanimated/use-shared-value window-height)
-        sheet-gesture                     (get-sheet-gesture translate-y
+        sheet-gesture                     (rn/use-memo #(get-sheet-gesture translate-y
                                                                            bg-opacity
                                                                            window-height
                                                                            on-close)
-        selected-item-smaller-than-sheet? (< @item-height
+                                                       [window-height on-close])
+        selected-item-smaller-than-sheet? (< item-height
                                              (- window-height
-                                                @sheet-height
+                                                sheet-height
                                                 (:top insets)
                                                 (:bottom insets)
                                                 bottom-margin))
-        top                               (- window-height (:top insets) @sheet-height)
+        top                               (- window-height (:top insets) sheet-height)
         bottom                            (if selected-item-smaller-than-sheet?
-                                            (+ @sheet-height bottom-margin)
+                                            (+ sheet-height bottom-margin)
                                             (:bottom insets))
         sheet-max-height                  (- window-height (:top insets))
         content-padding-bottom            (or padding-bottom-override
@@ -123,11 +132,12 @@
            :overlay-color :transparent}])
        (when selected-item
          [rn/view
-          {:on-layout set-item-height
+          {:on-layout handle-item-height
-           :style (style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
+           :style
+           (style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
           [selected-item]])
        [rn/view
-        {:on-layout set-sheet-height
+        {:on-layout handle-sheet-height
          :style     (style/sheet-content {:theme          theme
                                           :shell?         shell?
                                           :padding-bottom content-padding-bottom})}

src/status_im/contexts/chat/messenger/messages/content/style.cljs

@@ -31,3 +31,7 @@
    :opacity            (if (and outgoing (= outgoing-status :sending))
                          0.5
                          1)})
+
+(def drawer-message-container
+  {:padding-top    4
+   :padding-bottom 8})

src/status_im/contexts/chat/messenger/messages/content/view.cljs

@@ -81,7 +81,7 @@
         contact             (rf/sub [:contacts/contact-by-address chat-id])
         photo-path          (when (seq (:images contact)) (rf/sub [:chats/photo-path chat-id]))
         customization-color (rf/sub [:profile/customization-color])
-        {:keys [public-key]} (rf/sub [:profile/profile])]
+        public-key          (rf/sub [:profile/public-key])]
     [quo/system-message
      {:type                type
       :timestamp           timestamp-str
@@ -278,14 +278,14 @@
        (fn []
          [rn/view
           {:pointer-events :none
-           :padding-top    4}
+           :style          style/drawer-message-container}
           [user-message-content
            {:message-data                 message-data
             :context                      context
             :keyboard-shown?              keyboard-shown?
-            :show-reactions? true
+            :in-reaction-and-action-menu? true
-            :show-user-info? true
+            :show-user-info?              false
-            :preview?        true}]]))}]))
+            :show-reactions?              true}]]))}]))
 
 (defn system-message?
   [content-type]

src/status_im/subs/profile.cljs

@@ -82,12 +82,20 @@
             :override-ring?  override-ring?
             :font-file       font-file}))}))))
 
+;; DEPRECATED
+;; use `:profile/public-key` instead
 (re-frame/reg-sub
  :multiaccount/public-key
  :<- [:profile/profile]
  (fn [{:keys [public-key]}]
    public-key))
 
+(re-frame/reg-sub
+ :profile/public-key
+ :<- [:profile/profile]
+ (fn [{:keys [public-key]}]
+   public-key))
+
 (re-frame/reg-sub
  :profile/webview-debug
  :<- [:profile/profile]

src/status_im/subs/profile_test.cljs

@@ -112,3 +112,9 @@
   (testing "returns the symbol of the user's selected currency"
     (swap! rf-db/app-db #(assoc % :profile/profile sample-profile))
     (is (match? "$" (rf/sub [sub-name])))))
+
+(h/deftest-sub :profile/public-key
+  [sub-name]
+  (testing "returns the user's public key"
+    (swap! rf-db/app-db #(assoc % :profile/profile sample-profile))
+    (is (match? (:public-key sample-profile) (rf/sub [sub-name])))))