clean up leaflet options and fix links

app/(home-pages)/home/HomeLayout.tsx

···
             <LeafletListItem
               title={props?.titles?.[leaflet.root_entity]}
               archived={archived}
-              token={leaflet}
-              draftInPublication={
-                leaflet.leaflets_in_publications?.[0]?.publication
-              }
-              published={
-                !!leaflet.leaflets_in_publications?.find((l) => l.doc) ||
-                !!leaflet.leaflets_to_documents?.find((l) => !!l.documents)
-              }
-              publishedAt={
-                leaflet.leaflets_in_publications?.find((l) => l.doc)?.documents
-                  ?.indexed_at ||
-                leaflet.leaflets_to_documents?.find((l) => !!l.documents)
-                  ?.documents?.indexed_at
-              }
-              document_uri={
-                leaflet.leaflets_in_publications?.find((l) => l.doc)?.documents
-                  ?.uri
-              }
-              leaflet_id={leaflet.root_entity}
               loggedIn={!!identity}
               display={display}
               added_at={added_at}

app/(home-pages)/home/LeafletList/LeafletInfo.tsx

···
 "use client";
-import { PermissionToken, useEntity } from "src/replicache";
+import { useEntity } from "src/replicache";
 import { LeafletOptions } from "./LeafletOptions";
-import { useState } from "react";
 import { timeAgo } from "src/utils/timeAgo";
 import { usePageTitle } from "components/utils/UpdateLeafletTitle";
+import { useLeafletPublicationStatus } from "components/PageSWRDataProvider";
 
 export const LeafletInfo = (props: {
   title?: string;
-  draftInPublication?: string;
-  published?: boolean;
-  token: PermissionToken;
-  leaflet_id: string;
-  loggedIn: boolean;
   className?: string;
   display: "grid" | "list";
   added_at: string;
-  publishedAt?: string;
-  document_uri?: string;
   archived?: boolean | null;
+  loggedIn: boolean;
 }) => {
-  let [prefetch, setPrefetch] = useState(false);
+  const pubStatus = useLeafletPublicationStatus();
   let prettyCreatedAt = props.added_at ? timeAgo(props.added_at) : "";
-  let prettyPublishedAt = props.publishedAt ? timeAgo(props.publishedAt) : "";
+  let prettyPublishedAt = pubStatus?.publishedAt
+    ? timeAgo(pubStatus.publishedAt)
+    : "";
 
   // Look up root page first, like UpdateLeafletTitle does
-  let firstPage = useEntity(props.leaflet_id, "root/page")[0];
-  let entityID = firstPage?.data.value || props.leaflet_id;
+  let firstPage = useEntity(pubStatus?.leafletId ?? "", "root/page")[0];
+  let entityID = firstPage?.data.value || pubStatus?.leafletId || "";
   let titleFromDb = usePageTitle(entityID);
 
   let title = props.title ?? titleFromDb ?? "Untitled";
···
           {title}
         </h3>
         <div className="flex gap-1 shrink-0">
-          <LeafletOptions
-            leaflet={props.token}
-            draftInPublication={props.draftInPublication}
-            document_uri={props.document_uri}
-            shareLink={`${props.token.id}`}
-            archived={props.archived}
-            loggedIn={props.loggedIn}
-          />
+          <LeafletOptions archived={props.archived} loggedIn={props.loggedIn} />
         </div>
       </div>
       <div className="flex gap-2 items-center">
         {props.archived ? (
           <div className="text-xs text-tertiary truncate">Archived</div>
-        ) : props.draftInPublication || props.published ? (
+        ) : pubStatus?.draftInPublication || pubStatus?.isPublished ? (
           <div
-            className={`text-xs w-max grow truncate ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`}
+            className={`text-xs w-max grow truncate ${pubStatus?.isPublished ? "font-bold text-tertiary" : "text-tertiary"}`}
           >
-            {props.published
+            {pubStatus?.isPublished
               ? `Published ${prettyPublishedAt}`
               : `Draft ${prettyCreatedAt}`}
           </div>

app/(home-pages)/home/LeafletList/LeafletListItem.tsx

···
 "use client";
-import { PermissionToken } from "src/replicache";
 import { LeafletListPreview, LeafletGridPreview } from "./LeafletPreview";
 import { LeafletInfo } from "./LeafletInfo";
 import { useState, useRef, useEffect } from "react";
 import { SpeedyLink } from "components/SpeedyLink";
+import { useLeafletPublicationStatus } from "components/PageSWRDataProvider";
 
 export const LeafletListItem = (props: {
-  token: PermissionToken;
   archived?: boolean | null;
-  leaflet_id: string;
   loggedIn: boolean;
   display: "list" | "grid";
   cardBorderHidden: boolean;
   added_at: string;
   title?: string;
-  draftInPublication?: string;
-  published?: boolean;
-  publishedAt?: string;
-  document_uri?: string;
   index: number;
   isHidden: boolean;
   showPreview?: boolean;
 }) => {
+  const pubStatus = useLeafletPublicationStatus();
   let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false);
   let previewRef = useRef<HTMLDivElement | null>(null);
 
···
     return () => observer.disconnect();
   }, [previewRef]);
 
+  const tokenId = pubStatus?.shareLink ?? "";
+
   if (props.display === "list")
     return (
       <>
···
           }}
         >
           <SpeedyLink
-            href={`/${props.token.id}`}
+            href={`/${tokenId}`}
             className={`absolute w-full h-full top-0 left-0 no-underline hover:no-underline! text-primary`}
           />
-          {props.showPreview && (
-            <LeafletListPreview isVisible={isOnScreen} {...props} />
-          )}
-          <LeafletInfo {...props} />
+          {props.showPreview && <LeafletListPreview isVisible={isOnScreen} />}
+          <LeafletInfo
+            title={props.title}
+            display={props.display}
+            added_at={props.added_at}
+            archived={props.archived}
+            loggedIn={props.loggedIn}
+          />
         </div>
         {props.cardBorderHidden && (
           <hr
···
       }}
     >
       <SpeedyLink
-        href={`/${props.token.id}`}
+        href={`/${tokenId}`}
         className={`absolute w-full h-full top-0 left-0 no-underline hover:no-underline! text-primary`}
       />
       <div className="grow">
-        <LeafletGridPreview {...props} isVisible={isOnScreen} />
+        <LeafletGridPreview isVisible={isOnScreen} />
       </div>
       <LeafletInfo
         className="px-1 pb-0.5 shrink-0"
-        {...props}
+        title={props.title}
+        display={props.display}
+        added_at={props.added_at}
+        archived={props.archived}
+        loggedIn={props.loggedIn}
       />
     </div>
   );

app/(home-pages)/home/LeafletList/LeafletOptions.tsx

···
 import { HideSmall } from "components/Icons/HideSmall";
 import { hideDoc } from "../storage";
 
-import { PermissionToken } from "src/replicache";
 import {
   useIdentityData,
   mutateIdentityData,
···
   mutatePublicationData,
 } from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider";
 import { ShareButton } from "app/[leaflet_id]/actions/ShareOptions";
+import { useLeafletPublicationStatus } from "components/PageSWRDataProvider";
 
 export const LeafletOptions = (props: {
-  leaflet: PermissionToken;
-  draftInPublication?: string;
-  document_uri?: string;
-  shareLink: string;
   archived?: boolean | null;
   loggedIn?: boolean;
 }) => {
+  const pubStatus = useLeafletPublicationStatus();
   let [state, setState] = useState<"normal" | "areYouSure">("normal");
   let [open, setOpen] = useState(false);
   let { identity } = useIdentityData();
   let isPublicationOwner =
-    !!identity?.atp_did && !!props.document_uri?.includes(identity.atp_did);
+    !!identity?.atp_did && !!pubStatus?.documentUri?.includes(identity.atp_did);
   return (
     <>
       <Menu
···
       >
         {state === "normal" ? (
           !props.loggedIn ? (
-            <LoggedOutOptions
-              leaflet={props.leaflet}
-              setState={setState}
-              shareLink={props.shareLink}
-            />
-          ) : props.document_uri && isPublicationOwner ? (
-            <PublishedPostOptions
-              setState={setState}
-              document_uri={props.document_uri}
-              {...props}
-            />
+            <LoggedOutOptions setState={setState} />
+          ) : pubStatus?.documentUri && isPublicationOwner ? (
+            <PublishedPostOptions setState={setState} />
           ) : (
-            <DefaultOptions setState={setState} {...props} />
+            <DefaultOptions setState={setState} archived={props.archived} />
           )
         ) : state === "areYouSure" ? (
-          <DeleteAreYouSureForm
-            backToMenu={() => setState("normal")}
-            leaflet={props.leaflet}
-            document_uri={props.document_uri}
-            draft={!!props.draftInPublication}
-          />
+          <DeleteAreYouSureForm backToMenu={() => setState("normal")} />
         ) : null}
       </Menu>
     </>
···
 
 const DefaultOptions = (props: {
   setState: (s: "areYouSure") => void;
-  draftInPublication?: string;
-  leaflet: PermissionToken;
-  shareLink: string;
   archived?: boolean | null;
 }) => {
-  let toaster = useToaster();
-  let { mutate: mutatePub } = usePublicationData();
-  let { mutate: mutateIdentity } = useIdentityData();
+  const pubStatus = useLeafletPublicationStatus();
+  const toaster = useToaster();
+  const { setArchived } = useArchiveMutations();
+  const tokenId = pubStatus?.token.id;
+  const itemType = pubStatus?.draftInPublication ? "Draft" : "Leaflet";
+
   return (
     <>
-      <ShareButton
-        text={
-          <div className="flex gap-2">
-            <ShareSmall />
-            Copy Edit Link
-          </div>
-        }
-        subtext=""
-        smokerText="Link copied!"
-        id="get-link"
-        link={props.shareLink}
-      />
+      <EditLinkShareButton link={pubStatus?.shareLink ?? ""} />
       <hr className="border-border-light" />
       <MenuItem
         onSelect={async () => {
+          if (!tokenId) return;
+          setArchived(tokenId, !props.archived);
+
           if (!props.archived) {
-            mutateIdentityData(mutateIdentity, (data) => {
-              let item = data.permission_token_on_homepage.find(
-                (p) => p.permission_tokens?.id === props.leaflet.id,
-              );
-              if (item) item.archived = true;
-            });
-            mutatePublicationData(mutatePub, (data) => {
-              let item = data.publication?.leaflets_in_publications.find(
-                (l) => l.permission_tokens?.id === props.leaflet.id,
-              );
-              if (item) item.archived = true;
-            });
-            await archivePost(props.leaflet.id);
+            await archivePost(tokenId);
             toaster({
               content: (
                 <div className="font-bold flex gap-2">
-                  Archived{props.draftInPublication ? " Draft" : " Leaflet"}!
+                  Archived {itemType}!
                   <ButtonTertiary
                     className="underline text-accent-2!"
                     onClick={async () => {
-                      mutateIdentityData(mutateIdentity, (data) => {
-                        let item = data.permission_token_on_homepage.find(
-                          (p) => p.permission_tokens?.id === props.leaflet.id,
-                        );
-                        if (item) item.archived = false;
-                      });
-                      mutatePublicationData(mutatePub, (data) => {
-                        let item =
-                          data.publication?.leaflets_in_publications.find(
-                            (l) => l.permission_tokens?.id === props.leaflet.id,
-                          );
-                        if (item) item.archived = false;
-                      });
-                      await unarchivePost(props.leaflet.id);
+                      setArchived(tokenId, false);
+                      await unarchivePost(tokenId);
                       toaster({
-                        content: (
-                          <div className="font-bold flex gap-2">
-                            Unarchived!
-                          </div>
-                        ),
+                        content: <div className="font-bold">Unarchived!</div>,
                         type: "success",
                       });
                     }}
···
               type: "success",
             });
           } else {
-            mutateIdentityData(mutateIdentity, (data) => {
-              let item = data.permission_token_on_homepage.find(
-                (p) => p.permission_tokens?.id === props.leaflet.id,
-              );
-              if (item) item.archived = false;
-            });
-            mutatePublicationData(mutatePub, (data) => {
-              let item = data.publication?.leaflets_in_publications.find(
-                (l) => l.permission_tokens?.id === props.leaflet.id,
-              );
-              if (item) item.archived = false;
-            });
-            await unarchivePost(props.leaflet.id);
+            await unarchivePost(tokenId);
             toaster({
               content: <div className="font-bold">Unarchived!</div>,
               type: "success",
···
         }}
       >
         <ArchiveSmall />
-        {!props.archived ? " Archive" : "Unarchive"}
-        {props.draftInPublication ? " Draft" : " Leaflet"}
+        {!props.archived ? " Archive" : "Unarchive"} {itemType}
       </MenuItem>
-      <MenuItem
+      <DeleteForeverMenuItem
         onSelect={(e) => {
           e.preventDefault();
           props.setState("areYouSure");
         }}
-      >
-        <DeleteSmall />
-        Delete Forever
-      </MenuItem>
+      />
     </>
   );
 };
 
-const LoggedOutOptions = (props: {
-  leaflet: PermissionToken;
-  setState: (s: "areYouSure") => void;
-  shareLink: string;
-}) => {
-  let toaster = useToaster();
+const LoggedOutOptions = (props: { setState: (s: "areYouSure") => void }) => {
+  const pubStatus = useLeafletPublicationStatus();
+  const toaster = useToaster();
+
   return (
     <>
-      <ShareButton
-        text={
-          <div className="flex gap-2">
-            <ShareSmall />
-            Copy Edit Link
-          </div>
-        }
-        subtext=""
-        smokerText="Link copied!"
-        id="get-link"
-        link={`/${props.shareLink}`}
-      />
+      <EditLinkShareButton link={`/${pubStatus?.shareLink ?? ""}`} />
       <hr className="border-border-light" />
       <MenuItem
         onSelect={() => {
-          hideDoc(props.leaflet);
+          if (pubStatus?.token) hideDoc(pubStatus.token);
           toaster({
             content: <div className="font-bold">Removed from Home!</div>,
             type: "success",
···
         <HideSmall />
         Remove from Home
       </MenuItem>
-      <MenuItem
+      <DeleteForeverMenuItem
         onSelect={(e) => {
           e.preventDefault();
           props.setState("areYouSure");
         }}
-      >
-        <DeleteSmall />
-        Delete Forever
-      </MenuItem>
+      />
     </>
   );
 };
 
 const PublishedPostOptions = (props: {
   setState: (s: "areYouSure") => void;
-  document_uri: string;
-  leaflet: PermissionToken;
-  shareLink: string;
 }) => {
-  let toaster = useToaster();
+  const pubStatus = useLeafletPublicationStatus();
+  const toaster = useToaster();
+  const postLink = pubStatus?.postShareLink ?? "";
+  const isFullUrl = postLink.includes("http");
+
   return (
     <>
       <ShareButton
···
         }
         smokerText="Link copied!"
         id="get-link"
-        link=""
-        fullLink={props.shareLink}
+        link={postLink}
+        fullLink={isFullUrl ? postLink : undefined}
       />
-
       <hr className="border-border-light" />
       <MenuItem
         onSelect={async () => {
-          if (props.document_uri) {
-            await unpublishPost(props.document_uri);
+          if (pubStatus?.documentUri) {
+            await unpublishPost(pubStatus.documentUri);
           }
           toaster({
             content: <div className="font-bold">Unpublished Post!</div>,
···
           </div>
         </div>
       </MenuItem>
-      <MenuItem
+      <DeleteForeverMenuItem
         onSelect={(e) => {
           e.preventDefault();
           props.setState("areYouSure");
         }}
-      >
-        <DeleteSmall />
-        <div className="flex flex-col">
-          Delete Post
-          <div className="text-tertiary text-sm font-normal!">
-            Unpublish AND delete
-          </div>
-        </div>
-      </MenuItem>
+        subtext="Post"
+      />
     </>
   );
 };
 
-const DeleteAreYouSureForm = (props: {
-  backToMenu: () => void;
-  document_uri?: string;
-  leaflet: PermissionToken;
-  draft?: boolean;
-}) => {
-  let toaster = useToaster();
-  let { mutate: mutatePub } = usePublicationData();
-  let { mutate: mutateIdentity } = useIdentityData();
+const DeleteAreYouSureForm = (props: { backToMenu: () => void }) => {
+  const pubStatus = useLeafletPublicationStatus();
+  const toaster = useToaster();
+  const { removeFromLists } = useArchiveMutations();
+  const tokenId = pubStatus?.token.id;
+
+  const itemType = pubStatus?.documentUri
+    ? "Post"
+    : pubStatus?.draftInPublication
+      ? "Draft"
+      : "Leaflet";
 
   return (
     <div className="flex flex-col justify-center p-2 text-center">
···
         </ButtonTertiary>
         <ButtonPrimary
           onClick={async () => {
-            mutateIdentityData(mutateIdentity, (data) => {
-              data.permission_token_on_homepage =
-                data.permission_token_on_homepage.filter(
-                  (p) => p.permission_tokens?.id !== props.leaflet.id,
-                );
-            });
-            mutatePublicationData(mutatePub, (data) => {
-              if (!data.publication) return;
-              data.publication.leaflets_in_publications =
-                data.publication.leaflets_in_publications.filter(
-                  (l) => l.permission_tokens?.id !== props.leaflet.id,
-                );
-            });
-            if (props.document_uri) {
-              await deletePost(props.document_uri);
+            if (tokenId) removeFromLists(tokenId);
+            if (pubStatus?.documentUri) {
+              await deletePost(pubStatus.documentUri);
             }
-            deleteLeaflet(props.leaflet);
+            if (pubStatus?.token) deleteLeaflet(pubStatus.token);
 
             toaster({
-              content: (
-                <div className="font-bold">
-                  Deleted{" "}
-                  {props.document_uri
-                    ? "Post!"
-                    : props.draft
-                      ? "Draft"
-                      : "Leaflet!"}
-                </div>
-              ),
+              content: <div className="font-bold">Deleted {itemType}!</div>,
               type: "success",
             });
           }}
···
     </div>
   );
 };
+
+// Shared menu items
+const EditLinkShareButton = (props: { link: string }) => (
+  <ShareButton
+    text={
+      <div className="flex gap-2">
+        <ShareSmall />
+        Copy Edit Link
+      </div>
+    }
+    subtext=""
+    smokerText="Link copied!"
+    id="get-link"
+    link={props.link}
+  />
+);
+
+const DeleteForeverMenuItem = (props: {
+  onSelect: (e: Event) => void;
+  subtext?: string;
+}) => (
+  <MenuItem onSelect={props.onSelect}>
+    <DeleteSmall />
+    {props.subtext ? (
+      <div className="flex flex-col">
+        Delete {props.subtext}
+        <div className="text-tertiary text-sm font-normal!">
+          Unpublish AND delete
+        </div>
+      </div>
+    ) : (
+      "Delete Forever"
+    )}
+  </MenuItem>
+);
+
+// Helper to update archived state in both identity and publication data
+function useArchiveMutations() {
+  const { mutate: mutatePub } = usePublicationData();
+  const { mutate: mutateIdentity } = useIdentityData();
+
+  return {
+    setArchived: (tokenId: string, archived: boolean) => {
+      mutateIdentityData(mutateIdentity, (data) => {
+        const item = data.permission_token_on_homepage.find(
+          (p) => p.permission_tokens?.id === tokenId,
+        );
+        if (item) item.archived = archived;
+      });
+      mutatePublicationData(mutatePub, (data) => {
+        const item = data.publication?.leaflets_in_publications.find(
+          (l) => l.permission_tokens?.id === tokenId,
+        );
+        if (item) item.archived = archived;
+      });
+    },
+    removeFromLists: (tokenId: string) => {
+      mutateIdentityData(mutateIdentity, (data) => {
+        data.permission_token_on_homepage =
+          data.permission_token_on_homepage.filter(
+            (p) => p.permission_tokens?.id !== tokenId,
+          );
+      });
+      mutatePublicationData(mutatePub, (data) => {
+        if (!data.publication) return;
+        data.publication.leaflets_in_publications =
+          data.publication.leaflets_in_publications.filter(
+            (l) => l.permission_tokens?.id !== tokenId,
+          );
+      });
+    },
+  };
+}

app/(home-pages)/home/LeafletList/LeafletPreview.tsx

···
   ThemeBackgroundProvider,
   ThemeProvider,
 } from "components/ThemeManager/ThemeProvider";
-import {
-  PermissionToken,
-  useEntity,
-  useReferenceToEntity,
-} from "src/replicache";
+import { useEntity, useReferenceToEntity } from "src/replicache";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 import { LeafletContent } from "./LeafletContent";
 import { Tooltip } from "components/Tooltip";
+import { useLeafletPublicationStatus } from "components/PageSWRDataProvider";
+import { CSSProperties } from "react";
 
-export const LeafletListPreview = (props: {
-  draft?: boolean;
-  published?: boolean;
-  isVisible: boolean;
-  token: PermissionToken;
-  leaflet_id: string;
-  loggedIn: boolean;
-}) => {
-  let root =
-    useReferenceToEntity("root/page", props.leaflet_id)[0]?.entity ||
-    props.leaflet_id;
-  let firstPage = useEntity(root, "root/page")[0];
-  let page = firstPage?.data.value || root;
+function useLeafletPreviewData() {
+  const pubStatus = useLeafletPublicationStatus();
+  const leafletId = pubStatus?.leafletId ?? "";
+  const root =
+    useReferenceToEntity("root/page", leafletId)[0]?.entity || leafletId;
+  const firstPage = useEntity(root, "root/page")[0];
+  const page = firstPage?.data.value || root;
 
-  let cardBorderHidden = useCardBorderHidden(root);
-  let rootBackgroundImage = useEntity(root, "theme/card-background-image");
-  let rootBackgroundRepeat = useEntity(
+  const cardBorderHidden = useCardBorderHidden(root);
+  const rootBackgroundImage = useEntity(root, "theme/card-background-image");
+  const rootBackgroundRepeat = useEntity(
     root,
     "theme/card-background-image-repeat",
   );
-  let rootBackgroundOpacity = useEntity(
+  const rootBackgroundOpacity = useEntity(
     root,
     "theme/card-background-image-opacity",
   );
 
+  const contentWrapperStyle: CSSProperties = cardBorderHidden
+    ? {}
+    : {
+        backgroundImage: rootBackgroundImage
+          ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})`
+          : undefined,
+        backgroundRepeat: rootBackgroundRepeat ? "repeat" : "no-repeat",
+        backgroundPosition: "center",
+        backgroundSize: !rootBackgroundRepeat
+          ? "cover"
+          : rootBackgroundRepeat?.data.value / 3,
+        opacity:
+          rootBackgroundImage?.data.src && rootBackgroundOpacity
+            ? rootBackgroundOpacity.data.value
+            : 1,
+        backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))",
+      };
+
+  const contentWrapperClass = `leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`;
+
+  return { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass };
+}
+
+export const LeafletListPreview = (props: { isVisible: boolean }) => {
+  const { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass } =
+    useLeafletPreviewData();
+
   return (
     <Tooltip
       open={true}
···
       <ThemeProvider local entityID={root} className="rounded-sm">
         <ThemeBackgroundProvider entityID={root}>
           <div className="leafletPreview grow shrink-0 h-44 w-64 px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none rounded-[2px] ">
-            <div
-              className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`}
-              style={
-                cardBorderHidden
-                  ? {}
-                  : {
-                      backgroundImage: rootBackgroundImage
-                        ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})`
-                        : undefined,
-                      backgroundRepeat: rootBackgroundRepeat
-                        ? "repeat"
-                        : "no-repeat",
-                      backgroundPosition: "center",
-                      backgroundSize: !rootBackgroundRepeat
-                        ? "cover"
-                        : rootBackgroundRepeat?.data.value / 3,
-                      opacity:
-                        rootBackgroundImage?.data.src && rootBackgroundOpacity
-                          ? rootBackgroundOpacity.data.value
-                          : 1,
-                      backgroundColor:
-                        "rgba(var(--bg-page), var(--bg-page-alpha))",
-                    }
-              }
-            >
+            <div className={contentWrapperClass} style={contentWrapperStyle}>
               <LeafletContent entityID={page} isOnScreen={props.isVisible} />
             </div>
           </div>
···
   );
 };
 
-export const LeafletGridPreview = (props: {
-  draft?: boolean;
-  published?: boolean;
-  token: PermissionToken;
-  leaflet_id: string;
-  loggedIn: boolean;
-  isVisible: boolean;
-}) => {
-  let root =
-    useReferenceToEntity("root/page", props.leaflet_id)[0]?.entity ||
-    props.leaflet_id;
-  let firstPage = useEntity(root, "root/page")[0];
-  let page = firstPage?.data.value || root;
+export const LeafletGridPreview = (props: { isVisible: boolean }) => {
+  const { root, page, contentWrapperStyle, contentWrapperClass } =
+    useLeafletPreviewData();
 
-  let cardBorderHidden = useCardBorderHidden(root);
-  let rootBackgroundImage = useEntity(root, "theme/card-background-image");
-  let rootBackgroundRepeat = useEntity(
-    root,
-    "theme/card-background-image-repeat",
-  );
-  let rootBackgroundOpacity = useEntity(
-    root,
-    "theme/card-background-image-opacity",
-  );
   return (
     <ThemeProvider local entityID={root} className="w-full!">
       <div className="border border-border-light rounded-md w-full h-full overflow-hidden ">
···
               inert
               className="leafletPreview grow shrink-0 h-full w-full px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none"
             >
-              <div
-                className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`}
-                style={
-                  cardBorderHidden
-                    ? {}
-                    : {
-                        backgroundImage: rootBackgroundImage
-                          ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})`
-                          : undefined,
-                        backgroundRepeat: rootBackgroundRepeat
-                          ? "repeat"
-                          : "no-repeat",
-                        backgroundPosition: "center",
-                        backgroundSize: !rootBackgroundRepeat
-                          ? "cover"
-                          : rootBackgroundRepeat?.data.value / 3,
-                        opacity:
-                          rootBackgroundImage?.data.src && rootBackgroundOpacity
-                            ? rootBackgroundOpacity.data.value
-                            : 1,
-                        backgroundColor:
-                          "rgba(var(--bg-page), var(--bg-page-alpha))",
-                      }
-                }
-              >
+              <div className={contentWrapperClass} style={contentWrapperStyle}>
                 <LeafletContent entityID={page} isOnScreen={props.isVisible} />
               </div>
             </div>

app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx

···
 import { CommentTiny } from "components/Icons/CommentTiny";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import { LeafletOptions } from "app/(home-pages)/home/LeafletList/LeafletOptions";
+import { StaticLeafletDataContext } from "components/PageSWRDataProvider";
 
 export function PublishedPostsList(props: {
   searchValue: string;
···
                       </h3>
                     </a>
                     <div className="flex justify-start align-top flex-row gap-1">
-                      {leaflet && (
+                      {leaflet && leaflet.permission_tokens && (
                         <>
                           <SpeedyLink
                             className="pt-[6px]"
···
                             <EditTiny />
                           </SpeedyLink>
 
-                          <LeafletOptions
-                            leaflet={leaflet?.permission_tokens!}
-                            document_uri={doc.documents.uri}
-                            shareLink={postLink}
-                            loggedIn={true}
-                          />
+                          <StaticLeafletDataContext
+                            value={{
+                              ...leaflet.permission_tokens,
+                              leaflets_in_publications: [
+                                {
+                                  ...leaflet,
+                                  publications: publication,
+                                  documents: doc.documents
+                                    ? {
+                                        uri: doc.documents.uri,
+                                        indexed_at: doc.documents.indexed_at,
+                                        data: doc.documents.data,
+                                      }
+                                    : null,
+                                },
+                              ],
+                              leaflets_to_documents: [],
+                              blocked_by_admin: null,
+                              custom_domain_routes: [],
+                            }}
+                          >
+                            <LeafletOptions loggedIn={true} />
+                          </StaticLeafletDataContext>
                         </>
                       )}
                     </div>

app/lish/createPub/getPublicationURL.ts

···
 import { isProductionDomain } from "src/utils/isProductionDeployment";
 import { Json } from "supabase/database.types";
 
-export function getPublicationURL(pub: {
-  uri: string;
-  name: string;
-  record: Json;
-}) {
+export function getPublicationURL(pub: { uri: string; record: Json }) {
   let record = pub.record as PubLeafletPublication.Record;
   if (isProductionDomain() && record?.base_path)
     return `https://${record.base_path}`;
   else return getBasePublicationURL(pub);
 }
 
-export function getBasePublicationURL(pub: {
-  uri: string;
-  name: string;
-  record: Json;
-}) {
+export function getBasePublicationURL(pub: { uri: string; record: Json }) {
   let record = pub.record as PubLeafletPublication.Record;
   let aturi = new AtUri(pub.uri);
-  return `/lish/${aturi.host}/${encodeURIComponent(aturi.rkey || record?.name || pub.name)}`;
+  return `/lish/${aturi.host}/${encodeURIComponent(aturi.rkey || record?.name)}`;
 }

components/PageSWRDataProvider.tsx

···
 import type { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data";
 import { createContext, useContext } from "react";
 import { getPublicationMetadataFromLeafletData } from "src/utils/getPublicationMetadataFromLeafletData";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+import { AtUri } from "@atproto/syntax";
 
 export const StaticLeafletDataContext = createContext<
   null | GetLeafletDataReturnType["result"]["data"]
···
   let { data, mutate } = useLeafletData();
   return { data: data?.custom_domain_routes, mutate: mutate };
 }
+
+export function useLeafletPublicationStatus() {
+  const data = useContext(StaticLeafletDataContext);
+  if (!data) return null;
+
+  const publishedInPublication = data.leaflets_in_publications?.find(
+    (l) => l.doc,
+  );
+  const publishedStandalone = data.leaflets_to_documents?.find(
+    (l) => !!l.documents,
+  );
+
+  const documentUri =
+    publishedInPublication?.documents?.uri ?? publishedStandalone?.document;
+
+  // Compute the full post URL for sharing
+  let postShareLink: string | undefined;
+  if (publishedInPublication?.publications && publishedInPublication.documents) {
+    // Published in a publication - use publication URL + document rkey
+    const docUri = new AtUri(publishedInPublication.documents.uri);
+    postShareLink = `${getPublicationURL(publishedInPublication.publications)}/${docUri.rkey}`;
+  } else if (publishedStandalone?.document) {
+    // Standalone published post - use /p/{did}/{rkey} format
+    const docUri = new AtUri(publishedStandalone.document);
+    postShareLink = `/p/${docUri.host}/${docUri.rkey}`;
+  }
+
+  return {
+    token: data,
+    leafletId: data.root_entity,
+    shareLink: data.id,
+    // Draft state - in a publication but not yet published
+    draftInPublication:
+      data.leaflets_in_publications?.[0]?.publication ?? undefined,
+    // Published state
+    isPublished: !!(publishedInPublication || publishedStandalone),
+    publishedAt:
+      publishedInPublication?.documents?.indexed_at ??
+      publishedStandalone?.documents?.indexed_at,
+    documentUri,
+    // Full URL for sharing published posts
+    postShareLink,
+  };
+}