From 7b544d2427cb62cc123b867d1433478e9911b8f7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 17 Apr 2023 16:34:48 -0400
Subject: [PATCH 1/3] Group Link Preview

---
 app/soapbox/components/status-media.tsx       |  5 +++
 .../groups/components/group-link-preview.tsx  | 43 +++++++++++++++++++
 app/soapbox/normalizers/card.ts               | 12 ++++++
 3 files changed, 60 insertions(+)
 create mode 100644 app/soapbox/features/groups/components/group-link-preview.tsx

diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 0867e6ca2..192a4c169 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/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
diff --git a/app/soapbox/features/groups/components/group-link-preview.tsx b/app/soapbox/features/groups/components/group-link-preview.tsx
new file mode 100644
index 000000000..3cc7f1708
--- /dev/null
+++ b/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='overflow-hidden rounded-lg border border-gray-300 text-center'>
+      <div
+        className='-mb-8 h-32 w-full bg-center'
+        style={{ backgroundImage: `url(${group.header})` }}
+      />
+
+      <Avatar
+        className='mx-auto border-4 border-white'
+        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 };
\ No newline at end of file
diff --git a/app/soapbox/normalizers/card.ts b/app/soapbox/normalizers/card.ts
index 536d12c38..5d0af42cf 100644
--- a/app/soapbox/normalizers/card.ts
+++ b/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);
     }),
   );
 };

From 3f44e6cdcb8b7f27d2c5aecd5ad5ae86bde3dc0f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 18 Apr 2023 09:31:08 -0400
Subject: [PATCH 2/3] GroupLinkPreview: fix cursor

---
 app/soapbox/features/groups/components/group-link-preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/groups/components/group-link-preview.tsx b/app/soapbox/features/groups/components/group-link-preview.tsx
index 3cc7f1708..dc5770281 100644
--- a/app/soapbox/features/groups/components/group-link-preview.tsx
+++ b/app/soapbox/features/groups/components/group-link-preview.tsx
@@ -17,7 +17,7 @@ const GroupLinkPreview: React.FC<IGroupLinkPreview> = ({ card }) => {
   const navigateToGroup = () => history.push(`/groups/${group.id}`);
 
   return (
-    <Stack className='overflow-hidden rounded-lg border border-gray-300 text-center'>
+    <Stack className='cursor-default overflow-hidden rounded-lg border border-gray-300 text-center'>
       <div
         className='-mb-8 h-32 w-full bg-center'
         style={{ backgroundImage: `url(${group.header})` }}

From 19dfda4ca2080dce8f040e5f85f4e1aa9aee2e47 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 18 Apr 2023 09:39:09 -0400
Subject: [PATCH 3/3] GroupLinkPreview: dark mode

---
 app/soapbox/features/groups/components/group-link-preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/groups/components/group-link-preview.tsx b/app/soapbox/features/groups/components/group-link-preview.tsx
index dc5770281..be0e9f746 100644
--- a/app/soapbox/features/groups/components/group-link-preview.tsx
+++ b/app/soapbox/features/groups/components/group-link-preview.tsx
@@ -17,14 +17,14 @@ const GroupLinkPreview: React.FC<IGroupLinkPreview> = ({ card }) => {
   const navigateToGroup = () => history.push(`/groups/${group.id}`);
 
   return (
-    <Stack className='cursor-default overflow-hidden rounded-lg border border-gray-300 text-center'>
+    <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'
+        className='mx-auto border-4 border-white dark:border-primary-900'
         src={group.avatar}
         size={64}
       />