Merge branch 'redesign-interaction-bar' into 'develop'

Redesign interaction bar

See merge request soapbox-pub/soapbox!1913

app/soapbox/components/ui/text/text.tsx

@@ -51,7 +51,7 @@ const families = {
 };
 
 export type Sizes = keyof typeof sizes
-type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
+type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div'
 type Directions = 'ltr' | 'rtl'
 
 interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'dangerouslySetInnerHTML' | 'tabIndex' | 'lang'> {

app/soapbox/features/status/components/detailed-status.tsx

@@ -127,7 +127,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
           </Stack>
         </Stack>
 
-        <HStack justifyContent='between' alignItems='center' className='py-2' wrap>
+        <HStack justifyContent='between' alignItems='center' className='py-3' wrap>
           <StatusInteractionBar status={actualStatus} />
 
           <HStack space={1} alignItems='center'>

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -1,11 +1,11 @@
 import classNames from 'clsx';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { List as ImmutableList } from 'immutable';
 import React from 'react';
-import { FormattedNumber } from 'react-intl';
+import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
-import { HStack, IconButton, Text, Emoji } from 'soapbox/components/ui';
+import { HStack, Text, Emoji } from 'soapbox/components/ui';
 import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import { reduceEmoji } from 'soapbox/utils/emoji-reacts';
 
@@ -42,11 +42,10 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
     }));
   };
 
-  const onOpenReactionsModal = (username: string, statusId: string, reaction: string): void => {
+  const onOpenReactionsModal = (username: string, statusId: string): void => {
     dispatch(openModal('REACTIONS', {
       username,
       statusId,
-      reaction,
     }));
   };
 
@@ -56,7 +55,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
       status.favourites_count,
       status.favourited,
       allowedEmoji,
-    ).reverse();
+    );
   };
 
   const handleOpenReblogsModal: React.EventHandler<React.MouseEvent> = (e) => {
@@ -69,22 +68,17 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   const getReposts = () => {
     if (status.reblogs_count) {
       return (
-        <HStack space={0.5} alignItems='center'>
+        <InteractionCounter count={status.reblogs_count} onClick={handleOpenReblogsModal}>
-          <IconButton
+          <FormattedMessage
-            className='text-success-600 cursor-pointer'
+            id='status.interactions.reblogs'
-            src={require('@tabler/icons/repeat.svg')}
+            defaultMessage='{count, plural, one {Repost} other {Reposts}}'
-            role='presentation'
+            values={{ count: status.reblogs_count }}
-            onClick={handleOpenReblogsModal}
           />
-
+        </InteractionCounter>
-          <Text theme='muted' size='sm'>
-            <FormattedNumber value={status.reblogs_count} />
-          </Text>
-        </HStack>
       );
     }
 
-    return '';
+    return null;
   };
 
   const handleOpenFavouritesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
@@ -97,31 +91,25 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   const getFavourites = () => {
     if (status.favourites_count) {
       return (
-        <HStack space={0.5} alignItems='center'>
+        <InteractionCounter count={status.favourites_count} onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}>
-          <IconButton
+          <FormattedMessage
-            className={classNames({
+            id='status.interactions.favourites'
-              'text-accent-300': true,
+            defaultMessage='{count, plural, one {Like} other {Likes}}'
-              'cursor-default': !features.exposableReactions,
+            values={{ count: status.favourites_count }}
-            })}
-            src={require('@tabler/icons/heart.svg')}
-            iconClassName='fill-accent-300'
-            role='presentation'
-            onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
           />
-
+        </InteractionCounter>
-          <Text theme='muted' size='sm'>
-            <FormattedNumber value={status.favourites_count} />
-          </Text>
-        </HStack>
       );
     }
 
-    return '';
+    return null;
   };
 
-  const handleOpenReactionsModal = (reaction: ImmutableMap<string, any>) => () => {
+  const handleOpenReactionsModal = () => {
-    if (!me) onOpenUnauthorizedModal();
+    if (!me) {
-    else onOpenReactionsModal(account.acct, status.id, String(reaction.get('name')));
+      return onOpenUnauthorizedModal();
+    }
+
+    onOpenReactionsModal(account.acct, status.id);
   };
 
   const getEmojiReacts = () => {
@@ -130,43 +118,67 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
       acc + cur.get('count')
     ), 0);
 
-    if (count > 0) {
+    if (count) {
       return (
-        <HStack space={0.5} className='emoji-reacts-container' alignItems='center'>
+        <InteractionCounter count={count} onClick={features.exposableReactions ? handleOpenReactionsModal : undefined}>
-          <div className='emoji-reacts'>
+          <HStack space={0.5} alignItems='center'>
-            {emojiReacts.map((e, i) => {
+            {emojiReacts.take(3).map((e, i) => {
               return (
-                <HStack space={0.5} className='emoji-react p-1' alignItems='center' key={i}>
+                <Emoji
-                  <Emoji
+                  key={i}
-                    className={classNames('emoji-react__emoji w-5 h-5 flex-none', { 'cursor-pointer': features.exposableReactions })}
+                  className='w-4.5 h-4.5 flex-none'
-                    emoji={e.get('name')}
+                  emoji={e.get('name')}
-                    onClick={features.exposableReactions ? handleOpenReactionsModal(e) : undefined}
+                />
-                  />
-                  <Text theme='muted' size='sm' className='emoji-react__count'>
-                    <FormattedNumber value={e.get('count')} />
-                  </Text>
-                </HStack>
               );
             })}
-          </div>
+          </HStack>
-
+        </InteractionCounter>
-          <Text theme='muted' size='sm' className='emoji-reacts__count'>
-            <FormattedNumber value={count} />
-          </Text>
-        </HStack>
       );
     }
 
-    return '';
+    return null;
   };
 
   return (
     <HStack space={3}>
       {getReposts()}
-
       {features.emojiReacts ? getEmojiReacts() : getFavourites()}
     </HStack>
   );
 };
 
+interface IInteractionCounter {
+  count: number,
+  onClick?: React.MouseEventHandler<HTMLButtonElement>,
+  children: React.ReactNode,
+}
+
+const InteractionCounter: React.FC<IInteractionCounter> = ({ count, onClick, children }) => {
+  const features = useFeatures();
+
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className={
+        classNames({
+          'text-gray-600 dark:text-gray-700': true,
+          'hover:underline': features.exposableReactions,
+          'cursor-default': !features.exposableReactions,
+        })
+      }
+    >
+      <HStack space={1} alignItems='center'>
+        <Text theme='primary' weight='bold'>
+          <FormattedNumber value={count} />
+        </Text>
+
+        <Text tag='div' theme='muted'>
+          {children}
+        </Text>
+      </HStack>
+    </button>
+  );
+};
+
 export default StatusInteractionBar;

app/soapbox/locales/en.json

@@ -994,6 +994,8 @@
   "status.in_review_summary.summary": "This post has been sent to Moderation for review and is only visible to you.",
   "status.in_review_summary.contact": "If you believe this is in error please {link}.",
   "status.in_review_summary.link": "Contact Support",
+  "status.interactions.reblogs": "{count, plural, one {Repost} other {Reposts}}",
+  "status.interactions.favourites": "{count, plural, one {Like} other {Likes}}",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",
   "status.mention": "Mention @{name}",

tailwind.config.js

@@ -42,6 +42,9 @@ module.exports = {
           'mono',
         ],
       },
+      spacing: {
+        '4.5': '1.125rem',
+      },
       colors: parseColorMatrix({
         // Define color matrix (of available colors)
         // Colors are configured at runtime with CSS variables in soapbox.json