add a drawer for comments and mentions in reader

app/(home-pages)/reader/InboxContent.tsx

···
 import { SortSmall } from "components/Icons/SortSmall";
 import { Input } from "components/Input";
 import { useHasBackgroundImage } from "components/Pages/useHasBackgroundImage";
-import { InteractionDrawer } from "app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer";
+import {
+  SelectedPostListing,
+  useSelectedPostListing,
+} from "src/useSelectedPostState";
+import { AtUri } from "@atproto/api";
+import { MentionsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Quotes";
+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";
 
 export const InboxContent = (props: {
   posts: Post[];
···
   let hasBackgroundImage = useHasBackgroundImage();
 
   return (
-    <div className="flex flex-row gap-6">
+    <div className="flex flex-row gap-6 ">
       <div className="flex flex-col gap-6 relative">
         <div className="flex justify-between gap-4 text-tertiary">
           <Input
···
           </div>
         )}
       </div>
+      <DesktopInteractionPreviewDrawer />
+      <MobileInteractionPreviewDrawer />
     </div>
   );
+};
+
+const MobileInteractionPreviewDrawer = () => {
+  let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
+
+  return (
+    <div
+      className={`z-20 fixed bottom-0 left-0 right-0 border border-border-light shrink-0 w-screen h-[90vh] px-3 bg-bg-leaflet rounded-t-lg overflow-auto ${selectedPost === null ? "hidden" : "block md:hidden "}`}
+    >
+      <PreviewDrawerContent selectedPost={selectedPost} />
+    </div>
+  );
+};
+const DesktopInteractionPreviewDrawer = () => {
+  let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
+
+  return (
+    <div
+      className={`hidden md:block border border-border-light shrink-0 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;
+}) => {
+  if (!props.selectedPost || !props.selectedPost.document) return;
+
+  if (props.selectedPost.drawer === "quotes") {
+    return (
+      <>
+        {/*<MentionsDrawerContent
+            did={selectedPost.document_uri}
+            quotesAndMentions={[]}
+          />*/}
+      </>
+    );
+  } else
+    return (
+      <>
+        <div className="w-full  text-sm text-tertiary flex justify-between pt-3 gap-3">
+          <div className="truncate min-w-0 grow">
+            Comments for {props.selectedPost.document.title}
+          </div>
+          <button
+            className="text-tertiary"
+            onClick={() =>
+              useSelectedPostListing.getState().setSelectedPostListing(null)
+            }
+          >
+            <CloseTiny />
+          </button>
+        </div>
+        <SpeedyLink
+          className="shrink-0 flex gap-1 items-center "
+          href={"/"}
+        ></SpeedyLink>
+        <ButtonPrimary fullWidth compact className="text-sm! mt-1">
+          See Full Post <GoToArrow />
+        </ButtonPrimary>
+        <CommentsDrawerContent
+          noCommentBox
+          document_uri={props.selectedPost.document_uri}
+          comments={[]}
+        />
+      </>
+    );
 };
 
 export const ReaderEmpty = () => {

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx

···
   document_uri: string;
   comments: Comment[];
   pageId?: string;
+  noCommentBox?: boolean;
 }) {
   let { identity } = useIdentityData();
   let { localComments } = useInteractionState(props.document_uri);
···
       id={"commentsDrawer"}
       className="flex flex-col gap-2 relative text-sm text-secondary"
     >
-      <div className="w-full flex justify-between">
-        <h4> Comments</h4>
-        <button
-          className="text-tertiary"
-          onClick={() =>
-            setInteractionState(props.document_uri, { drawerOpen: false })
-          }
-        >
-          <CloseTiny />
-        </button>
-      </div>
-      {identity?.atp_did ? (
-        <CommentBox doc_uri={props.document_uri} pageId={props.pageId} />
-      ) : (
-        <div className="w-full accent-container text-tertiary text-center italic p-3 flex flex-col gap-2">
-          Connect a Bluesky account to comment
-          <BlueskyLogin redirectRoute={redirectRoute} />
-        </div>
+      {!props.noCommentBox && (
+        <>
+          {identity?.atp_did ? (
+            <CommentBox doc_uri={props.document_uri} pageId={props.pageId} />
+          ) : (
+            <div className="w-full accent-container text-tertiary text-center italic p-3 flex flex-col gap-2">
+              Connect a Bluesky account to comment
+              <BlueskyLogin redirectRoute={redirectRoute} />
+            </div>
+          )}
+          <hr className="border-border-light" />
+        </>
       )}
-      <hr className="border-border-light" />
       <div className="flex flex-col gap-4 py-2">
         {comments
           .sort((a, b) => {

app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx

···
 "use client";
 import { Media } from "components/Media";
 import { MentionsDrawerContent } from "./Quotes";
-import { InteractionState, useInteractionState } from "./Interactions";
+import {
+  InteractionState,
+  setInteractionState,
+  useInteractionState,
+} from "./Interactions";
 import { Json } from "supabase/database.types";
 import { Comment, CommentsDrawerContent } from "./Comments";
 import { useSearchParams } from "next/navigation";
 import { SandwichSpacer } from "components/LeafletLayout";
 import { decodeQuotePosition } from "../quotePosition";
+import { CloseTiny } from "components/Icons/CloseTiny";
 
 export const InteractionDrawer = (props: {
   showPageBackground: boolean | undefined;
···
       <div className="snap-center h-full  flex z-10 shrink-0 sm:max-w-prose sm:w-full w-[calc(100vw-12px)]">
         <div
           id="interaction-drawer"
-          className={`opaque-container  h-full w-full px-3 sm:px-4 pt-2 sm:pt-3 pb-6  overflow-scroll  ${props.showPageBackground ? "rounded-l-none! rounded-r-lg! -ml-[1px]" : "rounded-lg! sm:ml-4"}`}
+          className={`opaque-container relative h-full w-full px-3 sm:px-4 pt-2 sm:pt-3 pb-6  overflow-scroll flex flex-col  ${props.showPageBackground ? "rounded-l-none! rounded-r-lg! -ml-[1px]" : "rounded-lg! sm:ml-4"}`}
         >
           {drawer.drawer === "quotes" ? (
-            <MentionsDrawerContent
-              {...props}
-              quotesAndMentions={filteredQuotesAndMentions}
-            />
+            <>
+              <button
+                className="text-tertiary absolute top-0 right-0"
+                onClick={() =>
+                  setInteractionState(props.document_uri, { drawerOpen: false })
+                }
+              >
+                <CloseTiny />
+              </button>
+              <MentionsDrawerContent
+                {...props}
+                quotesAndMentions={filteredQuotesAndMentions}
+              />
+            </>
           ) : (
-            <CommentsDrawerContent
-              document_uri={props.document_uri}
-              comments={filteredComments}
-              pageId={props.pageId}
-            />
+            <>
+              <div className="w-full flex justify-between">
+                <h4> Comments</h4>
+                <button
+                  className="text-tertiary"
+                  onClick={() =>
+                    setInteractionState(props.document_uri, {
+                      drawerOpen: false,
+                    })
+                  }
+                >
+                  <CloseTiny />
+                </button>
+              </div>
+              <CommentsDrawerContent
+                document_uri={props.document_uri}
+                comments={filteredComments}
+                pageId={props.pageId}
+              />
+            </>
           )}
         </div>
       </div>

app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx

···
   });
 
   return (
-    <div className="relative w-full flex justify-between ">
-      <button
-        className="text-tertiary absolute top-0 right-0"
-        onClick={() => setInteractionState(document_uri, { drawerOpen: false })}
-      >
-        <CloseTiny />
-      </button>
+    <>
       {props.quotesAndMentions.length === 0 ? (
         <div className="opaque-container flex flex-col gap-0.5 p-[6px] text-tertiary italic text-sm text-center">
           <div className="font-bold">no quotes yet!</div>
···
           )}
         </div>
       )}
-    </div>
+    </>
   );
 };
 

app/lish/[did]/[publication]/[rkey]/getPostPageData.ts

···
 import {
   normalizeDocumentRecord,
   normalizePublicationRecord,
-  type NormalizedDocument,
-  type NormalizedPublication,
 } from "src/utils/normalizeRecords";
 import { PubLeafletPublication, SiteStandardPublication } from "lexicons/api";
 import { documentUriFilter } from "src/utils/uriHelpers";
···
   if (!document) return null;
 
   // Normalize the document record - this is the primary way consumers should access document data
-  const normalizedDocument = normalizeDocumentRecord(document.data, document.uri);
+  const normalizedDocument = normalizeDocumentRecord(
+    document.data,
+    document.uri,
+  );
   if (!normalizedDocument) return null;
 
   // Normalize the publication record - this is the primary way consumers should access publication data
   const normalizedPublication = normalizePublicationRecord(
-    document.documents_in_publications[0]?.publications?.record
+    document.documents_in_publications[0]?.publications?.record,
   );
 
   // Fetch constellation backlinks for mentions
···
     // Filter and sort documents by publishedAt
     const sortedDocs = allDocs
       .map((dip) => {
-        const normalizedData = normalizeDocumentRecord(dip?.documents?.data, dip?.documents?.uri);
+        const normalizedData = normalizeDocumentRecord(
+          dip?.documents?.data,
+          dip?.documents?.uri,
+        );
         return {
           uri: dip?.documents?.uri,
           title: normalizedData?.title,
···
       );
 
     // Find current document index
-    const currentIndex = sortedDocs.findIndex((doc) => doc.uri === document.uri);
+    const currentIndex = sortedDocs.findIndex(
+      (doc) => doc.uri === document.uri,
+    );
 
     if (currentIndex !== -1) {
       prevNext = {
···
 
   // Build explicit publication context for consumers
   const rawPub = document.documents_in_publications[0]?.publications;
-  const publication = rawPub ? {
-    uri: rawPub.uri,
-    name: rawPub.name,
-    identity_did: rawPub.identity_did,
-    record: rawPub.record as PubLeafletPublication.Record | SiteStandardPublication.Record | null,
-    publication_subscriptions: rawPub.publication_subscriptions || [],
-  } : null;
+  const publication = rawPub
+    ? {
+        uri: rawPub.uri,
+        name: rawPub.name,
+        identity_did: rawPub.identity_did,
+        record: rawPub.record as
+          | PubLeafletPublication.Record
+          | SiteStandardPublication.Record
+          | null,
+        publication_subscriptions: rawPub.publication_subscriptions || [],
+      }
+    : null;
 
   return {
     ...document,

components/PostListing.tsx

···
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import { useSmoker } from "./Toast";
 import { Separator } from "./Layout";
-import { SpeedyLink } from "./SpeedyLink";
 import { CommentTiny } from "./Icons/CommentTiny";
 import { QuoteTiny } from "./Icons/QuoteTiny";
 import { ShareTiny } from "./Icons/ShareTiny";
+import { useSelectedPostListing } from "src/useSelectedPostState";
 
 export const PostListing = (props: Post) => {
   let pubRecord = props.publication?.pubRecord as
···
           tags={tags}
           showComments={pubRecord?.preferences?.showComments !== false}
           showMentions={pubRecord?.preferences?.showMentions !== false}
-        />{" "}
+          documentUri={props.documents.uri}
+          document={postRecord}
+        />
         <Share postUrl={postUrl} />
       </div>
     </div>
···
   postUrl: string;
   showComments: boolean;
   showMentions: boolean;
+  documentUri: string;
+  document: NormalizedDocument;
 }) => {
+  let setSelectedPostListing = useSelectedPostListing(
+    (s) => s.setSelectedPostListing,
+  );
+  let selectPostListing = (drawer: "quotes" | "comments") => {
+    setSelectedPostListing({
+      document_uri: props.documentUri,
+      document: props.document,
+      drawer,
+    });
+  };
+
   return (
     <div
       className={`flex gap-2 text-tertiary text-sm  items-center justify-between px-1`}
     >
       <div className="postListingsInteractions flex gap-3">
         {!props.showMentions || props.quotesCount === 0 ? null : (
-          <SpeedyLink
+          <button
             aria-label="Post quotes"
-            href={`${props.postUrl}?interactionDrawer=quotes`}
-            className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast hover:no-underline! text-tertiary"
+            onClick={() => selectPostListing("quotes")}
+            className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast text-tertiary"
           >
             <QuoteTiny /> {props.quotesCount}
-          </SpeedyLink>
+          </button>
         )}
         {!props.showComments || props.commentsCount === 0 ? null : (
-          <SpeedyLink
+          <button
             aria-label="Post comments"
-            href={`${props.postUrl}?interactionDrawer=comments`}
-            className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast hover:no-underline! text-tertiary"
+            onClick={() => selectPostListing("comments")}
+            className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast text-tertiary"
           >
             <CommentTiny /> {props.commentsCount}
-          </SpeedyLink>
+          </button>
         )}
       </div>
     </div>