Add "all" tab to ReactionViewer

_locales/en/messages.json

@@ -2190,5 +2190,9 @@
   "Reactions--error": {
     "message": "Failed to send reaction. Please try again.",
     "description": "Shown when a reaction fails to send"
+  },
+  "ReactionsViewer--all": {
+    "message": "All",
+    "description": "Shown in reaction viewer as the title for the 'all' category"
   }
 }

stylesheets/_modules.scss

@@ -4871,7 +4871,7 @@ button.module-image__border-overlay:focus {
   &__header {
     width: 100%;
     min-height: 44px;
-    padding: 0px 16px;
+    padding: 0px 8px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -4879,14 +4879,15 @@ button.module-image__border-overlay:focus {
     overflow-x: auto;
 
     &__button {
-      min-width: 45px;
       min-height: 28px;
       border: none;
       border-radius: 18px;
-      padding: 0px;
+      padding: 0px 8px;
       display: flex;
       justify-content: center;
       align-items: center;
+      flex-basis: 45px;
+      flex-shrink: 0;
 
       &:not(:first-of-type) {
         margin-left: 4px;
@@ -4913,9 +4914,11 @@ button.module-image__border-overlay:focus {
         }
       }
 
-      &__count {
+      &__count,
+      &__all {
         @include font-body-2-bold();
-        margin-left: 2px;
+
+        white-space: nowrap;
 
         @include light-theme() {
           color: $color-gray-90;
@@ -4925,6 +4928,10 @@ button.module-image__border-overlay:focus {
           color: $color-gray-05;
         }
       }
+
+      &__count {
+        margin-left: 4px;
+      }
     }
   }
 
@@ -4934,19 +4941,25 @@ button.module-image__border-overlay:focus {
     overflow: auto;
 
     &__row {
-      margin-top: 8px;
+      margin-top: 12px;
       min-height: 32px;
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
 
+      &:last-of-type {
+        margin-bottom: 12px;
+      }
+
       &__avatar {
         min-width: 32px;
+        flex-shrink: 1;
       }
 
       &__name {
         @include font-body-1-bold();
+        flex-grow: 1;
         margin-left: 8px;
         white-space: nowrap;
         overflow: hidden;
@@ -4960,6 +4973,11 @@ button.module-image__border-overlay:focus {
           color: $color-gray-05;
         }
       }
+
+      &__emoji {
+        width: 18px;
+        flex-shrink: 1;
+      }
     }
   }
 }

ts/components/conversation/ReactionViewer.tsx

@@ -37,8 +37,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
     const grouped = mapValues(groupBy(reactions, 'emoji'), res =>
       orderBy(res, ['timestamp'], ['desc'])
     );
-    const filtered = emojisOrder.filter(e => Boolean(grouped[e]));
-    const [selected, setSelected] = React.useState(filtered[0]);
+    const [selected, setSelected] = React.useState('all');
     const focusRef = React.useRef<HTMLButtonElement>(null);
 
     // Handle escape key
@@ -65,7 +64,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
       const emojiSet = new Set<string>();
       reactions.forEach(re => emojiSet.add(re.emoji));
 
-      return sortBy(Array.from(emojiSet), emoji => {
+      const arr = sortBy(Array.from(emojiSet), emoji => {
         const idx = emojisOrder.indexOf(emoji);
         if (idx > -1) {
           return idx;
@@ -73,6 +72,12 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
 
         return Infinity;
       });
+
+      return ['all', ...arr];
+    }, [reactions]);
+
+    const allSorted = React.useMemo(() => {
+      return sortBy(reactions, 'timestamp');
     }, [reactions]);
 
     // If we have previously selected a reaction type that is no longer present
@@ -90,36 +95,46 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
       }
     }, [grouped, onClose, renderedEmojis, selected, setSelected]);
 
-    const selectedReactions = grouped[selected] || [];
+    const selectedReactions = grouped[selected] || allSorted;
 
     return (
       <div {...rest} ref={ref} className="module-reaction-viewer">
         <header className="module-reaction-viewer__header">
-          {renderedEmojis
-            .filter(e => Boolean(grouped[e]))
-            .map((emoji, index) => {
-              const re = grouped[emoji];
+          {...renderedEmojis
+            .filter(e => e === 'all' || Boolean(grouped[e]))
+            .map((cat, index) => {
+              const re = grouped[cat] || reactions;
               const maybeFocusRef = index === 0 ? focusRef : undefined;
+              const isAll = cat === 'all';
 
               return (
                 <button
-                  key={emoji}
+                  key={cat}
                   ref={maybeFocusRef}
                   className={classNames(
                     'module-reaction-viewer__header__button',
-                    selected === emoji
+                    selected === cat
                       ? 'module-reaction-viewer__header__button--selected'
                       : null
                   )}
                   onClick={event => {
                     event.stopPropagation();
-                    setSelected(emoji);
+                    setSelected(cat);
                   }}
                 >
-                  <Emoji size={18} emoji={emoji} />
-                  <span className="module-reaction-viewer__header__button__count">
-                    {re.length}
-                  </span>
+                  {isAll ? (
+                    <span className="module-reaction-viewer__header__button__all">
+                      {i18n('ReactionsViewer--all')}&thinsp;&middot;&thinsp;
+                      {re.length}
+                    </span>
+                  ) : (
+                    <>
+                      <Emoji size={18} emoji={cat} />
+                      <span className="module-reaction-viewer__header__button__count">
+                        {re.length}
+                      </span>
+                    </>
+                  )}
                 </button>
               );
             })}
@@ -141,12 +156,17 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                   i18n={i18n}
                 />
               </div>
-              <ContactName
-                module="module-reaction-viewer__body__row__name"
-                name={from.name}
-                profileName={from.profileName}
-                phoneNumber={from.phoneNumber}
-              />
+              <div className="module-reaction-viewer__body__row__name">
+                <ContactName
+                  module="module-reaction-viewer__body__row__name__contact-name"
+                  name={from.name}
+                  profileName={from.profileName}
+                  phoneNumber={from.phoneNumber}
+                />
+              </div>
+              <div className="module-reaction-viewer__body__row__emoji">
+                <Emoji size={18} emoji={emoji} />
+              </div>
             </div>
           ))}
         </main>