fix bottom message hidden behind composer with minimised keyboard whe…

…n replying to message (#20371)

src/status_im/contexts/chat/messenger/composer/edit/view.cljs

@@ -12,7 +12,7 @@
     [utils.re-frame :as rf]))
 
 (defn edit-message
-  [{:keys [text-value input-ref]}]
+  [{:keys [text-value input-ref input-height]}]
   (let [theme (quo.theme/use-theme)]
     [rn/view
      {:style               style/container
@@ -32,7 +32,7 @@
       {:size                24
        :icon-only?          true
        :accessibility-label :edit-cancel-button
-       :on-press            #(utils/cancel-edit-message text-value input-ref)
+       :on-press            #(utils/cancel-edit-message text-value input-ref input-height)
        :type                :outline}
       :i/close]]))
 

src/status_im/contexts/chat/messenger/composer/utils.cljs

@@ -101,12 +101,16 @@
   (rf/dispatch [:chat.ui/cancel-message-reply]))
 
 (defn cancel-edit-message
-  [text-value input-ref]
+  [text-value input-ref input-height]
   (reset! text-value "")
   ;; NOTE: adding a timeout to assure the input is blurred on the next tick
   ;; after the `text-value` was cleared. Otherwise the height will be calculated
   ;; with the old `text-value`, leading to wrong composer height after blur.
-  (js/setTimeout #(blur-input input-ref) 100)
+  (js/setTimeout
+   (fn []
+     (blur-input input-ref)
+     (reanimated/set-shared-value input-height constants/input-height))
+   100)
   (.setNativeProps ^js @input-ref (clj->js {:text ""}))
   (rf/dispatch [:chat.ui/set-input-content-height constants/input-height])
   (rf/dispatch [:chat.ui/cancel-message-edit]))

src/status_im/contexts/chat/messenger/composer/view.cljs

@@ -105,8 +105,9 @@
         [:<>
          [reply/view state (:input-ref props)]
          [edit/view
-          {:text-value (:text-value state)
-           :input-ref  (:input-ref props)}]]
+          {:text-value   (:text-value state)
+           :input-height (:height animations)
+           :input-ref    (:input-ref props)}]]
         [reanimated/touchable-opacity
          {:active-opacity      1
           :on-press            (fn []

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

@@ -102,18 +102,43 @@
      ;; https://github.com/status-im/status-mobile/issues/17426
      [quo/skeleton-list (skeleton-list-props :messages parent-height platform/ios?)]]))
 
+(defn header-height
+  [{:keys [insets able-to-send-message? images reply edit link-previews? input-content-height]}]
+  (if able-to-send-message?
+    (cond-> composer.constants/composer-default-height
+      (ff/enabled? ::ff/shell.jump-to)
+      (+ jump-to.constants/floating-shell-button-height)
+
+      (seq images)
+      (+ composer.constants/images-container-height)
+
+      reply
+      (+ composer.constants/reply-container-height)
+
+      edit
+      (+ composer.constants/edit-container-height)
+
+      link-previews?
+      (+ composer.constants/links-container-height)
+
+      (and input-content-height (not= input-content-height composer.constants/input-height))
+      (+ composer.constants/input-height)
+
+      true
+      (+ (:bottom insets)))
+    (- 70 (:bottom insets))))
+
 (defn list-header
   [insets able-to-send-message?]
-  (let [images (rf/sub [:chats/sending-image])
-        height (if able-to-send-message?
-                 (+ composer.constants/composer-default-height
-                    (if (ff/enabled? ::ff/shell.jump-to)
-                      jump-to.constants/floating-shell-button-height
-                      0)
-                    (if (seq images) composer.constants/images-container-height 0)
-                    (:bottom insets))
-                 (- 70 (:bottom insets)))]
-    [rn/view {:style {:height height}}]))
+  (let [header-data {:insets                insets
+                     :able-to-send-message? able-to-send-message?
+                     :input-content-height  (:input-content-height (rf/sub [:chats/current-chat-input]))
+                     :images                (rf/sub [:chats/sending-image])
+                     :reply                 (rf/sub [:chats/reply-message])
+                     :edit                  (rf/sub [:chats/edit-message])
+                     :link-previews?        (or (rf/sub [:chats/link-previews?])
+                                                (rf/sub [:chats/status-link-previews?]))}]
+    [rn/view {:style {:height (header-height header-data)}}]))
 
 (defn list-footer-avatar
   [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color