diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index a21063496d..a68138125d 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/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 = ( + + ); + } } const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status); diff --git a/app/javascript/mastodon/features/collections/components/collection_preview_card.tsx b/app/javascript/mastodon/features/collections/components/collection_preview_card.tsx index cb7e02f19d..204e2767c5 100644 --- a/app/javascript/mastodon/features/collections/components/collection_preview_card.tsx +++ b/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 = ({ ...otherProps }) => { return ( -
+
); diff --git a/app/javascript/mastodon/features/status/components/detailed_status.tsx b/app/javascript/mastodon/features/status/components/detailed_status.tsx index ded57f02d0..0350508762 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.tsx +++ b/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 = ( + + ); + } } if (status.get('application')) { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 2349bc74de..2a491560ba 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/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; }