From b59f4ec4aab94f845068f4140b34014700d7e325 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 5 May 2026 22:18:18 -0400
Subject: [PATCH] rm interaction drawer in reader, add a layout component to
 reader pages

---
 app/(home-pages)/reader/FeedLayout.tsx        |   7 ++
 app/(home-pages)/reader/GlobalContent.tsx     |  26 ++--
 app/(home-pages)/reader/InboxContent.tsx      |  63 ++++------
 .../reader/InteractionDrawers.tsx             | 117 ------------------
 app/(home-pages)/reader/NewContent.tsx        |  44 +++----
 app/(home-pages)/reader/new/page.tsx          |   5 +-
 app/(home-pages)/reader/page.tsx              |   5 +-
 app/(home-pages)/reader/trending/page.tsx     |   5 +-
 components/ActionBar/DesktopNavigation.tsx    |   1 +
 components/ActionBar/NavigationButtons.tsx    |   3 +-
 components/ActionBar/Publications.tsx         |   4 -
 components/PostListing.tsx                    |   9 +-
 12 files changed, 80 insertions(+), 209 deletions(-)
 create mode 100644 app/(home-pages)/reader/FeedLayout.tsx
 delete mode 100644 app/(home-pages)/reader/InteractionDrawers.tsx

diff --git a/app/(home-pages)/reader/FeedLayout.tsx b/app/(home-pages)/reader/FeedLayout.tsx
new file mode 100644
index 00000000..53361ad0
--- /dev/null
+++ b/app/(home-pages)/reader/FeedLayout.tsx
@@ -0,0 +1,7 @@
+export const FeedLayout = (props: { children: React.ReactNode }) => {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-lg mx-auto">
+      {props.children}
+    </div>
+  );
+};
diff --git a/app/(home-pages)/reader/GlobalContent.tsx b/app/(home-pages)/reader/GlobalContent.tsx
index 31ae8004..e081d0c4 100644
--- a/app/(home-pages)/reader/GlobalContent.tsx
+++ b/app/(home-pages)/reader/GlobalContent.tsx
@@ -5,10 +5,6 @@ import { callRPC } from "app/api/rpc/client";
 import { EmptyState } from "components/EmptyState";
 import { PostListing } from "components/PostListing";
 import type { Post } from "./getReaderFeed";
-import {
-  DesktopInteractionPreviewDrawer,
-  MobileInteractionPreviewDrawer,
-} from "./InteractionDrawers";
 import { useSelectedPostListing } from "src/useSelectedPostState";
 
 export const GlobalContent = (props: {
@@ -38,18 +34,14 @@ export const GlobalContent = (props: {
   }
 
   return (
-    <div className="globalReader flex flex-row gap-6 w-full">
-      <div className="globalPostListings flex flex-col gap-6 min-w-0 grow w-full">
-        {posts.map((p) => (
-          <PostListing
-            {...p}
-            key={p.documents.uri}
-            selected={selectedPost?.document_uri === p.documents.uri}
-          />
-        ))}
-      </div>
-      <DesktopInteractionPreviewDrawer />
-      <MobileInteractionPreviewDrawer />
-    </div>
+    <>
+      {posts.map((p) => (
+        <PostListing
+          {...p}
+          key={p.documents.uri}
+          selected={selectedPost?.document_uri === p.documents.uri}
+        />
+      ))}
+    </>
   );
 };
diff --git a/app/(home-pages)/reader/InboxContent.tsx b/app/(home-pages)/reader/InboxContent.tsx
index 036a821a..6b1cfb2a 100644
--- a/app/(home-pages)/reader/InboxContent.tsx
+++ b/app/(home-pages)/reader/InboxContent.tsx
@@ -8,13 +8,10 @@ import { getReaderFeed } from "./getReaderFeed";
 import { useEffect, useRef } from "react";
 import Link from "next/link";
 import { PostListing } from "components/PostListing";
-import {
-  DesktopInteractionPreviewDrawer,
-  MobileInteractionPreviewDrawer,
-} from "./InteractionDrawers";
 import { useSelectedPostListing } from "src/useSelectedPostState";
 import { useIdentityData } from "components/IdentityProvider";
 import { LoginContent } from "components/LoginButton";
+import { EmptyState } from "components/EmptyState";
 
 export const InboxContent = (props: {
   promise: Promise<{ posts: Post[]; nextCursor: Cursor | null }>;
@@ -82,55 +79,47 @@ export const InboxContent = (props: {
 
   if (!identityData) {
     return (
-      <div className="mx-auto w-fit h-full flex pt-2 sm:pt-0 place-items-start sm:place-items-center">
-        <div className="flex flex-col gap-4 h-fit justify-center text-center">
-          <h3>Log in or sign up to see your subscriptions!</h3>
-          <LoginContent className="w-full! sm:min-w-xs" />
-        </div>
-      </div>
+      <EmptyState container="frosted" title="Log in or sign up">
+        <LoginContent className="w-full! sm:min-w-xs" />
+      </EmptyState>
     );
   }
 
   if (allPosts.length === 0) return <ReaderEmpty />;
 
   return (
-    <div className="inboxReader flex flex-row gap-6 w-full ">
-      <div className="inboxPostListings flex flex-col gap-6 min-w-0 grow w-full relative">
-        {sortedPosts.map((p) => (
-          <PostListing
-            {...p}
-            key={p.documents.uri}
-            selected={selectedPost?.document_uri === 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"
+    <>
+      {sortedPosts.map((p) => (
+        <PostListing
+          {...p}
+          key={p.documents.uri}
+          selected={selectedPost?.document_uri === p.documents.uri}
         />
-        {isValidating && allPosts.length > 0 && (
-          <div className="text-center text-tertiary py-4">
-            Loading more posts...
-          </div>
-        )}
-      </div>
-      <DesktopInteractionPreviewDrawer />
-      <MobileInteractionPreviewDrawer />
-    </div>
+      ))}
+      {/* 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 && allPosts.length > 0 && (
+        <div className="text-center text-tertiary py-4">
+          Loading more posts...
+        </div>
+      )}
+    </>
   );
 };
 
 export const ReaderEmpty = () => {
   return (
-    <div className="flex flex-col gap-2 frosted-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!
+    <EmptyState container="frosted" title="Nothing to read yet…">
+      Subscribe to publications and find their latest posts here!
       <Link href={"/reader/trending"}>
         <ButtonPrimary className="mx-auto place-self-center">
           <DiscoverSmall /> See what posts people are reading!
         </ButtonPrimary>
       </Link>
-    </div>
+    </EmptyState>
   );
 };
diff --git a/app/(home-pages)/reader/InteractionDrawers.tsx b/app/(home-pages)/reader/InteractionDrawers.tsx
deleted file mode 100644
index d9dd75bc..00000000
--- a/app/(home-pages)/reader/InteractionDrawers.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-import { ButtonPrimary } from "components/Buttons";
-import {
-  SelectedPostListing,
-  useSelectedPostListing,
-} from "src/useSelectedPostState";
-import { CommentsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Comments";
-import { CloseTiny } from "components/Icons/CloseTiny";
-import { SpeedyLink } from "components/SpeedyLink";
-import { GoToArrow } from "components/Icons/GoToArrow";
-import { DotLoader } from "components/utils/DotLoader";
-import { ReaderMentionsContent } from "./ReaderMentionsContent";
-import { callRPC } from "app/api/rpc/client";
-import useSWR from "swr";
-import { getDocumentURL } from "app/lish/createPub/getPublicationURL";
-
-export const MobileInteractionPreviewDrawer = () => {
-  let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
-
-  return (
-    <div
-      className={`mobileInteractionPreview shrink-0 z-20 fixed bottom-0 left-0 right-0 border border-border-light w-screen h-[90vh] px-3 bg-bg-leaflet rounded-t-lg overflow-auto ${selectedPost === null ? "hidden" : "block md:hidden "}`}
-    >
-      <PreviewDrawerContent selectedPost={selectedPost} />
-    </div>
-  );
-};
-
-export const DesktopInteractionPreviewDrawer = () => {
-  let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
-
-  return (
-    <div
-      className={`desktopInteractionPreview shrink-0 hidden md:block border border-border-light  w-96 mr-2 px-3  h-[calc(100vh-100px)] sticky top-11 bottom-4 right-0 rounded-lg overflow-auto ${selectedPost === null ? "shadow-none border-dashed bg-transparent" : "shadow-md border-border bg-bg-page "}`}
-    >
-      <PreviewDrawerContent selectedPost={selectedPost} />
-    </div>
-  );
-};
-
-const PreviewDrawerContent = (props: {
-  selectedPost: SelectedPostListing | null;
-}) => {
-  const documentUri = props.selectedPost?.document_uri || null;
-  const drawer = props.selectedPost?.drawer || null;
-
-  const { data, isLoading } = useSWR(
-    documentUri ? ["get_document_interactions", documentUri] : null,
-    async () => {
-      const res = await callRPC("get_document_interactions", {
-        document_uri: documentUri!,
-      });
-      return res;
-    },
-    { keepPreviousData: false },
-  );
-
-  if (!props.selectedPost || !props.selectedPost.document)
-    return (
-      <div className="italic text-tertiary pt-4 text-center">
-        Click a post's comments or mentions to preview them here!
-      </div>
-    );
-
-  const postUrl = getDocumentURL(
-    props.selectedPost.document,
-    props.selectedPost.document_uri,
-    props.selectedPost.publication,
-  );
-
-  const drawerTitle =
-    drawer === "quotes"
-      ? `Mentions of ${props.selectedPost.document.title}`
-      : `Comments for ${props.selectedPost.document.title}`;
-
-  return (
-    <>
-      <div className="sticky top-0 bg-bg-page z-10">
-        <div className=" w-full text-sm text-tertiary flex justify-between pt-3 gap-3">
-          <div className="truncate min-w-0 grow">{drawerTitle}</div>
-          <button
-            className="text-tertiary"
-            onClick={() =>
-              useSelectedPostListing.getState().setSelectedPostListing(null)
-            }
-          >
-            <CloseTiny />
-          </button>
-        </div>
-        <SpeedyLink className="shrink-0 flex gap-1 items-center" href={postUrl}>
-          <ButtonPrimary fullWidth compact className="text-sm! mt-1">
-            See Full Post <GoToArrow />
-          </ButtonPrimary>
-        </SpeedyLink>
-        <hr className="mt-2 border-border-light" />
-      </div>
-      {isLoading ? (
-        <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm mt-8">
-          <span>loading</span>
-          <DotLoader />
-        </div>
-      ) : drawer === "quotes" ? (
-        <div className="mt-3">
-          <ReaderMentionsContent
-            quotesAndMentions={data?.quotesAndMentions || []}
-          />
-        </div>
-      ) : (
-        <CommentsDrawerContent
-          noCommentBox
-          document_uri={props.selectedPost.document_uri}
-          comments={data?.comments || []}
-        />
-      )}
-    </>
-  );
-};
diff --git a/app/(home-pages)/reader/NewContent.tsx b/app/(home-pages)/reader/NewContent.tsx
index 0c8d477b..74f383f7 100644
--- a/app/(home-pages)/reader/NewContent.tsx
+++ b/app/(home-pages)/reader/NewContent.tsx
@@ -7,10 +7,6 @@ import useSWRInfinite from "swr/infinite";
 import { getNewFeed } from "./getNewFeed";
 import { useEffect, useRef } from "react";
 import { PostListing } from "components/PostListing";
-import {
-  DesktopInteractionPreviewDrawer,
-  MobileInteractionPreviewDrawer,
-} from "./InteractionDrawers";
 import { useSelectedPostListing } from "src/useSelectedPostState";
 
 export const NewContent = (props: {
@@ -70,28 +66,24 @@ export const NewContent = (props: {
   }
 
   return (
-    <div className="flex flex-row gap-6 w-full">
-      <div className="flex flex-col gap-6 w-full grow min-w-0 relative">
-        {allPosts.map((p) => (
-          <PostListing
-            {...p}
-            key={p.documents.uri}
-            selected={selectedPost?.document_uri === p.documents.uri}
-          />
-        ))}
-        <div
-          ref={loadMoreRef}
-          className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
-          aria-hidden="true"
+    <>
+      {allPosts.map((p) => (
+        <PostListing
+          {...p}
+          key={p.documents.uri}
+          selected={selectedPost?.document_uri === p.documents.uri}
         />
-        {isValidating && allPosts.length > 0 && (
-          <div className="text-center text-tertiary py-4">
-            Loading more posts...
-          </div>
-        )}
-      </div>
-      <DesktopInteractionPreviewDrawer />
-      <MobileInteractionPreviewDrawer />
-    </div>
+      ))}
+      <div
+        ref={loadMoreRef}
+        className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
+        aria-hidden="true"
+      />
+      {isValidating && allPosts.length > 0 && (
+        <div className="text-center text-tertiary py-4">
+          Loading more posts...
+        </div>
+      )}
+    </>
   );
 };
diff --git a/app/(home-pages)/reader/new/page.tsx b/app/(home-pages)/reader/new/page.tsx
index 002710d0..3edde47c 100644
--- a/app/(home-pages)/reader/new/page.tsx
+++ b/app/(home-pages)/reader/new/page.tsx
@@ -3,6 +3,7 @@ import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"
 import { getNewFeed } from "../getNewFeed";
 import { NewContent } from "../NewContent";
 import { FeedSkeleton } from "../FeedSkeleton";
+import { FeedLayout } from "../FeedLayout";
 
 export default function NewPage() {
   return (
@@ -12,7 +13,9 @@ export default function NewPage() {
       showHeader={false}
     >
       <Suspense fallback={<FeedSkeleton />}>
-        <NewContent promise={getNewFeed()} />
+        <FeedLayout>
+          <NewContent promise={getNewFeed()} />
+        </FeedLayout>
       </Suspense>
     </DashboardPageLayout>
   );
diff --git a/app/(home-pages)/reader/page.tsx b/app/(home-pages)/reader/page.tsx
index ea4c247a..207c0d76 100644
--- a/app/(home-pages)/reader/page.tsx
+++ b/app/(home-pages)/reader/page.tsx
@@ -5,6 +5,7 @@ import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"
 import { getReaderFeed } from "./getReaderFeed";
 import { InboxContent } from "./InboxContent";
 import { FeedSkeleton } from "./FeedSkeleton";
+import { FeedLayout } from "./FeedLayout";
 
 export default async function ReaderPage(props: {
   searchParams: Promise<{ tab?: string }>;
@@ -22,7 +23,9 @@ export default async function ReaderPage(props: {
       showHeader={false}
     >
       <Suspense fallback={<FeedSkeleton />}>
-        <InboxContent promise={getReaderFeed()} />
+        <FeedLayout>
+          <InboxContent promise={getReaderFeed()} />
+        </FeedLayout>
       </Suspense>
     </DashboardPageLayout>
   );
diff --git a/app/(home-pages)/reader/trending/page.tsx b/app/(home-pages)/reader/trending/page.tsx
index cf1c8fdd..b87f1216 100644
--- a/app/(home-pages)/reader/trending/page.tsx
+++ b/app/(home-pages)/reader/trending/page.tsx
@@ -3,6 +3,7 @@ import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"
 import { getHotFeed } from "../getHotFeed";
 import { GlobalContent } from "../GlobalContent";
 import { FeedSkeleton } from "../FeedSkeleton";
+import { FeedLayout } from "../FeedLayout";
 
 export default function ReaderTrendingPage() {
   return (
@@ -12,7 +13,9 @@ export default function ReaderTrendingPage() {
       showHeader={false}
     >
       <Suspense fallback={<FeedSkeleton />}>
-        <GlobalContent promise={getHotFeed()} />
+        <FeedLayout>
+          <GlobalContent promise={getHotFeed()} />
+        </FeedLayout>
       </Suspense>
     </DashboardPageLayout>
   );
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index f8a63c7c..3e502d79 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -98,6 +98,7 @@ export const NavigationContent = (props: NavigationProps) => {
       )}
 
       {onWriterPage && <PublicationButtons />}
+      <div className="flex-1" />
 
       <WriterButton />
       <ReaderButton
diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx
index 8c1f2b3d..52613dbf 100644
--- a/components/ActionBar/NavigationButtons.tsx
+++ b/components/ActionBar/NavigationButtons.tsx
@@ -99,6 +99,7 @@ export function NotificationButton() {
       type="button"
       onClick={handleClick}
       labelOnMobile={false}
+      className="w-full!"
       icon={
         unreads ? (
           <NotificationsUnreadSmall className="text-accent-contrast" />
@@ -119,7 +120,7 @@ export function NotificationButton() {
         )
       }
       active={active}
-      className={unreads ? "text-accent-contrast! font-bold" : ""}
+      className={unreads ? "text-accent-contrast! font-bold w-full!" : "w-full"}
     />
   );
 }
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index ff01a462..b542d670 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -12,11 +12,7 @@ import {
   type NormalizedPublication,
 } from "src/utils/normalizeRecords";
 import { SpeedyLink } from "components/SpeedyLink";
-import { PublishSmall } from "components/Icons/PublishSmall";
-import { Popover } from "components/Popover";
 import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
-import { useIsInitialRender, useIsMobile } from "src/hooks/isMobile";
-import { useState } from "react";
 import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
 import { LoginModal } from "components/LoginButton";
 import useSWR from "swr";
diff --git a/components/PostListing.tsx b/components/PostListing.tsx
index 2631c473..648ddcad 100644
--- a/components/PostListing.tsx
+++ b/components/PostListing.tsx
@@ -138,10 +138,11 @@ export const PostListing = (props: Post & { selected?: boolean }) => {
                 {postRecord.title}
               </h3>
             )}
-
-            <p className="postListingDescription text-secondary line-clamp-3 leading-snug sm:text-base text-sm">
-              {postRecord.description || getFirstParagraph(postRecord)}
-            </p>
+            {postRecord.description && postRecord.description !== "" && (
+              <p className="postListingDescription text-secondary line-clamp-3 leading-snug sm:text-base text-sm">
+                {postRecord.description || getFirstParagraph(postRecord)}
+              </p>
+            )}
             <div className="flex flex-col-reverse gap-2 text-sm text-tertiary items-center justify-start pt-1.5 w-full">
               {props.publication && pubRecord && (
                 <PubInfo
-- 
2.51.2