rebase

src/quo2/components/list_items/menu_item.cljs

@@ -6,38 +6,50 @@
 
 (defn themes [type]
   (case type
-    :main     {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
-               :background (theme-colors colors/white colors/neutral-90)
-               :text-color (theme-colors colors/neutral-100 colors/white)}
-    :danger   {:icon-color (theme-colors colors/danger-50 colors/danger-60)
-               :background (theme-colors colors/white colors/neutral-90)
-               :text-color (theme-colors colors/danger-50 colors/danger-60)}))
+    :main {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
+           :background (theme-colors colors/white colors/neutral-90)
+           :text-color (theme-colors colors/neutral-100 colors/white)}
+    :danger {:icon-color (theme-colors colors/danger-50 colors/danger-60)
+             :background (theme-colors colors/white colors/neutral-90)
+             :text-color (theme-colors colors/danger-50 colors/danger-60)}))
 
 (defn menu-item
-  [{:keys [type title accessibility-label icon on-press]
+  [{:keys [type title description accessibility-label icon on-press arrow?]
     :or   {type :main}}]
   (let [{:keys [icon-color text-color background]} (themes type)]
     [rn/touchable-opacity
      (merge {:accessibility-label accessibility-label
-             :style {:background-color background
-                     :height 48
-                     :flex-direction :row
-                     :align-items :center}}
+             :style               {:background-color background
+                                   :height           48
+                                   :flex-direction   :row
+                                   :align-items      :center}}
             (when on-press
               {:on-press on-press}))
-     [rn/view {:style {:flex-direction :row
-                       :flex-grow      0
-                       :flex-shrink    1
-                       :padding-horizontal  20}}
-      [rn/view {:style {:width            20
-                        :height           20
-                        :align-items      :center
-                        :justify-content  :center
-                        :margin-right     12}}
+     [rn/view {:style {:flex-direction     :row
+                       :flex-grow          0
+                       :flex-shrink        1
+                       :padding-horizontal 20
+                       :align-items        :center}}
+      [rn/view {:style {:width           20
+                        :height          20
+                        :align-items     :center
+                        :justify-content :center
+                        :margin-right    12}}
        [icons/icon icon {:color icon-color}]]
-      [text/text {:weight              :medium
-                  :style               {:color text-color}
-                  :ellipsize-mode      :tail
-                  :number-of-lines     1
-                  :size                :paragraph-1}
-       title]]]))
+      [rn/view
+       [text/text {:weight          :medium
+                   :style           {:color text-color}
+                   :ellipsize-mode  :tail
+                   :number-of-lines 1
+                   :size            :paragraph-1}
+        title]
+       (when description
+         [text/text {:style           {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}
+                     :ellipsize-mode  :tail
+                     :number-of-lines 1
+                     :size            :label}
+          description])]]
+     (when arrow?
+       [rn/view {:style {:position :absolute
+                         :right    8}}
+        [icons/icon :main-icons2/chevron-right {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]])]))

src/status_im/ui2/screens/chat/components/chat_bottom_sheet/view.cljs

@@ -0,0 +1,81 @@
+(ns status-im.ui2.screens.chat.components.chat-bottom-sheet.view
+  (:require [status-im.i18n.i18n :as i18n]
+            [quo.react-native :as rn]
+            [status-im.ui2.screens.chat.messages.message :as message]
+            [quo2.components.drawers.action-drawers :as action-drawers]
+            [quo2.components.list-items.menu-item :as quo2.menu-item]
+            [status-im.utils.re-frame :as rf]))
+
+(defn hide-sheet-and-dispatch [event]
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch event))
+
+(defn chat-bottom-sheet [{:keys [chat-id group-chat]}]
+  [rn/view
+   (if group-chat
+     [quo2.menu-item/menu-item
+      {:type                :main
+       :title               (i18n/label :t/group-details)
+       :accessibility-label :group-details
+       :icon                :members
+       :on-press            #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}]
+     [quo2.menu-item/menu-item
+      {:type                :main
+       :title               (i18n/label :t/view-profile)
+       :accessibility-label :view-profile
+       :icon                :friend
+       :on-press            #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}])
+
+   [action-drawers/divider]
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/mark-as-read)
+     :accessibility-label :mark-as-read
+     :icon                :correct
+     :on-press            #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-pressed chat-id])}]
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/mute-chat)
+     :description         "Muted for 15 minutes"
+     :accessibility-label :mute-chat
+     :icon                :muted
+     :arrow?              true
+     :on-press            #(js/alert "TODO: mute chat")}] ; TODO: issue https://github.com/status-im/status-mobile/issues/14269
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/notifications)
+     :description         "Only @mentions"
+     :accessibility-label :notifications
+     :icon                :notifications
+     :arrow?              true
+     :on-press            #(js/alert "TODO: chat notifications")}]
+   (when group-chat
+     [quo2.menu-item/menu-item
+      {:type                :main
+       :title               (i18n/label :t/pinned-messages)
+       :accessibility-label :pinned-messages
+       :icon                :pin
+       :on-press            (fn []
+                              (rf/dispatch [:bottom-sheet/hide])
+                              (rf/dispatch [:bottom-sheet/show-sheet
+                                            {:content #(message/pinned-messages-list chat-id)}]))}])
+   [action-drawers/divider]
+   [quo2.menu-item/menu-item
+    {:type                :danger
+     :title               (i18n/label :t/clear-history)
+     :accessibility-label :clear-history
+     :icon                :delete
+     :on-press            #(rf/dispatch [:chat.ui/clear-history-pressed chat-id])}]
+   (if group-chat
+     [quo2.menu-item/menu-item
+      {:type                :danger
+       :title               (i18n/label :t/leave-and-delete-group)
+       :accessibility-label :leave-group
+       :icon                :log-out
+       :on-press            #(rf/dispatch [:group-chats.ui/leave-chat-pressed chat-id])}]
+     [quo2.menu-item/menu-item
+      {:type                :danger
+       :title               (i18n/label :t/delete-chat)
+       :accessibility-label :delete-chat
+       :icon                :delete
+       :on-press            #(rf/dispatch [:chat.ui/remove-chat-pressed chat-id])}])])

src/status_im/ui2/screens/chat/components/contact_bottom_sheet/view.cljs

@@ -0,0 +1,56 @@
+(ns status-im.ui2.screens.chat.components.contact-bottom-sheet.view
+  (:require [status-im.i18n.i18n :as i18n]
+            [quo.react-native :as rn]
+            [quo2.components.drawers.action-drawers :as action-drawers]
+            [quo2.components.list-items.menu-item :as quo2.menu-item]
+            [status-im.utils.re-frame :as rf]))
+
+(defn hide-sheet-and-dispatch [event]
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch event))
+
+(defn contact-bottom-sheet [{:keys [public-key] :as contact}]
+  [rn/view
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/view-profile)
+     :accessibility-label :view-profile
+     :icon                :profile
+     :on-press            #(hide-sheet-and-dispatch [:chat.ui/show-profile public-key])}]
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/remove-from-contacts)
+     :accessibility-label :remove-from-contacts
+     :icon                :remove-user
+     :on-press            #(hide-sheet-and-dispatch [:contact.ui/remove-contact-pressed contact])}]
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/rename)
+     :accessibility-label :rename
+     :icon                :edit
+     :on-press            #(js/alert "TODO: to be implemented, requires design input")}]
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/show-qr)
+     :accessibility-label :show-qr
+     :icon                :qr-code
+     :on-press            #(js/alert "TODO: to be implemented, requires design input")}]
+   [quo2.menu-item/menu-item
+    {:type                :main
+     :title               (i18n/label :t/share-profile)
+     :accessibility-label :share-profile
+     :icon                :share
+     :on-press            #(js/alert "TODO: to be implemented, requires design input")}]
+   [action-drawers/divider]
+   [quo2.menu-item/menu-item
+    {:type                :danger
+     :title               (i18n/label :t/mark-untrustworthy)
+     :accessibility-label :mark-untrustworthy
+     :icon                :alert
+     :on-press            #(js/alert "TODO: to be implemented, probably requires status-go impl. and design input")}]
+   [quo2.menu-item/menu-item
+    {:type                :danger
+     :title               (i18n/label :t/block-user)
+     :accessibility-label :block-user
+     :icon                :block
+     :on-press            #(js/alert "TODO: to be implemented, requires design input")}]])

src/status_im/ui2/screens/chat/components/contact_item/test.cljs

@@ -1,3 +0,0 @@
-(ns status-im.ui2.screens.chat.components.contact-item.test)
-
-;; TODO: tests to be added when RNTL is integrated into our project

src/status_im/ui2/screens/chat/components/contact_item/view.cljs

@@ -1,5 +1,5 @@
 (ns status-im.ui2.screens.chat.components.contact-item.view
-  (:require [status-im.utils.handlers :refer [<sub >evt]]
+  (:require [status-im.utils.re-frame :as rf]
             [quo2.foundations.typography :as typography]
             [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
@@ -8,22 +8,25 @@
             [status-im.utils.utils :refer [get-shortened-address]]
             [quo.platform :as platform]
             [quo2.components.markdown.text :as text]
+            [status-im.ui2.screens.chat.components.contact-bottom-sheet.view :as contact-bottom-sheet]
             [status-im.ui2.screens.chat.components.message-home-item.style :as style]))
 
 (defn open-chat [chat-id]
-  (>evt [:dismiss-keyboard])
+  (rf/dispatch [:dismiss-keyboard])
   (if platform/android?
-    (>evt [:chat.ui/navigate-to-chat-nav2 chat-id])
-    (>evt [:chat.ui/navigate-to-chat chat-id]))
-  (>evt [:search/home-filter-changed nil])
-  (>evt [:accept-all-activity-center-notifications-from-chat chat-id]))
+    (rf/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
+    (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))
+  (rf/dispatch [:search/home-filter-changed nil])
+  (rf/dispatch [:accept-all-activity-center-notifications-from-chat chat-id]))
 
 (defn contact-item [item]
   (let [{:keys [public-key ens-verified added? images]} item
-        display-name (first (<sub [:contacts/contact-two-names-by-identity public-key]))
-        photo-path   (if-not (empty? images) (<sub [:chats/photo-path public-key]) nil)]
-    [rn/touchable-opacity (merge {:style   (style/container)
-                                  :on-press #(open-chat public-key)})
+        display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))
+        photo-path   (if-not (empty? images) (rf/sub [:chats/photo-path public-key]) nil)]
+    [rn/touchable-opacity (merge {:style         (style/container)
+                                  :on-press      #(open-chat public-key)
+                                  :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
+                                                                {:content (fn [] [contact-bottom-sheet/contact-bottom-sheet item])}])})
      [user-avatar/user-avatar {:full-name         display-name
                                :profile-picture   photo-path
                                :status-indicator? true
@@ -41,11 +44,12 @@
          (when added?
            [rn/view {:style {:margin-left 5 :margin-top 4}}
             [icons/icon :main-icons2/contact {:no-color true :size 12 :color (colors/theme-colors colors/primary-50 colors/primary-60)}]]))]
-      [text/text {:size :paragraph-1
+      [text/text {:size  :paragraph-1
                   :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
        (get-shortened-address public-key)]]
      [rn/touchable-opacity {:style          {:position :absolute
                                              :right    20}
-                            :active-opacity 1} ; TODO: on-long-press to be added when contact bottom sheet is implemented
+                            :active-opacity 1
+                            :on-press       #(rf/dispatch [:bottom-sheet/show-sheet
+                                                           {:content (fn [] [contact-bottom-sheet/contact-bottom-sheet item])}])}
       [icons/icon :main-icons2/options {:size 20 :color (colors/theme-colors colors/primary-50 colors/primary-60)}]]]))
-

src/status_im/ui2/screens/chat/components/message_home_item/view.cljs

@@ -1,6 +1,6 @@
 (ns status-im.ui2.screens.chat.components.message-home-item.view
   (:require [clojure.string :as string]
-            [status-im.utils.handlers :refer [<sub >evt]]
+            [status-im.utils.re-frame :as rf]
             [status-im.utils.datetime :as time]
             [quo2.foundations.typography :as typography]
             [quo2.components.notifications.info-count :refer [info-count]]
@@ -8,7 +8,7 @@
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo.react-native :as rn]
-            [status-im.ui.screens.chat.sheets :as sheets]
+            [status-im.ui2.screens.chat.components.chat-bottom-sheet.view :as chat-bottom-sheet]
             [quo.platform :as platform]
             [quo2.components.markdown.text :as text]
             [status-im.ui2.screens.chat.components.message-home-item.style :as style]))
@@ -34,7 +34,7 @@
                   children)
 
                  "mention"
-                 {:components [rn/text (<sub [:contacts/contact-name-by-identity literal])]
+                 {:components [rn/text (rf/sub [:contacts/contact-name-by-identity literal])]
                   :length     4} ;; we can't predict name length so take the smallest possible
 
                  "status-tag"
@@ -74,31 +74,31 @@
    (if (:ens-verified contact)
      [rn/view {:style {:margin-left 5 :margin-top 4}}
       [icons/icon :main-icons2/verified {:no-color true
-                                         :size 12
-                                         :color (colors/theme-colors colors/success-50 colors/success-60)}]]
+                                         :size     12
+                                         :color    (colors/theme-colors colors/success-50 colors/success-60)}]]
      (when (:added? contact)
        [rn/view {:style {:margin-left 5 :margin-top 4}}
         [icons/icon :main-icons2/contact {:no-color true
-                                          :size 12
-                                          :color (colors/theme-colors colors/primary-50 colors/primary-60)}]]))
+                                          :size     12
+                                          :color    (colors/theme-colors colors/primary-50 colors/primary-60)}]]))
    [text/text {:style (style/timestamp)}
     (time/to-short-str timestamp)]])
 
 (defn messages-home-item [item]
   (let [{:keys [chat-id color group-chat last-message timestamp name unviewed-mentions-count unviewed-messages-count]} item
-        display-name (if-not group-chat (first (<sub [:contacts/contact-two-names-by-identity chat-id])) name)
-        contact      (when-not group-chat (<sub [:contacts/contact-by-address chat-id]))
-        photo-path   (when-not (empty? (:images contact)) (<sub [:chats/photo-path chat-id]))]
+        display-name (if-not group-chat (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) name)
+        contact      (when-not group-chat (rf/sub [:contacts/contact-by-address chat-id]))
+        photo-path   (when-not (empty? (:images contact)) (rf/sub [:chats/photo-path chat-id]))]
     [rn/touchable-opacity (merge {:style         (style/container)
                                   :on-press      (fn []
-                                                   (>evt [:dismiss-keyboard])
+                                                   (rf/dispatch [:dismiss-keyboard])
                                                    (if platform/android?
-                                                     (>evt [:chat.ui/navigate-to-chat-nav2 chat-id])
-                                                     (>evt [:chat.ui/navigate-to-chat chat-id]))
-                                                   (>evt [:search/home-filter-changed nil])
-                                                   (>evt [:accept-all-activity-center-notifications-from-chat chat-id]))
-                                  :on-long-press #(>evt [:bottom-sheet/show-sheet
-                                                         {:content (fn [] [sheets/actions item])}])})
+                                                     (rf/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
+                                                     (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))
+                                                   (rf/dispatch [:search/home-filter-changed nil])
+                                                   (rf/dispatch [:accept-all-activity-center-notifications-from-chat chat-id]))
+                                  :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
+                                                                {:content (fn [] [chat-bottom-sheet/chat-bottom-sheet item group-chat])}])})
      (if group-chat
        [rn/view {:style (style/group-chat-icon color)}
         [icons/icon :main-icons2/group {:size 16 :color colors/white-opa-70}]]
@@ -121,4 +121,3 @@
        (when (> unviewed-messages-count 0)
          [rn/view {:style (style/count-container)}]))]))
 
-

src/status_im/ui2/screens/chat/components/received_cr_item.cljs

@@ -74,4 +74,3 @@
                                                     :margin-left        8}}
         [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]]))
 
-

src/status_im/ui2/screens/chat/home.cljs

@@ -379,4 +379,3 @@
        [plus-button]]
       [chats-list]
       [tabbar/tabs-counts-subscriptions]])])
-

src/status_im/utils/re_frame.cljs

@@ -0,0 +1,6 @@
+(ns status-im.utils.re-frame
+  (:require [re-frame.core :as re-frame]))
+
+(def sub (comp deref re-frame/subscribe))
+
+(def dispatch re-frame/dispatch)

translations/en.json

@@ -88,6 +88,7 @@
     "blank-keycard-text": "You can proceed with your keycard once you've generated your keys and name",
     "blank-keycard-title": "Looks like you’ve tapped \na blank keycard",
     "block": "Block",
+    "block-user": "Block user",
     "unblock": "Unblock",
     "block-contact": "Block this user",
     "block-contact-details": "Blocking will delete this user's previous messages and stop new ones from reaching you",
@@ -1841,5 +1842,9 @@
     "pending-requests": "Pending requests",
     "received": "Received",
     "sent": "Sent",
-    "and": "and"
+    "and": "and",
+    "group-details": "Group details",
+    "leave-and-delete-group": "Leave and delete group",
+    "rename": "rename",
+    "mark-untrustworthy": "Mark as untrustworthy"
 }