eslint fix

app/soapbox/components/status-card.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { Card } from './ui';
+
+interface IStatusCard {
+  className?: string,
+  variant?: 'default' | 'rounded',
+  children: React.ReactNode,
+}
+
+/**
+ * Wrapper around a Status with all the cute spacing.
+ * Not to be confused with the API entity called "Card".
+ */
+const StatusCard: React.FC<IStatusCard> = ({ variant = 'rounded', className, children }) => {
+  return (
+    <Card
+      variant={variant}
+      className={classNames({
+        'py-6 sm:p-5': variant === 'rounded',
+      }, className)}
+    >
+      {children}
+    </Card>
+  );
+};
+
+export default StatusCard;

app/soapbox/components/status.tsx

@@ -15,10 +15,11 @@ import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
 
 import StatusActionBar from './status-action-bar';
+import StatusCard from './status-card';
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import StatusContent from './status_content';
-import { Card, HStack, Text } from './ui';
+import { HStack, Text } from './ui';
 
 import type { Map as ImmutableMap } from 'immutable';
 import type {
@@ -63,7 +64,6 @@ const Status: React.FC<IStatus> = (props) => {
     muted,
     hidden,
     featured,
-    unread,
     group,
     hideActionBar,
     variant = 'rounded',
@@ -322,16 +322,7 @@ const Status: React.FC<IStatus> = (props) => {
           </div>
         )}
 
-        <Card
+        <StatusCard variant={variant} data-id={status.id}>
-          variant={variant}
-          className={classNames('status__wrapper', `status-${actualStatus.visibility}`, {
-            'py-6 sm:p-5': variant === 'rounded',
-            'status-reply': !!status.in_reply_to_id,
-            muted,
-            read: unread === false,
-          })}
-          data-id={status.id}
-        >
           {reblogElementMobile}
 
           <div className='mb-4'>
@@ -384,7 +375,7 @@ const Status: React.FC<IStatus> = (props) => {
               </div>
             )}
           </div>
-        </Card>
+        </StatusCard>
       </div>
     </HotKeys>
   );

app/soapbox/features/ads/components/ad.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import StatusCard from 'soapbox/components/status-card';
 import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import StatusCard from 'soapbox/features/status/components/card';
+import LinkPreview from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
 
 import type { Card as CardEntity } from 'soapbox/types/entities';
@@ -53,7 +54,7 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
 
   return (
     <div className='relative'>
-      <Card className='py-6 sm:p-5' variant='rounded'>
+      <StatusCard>
         <Stack space={4}>
           <HStack alignItems='center' space={3}>
             <Avatar src={instance.thumbnail} size={42} />
@@ -88,9 +89,9 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
             </Stack>
           </HStack>
 
-          <StatusCard card={card} onOpenMedia={() => {}} horizontal />
+          <LinkPreview card={card} onOpenMedia={() => {}} horizontal />
         </Stack>
-      </Card>
+      </StatusCard>
 
       {showInfo && (
         <div ref={infobox} className='absolute top-5 right-5 max-w-[234px]'>

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

@@ -42,8 +42,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
     <div className='thread__status'>
       {renderConnector()}
       {isLoaded ? (
-        // @ts-ignore FIXME
+        <StatusContainer {...props} variant='default' />
-        <StatusContainer {...props} />
       ) : (
         <PlaceholderStatus thread />
       )}

app/soapbox/features/ui/components/pending_status.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import React from 'react';
 
+import StatusCard from 'soapbox/components/status-card';
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
 import StatusContent from 'soapbox/components/status_content';
-import { Card, HStack } from 'soapbox/components/ui';
+import { HStack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
 import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
@@ -59,10 +60,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
   return (
     <div className={classNames('opacity-50', className)}>
       <div className={classNames('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
-        <Card
+        <StatusCard variant={thread ? 'default' : 'rounded'}>
-          className={classNames('py-6 sm:p-5', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })}
-          variant={thread ? 'default' : 'rounded'}
-        >
           <div className='mb-4'>
             <HStack justifyContent='between' alignItems='start'>
               <AccountContainer
@@ -92,7 +90,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
           {/* TODO */}
           {/* <PlaceholderActionBar /> */}
-        </Card>
+        </StatusCard>
       </div>
     </div>
   );