Merge remote-tracking branch 'origin/develop' into group-lookup

app/soapbox/components/status-media.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
 import Card from 'soapbox/features/status/components/card';
 import Bundle from 'soapbox/features/ui/components/bundle';
@@ -153,6 +154,10 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         </Bundle>
       );
     }
+  } else if (status.spoiler_text.length === 0 && !status.quote && status.card?.group) {
+    media = (
+      <GroupLinkPreview card={status.card} />
+    );
   } else if (status.spoiler_text.length === 0 && !status.quote && status.card) {
     media = (
       <Card

app/soapbox/features/groups/components/group-link-preview.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Avatar, Button, CardTitle, Stack } from 'soapbox/components/ui';
+import { type Card as StatusCard } from 'soapbox/types/entities';
+
+interface IGroupLinkPreview {
+  card: StatusCard
+}
+
+const GroupLinkPreview: React.FC<IGroupLinkPreview> = ({ card }) => {
+  const history = useHistory();
+
+  const { group } = card;
+  if (!group) return null;
+
+  const navigateToGroup = () => history.push(`/groups/${group.id}`);
+
+  return (
+    <Stack className='cursor-default overflow-hidden rounded-lg border border-gray-300 text-center dark:border-gray-800'>
+      <div
+        className='-mb-8 h-32 w-full bg-center'
+        style={{ backgroundImage: `url(${group.header})` }}
+      />
+
+      <Avatar
+        className='mx-auto border-4 border-white dark:border-primary-900'
+        src={group.avatar}
+        size={64}
+      />
+
+      <Stack space={4} className='p-4'>
+        <CardTitle title={<span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />} />
+
+        <Button theme='primary' onClick={navigateToGroup} block>
+          View Group
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
+
+export { GroupLinkPreview };

app/soapbox/hooks/api/groups/useGroupTags.ts

@@ -10,7 +10,7 @@ function useGroupTags(groupId: string) {
 
   const { entities, ...result } = useEntities<GroupTag>(
     [Entities.GROUP_TAGS, groupId],
-    () => api.get(`api/v1/truth/trends/groups/${groupId}/tags`),
+    () => api.get(`/api/v1/truth/trends/groups/${groupId}/tags`),
     { schema: groupTagSchema },
   );
 

app/soapbox/normalizers/card.ts

@@ -7,6 +7,7 @@ import punycode from 'punycode';
 
 import { Record as ImmutableRecord, Map as ImmutableMap, fromJS } from 'immutable';
 
+import { groupSchema, type Group } from 'soapbox/schemas';
 import { mergeDefined } from 'soapbox/utils/normalizers';
 
 // https://docs.joinmastodon.org/entities/card/
@@ -16,6 +17,7 @@ export const CardRecord = ImmutableRecord({
   blurhash: null as string | null,
   description: '',
   embed_url: '',
+  group: null as null | Group,
   height: 0,
   html: '',
   image: null as string | null,
@@ -60,11 +62,21 @@ const normalizeProviderName = (card: ImmutableMap<string, any>) => {
   return card.set('provider_name', providerName);
 };
 
+const normalizeGroup = (card: ImmutableMap<string, any>) => {
+  try {
+    const group = groupSchema.parse(card.get('group').toJS());
+    return card.set('group', group);
+  } catch (_e) {
+    return card.set('group', null);
+  }
+};
+
 export const normalizeCard = (card: Record<string, any>) => {
   return CardRecord(
     ImmutableMap(fromJS(card)).withMutations(card => {
       normalizePleromaOpengraph(card);
       normalizeProviderName(card);
+      normalizeGroup(card);
     }),
   );
 };