feat: support for follow packs

src/components/ContentPreview/FollowPackPreview.tsx

@@ -0,0 +1,22 @@
+import { getFollowPackInfoFromEvent } from '@/lib/event-metadata'
+import { cn } from '@/lib/utils'
+import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function FollowPackPreview({
+  event,
+  className
+}: {
+  event: Event
+  className?: string
+}) {
+  const { t } = useTranslation()
+  const { title } = useMemo(() => getFollowPackInfoFromEvent(event), [event])
+
+  return (
+    <div className={cn('truncate', className)}>
+      [{t('Follow Pack')}] <span className="italic pr-0.5">{title}</span>
+    </div>
+  )
+}

src/components/ContentPreview/index.tsx

@@ -8,6 +8,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import CommunityDefinitionPreview from './CommunityDefinitionPreview'
 import EmojiPackPreview from './EmojiPackPreview'
+import FollowPackPreview from './FollowPackPreview'
 import GroupMetadataPreview from './GroupMetadataPreview'
 import HighlightPreview from './HighlightPreview'
 import LiveEventPreview from './LiveEventPreview'
@@ -105,5 +106,9 @@ export default function ContentPreview({
     return <EmojiPackPreview event={event} className={className} />
   }
 
+  if (event.kind === ExtendedKind.FOLLOW_PACK) {
+    return <FollowPackPreview event={event} className={className} />
+  }
+
   return <div className={className}>[{t('Cannot handle event of kind k', { k: event.kind })}]</div>
 }

src/components/Note/FollowPack.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@/components/ui/button'
+import { getFollowPackInfoFromEvent } from '@/lib/event-metadata'
+import { toFollowPack } from '@/lib/link'
+import { useSecondaryPage } from '@/PageManager'
+import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Image from '../Image'
+
+export default function FollowPack({ event, className }: { event: Event; className?: string }) {
+  const { t } = useTranslation()
+  const { push } = useSecondaryPage()
+  const { title, description, image, pubkeys } = useMemo(
+    () => getFollowPackInfoFromEvent(event),
+    [event]
+  )
+
+  const handleViewDetails = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    push(toFollowPack(event))
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex items-start gap-2 mb-2">
+        {image && (
+          <Image
+            image={{ url: image, pubkey: event.pubkey }}
+            className="w-24 h-20 object-cover rounded-lg"
+            classNames={{
+              wrapper: 'w-24 h-20 flex-shrink-0',
+              errorPlaceholder: 'w-24 h-20'
+            }}
+            hideIfError
+          />
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="text-xl font-semibold mb-1 truncate">{title}</h3>
+            <span className="text-xs text-muted-foreground shrink-0">
+              {t('n users', { count: pubkeys.length })}
+            </span>
+          </div>
+          {description && (
+            <p className="text-sm text-muted-foreground line-clamp-2">{description}</p>
+          )}
+        </div>
+      </div>
+
+      <Button onClick={handleViewDetails} variant="outline" className="w-full">
+        {t('View Details')}
+      </Button>
+    </div>
+  )
+}

src/components/Note/index.tsx

@@ -21,6 +21,7 @@ import UserAvatar from '../UserAvatar'
 import Username from '../Username'
 import CommunityDefinition from './CommunityDefinition'
 import EmojiPack from './EmojiPack'
+import FollowPack from './FollowPack'
 import GroupMetadata from './GroupMetadata'
 import Highlight from './Highlight'
 import LiveEvent from './LiveEvent'
@@ -109,6 +110,8 @@ export default function Note({
     content = <RelayReview className="mt-2" event={event} />
   } else if (event.kind === kinds.Emojisets) {
     content = <EmojiPack className="mt-2" event={event} />
+  } else if (event.kind === ExtendedKind.FOLLOW_PACK) {
+    content = <FollowPack className="mt-2" event={event} />
   } else {
     content = <Content className="mt-2" event={event} />
   }