feat: 💨

src/components/NoteCard/GenericNoteCard.tsx

@@ -1,10 +1,13 @@
 import { GROUP_METADATA_EVENT_KIND } from '@/constants'
 import { isSupportedKind } from '@/lib/event'
+import { useMuteList } from '@/providers/MuteListProvider'
 import { Event, kinds } from 'nostr-tools'
+import { useState } from 'react'
 import GroupMetadataCard from './GroupMetadataCard'
 import LiveEventCard from './LiveEventCard'
 import LongFormArticleCard from './LongFormArticleCard'
 import MainNoteCard from './MainNoteCard'
+import MutedNoteCard from './MutedNoteCard'
 import UnknownNoteCard from './UnknownNoteCard'
 
 export default function GenericNoteCard({
@@ -20,6 +23,21 @@ export default function GenericNoteCard({
   embedded?: boolean
   originalNoteId?: string
 }) {
+  const [showMuted, setShowMuted] = useState(false)
+  const { mutePubkeys } = useMuteList()
+
+  if (mutePubkeys.includes(event.pubkey) && !showMuted) {
+    return (
+      <MutedNoteCard
+        event={event}
+        className={className}
+        reposter={reposter}
+        embedded={embedded}
+        show={() => setShowMuted(true)}
+      />
+    )
+  }
+
   if (isSupportedKind(event.kind)) {
     return (
       <MainNoteCard event={event} className={className} reposter={reposter} embedded={embedded} />

src/components/NoteCard/MutedNoteCard.tsx

@@ -0,0 +1,63 @@
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+import { Eye } from 'lucide-react'
+import { Event } from 'nostr-tools'
+import { useTranslation } from 'react-i18next'
+import { FormattedTimestamp } from '../FormattedTimestamp'
+import UserAvatar from '../UserAvatar'
+import Username from '../Username'
+import RepostDescription from './RepostDescription'
+
+export default function MutedNoteCard({
+  event,
+  show,
+  reposter,
+  embedded,
+  className
+}: {
+  event: Event
+  show: () => void
+  reposter?: string
+  embedded?: boolean
+  className?: string
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className={className}>
+      <div className={cn(embedded ? 'p-2 sm:p-3 border rounded-lg' : 'px-4 py-3')}>
+        <RepostDescription reposter={reposter} />
+        <div className="flex items-center space-x-2">
+          <UserAvatar userId={event.pubkey} size={embedded ? 'small' : 'normal'} />
+          <div
+            className={`flex-1 w-0 ${embedded ? 'flex space-x-2 items-center overflow-hidden' : ''}`}
+          >
+            <Username
+              userId={event.pubkey}
+              className={cn('font-semibold flex truncate', embedded ? 'text-sm' : '')}
+              skeletonClassName={embedded ? 'h-3' : 'h-4'}
+            />
+            <div className="text-xs text-muted-foreground line-clamp-1">
+              <FormattedTimestamp timestamp={event.created_at} />
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2 items-center text-muted-foreground font-medium my-4">
+          <div>{t('This user is muted')}</div>
+          <Button
+            onClick={(e) => {
+              e.stopPropagation()
+              show()
+            }}
+            variant="outline"
+          >
+            <Eye />
+            {t('Temporarily display this note')}
+          </Button>
+        </div>
+      </div>
+      {!embedded && <Separator />}
+    </div>
+  )
+}

src/components/NoteCard/UnknownNoteCard.tsx

@@ -5,11 +5,11 @@ import { cn } from '@/lib/utils'
 import { Check, Copy } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useState } from 'react'
-import RepostDescription from './RepostDescription'
+import { useTranslation } from 'react-i18next'
+import { FormattedTimestamp } from '../FormattedTimestamp'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
-import { FormattedTimestamp } from '../FormattedTimestamp'
-import { useTranslation } from 'react-i18next'
+import RepostDescription from './RepostDescription'
 
 export default function UnknownNoteCard({
   event,
@@ -44,7 +44,7 @@ export default function UnknownNoteCard({
             </div>
           </div>
         </div>
-        <div className="flex flex-col gap-2 items-center text-muted-foreground font-medium mt-2">
+        <div className="flex flex-col gap-2 items-center text-muted-foreground font-medium my-4">
           <div>{t('Cannot handle event of kind k', { k: event.kind })}</div>
           <Button
             onClick={(e) => {
@@ -53,7 +53,7 @@ export default function UnknownNoteCard({
               setIsCopied(true)
               setTimeout(() => setIsCopied(false), 2000)
             }}
-            variant="ghost"
+            variant="outline"
           >
             {isCopied ? <Check /> : <Copy />} Copy event ID
           </Button>