From cbae01a9a090d3d12fe494ef1f396016b00aaea1 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Thu, 5 Feb 2026 10:23:07 -0500
Subject: [PATCH] adding tabs to Reader

---
 app/(home-pages)/reader/ReaderContent.tsx | 100 ----------------------
 app/(home-pages)/reader/page.tsx          |  28 +++---
 2 files changed, 12 insertions(+), 116 deletions(-)
 delete mode 100644 app/(home-pages)/reader/ReaderContent.tsx

diff --git a/app/(home-pages)/reader/ReaderContent.tsx b/app/(home-pages)/reader/ReaderContent.tsx
deleted file mode 100644
index e73b3df9..00000000
--- a/app/(home-pages)/reader/ReaderContent.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client";
-import { ButtonPrimary } from "components/Buttons";
-import { DiscoverSmall } from "components/Icons/DiscoverSmall";
-import type { Cursor, Post } from "./getReaderFeed";
-import useSWRInfinite from "swr/infinite";
-import { getReaderFeed } from "./getReaderFeed";
-import { useEffect, useRef } from "react";
-import Link from "next/link";
-import { PostListing } from "components/PostListing";
-
-export const ReaderContent = (props: {
-  posts: Post[];
-  nextCursor: Cursor | null;
-}) => {
-  const getKey = (
-    pageIndex: number,
-    previousPageData: {
-      posts: Post[];
-      nextCursor: Cursor | null;
-    } | null,
-  ) => {
-    // Reached the end
-    if (previousPageData && !previousPageData.nextCursor) return null;
-
-    // First page, we don't have previousPageData
-    if (pageIndex === 0) return ["reader-feed", null] as const;
-
-    // Add the cursor to the key
-    return ["reader-feed", previousPageData?.nextCursor] as const;
-  };
-
-  const { data, size, setSize, isValidating } = useSWRInfinite(
-    getKey,
-    ([_, cursor]) => getReaderFeed(cursor),
-    {
-      fallbackData: [{ posts: props.posts, nextCursor: props.nextCursor }],
-      revalidateFirstPage: false,
-    },
-  );
-
-  const loadMoreRef = useRef<HTMLDivElement>(null);
-
-  // Set up intersection observer to load more when trigger element is visible
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && !isValidating) {
-          const hasMore = data && data[data.length - 1]?.nextCursor;
-          if (hasMore) {
-            setSize(size + 1);
-          }
-        }
-      },
-      { threshold: 0.1 },
-    );
-
-    if (loadMoreRef.current) {
-      observer.observe(loadMoreRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, [data, size, setSize, isValidating]);
-
-  const allPosts = data ? data.flatMap((page) => page.posts) : [];
-
-  if (allPosts.length === 0 && !isValidating) return <ReaderEmpty />;
-
-  return (
-    <div className="flex flex-col gap-3 relative">
-      {allPosts.map((p) => (
-        <PostListing {...p} key={p.documents.uri} />
-      ))}
-      {/* Trigger element for loading more posts */}
-      <div
-        ref={loadMoreRef}
-        className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
-        aria-hidden="true"
-      />
-      {isValidating && (
-        <div className="text-center text-tertiary py-4">
-          Loading more posts...
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const ReaderEmpty = () => {
-  return (
-    <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
-      Nothing to read yet… <br />
-      Subscribe to publications and find their posts here!
-      <Link href={"/discover"}>
-        <ButtonPrimary className="mx-auto place-self-center">
-          <DiscoverSmall /> Discover Publications
-        </ButtonPrimary>
-      </Link>
-    </div>
-  );
-};
diff --git a/app/(home-pages)/reader/page.tsx b/app/(home-pages)/reader/page.tsx
index 3372c83c..9a59e487 100644
--- a/app/(home-pages)/reader/page.tsx
+++ b/app/(home-pages)/reader/page.tsx
@@ -1,35 +1,31 @@
-import { getIdentityData } from "actions/getIdentityData";
-
 import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
-import { ReaderContent } from "./ReaderContent";
-import { SubscriptionsContent } from "./SubscriptionsContent";
+import { InboxContent } from "./InboxContent";
+import { LocalContent } from "./LocalContent";
+import { GlobalContent } from "./GlobalContent";
 import { getReaderFeed } from "./getReaderFeed";
-import { getSubscriptions } from "./getSubscriptions";
 
 export default async function Reader(props: {}) {
   let posts = await getReaderFeed();
-  let publications = await getSubscriptions();
   return (
     <DashboardLayout
       id="reader"
       currentPage="reader"
-      defaultTab="Read"
+      defaultTab="Inbox"
       actions={null}
       tabs={{
-        Read: {
+        Inbox: {
           controls: null,
           content: (
-            <ReaderContent nextCursor={posts.nextCursor} posts={posts.posts} />
+            <InboxContent nextCursor={posts.nextCursor} posts={posts.posts} />
           ),
         },
-        Subscriptions: {
+        Friends: {
           controls: null,
-          content: (
-            <SubscriptionsContent
-              publications={publications.subscriptions}
-              nextCursor={publications.nextCursor}
-            />
-          ),
+          content: <LocalContent />,
+        },
+        Global: {
+          controls: null,
+          content: <GlobalContent />,
         },
       }}
     />
-- 
2.54.0