pulling in the right data, styling adjustments

app/discover/PubListing.tsx

···
 "use client";
 import { AtUri } from "@atproto/syntax";
+import { PubIcon } from "components/ActionBar/Publications";
 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
 import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
···
           px-3 py-3 selected-outline
           hover:outline-accent-contrast hover:border-accent-contrast`}
       >
-        <div
-          style={{
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-            backgroundImage: record?.icon
-              ? `url(${blobRefToSrc(record.icon?.ref, new AtUri(props.uri).host)})`
-              : undefined,
-          }}
-          className={`w-6 h-6 rounded-full bg-accent-1 text-accent-2 flex place-content-center leading-snug font-bold text-center shrink-0 ${record.theme?.showPageBackground ? "mt-[6px]" : "mt-0.5"}`}
-        >
-          {!record?.icon ? record.name.slice(0, 1).toLocaleUpperCase() : null}
-        </div>
+        <PubIcon record={record} uri={props.uri} />
+
         <div
           className={`flex w-full flex-col ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] px-2 py-1 rounded-lg" : ""}`}
         >

app/home/HomeEmpty/HomeEmpty.tsx

···
 export const PublicationBanner = (props: { small?: boolean }) => {
   return (
     <div
-      className={`accent-container flex sm:py-2 gap-4 items-center ${props.small ? "items-start p-2 text-sm font-normal" : "items-center p-4"}`}
+      className={`accent-container flex sm:py-2  items-center ${props.small ? "items-start gap-2 p-2 text-sm font-normal" : "items-center p-4 gap-4"}`}
     >
       {props.small ? (
-        <PublishSmall className="shrink-0" />
+        <PublishSmall className="shrink-0 text-accent-contrast" />
       ) : (
         <div className="w-[64px] mx-auto">
           <PubListEmptyIllo />
         </div>
       )}
-      <div className="grow">
+      <div className={`${props.small ? "pt-[2px]" : ""} grow`}>
         <Link href={"/lish/createPub"} className="font-bold">
           Start a Publication
         </Link>{" "}
···
 export const DiscoverBanner = (props: { small?: boolean }) => {
   return (
     <div
-      className={`accent-container flex sm:py-2 gap-2 items-center ${props.small ? "items-start p-2 text-sm font-normal" : "items-center p-4"}`}
+      className={`accent-container flex sm:py-2  items-center ${props.small ? "items-start gap-2 p-2 text-sm font-normal" : "items-center p-4 gap-4"}`}
     >
       {props.small ? (
         <DiscoverSmall className="shrink-0 text-accent-contrast" />
···
           <DiscoverIllo />
         </div>
       )}
-      <div className="grow">
+      <div className={`${props.small ? "pt-[2px]" : ""} grow`}>
         <Link href={"/discover"} className="font-bold">
           Explore Publications
         </Link>{" "}

app/reader/ReaderContent.tsx

···
 "use client";
+import { AtUri } from "@atproto/api";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+import { PubIcon } from "components/ActionBar/Publications";
 import { ShareSmall } from "components/Icons/ShareSmall";
 import { Separator } from "components/Layout";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+import { SpeedyLink } from "components/SpeedyLink";
+import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
+import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
+import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api";
 import Link from "next/link";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import { Json } from "supabase/database.types";
 
-export const ReaderContent = (props: { root_entity: string }) => {
-  let cardBorderHidden = useCardBorderHidden(props.root_entity);
+export const ReaderContent = (props: {
+  root_entity: string;
+  posts: {
+    publication: {
+      href: string;
+      pubRecord: Json;
+      uri: string;
+    };
+    documents: { data: Json; uri: string; indexed_at: string };
+  }[];
+}) => {
   return (
     <div className="flex flex-col gap-3">
-      {dummyPosts.map((p) => (
-        <Post {...p} cardBorderHidden={true} />
-      ))}
+      {props.posts?.map((p) => <Post {...p} />)}
     </div>
   );
 };
 
 const Post = (props: {
-  title: string;
-  description: string;
-  date: string;
-  read: boolean;
-  author: string;
-  pub: string;
-  cardBorderHidden: boolean;
+  publication: {
+    pubRecord: Json;
+    uri: string;
+    href: string;
+  };
+  documents: { data: Json | undefined; uri: string; indexed_at: string };
 }) => {
+  let pubRecord = props.publication.pubRecord as PubLeafletPublication.Record;
+
+  let postRecord = props.documents.data as PubLeafletDocument.Record;
+  let postUri = new AtUri(props.documents.uri);
+
+  let theme = usePubTheme(pubRecord);
+  let backgroundImage = pubRecord?.theme?.backgroundImage?.image?.ref
+    ? blobRefToSrc(
+        pubRecord?.theme?.backgroundImage?.image?.ref,
+        new AtUri(props.publication.uri).host,
+      )
+    : null;
+
+  let backgroundImageRepeat = pubRecord?.theme?.backgroundImage?.repeat;
+  let backgroundImageSize = pubRecord?.theme?.backgroundImage?.width || 500;
+
+  let showPageBackground = pubRecord.theme?.showPageBackground;
+
   return (
-    <div
-      className={`flex flex-col gap-0 ${props.cardBorderHidden ? "bg-bg-page" : "bg-bg-leaflet"} p-3 rounded-lg border border-border-light`}
-    >
-      <div
-        className={`${props.cardBorderHidden ? "bg-transparent" : "bg-bg-page px-3 py-2"}  rounded-md`}
+    <BaseThemeProvider {...theme} local>
+      <SpeedyLink
+        href={`${props.publication.href}/${postUri.rkey}`}
+        style={{
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
+          backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
+        }}
+        className={`no-underline! flex flex-row gap-2 w-full
+          bg-bg-leaflet
+          border border-border-light rounded-lg
+          sm:p-2 p-2 selected-outline
+          hover:outline-accent-contrast hover:border-accent-contrast
+          `}
       >
-        <div className="flex justify-between gap-2">
-          <Link
-            href={"/"}
-            className="text-accent-contrast font-bold no-underline text-sm "
-          >
-            {props.pub}
-          </Link>
-          <button className="text-tertiary">{/*<ShareSmall />*/}</button>
-        </div>
-        <h3 className="truncate">{props.title}</h3>
+        <div
+          className={`${showPageBackground ? "bg-bg-page " : "bg-transparent"}  rounded-md w-full  px-[10px] pt-2 pb-2`}
+          style={{
+            backgroundColor: showPageBackground
+              ? "rgba(var(--bg-page), var(--bg-page-alpha))"
+              : "transparent",
+          }}
+        >
+          <div className="flex justify-between gap-2">
+            <button className="text-tertiary">{/*<ShareSmall />*/}</button>
+          </div>
+          <h3 className="text-primary truncate">{postRecord.title}</h3>
 
-        <p className="text-secondary">{props.description}</p>
-        <div className="flex gap-2 text-sm text-tertiary items-center pt-3">
-          <div className="flex gap-[6px] items-center">
-            <div className="bg-test rounded-full h-4 w-4" />
-            {props.author}
+          <p className="text-secondary">{postRecord.description}</p>
+          <div className="flex gap-2 text-sm text-tertiary items-center pt-3">
+            <Link
+              href={props.publication.href}
+              className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center"
+            >
+              <PubIcon small record={pubRecord} uri={props.publication.uri} />
+              {pubRecord.name}
+            </Link>
+            <Separator classname="h-4 !min-h-0" />
+            NAME HERE
+            <Separator classname="h-4 !min-h-0" />
+            {postRecord.publishedAt &&
+              new Date(postRecord.publishedAt).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
           </div>
-          <Separator classname="h-4 !min-h-0" />
-          {props.date}
         </div>
-      </div>
-    </div>
+      </SpeedyLink>
+    </BaseThemeProvider>
   );
 };
-
-let dummyPosts: {
-  title: string;
-  description: string;
-  date: string;
-  read: boolean;
-  author: string;
-  pub: string;
-}[] = [
-  {
-    title: "First Post",
-    description: "this is a description",
-    date: "Oct 2",
-    read: false,
-    author: "jared",
-    pub: "a warm space",
-  },
-  {
-    title: "This is a second Tost",
-    description: "It has another description, as you can see",
-    date: "Oct 2",
-    read: false,
-    author: "celine",
-    pub: "Celine's Super Soliloquy",
-  },
-  {
-    title: "A Third Post, A Burnt Toast",
-    description:
-      "If the first post is bread, the second is toast, and inevitably the third is a plate of charcoal.",
-    date: "Oct 2",
-    read: false,
-    author: "brendan",
-    pub: "Scraps",
-  },
-];

app/reader/page.tsx

···
 import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
 import { ReaderContent } from "./ReaderContent";
 import { SubscriptionsContent } from "./SubscriptionsContent";
+import { Json } from "supabase/database.types";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+import { PubLeafletDocument } from "lexicons/api";
 
 export default async function Reader(props: {}) {
   let cookieStore = await cookies();
···
     .select(`publications(*, documents_in_publications(documents(*)))`)
     .eq("identity", auth_res?.atp_did);
 
-  let subbedPubs = publications?.map((pub) => {
-    let subbedPubsArr: string[] = [];
-    pub.publications?.name && subbedPubsArr.push(pub.publications?.name);
-    return subbedPubsArr;
-  });
+  // Flatten all posts from all publications into a single array
+  let posts =
+    publications?.flatMap((publication) => {
+      const postsInPub =
+        publication.publications?.documents_in_publications.filter(
+          (d) => !!d?.documents,
+        );
 
-  console.log(subbedPubs);
+      if (!postsInPub || postsInPub.length === 0) return [];
 
+      return postsInPub
+        .filter(
+          (postInPub) =>
+            postInPub.documents?.data &&
+            postInPub.documents?.uri &&
+            postInPub.documents?.indexed_at,
+        )
+        .map((postInPub) => ({
+          publication: {
+            href: getPublicationURL(publication.publications!),
+            pubRecord: publication.publications?.record || null,
+            uri: publication.publications?.uri || "",
+          },
+          documents: {
+            data: postInPub.documents!.data,
+            uri: postInPub.documents!.uri,
+            indexed_at: postInPub.documents!.indexed_at,
+          },
+        }));
+    }) || [];
+
+  let sortedPosts = posts.sort((a, b) => {
+    let recordA = a.documents.data as PubLeafletDocument.Record;
+    let recordB = b.documents.data as PubLeafletDocument.Record;
+    const dateA = new Date(recordA.publishedAt || 0);
+    const dateB = new Date(recordB.publishedAt || 0);
+    return dateB.getTime() - dateA.getTime();
+  });
   return (
     <ReplicacheProvider
       rootEntity={root_entity}
···
               actions={null}
               tabs={{
                 reader: {
-                  controls: <FocusToggle />,
-                  content: <ReaderContent root_entity={root_entity} />,
+                  controls: null,
+                  content: (
+                    <ReaderContent
+                      root_entity={root_entity}
+                      posts={sortedPosts}
+                    />
+                  ),
                 },
                 subs: {
                   controls: null,
···
     </ReplicacheProvider>
   );
 }
-
-const FocusToggle = () => {
-  return <div className="grow flex justify-end">focus</div>;
-};

components/ActionBar/Publications.tsx

···
 export const PubIcon = (props: {
   record: PubLeafletPublication.Record;
   uri: string;
+  small?: boolean;
+  className?: string;
 }) => {
   if (!props.record) return;
 
···
         backgroundSize: "cover",
         backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]})`,
       }}
-      className="w-6 h-6 rounded-full"
+      className={`${props.small ? "w-5 h-5" : "w-6 h-6"} rounded-full ${props.className}`}
     />
   ) : (
-    <div className="w-6 h-6 rounded-full bg-accent-1 relative">
-      <div className="font-bold text-sm absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-accent-2">
+    <div
+      className={`${props.small ? "w-5 h-5" : "w-6 h-6"} rounded-full bg-accent-1 relative`}
+    >
+      <div
+        className={`${props.small ? "text-xs" : "text-sm"} font-bold  absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-accent-2`}
+      >
         {props.record?.name.slice(0, 1)}
       </div>
     </div>

components/PageHeader.tsx

···
   cardBorderHidden: boolean;
 }) => {
   let [scrollPos, setScrollPos] = useState(0);
-  console.log(props.cardBorderHidden);
 
   useEffect(() => {
     const homeContent = document.getElementById("home-content");