[#16157] Pinned list button is absent when user is located at the top… (#16355)

ios/Podfile.lock

@@ -707,7 +707,7 @@ SPEC CHECKSUMS:
   FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
   FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 3a2d032685329b68abb308254142e4c875b6e40d
+  glog: d93527a855523adb8c113837db4be68fb00e230d
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -772,7 +772,7 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1
+  RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
@@ -787,4 +787,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: a7c3cb360cf217ab90667d67deeab588677d540a
 
-COCOAPODS: 1.12.0
+COCOAPODS: 1.12.1

src/quo2/components/community/channel_actions.cljs

@@ -0,0 +1,28 @@
+(ns quo2.components.community.channel-actions
+  (:require [react-native.core :as rn]
+            [quo2.components.icon :as icons]
+            [quo2.components.counter.counter :as counter]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.community.style :as style]))
+
+(defn channel-action
+  [{:keys [big? color label counter-value icon on-press accessibility-label]}]
+  [rn/touchable-opacity
+   {:on-press            on-press
+    :style               (style/channel-action-touch big?)
+    :accessibility-label accessibility-label}
+   [rn/view {:style (style/channel-action color)}
+    [rn/view {:style style/channel-action-row}
+     [icons/icon icon]
+     (when counter-value
+       [counter/counter {:type :secondary} counter-value])]
+    [text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
+
+(defn channel-actions
+  [{:keys [style actions]}]
+  [rn/view {:style (merge {:flex-direction :row :flex 1} style)}
+   (for [action actions]
+     [:<>
+      [channel-action action]
+      (when (not= action (last actions))
+        [rn/view {:width 16}])])])

src/quo2/components/community/style.cljs

@@ -1,13 +1,6 @@
 (ns quo2.components.community.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def category-item
-  {:flex           1
-   :flex-direction :row
-   :align-items    :center
-   :height         52
-   :padding-left   18})
-
 (defn community-card
   [radius]
   {:shadow-offset    {:width  0
@@ -126,11 +119,6 @@
    (when padding?
      {:padding-horizontal 12})))
 
-(def token-row-container
-  {:flex-direction :row
-   :align-items    :center
-   :margin-bottom  12})
-
 (defn token-row-or-text
   [padding?]
   (merge
@@ -148,3 +136,21 @@
                       colors/neutral-20
                       colors/neutral-80)})
 
+(defn channel-action-touch
+  [big?]
+  {:flex      1
+   :max-width (if big? 216 104)})
+
+(defn channel-action
+  [color]
+  {:padding          12
+   :height           102
+   :flex             1
+   :border-radius    16
+   :background-color (colors/custom-color color 50 10)
+   :justify-content  :space-between})
+
+(def channel-action-row
+  {:flex-direction  :row
+   :justify-content :space-between
+   :align-items     :center})

src/quo2/components/icon.cljs

@@ -12,11 +12,11 @@
            (not (string/blank? color)))))
 
 (defn memo-icon-fn
-  ([icon-name] (memo-icon-fn icon-name nil))
+  [icon-name
-  ([icon-name
    {:keys [color color-2 no-color
            container-style size accessibility-label]
-     :or   {accessibility-label :icon}}]
+    :or   {accessibility-label :icon}}
+   _]
   (let [size (or size 20)]
     ^{:key icon-name}
     (if-let [svg-icon (icons.svg/get-icon icon-name size)]
@@ -38,6 +38,11 @@
 
                container-style)
         :accessibility-label accessibility-label
-         :source (icons/icon-source (str (name icon-name) size))}]))))
+        :source (icons/icon-source (str (name icon-name) size))}])))
 
-(def icon (memoize memo-icon-fn))
+(def themed-icon (memoize memo-icon-fn))
+
+(defn icon
+  ([icon-name] (icon icon-name nil))
+  ([icon-name params]
+   (themed-icon icon-name params (colors/dark?))))

src/quo2/core.cljs

@@ -88,7 +88,8 @@
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view
     quo2.components.settings.settings-list.view
-    quo2.components.settings.reorder-item.view))
+    quo2.components.settings.reorder-item.view
+    quo2.components.community.channel-actions))
 
 (def text quo2.components.markdown.text/text)
 (def icon quo2.components.icon/icon)
@@ -155,6 +156,7 @@
 (def discover-card quo2.components.community.banner.view/view)
 (def community-icon quo2.components.community.icon/community-icon)
 (def token-requirement-list quo2.components.community.token-gating/token-requirement-list)
+(def channel-actions quo2.components.community.channel-actions/channel-actions)
 
 ;;;; COUNTER
 (def counter quo2.components.counter.counter/counter)

src/status_im2/contexts/chat/messages/list/style.cljs

@@ -28,8 +28,9 @@
   [cover-bg-color]
   {:flex             1
    :height           (+ overscroll-cover-height cover-height)
-   :background-color (colors/theme-colors (:light cover-bg-color)
+   :background-color (colors/theme-colors
-                                          (:dark cover-bg-color))})
+                      (colors/custom-color cover-bg-color 50 20)
+                      (colors/custom-color cover-bg-color 50 40))})
 
 (defn header-bottom-part
   [animation]

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

@@ -17,7 +17,8 @@
             [status-im2.contexts.chat.messages.list.style :as style]
             [status-im2.contexts.chat.messages.navigation.style :as navigation.style]
             [status-im2.contexts.chat.composer.constants :as composer.constants]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [utils.i18n :as i18n]))
 
 (defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
 (defonce ^:const loading-indicator-extra-spacing 250)
@@ -171,6 +172,23 @@
     platform/android?
     (assoc :scale-y -1)))
 
+(defn actions
+  [chat-id cover-bg-color]
+  (let [latest-pin-text (rf/sub [:chats/last-pinned-message-text chat-id])
+        pins-count      (rf/sub [:chats/pin-messages-count chat-id])]
+    [quo/channel-actions
+     {:style   {:margin-top 16}
+      :actions [{:accessibility-label :action-button-pinned
+                 :big?                true
+                 :label               (or latest-pin-text (i18n/label :t/no-pinned-messages))
+                 :color               cover-bg-color
+                 :icon                :i/pin
+                 :counter-value       pins-count
+                 :on-press            (fn []
+                                        (rf/dispatch [:dismiss-keyboard])
+                                        (rf/dispatch [:pin-message/show-pins-bottom-sheet
+                                                      chat-id]))}]}]))
+
 (defn f-list-footer
   [{:keys [chat scroll-y cover-bg-color on-layout shell-animation-complete?]}]
   (let [{:keys [chat-id chat-name emoji chat-type
@@ -213,7 +231,8 @@
           [contact-icon contact]]]
         (when bio
           [quo/text {:style style/bio}
-           bio])]]]
+           bio])
+        [actions chat-id cover-bg-color]]]]
      [loading-view chat-id shell-animation-complete?]]))
 
 (defn list-footer
@@ -224,7 +243,6 @@
   [{:keys [chat-id invitation-admin]}]
   [rn/view
    [chat.group/group-chat-footer chat-id invitation-admin]])
-
 (defn footer-on-layout
   [e]
   (let [height (oops/oget e "nativeEvent.layout.height")
@@ -302,8 +320,9 @@
                                          (on-scroll event)))
        :style                        (add-inverted-y-android
                                       {:background-color (if all-loaded?
-                                                           (colors/theme-colors (:light cover-bg-color)
+                                                           (colors/theme-colors
-                                                                                (:dark cover-bg-color))
+                                                            (colors/custom-color cover-bg-color 50 20)
+                                                            (colors/custom-color cover-bg-color 50 40))
                                                            (colors/theme-colors
                                                             colors/white
                                                             colors/neutral-95))})

src/status_im2/contexts/chat/messages/navigation/view.cljs

@@ -34,8 +34,8 @@
                                                          {:extrapolateLeft  "clamp"
                                                           :extrapolateRight "extend"})
         banner-opacity-animation (reanimated/interpolate scroll-y
-                                                         [(+ style/navigation-bar-height 50)
+                                                         [(+ style/navigation-bar-height 150)
-                                                          (+ style/navigation-bar-height 100)]
+                                                          (+ style/navigation-bar-height 200)]
                                                          [0 1]
                                                          {:extrapolateLeft  "clamp"
                                                           :extrapolateRight "extend"})
@@ -106,13 +106,9 @@
                                 (rf/dispatch [:show-bottom-sheet
                                               {:content (fn [] [actions/chat-actions chat true])}]))}
         [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]]
-
+      [:f>
-      [pin.banner/banner
+       pin.banner/f-banner
        {:chat-id           chat-id
         :opacity-animation banner-opacity-animation
         :all-loaded?       all-loaded?
         :top-offset        style/navigation-bar-height}]]]))
-
-(defn navigation-view
-  [props]
-  [:f> f-navigation-view props])

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

@@ -3,46 +3,20 @@
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
-            [status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]
             [status-im2.contexts.chat.messages.pin.banner.style :as style]
-            [status-im2.constants :as constants]
-            [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(defn message-text
-  [{:keys [content-type] :as message}]
-  (cond (= content-type constants/content-type-audio)
-        (i18n/label :audio-message)
-        :else
-        (get-in message [:content :parsed-text])))
-
 (defn f-blur-view
   [top-offset opacity-animation enabled?]
   [reanimated/view {:style (style/blur-container-style top-offset opacity-animation enabled?)}
    [blur/view (style/blur-view-style)]])
 
-(defn blur-view
-  [top-offset opacity-animation enabled?]
-  [:f> f-blur-view top-offset opacity-animation enabled?])
-
 (defn f-banner
   [{:keys [chat-id opacity-animation all-loaded? top-offset]}]
-  (let [pinned-message (rf/sub [:chats/last-pinned-message chat-id])
+  (let [latest-pin-text (rf/sub [:chats/last-pinned-message-text chat-id])
-        latest-pin-text (message-text pinned-message)
+        pins-count      (rf/sub [:chats/pin-messages-count chat-id])]
-        {:keys [deleted? deleted-for-me?]} pinned-message
-        pins-count (rf/sub [:chats/pin-messages-count chat-id])
-        latest-pin-text
-        (cond deleted? (i18n/label :t/message-deleted-for-everyone)
-              deleted-for-me? (i18n/label :t/message-deleted-for-you)
-              (#{constants/content-type-text
-                 constants/content-type-image
-                 constants/content-type-sticker
-                 constants/content-type-emoji}
-               (:content-type pinned-message))
-              (resolver/resolve-message latest-pin-text)
-              :else latest-pin-text)]
     [rn/view
-     [blur-view top-offset opacity-animation (> pins-count 0)]
+     [:f> f-blur-view top-offset opacity-animation (> pins-count 0)]
      [reanimated/view {:style (style/animated-pinned-banner top-offset all-loaded? opacity-animation)}
       [quo/banner
        {:latest-pin-text latest-pin-text
@@ -50,8 +24,3 @@
         :on-press        (fn []
                            (rf/dispatch [:dismiss-keyboard])
                            (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]]]))
-
-(defn banner
-  [props]
-  [:f> f-banner props])
-

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

@@ -1,7 +1,5 @@
 (ns status-im2.contexts.chat.messages.view
-  (:require [quo2.foundations.colors :as colors]
+  (:require [status-im2.contexts.chat.composer.view :as composer]
-            [re-frame.db]
-            [status-im2.contexts.chat.composer.view :as composer]
             [status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as
              contact-requests.bottom-drawer]
             [status-im2.contexts.chat.messages.list.view :as messages.list]
@@ -23,11 +21,11 @@
                 able-to-send-message?]
          :as   chat} (rf/sub [:chats/current-chat-chat-view])]
     [messages.list/messages-list
-     {:cover-bg-color {:light (colors/custom-color :turquoise 50 20)
+     {:cover-bg-color :turquoise
-                       :dark  (colors/custom-color :turquoise 50 40)}
       :chat           chat
       :header-comp    (fn [{:keys [scroll-y shared-all-loaded?]}]
-                        [messages.navigation/navigation-view
+                        [:f>
+                         messages.navigation/f-navigation-view
                          {:scroll-y           scroll-y
                           :shared-all-loaded? shared-all-loaded?}])
       :footer-comp    (fn [{:keys [insets]}]

src/status_im2/contexts/quo_preview/community/channel_actions.cljs

@@ -0,0 +1,30 @@
+(ns status-im2.contexts.quo-preview.community.channel-actions
+  (:require [react-native.core :as rn]
+            [quo2.components.community.channel-actions :as channel-actions]))
+
+(defn preview-channel-actions
+  []
+  [rn/view {:flex 1}
+   [rn/scroll-view {:style {:flex 1 :padding-horizontal 20}}
+    [channel-actions/channel-actions
+     {:actions [{:big?          true
+                 :label         "Pinned Messages"
+                 :color         :blue
+                 :icon          :i/pin
+                 :counter-value 0}]}]
+    [rn/view {:height 50}]
+    [channel-actions/channel-actions
+     {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
+                {:label "Mute chat" :color :blue :icon :i/muted}]}]
+
+    [rn/view {:height 50}]
+    [channel-actions/channel-actions
+     {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
+                {:label "Mute chat" :color :blue :icon :i/muted}]}]
+
+
+    [rn/view {:height 50}]
+    [channel-actions/channel-actions
+     {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
+                {:label "Mute chat" :color :blue :icon :i/muted}
+                {:label "Something else" :color :blue :icon :i/placeholder}]}]]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -96,7 +96,8 @@
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
     [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
-    [status-im2.contexts.quo-preview.keycard.keycard :as keycard]))
+    [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
+    [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
 
 (def screens-categories
   {:foundations           [{:name      :shadows
@@ -159,7 +160,11 @@
                            {:name      :token-gating
                             :options   {:insets {:bottom? true}
                                         :topBar {:visible true}}
-                            :component token-gating/preview-token-gating}]
+                            :component token-gating/preview-token-gating}
+                           {:name      :channel-actions
+                            :options   {:insets {:bottom? true}
+                                        :topBar {:visible true}}
+                            :component channel-actions/preview-channel-actions}]
    :counter               [{:name      :counter
                             :options   {:topBar {:visible true}}
                             :component counter/preview-counter}

src/status_im2/subs/chat/messages.cljs

@@ -4,7 +4,8 @@
             [status-im2.constants :as constants]
             [status-im2.contexts.chat.messages.list.events :as models.message-list]
             [utils.datetime :as datetime]
-            [utils.i18n :as i18n]))
+            [utils.i18n :as i18n]
+            [status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]))
 
 (defn intersperse-datemark
   "Reduce step which expects the input list of messages to be sorted by clock value.
@@ -182,6 +183,30 @@
  (fn [pin-messages _]
    (last pin-messages)))
 
+(defn message-text
+  [{:keys [content-type] :as message}]
+  (cond (= content-type constants/content-type-audio)
+        (i18n/label :audio-message)
+        :else
+        (get-in message [:content :parsed-text])))
+
+(re-frame/reg-sub
+ :chats/last-pinned-message-text
+ (fn [[_ chat-id]]
+   (re-frame/subscribe [:chats/last-pinned-message chat-id]))
+ (fn [pinned-message _]
+   (let [latest-pin-text                    (message-text pinned-message)
+         {:keys [deleted? deleted-for-me?]} pinned-message]
+     (cond deleted? (i18n/label :t/message-deleted-for-everyone)
+           deleted-for-me? (i18n/label :t/message-deleted-for-you)
+           (#{constants/content-type-text
+              constants/content-type-image
+              constants/content-type-sticker
+              constants/content-type-emoji}
+            (:content-type pinned-message))
+           (resolver/resolve-message latest-pin-text)
+           :else latest-pin-text))))
+
 (re-frame/reg-sub
  :chats/pin-messages-count
  (fn [[_ chat-id]]