add published page block preview

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

···
 }) => {
   let data = useContext(PostPageContext);
   const document_uri = data?.uri;
-  if (!document_uri) throw new Error('document_uri not available in PostPageContext');
+  if (!document_uri)
+    throw new Error("document_uri not available in PostPageContext");
 
   return (
     <div className="flex flex-col gap-2">
···
         Quotes
         <button
           className="text-tertiary"
-          onClick={() => setInteractionState(document_uri, { drawerOpen: false })}
+          onClick={() =>
+            setInteractionState(document_uri, { drawerOpen: false })
+          }
         >
           <CloseTiny />
         </button>
···
       >
         <div className="italic border border-border-light rounded-md px-2 pt-1">
           <PostContent
+            pages={[]}
             bskyPostData={[]}
             blocks={content}
             did={props.did}

app/lish/[did]/[publication]/[rkey]/PostContent.tsx

···
 import { AppBskyFeedDefs } from "@atproto/api";
 import { PubBlueskyPostBlock } from "./PublishBskyPostBlock";
 import { openPage } from "./PostPages";
+import { PageLinkBlock } from "components/Blocks/PageLinkBlock";
+import { PublishedPageLinkBlock } from "./PublishedPageBlock";
 
 export function PostContent({
   blocks,
···
   prerenderedCodeBlocks,
   bskyPostData,
   pageId,
+  pages,
 }: {
   blocks: PubLeafletPagesLinearDocument.Block[];
   pageId?: string;
···
   className?: string;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
+  pages: PubLeafletPagesLinearDocument.Main[];
 }) {
   return (
     <div
···
         return (
           <Block
             pageId={pageId}
+            pages={pages}
             bskyPostData={bskyPostData}
             block={b}
             did={did}
···
   prerenderedCodeBlocks,
   bskyPostData,
   pageId,
+  pages,
 }: {
   pageId?: string;
   preview?: boolean;
···
   block: PubLeafletPagesLinearDocument.Block;
   did: string;
   isList?: boolean;
+  pages: PubLeafletPagesLinearDocument.Main[];
   previousBlock?: PubLeafletPagesLinearDocument.Block;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
···
   switch (true) {
     case PubLeafletBlocksPage.isMain(b.block): {
       let id = b.block.id;
+      let page = pages.find((p) => p.id === id);
+      if (!page) return;
       return (
-        <div
-          onClick={() => {
-            openPage(pageId, id);
-          }}
-        >
-          ITS A BLOCK
-        </div>
+        <PublishedPageLinkBlock
+          blocks={page.blocks}
+          pageId={id}
+          parentPageId={pageId}
+          did={did}
+          bskyPostData={bskyPostData}
+        />
       );
     }
     case PubLeafletBlocksBskyPost.isMain(b.block): {
···
         <ul className="-ml-px sm:ml-[9px] pb-2">
           {b.block.children.map((child, i) => (
             <ListItem
+              pages={pages}
               bskyPostData={bskyPostData}
               index={[...index, i]}
               item={child}
···
 
 function ListItem(props: {
   index: number[];
+  pages: PubLeafletPagesLinearDocument.Main[];
   item: PubLeafletBlocksUnorderedList.ListItem;
   did: string;
   className?: string;
···
     <ul className="-ml-[7px] sm:ml-[7px]">
       {props.item.children.map((child, index) => (
         <ListItem
+          pages={props.pages}
           bskyPostData={props.bskyPostData}
           index={[...props.index, index]}
           item={child}
···
       />
       <div className="flex flex-col w-full">
         <Block
+          pages={props.pages}
           bskyPostData={props.bskyPostData}
           block={{ block: props.item.content }}
           did={props.did}

app/lish/[did]/[publication]/[rkey]/PostPages.tsx

···
 import { PageOptionButton } from "components/Pages/PageOptions";
 import { CloseTiny } from "components/Icons/CloseTiny";
 import { PageWrapper } from "components/Pages/Page";
+import { Fragment } from "react";
 export const usePostPageUIState = create(() => ({
   pages: [] as string[],
 }));
···
 
   let hasPageBackground = !!pubRecord.theme?.showPageBackground;
   let fullPageScroll = !hasPageBackground && !drawerOpen && pages.length === 0;
+  let record = document.data as PubLeafletDocument.Record;
   return (
     <>
       {!fullPageScroll && <BookendSpacer />}
···
           preferences={preferences}
         />
         <PostContent
+          pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
           bskyPostData={bskyPostData}
           blocks={blocks}
           did={did}
···
       )}
 
       {pages.map((p) => {
-        let record = document.data as PubLeafletDocument.Record;
         let page = record.pages.find(
           (page) => (page as PubLeafletPagesLinearDocument.Main).id === p,
         ) as PubLeafletPagesLinearDocument.Main | undefined;
         if (!page) return null;
         return (
-          <>
+          <Fragment key={p}>
             <SandwichSpacer />
             <PageWrapper
               cardBorderHidden={!hasPageBackground}
···
               }
             >
               <PostContent
+                pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
                 pageId={page.id}
                 bskyPostData={bskyPostData}
                 blocks={page.blocks}
···
                 prerenderedCodeBlocks={prerenderedCodeBlocks}
               />
             </PageWrapper>
-          </>
+          </Fragment>
         );
       })}
       {!fullPageScroll && <BookendSpacer />}

app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx

···
+"use client";
+
+import { useEntity, useReplicache } from "src/replicache";
+import { useUIState } from "src/useUIState";
+import { CSSProperties, useContext, useRef } from "react";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+import { PostContent } from "./PostContent";
+import {
+  PubLeafletBlocksHeader,
+  PubLeafletBlocksText,
+  PubLeafletPagesLinearDocument,
+  PubLeafletPublication,
+} from "lexicons/api";
+import { AppBskyFeedDefs } from "@atproto/api";
+import { TextBlock } from "./TextBlock";
+import { PostPageContext } from "./PostPageContext";
+import { openPage, usePostPageUIState } from "./PostPages";
+
+export function PublishedPageLinkBlock(props: {
+  blocks: PubLeafletPagesLinearDocument.Block[];
+  parentPageId: string | undefined;
+  pageId: string;
+  did: string;
+  preview?: boolean;
+  className?: string;
+  prerenderedCodeBlocks?: Map<string, string>;
+  bskyPostData: AppBskyFeedDefs.PostView[];
+}) {
+  //switch to use actually state
+  let isOpen = usePostPageUIState((s) => s.pages.includes(props.pageId));
+  return (
+    <div
+      className={`w-full cursor-pointer
+        pageLinkBlockWrapper relative group/pageLinkBlock
+        bg-bg-page shadow-sm
+        flex overflow-clip
+        block-border
+        ${isOpen && "!border-tertiary"}
+        `}
+      onClick={(e) => {
+        if (e.isDefaultPrevented()) return;
+        if (e.shiftKey) return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        console.log("yoo@");
+
+        openPage(props.parentPageId, props.pageId);
+        //open the damn thing somehow
+      }}
+    >
+      <DocLinkBlock {...props} />
+    </div>
+  );
+}
+export function DocLinkBlock(props: {
+  blocks: PubLeafletPagesLinearDocument.Block[];
+  pageId?: string;
+  did: string;
+  preview?: boolean;
+  className?: string;
+  prerenderedCodeBlocks?: Map<string, string>;
+  bskyPostData: AppBskyFeedDefs.PostView[];
+}) {
+  let { rep } = useReplicache();
+  let [title, description] = props.blocks
+    .map((b) => b.block)
+    .filter(
+      (b) => PubLeafletBlocksText.isMain(b) || PubLeafletBlocksHeader.isMain(b),
+    );
+
+  return (
+    <div
+      style={{ "--list-marker-width": "20px" } as CSSProperties}
+      className={`
+        w-full h-[104px]
+        `}
+    >
+      <>
+        <div className="pageLinkBlockContent w-full flex overflow-clip cursor-pointer h-full">
+          <div className="my-2 ml-3 grow min-w-0 text-sm bg-transparent overflow-clip ">
+            {title && (
+              <div
+                className={`pageBlockOne outline-none resize-none align-top flex gap-2 ${title.$type === "pub.leaflet.blocks.header" ? "font-bold text-base" : ""}`}
+              >
+                <TextBlock
+                  facets={title.facets}
+                  plaintext={title.plaintext}
+                  index={[]}
+                  preview
+                />
+              </div>
+            )}
+            {description && (
+              <div
+                className={`pageBlockLineTwo outline-none resize-none align-top flex  gap-2 ${description.$type === "pub.leaflet.blocks.header" ? "font-bold" : ""}`}
+              >
+                <TextBlock
+                  facets={description.facets}
+                  plaintext={description.plaintext}
+                  index={[]}
+                  preview
+                />
+              </div>
+            )}
+          </div>
+          {!props.preview && (
+            <PagePreview blocks={props.blocks} did={props.did} />
+          )}
+        </div>
+      </>
+    </div>
+  );
+}
+
+export function PagePreview(props: {
+  did: string;
+  blocks: PubLeafletPagesLinearDocument.Block[];
+}) {
+  let previewRef = useRef<HTMLDivElement | null>(null);
+  let { rootEntity } = useReplicache();
+  let data = useContext(PostPageContext);
+  let theme = data?.documents_in_publications[0]?.publications
+    ?.record as PubLeafletPublication.Record;
+  let pageWidth = `var(--page-width-unitless)`;
+  let cardBorderHidden = !theme.theme?.showPageBackground;
+  return (
+    <div
+      ref={previewRef}
+      className={`pageLinkBlockPreview w-[120px] overflow-clip  mx-3 mt-3 -mb-2  border rounded-md shrink-0 border-border-light flex flex-col gap-0.5 rotate-[4deg] origin-center ${cardBorderHidden ? "" : "bg-bg-page"}`}
+    >
+      <div
+        className="absolute top-0 left-0 origin-top-left pointer-events-none "
+        style={{
+          width: `calc(1px * ${pageWidth})`,
+          height: `calc(100vh - 64px)`,
+          transform: `scale(calc((120 / ${pageWidth} )))`,
+          backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))",
+        }}
+      >
+        {!cardBorderHidden && (
+          <div
+            className={`pageLinkBlockBackground
+            absolute top-0 left-0 right-0 bottom-0
+            pointer-events-none
+            `}
+          />
+        )}
+        <PostContent
+          pages={[]}
+          did={props.did}
+          blocks={props.blocks}
+          preview
+          bskyPostData={[]}
+        />
+      </div>
+    </div>
+  );
+}