Merge remote-tracking branch 'origin/develop' into oauth-consumer-strategies

app/soapbox/components/status-action-bar.tsx

@@ -444,7 +444,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           action: handleChatClick,
           icon: require('@tabler/icons/messages.svg'),
         });
-      } else {
+      } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,

app/soapbox/components/status.tsx

@@ -47,6 +47,7 @@ export interface IStatus {
   featured?: boolean,
   hideActionBar?: boolean,
   hoverable?: boolean,
+  withDismiss?: boolean,
 }
 
 const Status: React.FC<IStatus> = (props) => {
@@ -63,6 +64,7 @@ const Status: React.FC<IStatus> = (props) => {
     unread,
     group,
     hideActionBar,
+    withDismiss,
   } = props;
   const intl = useIntl();
   const history = useHistory();
@@ -179,7 +181,7 @@ const Status: React.FC<IStatus> = (props) => {
   };
 
   if (!status) return null;
-  let prepend, rebloggedByText, reblogElement, reblogElementMobile;
+  let rebloggedByText, reblogElement, reblogElementMobile;
 
   if (hidden) {
     return (
@@ -205,20 +207,6 @@ const Status: React.FC<IStatus> = (props) => {
     );
   }
 
-  if (featured) {
-    prepend = (
-      <div className='pt-4 px-4'>
-        <HStack alignItems='center' space={1}>
-          <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
-
-          <Text size='sm' theme='muted' weight='medium'>
-            <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
-          </Text>
-        </HStack>
-      </div>
-    );
-  }
-
   if (status.reblog && typeof status.reblog === 'object') {
     const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) };
 
@@ -316,7 +304,17 @@ const Status: React.FC<IStatus> = (props) => {
         onClick={() => history.push(statusUrl)}
         role='link'
       >
-        {prepend}
+        {featured && (
+          <div className='pt-4 px-4'>
+            <HStack alignItems='center' space={1}>
+              <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
+
+              <Text size='sm' theme='muted' weight='medium'>
+                <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
+              </Text>
+            </HStack>
+          </div>
+        )}
 
         <div
           className={classNames('status__wrapper', `status-${actualStatus.visibility}`, {
@@ -374,7 +372,7 @@ const Status: React.FC<IStatus> = (props) => {
 
             {!hideActionBar && (
               <div className='pt-4'>
-                <StatusActionBar status={actualStatus} />
+                <StatusActionBar status={actualStatus} withDismiss={withDismiss} />
               </div>
             )}
           </div>

app/soapbox/components/status_list.tsx

@@ -122,7 +122,6 @@ const StatusList: React.FC<IStatusList> = ({
 
   const renderStatus = (statusId: string) => {
     return (
-      // @ts-ignore
       <StatusContainer
         key={statusId}
         id={statusId}
@@ -157,7 +156,6 @@ const StatusList: React.FC<IStatusList> = ({
     if (!featuredStatusIds) return [];
 
     return featuredStatusIds.toArray().map(statusId => (
-      // @ts-ignore
       <StatusContainer
         key={`f-${statusId}`}
         id={statusId}

app/soapbox/containers/status_container.tsx

@@ -4,15 +4,13 @@ import Status, { IStatus } from 'soapbox/components/status';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
-interface IStatusContainer extends Omit<IStatus, 'id'> {
+interface IStatusContainer extends Omit<IStatus, 'status'> {
   id: string,
   /** @deprecated Unused. */
   contextType?: any,
   /** @deprecated Unused. */
   otherAccounts?: any,
   /** @deprecated Unused. */
-  withDismiss?: any,
-  /** @deprecated Unused. */
   getScrollPosition?: any,
   /** @deprecated Unused. */
   updateScrollBottom?: any,
@@ -24,11 +22,12 @@ const getStatus = makeGetStatus();
  * Legacy Status wrapper accepting a status ID instead of the full entity.
  * @deprecated Use the Status component directly.
  */
-const StatusContainer: React.FC<IStatusContainer> = ({ id, onMoveUp, onMoveDown }) => {
+const StatusContainer: React.FC<IStatusContainer> = (props) => {
+  const { id, ...rest } = props;
   const status = useAppSelector(state => getStatus(state, { id }));
 
   if (status) {
-    return <Status status={status} onMoveUp={onMoveUp} onMoveDown={onMoveDown} />;
+    return <Status status={status} {...rest} />;
   } else {
     return null;
   }

app/soapbox/features/account_timeline/index.tsx

@@ -65,7 +65,7 @@ const AccountTimeline: React.FC<IAccountTimeline> = ({ params, withReplies = fal
     if (account) {
       dispatch(expandAccountTimeline(account.id, { withReplies }));
     }
-  }, [account?.id]);
+  }, [account?.id, withReplies]);
 
   const handleLoadMore = (maxId: string) => {
     if (account) {

app/soapbox/features/notifications/components/notification.tsx

@@ -18,7 +18,7 @@ import { makeGetNotification } from 'soapbox/selectors';
 import { NotificationType, validType } from 'soapbox/utils/notification';
 
 import type { ScrollPosition } from 'soapbox/components/status';
-import type { Account, Status, Notification as NotificationEntity } from 'soapbox/types/entities';
+import type { Account, Status as StatusEntity, Notification as NotificationEntity } from 'soapbox/types/entities';
 
 const getNotification = makeGetNotification();
 
@@ -143,7 +143,7 @@ interface INotificaton {
   notification: NotificationEntity,
   onMoveUp?: (notificationId: string) => void,
   onMoveDown?: (notificationId: string) => void,
-  onReblog?: (status: Status, e?: KeyboardEvent) => void,
+  onReblog?: (status: StatusEntity, e?: KeyboardEvent) => void,
   getScrollPosition?: () => ScrollPosition | undefined,
   updateScrollBottom?: (bottom: number) => void,
 }
@@ -216,7 +216,7 @@ const Notification: React.FC<INotificaton> = (props) => {
           if (e?.shiftKey || !boostModal) {
             dispatch(reblog(status));
           } else {
-            dispatch(openModal('BOOST', { status, onReblog: (status: Status) => {
+            dispatch(openModal('BOOST', { status, onReblog: (status: StatusEntity) => {
               dispatch(reblog(status));
             } }));
           }
@@ -303,16 +303,12 @@ const Notification: React.FC<INotificaton> = (props) => {
       case 'update':
       case 'pleroma:emoji_reaction':
         return status && typeof status === 'object' ? (
-          // @ts-ignore
           <StatusContainer
             id={status.id}
             withDismiss
             hidden={hidden}
             onMoveDown={handleMoveDown}
             onMoveUp={handleMoveUp}
-            contextType='notifications'
-            getScrollPosition={props.getScrollPosition}
-            updateScrollBottom={props.updateScrollBottom}
           />
         ) : null;
       default:

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

@@ -5,7 +5,7 @@ import Icon from 'soapbox/components/icon';
 import StatusMedia from 'soapbox/components/status-media';
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
 import StatusContent from 'soapbox/components/status_content';
-import { HStack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
 import { getActualStatus } from 'soapbox/utils/status';
@@ -65,9 +65,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   }
 
   if (actualStatus.visibility === 'direct') {
-    statusTypeIcon = <Icon src={require('@tabler/icons/mail.svg')} />;
+    statusTypeIcon = <Icon className='text-gray-700 dark:text-gray-600' src={require('@tabler/icons/mail.svg')} />;
   } else if (actualStatus.visibility === 'private') {
-    statusTypeIcon = <Icon src={require('@tabler/icons/lock.svg')} />;
+    statusTypeIcon = <Icon className='text-gray-700 dark:text-gray-600' src={require('@tabler/icons/lock.svg')} />;
   }
 
   return (
@@ -102,7 +102,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
         <HStack justifyContent='between' alignItems='center' className='py-2'>
           <StatusInteractionBar status={actualStatus} />
 
-          <div className='detailed-actualStatus__timestamp'>
+          <Stack space={1} alignItems='center'>
             {statusTypeIcon}
 
             <span>
@@ -128,7 +128,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
                 </>
               )}
             </span>
-          </div>
+          </Stack>
         </HStack>
       </div>
     </div>

app/styles/components/modal.scss

@@ -304,7 +304,7 @@
     li:not(:empty) {
       a,
       button {
-        @apply flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 no-underline hover:bg-gray-100 dark:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200;
+        @apply flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 no-underline hover:bg-gray-100 dark:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 text-left;
 
         &.destructive {
           @apply text-danger-600;
@@ -325,7 +325,7 @@
       }
 
       button[type="button"] {
-        @apply w-full justify-center;
+        @apply w-full justify-center text-center;
       }
     }
   }

webpack/rules/assets.js

@@ -66,7 +66,10 @@ module.exports = [{
 }, {
   test: /\.svg$/,
   type: 'asset/resource',
-  include: resolve('node_modules', '@tabler'),
+  include: [
+    resolve('node_modules', '@tabler'),
+    resolve('custom', 'modules', '@tabler'),
+  ],
   generator: {
     filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },

webpack/shared.js

@@ -141,6 +141,7 @@ module.exports = {
   resolve: {
     extensions: settings.extensions,
     modules: [
+      resolve('custom', 'modules'),
       resolve(settings.source_path),
       'node_modules',
     ],