[#16551] - shared community name in switcher (#16576)

* Fix community tag text ellipsis
* Fix channel card overflow and ellipsis in switcher

src/quo2/components/tags/context_tag/style.cljs

@@ -42,7 +42,14 @@
   (colors/theme-colors colors/neutral-100 colors/white override-theme))
 
 (def community-tag
-  {:padding-vertical 2})
+  {:padding-vertical 2
+   :padding-left     2})
+
+(def community-tag-text-container
+  {:margin-left    4
+   :flex           1
+   :flex-direction :row
+   :align-items    :center})
 
 (defn community-tag-text
   [override-theme]

src/quo2/components/tags/context_tag/view.cljs

@@ -1,10 +1,10 @@
 (ns quo2.components.tags.context-tag.view
-  (:require [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.avatars.group-avatar :as group-avatar]
+  (:require [quo2.components.avatars.group-avatar :as group-avatar]
+            [quo2.components.avatars.user-avatar.style :as user-avatar-style]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.components.tags.context-tag.style :as style]
-            [quo2.components.avatars.user-avatar.style :as user-avatar-style]
             [react-native.core :as rn]))
 
 (defn trim-public-key
@@ -40,31 +40,39 @@
     (trim-public-key public-key)]])
 
 (defn context-tag
-  [{:keys [text-style blur? no-avatar-placeholder?] :as params} photo name channel-name]
-  (let [text-params       {:weight :medium
-                           :size   :paragraph-2
-                           :style  (assoc text-style :justify-content :center)}
+  [{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text?]
+    :as   props}
+   photo
+   name
+   channel-name]
+  (let [text-props        {:weight          :medium
+                           :size            :paragraph-2
+                           :style           (assoc text-style :justify-content :center)
+                           :number-of-lines 1
+                           :ellipsize-mode  :tail}
         empty-photo?      (nil? photo)
         avatar-size       :xxs
         avatar-outer-size (get-in user-avatar-style/sizes [avatar-size :outer])]
-    [rn/view {:flex-direction :row}
-     [base-tag (assoc-in params [:style :padding-left] 3)
-      (if (and empty-photo? no-avatar-placeholder?)
-        [rn/view {:style {:width avatar-outer-size}}]
-        [user-avatar/user-avatar
-         {:full-name         name
-          :profile-picture   photo
-          :size              avatar-size
-          :status-indicator? false}])
-      [rn/view {:style style/context-tag-text-container}
-       [text/text text-params (str " " name)]
-       (when channel-name
-         [:<>
-          [icons/icon
-           :i/chevron-right
-           {:color (style/context-tag-icon-color blur?)
-            :size  16}]
-          [text/text text-params (str "# " channel-name)]])]]]))
+    [base-tag (update-in props [:style :padding-left] #(or % 3))
+     (if (and empty-photo? no-avatar-placeholder?)
+       [rn/view {:style {:width avatar-outer-size}}]
+       [user-avatar/user-avatar
+        {:full-name         name
+         :profile-picture   photo
+         :size              avatar-size
+         :status-indicator? false}])
+     [rn/view {:style (or text-container-style style/context-tag-text-container)}
+      (if ellipsize-text?
+        [rn/view {:style {:flex 1}}
+         [text/text text-props name]]
+        [text/text text-props (str " " name)])
+      (when channel-name
+        [:<>
+         [icons/icon
+          :i/chevron-right
+          {:color (style/context-tag-icon-color blur?)
+           :size  16}]
+         [text/text text-props (str "# " channel-name)]])]]))
 
 (defn user-avatar-tag
   [params username photo]
@@ -88,8 +96,10 @@
 (defn community-tag
   [avatar community-name {:keys [override-theme] :as params}]
   [context-tag
-   (merge {:style      style/community-tag
-           :text-style (style/community-tag-text override-theme)}
+   (merge {:style                style/community-tag
+           :text-style           (style/community-tag-text override-theme)
+           :text-container-style style/community-tag-text-container
+           :ellipsize-text?      true}
           params)
    avatar
    community-name])

src/status_im2/contexts/shell/jump_to/components/switcher_cards/style.cljs

@@ -46,21 +46,16 @@
 
 (defn content-container
   [new-notifications?]
-  {:position     :absolute
-   :max-width    (if new-notifications? 108 136)
-   :flex-shrink  1
-   :bottom       12
-   :margin-left  12
-   :margin-right (if new-notifications? 8 12)})
+  {:flex      1
+   :max-width (if new-notifications? 108 136)})
 
 (def notification-container
-  {:position        :absolute
+  {:margin-top      :auto
    :width           20
    :height          20
-   :bottom          12
-   :right           12
    :justify-content :center
-   :align-items     :center})
+   :align-items     :center
+   :margin-left     8})
 
 (def last-message-text
   {:color (:last-message-text-color colors-map)})
@@ -91,8 +86,23 @@
    :border-radius    4
    :background-color background-color})
 
+(def bottom-container
+  {:position        :absolute
+   :flex-direction  :row
+   :justify-content :space-between
+   :align-items     :flex-end
+   :bottom          12
+   :left            12
+   :right           12})
+
 ;; Supporting Components
 
+(def channel-card-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def channel-card-text-container {:flex 1})
+
 (def sticker
   {:width  24
    :height 24})

src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -13,10 +13,25 @@
             [status-im2.contexts.shell.jump-to.components.switcher-cards.style :as style]
             [status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]))
 
+(defn- channel-card
+  [{:keys [emoji channel-name customization-color] :as _community-channel}]
+  [rn/view style/channel-card-container
+   [quo/channel-avatar
+    {:emoji               emoji
+     :customization-color customization-color}]
+   [rn/view style/channel-card-text-container
+    [quo/text
+     {:size            :paragraph-2
+      :weight          :medium
+      :number-of-lines 1
+      :ellipsize-mode  :tail
+      :style           style/community-channel}
+     channel-name]]])
+
 (defn content-container
   [type
-   {:keys                             [content-type data new-notifications? color-50 community-info
-                                       community-channel]
+   {:keys                             [content-type data new-notifications? color-50
+                                       community-info community-channel]
     {:keys [text parsed-text source]} :data}]
   [rn/view {:style (style/content-container new-notifications?)}
    (case type
@@ -33,23 +48,10 @@
                               :override-theme :dark
                               :label          (i18n/label :t/kicked)}]
        (:count :permission) [:<>] ;; Add components for these cases
-
        nil)
 
      shell.constants/community-channel-card
-     [rn/view
-      {:style {:flex-direction :row
-               :align-items    :center}}
-      [quo/channel-avatar
-       {:emoji               (:emoji community-channel)
-        :customization-color color-50}]
-      [quo/text
-       {:size            :paragraph-2
-        :weight          :medium
-        :number-of-lines 1
-        :ellipsize-mode  :tail
-        :style           style/community-channel}
-       (:channel-name community-channel)]]
+     [channel-card (assoc community-channel :customization-color color-50)]
 
      (case content-type
        constants/content-type-text
@@ -102,12 +104,13 @@
      [quo/counter
       {:outline             false
        :override-text-color colors/white
-       :override-bg-color   color-60} counter-label]
+       :override-bg-color   color-60}
+      counter-label]
      [rn/view {:style (style/unread-dot color-60)}])])
 
 (defn bottom-container
   [type {:keys [new-notifications?] :as content}]
-  [:<>
+  [rn/view {:style style/bottom-container}
    [content-container type content]
    (when new-notifications?
      [notification-container content])])