fix: 🐛

src/components/ContentPreview/Content.tsx

@@ -35,13 +35,13 @@ export default function Content({
     <span className={cn('pointer-events-none', className)}>
       {nodes.map((node, index) => {
         if (node.type === 'image' || node.type === 'images') {
-          return index > 0 ? ` [${t('image')}]` : `[${t('image')}]`
+          return index > 0 ? ` [${t('Image')}]` : `[${t('Image')}]`
         }
         if (node.type === 'media') {
-          return index > 0 ? ` [${t('media')}]` : `[${t('media')}]`
+          return index > 0 ? ` [${t('Media')}]` : `[${t('Media')}]`
         }
         if (node.type === 'event') {
-          return index > 0 ? ` [${t('note')}]` : `[${t('note')}]`
+          return index > 0 ? ` [${t('Note')}]` : `[${t('Note')}]`
         }
         if (node.type === 'mention') {
           return <EmbeddedMentionText key={index} userId={node.data.split(':')[1]} />

src/components/ContentPreview/PictureNotePreview.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+import { Event } from 'nostr-tools'
+import { useTranslation } from 'react-i18next'
+
+export default function PictureNotePreview({
+  event,
+  className
+}: {
+  event: Event
+  className?: string
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn('pointer-events-none', className)}>
+      [{t('Image')}] <span className="italic pr-0.5">{event.content}</span>
+    </div>
+  )
+}

src/components/ContentPreview/VideoNotePreview.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+import { Event } from 'nostr-tools'
+import { useTranslation } from 'react-i18next'
+
+export default function VideoNotePreview({
+  event,
+  className
+}: {
+  event: Event
+  className?: string
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn('pointer-events-none', className)}>
+      [{t('Media')}] <span className="italic pr-0.5">{event.content}</span>
+    </div>
+  )
+}

src/components/ContentPreview/index.tsx

@@ -10,7 +10,9 @@ import HighlightPreview from './HighlightPreview'
 import LiveEventPreview from './LiveEventPreview'
 import LongFormArticlePreview from './LongFormArticlePreview'
 import NormalContentPreview from './NormalContentPreview'
+import PictureNotePreview from './PictureNotePreview'
 import PollPreview from './PollPreview'
+import VideoNotePreview from './VideoNotePreview'
 
 export default function ContentPreview({
   event,
@@ -40,7 +42,6 @@ export default function ContentPreview({
     [
       kinds.ShortTextNote,
       ExtendedKind.COMMENT,
-      ExtendedKind.PICTURE,
       ExtendedKind.VOICE,
       ExtendedKind.VOICE_COMMENT
     ].includes(event.kind)
@@ -60,6 +61,14 @@ export default function ContentPreview({
     return <LongFormArticlePreview event={event} className={className} />
   }
 
+  if (event.kind === ExtendedKind.VIDEO || event.kind === ExtendedKind.SHORT_VIDEO) {
+    return <VideoNotePreview event={event} className={className} />
+  }
+
+  if (event.kind === ExtendedKind.PICTURE) {
+    return <PictureNotePreview event={event} className={className} />
+  }
+
   if (event.kind === ExtendedKind.GROUP_METADATA) {
     return <GroupMetadataPreview event={event} className={className} />
   }

src/components/KindFilter/index.tsx

@@ -49,14 +49,10 @@ export default function KindFilter({
     }
 
     const newShowKinds = [...temporaryShowKinds].sort()
-    let isSame = true
-    for (let index = 0; index < newShowKinds.length; index++) {
-      if (showKinds[index] !== newShowKinds[index]) {
-        isSame = false
-        break
-      }
-    }
-    if (!isSame) {
+    if (
+      newShowKinds.length !== showKinds.length ||
+      newShowKinds.some((k, i) => k !== showKinds[i])
+    ) {
       onShowKindsChange(newShowKinds)
     }
 
@@ -95,6 +91,7 @@ export default function KindFilter({
                 checked ? 'border-primary bg-primary/20' : 'clickable'
               )}
               onClick={() => {
+                console.log(checked)
                 if (!checked) {
                   // add all kinds in this group
                   setTemporaryShowKinds((prev) => Array.from(new Set([...prev, ...kindGroup])))

src/components/Note/index.tsx

@@ -58,7 +58,14 @@ export default function Note({
   const [showMuted, setShowMuted] = useState(false)
 
   let content: React.ReactNode
-  if (!SUPPORTED_KINDS.includes(event.kind)) {
+  if (
+    ![
+      ...SUPPORTED_KINDS,
+      kinds.CommunityDefinition,
+      kinds.LiveEvent,
+      ExtendedKind.GROUP_METADATA
+    ].includes(event.kind)
+  ) {
     content = <UnknownNote className="mt-2" event={event} />
   } else if (mutePubkeys.includes(event.pubkey) && !showMuted) {
     content = <MutedNote show={() => setShowMuted(true)} />