Fix preview for local collection links (#38793)

app/javascript/mastodon/components/status.jsx

@@ -31,6 +31,7 @@ import { getHashtagBarForStatus } from './hashtag_bar';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import { StatusThreadLabel } from './status_thread_label';
+import { CollectionPreviewCard } from '../features/collections/components/collection_preview_card';
 
 const domParser = new DOMParser();
 
@@ -564,6 +565,13 @@ class Status extends ImmutablePureComponent {
           />
         );
       }
+    } else if (status.get('tagged_collections').size) {
+      const firstLinkedCollection = status.get('tagged_collections').first();
+      if (firstLinkedCollection) {
+        media = (
+          <CollectionPreviewCard collection={firstLinkedCollection.toJS()} />
+        );
+      }
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);

app/javascript/mastodon/features/collections/components/collection_preview_card.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 import type { CollectionLockupProps } from 'mastodon/features/collections/components/collection_lockup';
 import { CollectionLockup } from 'mastodon/features/collections/components/collection_lockup';
 
@@ -13,7 +15,7 @@ export const CollectionPreviewCard: React.FC<CollectionPreviewCardProps> = ({
   ...otherProps
 }) => {
   return (
-    <div className={classes.wrapper}>
+    <div className={classNames(classes.wrapper, 'collection-preview')}>
       <CollectionLockup collection={collection} {...otherProps} />
     </div>
   );

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -282,6 +282,13 @@ export const DetailedStatus: React.FC<{
         />
       );
     }
+  } else if (status.get('tagged_collections').size) {
+    const firstLinkedCollection = status.get('tagged_collections').first();
+    if (firstLinkedCollection) {
+      media = (
+        <CollectionPreviewCard collection={firstLinkedCollection.toJS()} />
+      );
+    }
   }
 
   if (status.get('application')) {

app/javascript/styles/mastodon/components.scss

@@ -1499,8 +1499,9 @@ body > [data-popper-placement] {
   .media-gallery,
   .video-player,
   .audio-player,
-  .attachment-list {
-    margin-top: 16px;
+  .attachment-list,
+  .collection-preview {
+    margin-top: 14px;
   }
 
   &--in-thread {
@@ -1517,6 +1518,7 @@ body > [data-popper-placement] {
     & > .picture-in-picture-placeholder,
     & > .more-from-author,
     & > .status-card,
+    & > .collection-preview,
     & > .hashtag-bar,
     & > .content-warning,
     & > .filter-warning,
@@ -1787,7 +1789,8 @@ body > [data-popper-placement] {
 
   .media-gallery,
   .video-player,
-  .audio-player {
+  .audio-player,
+  .collection-preview {
     margin-top: 16px;
   }