Feature: Refactor Tag Feed (#98)

* feat: Refactor tag feed components to include tabbed interface and add TagQuickViewFeed

* fix: Remove redundant key prop from QuickViewKind20NoteCard in TagQuickViewFeed

* fix: Correct tab values for profile and extended feed in FeedPage component

* fix: Remove unused import of dateToUnix
in FollowerQuickViewFeed component

---------

Co-authored-by: highperfocused <highperfocused@pm.me>

app/feed/page.tsx

@@ -1,15 +1,9 @@
 'use client';
 
 import Head from "next/head";
-import ProfileInfoCard from "@/components/ProfileInfoCard";
-import ProfileFeed from "@/components/ProfileFeed";
-import { useParams } from 'next/navigation'
-import { nip19 } from "nostr-tools";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
-import TagFeed from "@/components/TagFeed";
 import FollowerFeed from "@/components/FollowerFeed";
-import ProfileQuickViewFeed from "@/components/ProfileQuickViewFeed";
 import FollowerQuickViewFeed from "@/components/FollowerQuickViewFeed";
 import { useEffect } from "react";
 
@@ -44,12 +38,12 @@ export default function FeedPage() {
         <Tabs defaultValue="QuickView">
           <TabsList className="mb-4 w-full grid grid-cols-2">
             <TabsTrigger value="QuickView"><GridIcon /></TabsTrigger>
-            <TabsTrigger value="ProfileFeed"><SectionIcon /></TabsTrigger>
+            <TabsTrigger value="ExtendedFeed"><SectionIcon /></TabsTrigger>
           </TabsList>
           <TabsContent value="QuickView">
             <FollowerQuickViewFeed pubkey={pubkey || ''} />
           </TabsContent>
-          <TabsContent value="ProfileFeed">
+          <TabsContent value="ExtendedFeed">
             <FollowerFeed pubkey={pubkey || ''} />
           </TabsContent>
         </Tabs>

app/tag/[tag]/page.tsx

@@ -1,19 +1,17 @@
 'use client';
 
 import Head from "next/head";
-import ProfileInfoCard from "@/components/ProfileInfoCard";
-import ProfileFeed from "@/components/ProfileFeed";
 import { useParams } from 'next/navigation'
-import { nip19 } from "nostr-tools";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 import TagFeed from "@/components/TagFeed";
 import { useEffect } from "react";
+import TagQuickViewFeed from "@/components/TagQuickViewFeed";
 
 export default function Home() {
 
   const params = useParams()
-  let tag = params.tag
+  let tag = Array.isArray(params.tag) ? params.tag[0] : params.tag;
 
   useEffect(() => {
     document.title = `#${tag} | LUMINA`;
@@ -35,8 +33,19 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="py-6 px-6">
-        <TagFeed tag={tag.toString()} />
+      <div className="py-4 px-2 md:py-6 md:px-6">
+        <Tabs defaultValue="QuickView">
+          <TabsList className="mb-4 w-full grid grid-cols-2">
+            <TabsTrigger value="QuickView"><GridIcon /></TabsTrigger>
+            <TabsTrigger value="ProfileFeed"><SectionIcon /></TabsTrigger>
+          </TabsList>
+          <TabsContent value="QuickView">
+            <TagQuickViewFeed tag={tag} />
+          </TabsContent>
+          <TabsContent value="ProfileFeed">
+            <TagFeed tag={tag} />
+          </TabsContent>
+        </Tabs>
       </div>
     </>
   );

components/FollowerQuickViewFeed.tsx

@@ -1,8 +1,7 @@
 import { useRef, useState } from "react";
-import { useNostrEvents, dateToUnix } from "nostr-react";
+import { useNostrEvents } from "nostr-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
-import QuickViewNoteCard from "./QuickViewNoteCard";
 import QuickViewKind20NoteCard from "./QuickViewKind20NoteCard";
 import { getImageUrl } from "@/utils/utils";
 

components/TagFeed.tsx

@@ -1,6 +1,5 @@
 import { useRef } from "react";
-import { useNostrEvents, dateToUnix } from "nostr-react";
-import NoteCard from './NoteCard';
+import { useNostrEvents } from "nostr-react";
 import KIND20Card from "./KIND20Card";
 import { getImageUrl } from "@/utils/utils";
 
@@ -8,14 +7,14 @@ interface TagFeedProps {
   tag: string;
 }
 
-const TagFeed: React.FC<TagFeedProps> = ({tag}) => {
+const TagFeed: React.FC<TagFeedProps> = ({ tag }) => {
   const now = useRef(new Date()); // Make sure current time isn't re-rendered
 
   const { events } = useNostrEvents({
     filter: {
       // since: dateToUnix(now.current), // all new events from now
       // since: 0,
-      // limit: 100,
+      limit: 20,
       kinds: [20],
       "#t": [tag],
     },
@@ -23,13 +22,14 @@ const TagFeed: React.FC<TagFeedProps> = ({tag}) => {
 
   return (
     <>
-      <h2>Tag Feed for {tag}</h2>
-      {events.map((event) => (
-        // <p key={event.id}>{event.pubkey} posted: {event.content}</p>
-        <div key={event.id} className="py-6">
-          <KIND20Card key={event.id} pubkey={event.pubkey} text={event.content} image={getImageUrl(event.tags)} eventId={event.id} tags={event.tags} event={event} showViewNoteCardButton={true} />
-        </div>
-      ))}
+      <div className="grid lg:grid-cols-3 gap-2">
+        {events.map((event) => (
+          // <p key={event.id}>{event.pubkey} posted: {event.content}</p>
+          <div key={event.id}>
+            <KIND20Card key={event.id} pubkey={event.pubkey} text={event.content} image={getImageUrl(event.tags)} eventId={event.id} tags={event.tags} event={event} showViewNoteCardButton={true} />
+          </div>
+        ))}
+      </div>
     </>
   );
 }

components/TagQuickViewFeed.tsx

@@ -0,0 +1,37 @@
+import { useRef } from "react";
+import { useNostrEvents } from "nostr-react";
+import { getImageUrl } from "@/utils/utils";
+import QuickViewKind20NoteCard from "./QuickViewKind20NoteCard";
+
+interface TagQuickViewFeedProps {
+  tag: string;
+}
+
+const TagQuickViewFeed: React.FC<TagQuickViewFeedProps> = ({ tag }) => {
+  const now = useRef(new Date()); // Make sure current time isn't re-rendered
+
+  const { events } = useNostrEvents({
+    filter: {
+      // since: dateToUnix(now.current), // all new events from now
+      // since: 0,
+      limit: 20,
+      kinds: [20],
+      "#t": [tag],
+    },
+  });
+
+  return (
+    <>
+      <div className="grid grid-cols-3 gap-2">
+        {events.map((event) => (
+          // <p key={event.id}>{event.pubkey} posted: {event.content}</p>
+          <div key={event.id}>
+            <QuickViewKind20NoteCard pubkey={event.pubkey} text={event.content} image={getImageUrl(event.tags)} eventId={event.id} tags={event.tags} event={event} linkToNote={false} />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default TagQuickViewFeed;