feat: add more note interactions lists (#467)

Co-authored-by: Trevor Arjeski <tmarjeski@gmail.com>

src/components/NoteInteractions/Tabs.tsx

@@ -2,9 +2,12 @@ import { cn } from '@/lib/utils'
 import { useTranslation } from 'react-i18next'
 import { useRef, useEffect, useState } from 'react'
 
-export type TTabValue = 'replies' | 'quotes'
+export type TTabValue = 'replies' | 'quotes' | 'reactions' | 'reposts' | 'zaps'
 const TABS = [
   { value: 'replies', label: 'Replies' },
+  { value: 'zaps', label: 'Zaps' },
+  { value: 'reposts', label: 'Reposts' },
+  { value: 'reactions', label: 'Reactions' },
   { value: 'quotes', label: 'Quotes' }
 ] as { value: TTabValue; label: string }[]
 

src/components/NoteInteractions/index.tsx

@@ -1,9 +1,13 @@
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { Event } from 'nostr-tools'
 import { useState } from 'react'
 import HideUntrustedContentButton from '../HideUntrustedContentButton'
 import QuoteList from '../QuoteList'
+import ReactionList from '../ReactionList'
 import ReplyNoteList from '../ReplyNoteList'
+import RepostList from '../RepostList'
+import ZapList from '../ZapList'
 import { Tabs, TTabValue } from './Tabs'
 
 export default function NoteInteractions({
@@ -14,19 +18,41 @@ export default function NoteInteractions({
   event: Event
 }) {
   const [type, setType] = useState<TTabValue>('replies')
+  let list
+  switch (type) {
+    case 'replies':
+      list = <ReplyNoteList index={pageIndex} event={event} />
+      break
+    case 'quotes':
+      list = <QuoteList event={event} />
+      break
+    case 'reactions':
+      list = <ReactionList event={event} />
+      break
+    case 'reposts':
+      list = <RepostList event={event} />
+      break
+    case 'zaps':
+      list = <ZapList event={event} />
+      break
+    default:
+      break
+  }
 
   return (
     <>
-      <div className="flex items-center justify-between pr-1">
-        <Tabs selectedTab={type} onTabChange={setType} />
-        <HideUntrustedContentButton type="interactions" />
+      <div className="flex items-center justify-between">
+        <ScrollArea className="flex-1 w-0">
+          <Tabs selectedTab={type} onTabChange={setType} />
+          <ScrollBar orientation="horizontal" className="opacity-0" />
+        </ScrollArea>
+        <Separator orientation="vertical" className="h-6" />
+        <div className="size-10 flex items-center justify-center">
+          <HideUntrustedContentButton type="interactions" />
+        </div>
       </div>
       <Separator />
-      {type === 'replies' ? (
-        <ReplyNoteList index={pageIndex} event={event} />
-      ) : (
-        <QuoteList event={event} />
-      )}
+      {list}
     </>
   )
 }