fix: lists in posts

akari-blue · Jan 4, 2025 · 703a556 · 703a556
1 parent b8ffb17
commit 703a556
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/src/components/PostEmbed/app-bsky-embed-record-view.tsx b/src/components/PostEmbed/app-bsky-embed-record-view.tsx
@@ -11,6 +11,7 @@ import { Link } from '@/components/ui/Link';
 import { useTranslation } from 'react-i18next';
 import { Avatar } from '../ui/avatar';
 import { FormattedText } from '../ui/FormattedText';
+import { SatelliteDish } from 'lucide-react';
 
 export const AppBskyEmbedRecordView = ({ embed }: { embed: BSkyPostEmbed }) => {
   const { t } = useTranslation('post');
@@ -82,8 +83,32 @@ export const AppBskyEmbedRecordView = ({ embed }: { embed: BSkyPostEmbed }) => {
           </div>
         </Link>
       )}
+      {embed.record.$type === 'app.bsky.graph.defs#listView' && (
+        <div className="flex flex-col gap-2">
+          <div className="flex flex-row gap-3">
+            {embed.record.avatar ? (
+              <Avatar avatar={embed.record.avatar} handle={author.handle} list={true} />
+            ) : (
+              <div className="bg-blue-500 p-2 aspect-square rounded-sm items-center justify-center">
+                <SatelliteDish className="size-7" />
+              </div>
+            )}
+            <div className="flex flex-col">
+              <div>{embed.record.name}</div>
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                {embed.record.purpose === 'app.bsky.graph.defs#modlist' && 'mod'}
+                {'list by'} <Handle handle={author.handle} />
+              </div>
+            </div>
+          </div>
+          <div className="text-sm">
+            <FormattedText text={embed.record.description} />
+          </div>
+        </div>
+      )}
       {embed.record.$type !== 'app.bsky.graph.defs#starterPackViewBasic' &&
-        embed.record.$type !== 'app.bsky.feed.defs#generatorView' && (
+        embed.record.$type !== 'app.bsky.feed.defs#generatorView' &&
+        embed.record.$type !== 'app.bsky.graph.defs#listView' && (
           <p className="text-gray-800 dark:text-gray-200">
             {embed.record.facets ? (
               <FacetedText text={embed.record.value.text} facets={embed.record.facets} key={embed.record.uri} />

diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
@@ -39,15 +39,17 @@ export const Avatar = ({
   handle,
   avatar,
   labeler,
+  list,
   className,
 }: {
   handle: string;
   avatar: string | undefined;
   labeler?: boolean;
+  list?: boolean;
   className?: string;
 }) => {
   return (
-    <AvatarWrapper className={cn(labeler && 'aspect-square', className)}>
+    <AvatarWrapper className={cn((labeler || list) && 'aspect-square rounded-sm', className)}>
       <AvatarImage src={avatar} />
       <AvatarFallback>{handle}</AvatarFallback>
     </AvatarWrapper>

diff --git a/src/lib/bluesky/types/BSkyPostEmbed.ts b/src/lib/bluesky/types/BSkyPostEmbed.ts
@@ -130,6 +130,22 @@ export const BSkyPostEmbed = Type.Recursive((Self) => {
           viewer: Type.Object({}),
           indexedAt: Type.String(),
         }),
+        Type.Object({
+          $type: Type.Literal('app.bsky.graph.defs#listView'),
+          uri: Type.String(),
+          cid: Type.String(),
+          name: Type.String(),
+          purpose: Type.Union([Type.Literal('app.bsky.graph.defs#curatelist'), Type.Literal('app.bsky.graph.defs#modlist')]),
+          listItemCount: Type.Number(),
+          indexedAt: Type.String(),
+          labels: Type.Array(BSkyPostLabel),
+          viewer: Type.Object({
+            muted: Type.Boolean(),
+          }),
+          creator: Author,
+          description: Type.String(),
+          avatar: Type.Optional(Type.String()),
+        }),
       ]),
     }),
     Type.Object({