Style: Improve layout and spacing for Follower and Global feeds

lumina/app/feed/page.tsx

@@ -13,7 +13,6 @@ import ProfileQuickViewFeed from "@/components/ProfileQuickViewFeed";
 import FollowerQuickViewFeed from "@/components/FollowerQuickViewFeed";
 
 export default function FeedPage() {
-
   let pubkey = null;
   if (typeof window !== 'undefined') {
     pubkey = window.localStorage.getItem('pubkey');
@@ -34,10 +33,10 @@ export default function FeedPage() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="py-6 px-6">
-        <h2>Follower Feed</h2>
+      <div className="py-4 px-2 md:py-6 md:px-6">
+        <h2 className="text-2xl font-bold mb-4 px-2 md:px-4">Follower Feed</h2>
         <Tabs defaultValue="QuickView">
-          <TabsList>
+          <TabsList className="mb-4">
             <TabsTrigger value="QuickView"><GridIcon /></TabsTrigger>
             <TabsTrigger value="ProfileFeed"><SectionIcon /></TabsTrigger>
           </TabsList>

lumina/app/global/page.tsx

@@ -4,7 +4,7 @@ import GlobalFeed from "@/components/GlobalFeed";
 
 export default function GlobalFeedPage() {
   return (
-    <div className="py-6 px-6">
+    <div className="py-4 px-2 md:py-6 md:px-6">
       <GlobalFeed />
     </div>
   );

lumina/components/FollowerFeed.tsx

@@ -9,7 +9,7 @@ interface FollowerFeedProps {
 }
 
 const FollowerFeed: React.FC<FollowerFeedProps> = ({ pubkey }) => {
-  const now = useRef(new Date()); // Make sure current time isn't re-rendered
+  const now = useRef(new Date());
 
   const { events: following, isLoading: followingLoading } = useNostrEvents({
     filter: {
@@ -18,31 +18,34 @@ const FollowerFeed: React.FC<FollowerFeedProps> = ({ pubkey }) => {
       limit: 1,
     },
   });
-  // let followingPubkeys = following.map((event) => event.tags[event.tags.length - 1][1]);
-  // let followingPubkeys = following.flatMap((event) => event.tags.map(tag => tag[1])).slice(0, 50);
+
   let followingPubkeys = following.flatMap((event) => event.tags.map(tag => tag[1])).slice(0, 500);
 
   const { events } = useNostrEvents({
     filter: {
-      // since: dateToUnix(now.current), // all new events from now
-      // since: 0,
-      limit: 1000,
+      limit: 20,
       kinds: [20],
       authors: followingPubkeys,
     },
   });
 
   return (
-    <>
-      <div className="grid sm:grid-cols-1 md:grid-cols-2 space-x-2">
-        {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>
-    </>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 px-2 md:px-4">
+      {events.map((event) => (
+        <div key={event.id} className="mb-4 md:mb-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>
   );
 }
 

lumina/components/FollowerQuickViewFeed.tsx

@@ -27,7 +27,7 @@ const FollowerQuickViewFeed: React.FC<FollowerQuickViewFeedProps> = ({ pubkey })
     filter: {
       // since: dateToUnix(now.current), // all new events from now
       // since: 0,
-      limit: 1000,
+      limit: 25,
       kinds: [20],
       authors: followingPubkeys,
     },

lumina/components/GlobalFeed.tsx

@@ -6,19 +6,19 @@ import QuickViewKind20NoteCard from "./QuickViewKind20NoteCard";
 const GlobalFeed: React.FC = () => {
   const { events } = useNostrEvents({
     filter: {
-      limit: 100,
+      limit: 20,
       kinds: [20],
     },
   });
 
   return (
     <>
-      <h2>Global Feed</h2>
-      <div className="grid sm:grid-cols-1 md:grid-cols-2 space-x-2">
+      <h2 className="text-2xl font-bold mb-4 px-2 md:px-4">Global Feed</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 px-2 md:px-4">
         {events.map((event) => {
           const imageUrl = getImageUrl(event.tags);
           return (
-            <div key={event.id} className="py-6">
+            <div key={event.id} className="mb-4 md:mb-6">
               <KIND20Card
                 key={event.id}
                 pubkey={event.pubkey}
@@ -47,5 +47,4 @@ const GlobalFeed: React.FC = () => {
   );
 }
 
-export default GlobalFeed;
-
+export default GlobalFeed;