From f2fa8ff302cc4ddb60b2d3e532edbe9e04c02e0e Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Fri, 26 Sep 2025 12:40:55 -1000
Subject: [PATCH] add published page block preview

---
 .../[rkey]/Interactions/Quotes.tsx            |   8 +-
 .../[publication]/[rkey]/PostContent.tsx      |  27 ++-
 .../[did]/[publication]/[rkey]/PostPages.tsx  |   9 +-
 .../[rkey]/PublishedPageBlock.tsx             | 159 ++++++++++++++++++
 4 files changed, 191 insertions(+), 12 deletions(-)
 create mode 100644 app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx

diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
index 8b3ae0ba..58cbd732 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
@@ -26,7 +26,8 @@ export const Quotes = (props: {
 }) => {
   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">
@@ -34,7 +35,9 @@ export const Quotes = (props: {
         Quotes
         <button
           className="text-tertiary"
-          onClick={() => setInteractionState(document_uri, { drawerOpen: false })}
+          onClick={() =>
+            setInteractionState(document_uri, { drawerOpen: false })
+          }
         >
           <CloseTiny />
         </button>
@@ -125,6 +128,7 @@ export const QuoteContent = (props: {
       >
         <div className="italic border border-border-light rounded-md px-2 pt-1">
           <PostContent
+            pages={[]}
             bskyPostData={[]}
             blocks={content}
             did={props.did}
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index c92c11de..b05cf0e4 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -26,6 +26,8 @@ import { PubCodeBlock } from "./PubCodeBlock";
 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,
@@ -35,6 +37,7 @@ export function PostContent({
   prerenderedCodeBlocks,
   bskyPostData,
   pageId,
+  pages,
 }: {
   blocks: PubLeafletPagesLinearDocument.Block[];
   pageId?: string;
@@ -43,6 +46,7 @@ export function PostContent({
   className?: string;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
+  pages: PubLeafletPagesLinearDocument.Main[];
 }) {
   return (
     <div
@@ -53,6 +57,7 @@ export function PostContent({
         return (
           <Block
             pageId={pageId}
+            pages={pages}
             bskyPostData={bskyPostData}
             block={b}
             did={did}
@@ -78,6 +83,7 @@ let Block = ({
   prerenderedCodeBlocks,
   bskyPostData,
   pageId,
+  pages,
 }: {
   pageId?: string;
   preview?: boolean;
@@ -85,6 +91,7 @@ let Block = ({
   block: PubLeafletPagesLinearDocument.Block;
   did: string;
   isList?: boolean;
+  pages: PubLeafletPagesLinearDocument.Main[];
   previousBlock?: PubLeafletPagesLinearDocument.Block;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
@@ -123,14 +130,16 @@ let Block = ({
   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): {
@@ -159,6 +168,7 @@ let 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}
@@ -316,6 +326,7 @@ let Block = ({
 
 function ListItem(props: {
   index: number[];
+  pages: PubLeafletPagesLinearDocument.Main[];
   item: PubLeafletBlocksUnorderedList.ListItem;
   did: string;
   className?: string;
@@ -325,6 +336,7 @@ function ListItem(props: {
     <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}
@@ -343,6 +355,7 @@ function ListItem(props: {
       />
       <div className="flex flex-col w-full">
         <Block
+          pages={props.pages}
           bskyPostData={props.bskyPostData}
           block={{ block: props.item.content }}
           did={props.did}
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
index 77e3f8fa..eeee5f8c 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
@@ -21,6 +21,7 @@ import { CSS } from "@react-spring/web";
 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[],
 }));
@@ -73,6 +74,7 @@ export function PostPages({
 
   let hasPageBackground = !!pubRecord.theme?.showPageBackground;
   let fullPageScroll = !hasPageBackground && !drawerOpen && pages.length === 0;
+  let record = document.data as PubLeafletDocument.Record;
   return (
     <>
       {!fullPageScroll && <BookendSpacer />}
@@ -88,6 +90,7 @@ export function PostPages({
           preferences={preferences}
         />
         <PostContent
+          pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
           bskyPostData={bskyPostData}
           blocks={blocks}
           did={did}
@@ -141,13 +144,12 @@ export function PostPages({
       )}
 
       {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}
@@ -161,6 +163,7 @@ export function PostPages({
               }
             >
               <PostContent
+                pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
                 pageId={page.id}
                 bskyPostData={bskyPostData}
                 blocks={page.blocks}
@@ -168,7 +171,7 @@ export function PostPages({
                 prerenderedCodeBlocks={prerenderedCodeBlocks}
               />
             </PageWrapper>
-          </>
+          </Fragment>
         );
       })}
       {!fullPageScroll && <BookendSpacer />}
diff --git a/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx b/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
new file mode 100644
index 00000000..3a66db80
--- /dev/null
+++ b/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
@@ -0,0 +1,159 @@
+"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>
+  );
+}
-- 
2.54.0