From 55bed223fe8350e8e3c449bd96abe02bf6dec52e Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Thu, 5 Feb 2026 22:56:27 -0500
Subject: [PATCH] updated postListing design

---
 app/(home-pages)/reader/InboxContent.tsx   |  78 ++++++--
 app/(home-pages)/reader/page.tsx           |   1 +
 components/ActionBar/NavigationButtons.tsx |   2 +-
 components/Icons/ShareTiny.tsx             |  19 ++
 components/InteractionsPreview.tsx         |   2 +-
 components/Pages/useHasBackgroundImage.ts  |   5 +
 components/PostListing.tsx                 | 219 +++++++++++++++------
 components/ThemeManager/ThemeProvider.tsx  |  41 ++--
 8 files changed, 274 insertions(+), 93 deletions(-)
 create mode 100644 components/Icons/ShareTiny.tsx
 create mode 100644 components/Pages/useHasBackgroundImage.ts

diff --git a/app/(home-pages)/reader/InboxContent.tsx b/app/(home-pages)/reader/InboxContent.tsx
index a2ea6e07..0770dbc4 100644
--- a/app/(home-pages)/reader/InboxContent.tsx
+++ b/app/(home-pages)/reader/InboxContent.tsx
@@ -4,9 +4,13 @@ import { DiscoverSmall } from "components/Icons/DiscoverSmall";
 import type { Cursor, Post } from "./getReaderFeed";
 import useSWRInfinite from "swr/infinite";
 import { getReaderFeed } from "./getReaderFeed";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { PostListing } from "components/PostListing";
+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";
 
 export const InboxContent = (props: {
   posts: Post[];
@@ -60,27 +64,71 @@ export const InboxContent = (props: {
 
     return () => observer.disconnect();
   }, [data, size, setSize, isValidating]);
+  let [searchValue, setSearchValue] = useState("");
+  let [sort, setSort] = useState<"recent" | "popular">("popular");
 
   const allPosts = data ? data.flatMap((page) => page.posts) : [];
+  const postTitles = allPosts.map((p) => {
+    p.documents.data?.title;
+  });
+  const filteredPosts = allPosts
+    .filter((p) =>
+      p.documents.data?.title.toLowerCase().includes(searchValue.toLowerCase()),
+    )
+    .sort(
+      (a, b) =>
+        new Date(b.documents.data?.publishedAt || 0).getTime() -
+        new Date(a.documents.data?.publishedAt || 0).getTime(),
+    );
 
   if (allPosts.length === 0 && !isValidating) return <ReaderEmpty />;
 
+  let hasBackgroundImage = useHasBackgroundImage();
+
   return (
-    <div className="flex flex-col gap-3 relative">
-      {allPosts.map((p) => (
-        <PostListing {...p} key={p.documents.uri} />
-      ))}
-      {/* Trigger element for loading more posts */}
-      <div
-        ref={loadMoreRef}
-        className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
-        aria-hidden="true"
-      />
-      {isValidating && (
-        <div className="text-center text-tertiary py-4">
-          Loading more posts...
+    <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
+            className={`inboxSearchInput
+            appearance-none! outline-hidden!
+            w-full min-w-0 text-primary relative px-1
+            border rounded-md border-border-light focus-within:border-border
+            bg-transparent ${hasBackgroundImage ? "focus-within:bg-bg-page" : "focus-within:bg-bg-leaflet"} `}
+            type="text"
+            id="inbox-search"
+            size={1}
+            placeholder="search posts..."
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.currentTarget.value);
+            }}
+          />
+          <button
+            className="flex gap-1"
+            onClick={() => {
+              setSort(sort === "popular" ? "recent" : "popular");
+            }}
+          >
+            {sort === "popular" ? "Popular" : "Recent"}
+            <SortSmall />
+          </button>
         </div>
-      )}
+        {filteredPosts.map((p) => (
+          <PostListing {...p} key={p.documents.uri} />
+        ))}
+        {/* Trigger element for loading more posts */}
+        <div
+          ref={loadMoreRef}
+          className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
+          aria-hidden="true"
+        />
+        {isValidating && (
+          <div className="text-center text-tertiary py-4">
+            Loading more posts...
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/app/(home-pages)/reader/page.tsx b/app/(home-pages)/reader/page.tsx
index 9a59e487..920d4fca 100644
--- a/app/(home-pages)/reader/page.tsx
+++ b/app/(home-pages)/reader/page.tsx
@@ -6,6 +6,7 @@ import { getReaderFeed } from "./getReaderFeed";
 
 export default async function Reader(props: {}) {
   let posts = await getReaderFeed();
+
   return (
     <DashboardLayout
       id="reader"
diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx
index 6fe18163..3eb0caf8 100644
--- a/components/ActionBar/NavigationButtons.tsx
+++ b/components/ActionBar/NavigationButtons.tsx
@@ -53,7 +53,7 @@ export const WriterButton = (props: {
         labelOnMobile={!props.compactOnMobile}
         icon={<WriterSmall />}
         label="Write"
-        className={` w-fit! ${current ? "bg-bg-page! border-border-light!" : ""}`}
+        className={`${current ? "bg-bg-page! border-border-light!" : ""}`}
       />
     </SpeedyLink>
   );
diff --git a/components/Icons/ShareTiny.tsx b/components/Icons/ShareTiny.tsx
new file mode 100644
index 00000000..7e3f6a7c
--- /dev/null
+++ b/components/Icons/ShareTiny.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const ShareTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14.294 2.09457C14.4677 2.02691 14.6645 2.06158 14.8048 2.18441C14.9451 2.30734 15.0054 2.4983 14.961 2.67953L12.8145 11.4481C12.7536 11.6967 12.5144 11.8588 12.2608 11.8241L7.56942 11.1766L5.33211 13.7664C5.20836 13.9096 5.01456 13.9711 4.83114 13.9246C4.6477 13.8781 4.50644 13.7316 4.4659 13.5467L3.68368 9.98324L1.212 8.00863C1.07265 7.89707 1.00353 7.71931 1.03035 7.54281C1.05731 7.36628 1.1765 7.21715 1.34285 7.15218L14.294 2.09457ZM4.70028 9.94417L5.12118 11.867L5.8409 10.2899L5.88094 10.2176C5.89632 10.1948 5.9137 10.1732 5.9327 10.1532L8.08407 7.8807L4.70028 9.94417ZM2.51375 7.76742L4.17391 9.09457L10.7677 5.07503C10.9816 4.9446 11.2595 4.99249 11.4171 5.18734C11.5746 5.38222 11.5631 5.66361 11.3907 5.84554L7.32723 10.1346L11.9493 10.7713L13.7598 3.37582L2.51375 7.76742Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/InteractionsPreview.tsx b/components/InteractionsPreview.tsx
index 30ddefbb..a9b709db 100644
--- a/components/InteractionsPreview.tsx
+++ b/components/InteractionsPreview.tsx
@@ -90,7 +90,7 @@ export const InteractionPreview = (props: {
   );
 };
 
-const TagPopover = (props: { tags: string[] }) => {
+export const TagPopover = (props: { tags: string[] }) => {
   return (
     <Popover
       className="p-2! max-w-xs"
diff --git a/components/Pages/useHasBackgroundImage.ts b/components/Pages/useHasBackgroundImage.ts
new file mode 100644
index 00000000..19bdaeaa
--- /dev/null
+++ b/components/Pages/useHasBackgroundImage.ts
@@ -0,0 +1,5 @@
+import { useHasBackgroundImageContext } from "components/ThemeManager/ThemeProvider";
+
+export function useHasBackgroundImage(entityID?: string | null) {
+  return useHasBackgroundImageContext();
+}
diff --git a/components/PostListing.tsx b/components/PostListing.tsx
index 45f9a541..324cfcaf 100644
--- a/components/PostListing.tsx
+++ b/components/PostListing.tsx
@@ -1,12 +1,8 @@
 "use client";
 import { AtUri } from "@atproto/api";
 import { PubIcon } from "components/ActionBar/Publications";
-import { CommentTiny } from "components/Icons/CommentTiny";
-import { QuoteTiny } from "components/Icons/QuoteTiny";
-import { Separator } from "components/Layout";
 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
 import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
-import { useSmoker } from "components/Toast";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import type {
   NormalizedDocument,
@@ -15,8 +11,14 @@ import type {
 import type { Post } from "app/(home-pages)/reader/getReaderFeed";
 
 import Link from "next/link";
-import { InteractionPreview } from "./InteractionsPreview";
+import { InteractionPreview, TagPopover } from "./InteractionsPreview";
 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";
 
 export const PostListing = (props: Post) => {
   let pubRecord = props.publication?.pubRecord as
@@ -36,6 +38,14 @@ export const PostListing = (props: Post) => {
   let isStandalone = !pubRecord;
   let theme = usePubTheme(pubRecord?.theme || postRecord?.theme, isStandalone);
   let themeRecord = pubRecord?.theme || postRecord?.theme;
+  let el = document?.getElementById(`post-listing-${postUri}`);
+
+  let hasBackgroundImage =
+    !!themeRecord?.backgroundImage?.image &&
+    el &&
+    Number(window.getComputedStyle(el).getPropertyValue("--bg-page-alpha")) <
+      0.7;
+
   let backgroundImage =
     themeRecord?.backgroundImage?.image?.ref && uri
       ? blobRefToSrc(themeRecord.backgroundImage.image.ref, new AtUri(uri).host)
@@ -56,63 +66,93 @@ export const PostListing = (props: Post) => {
   let tags = (postRecord?.tags as string[] | undefined) || [];
 
   // For standalone posts, link directly to the document
-  let postHref = props.publication
+  let postUrl = props.publication
     ? `${props.publication.href}/${postUri.rkey}`
     : `/p/${postUri.host}/${postUri.rkey}`;
 
   return (
-    <BaseThemeProvider {...theme} local>
-      <div
-        style={{
-          backgroundImage: backgroundImage
-            ? `url(${backgroundImage})`
-            : undefined,
-          backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
-          backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
-        }}
-        className={`no-underline! flex flex-row gap-2 w-full relative
-          bg-bg-leaflet
-          border border-border-light rounded-lg
-          sm:p-2 p-2 selected-outline
-          hover:outline-accent-contrast hover:border-accent-contrast
-          `}
-      >
-        <Link className="h-full w-full absolute top-0 left-0" href={postHref} />
+    <div className="postListing flex flex-col gap-1">
+      <div className="text-sm  text-tertiary flex gap-1 items-center px-1 ">
+        <div className="flex ">
+          <div className="sm:w-4 w-4 sm:h-4 h-4 rounded-full bg-test border border-border-light first:ml-0 -ml-2" />
+          <div className="sm:w-4 w-4 sm:h-4 h-4 rounded-full bg-test border border-border-light first:ml-0 -ml-2" />
+        </div>
+        others recommend
+      </div>
+      <BaseThemeProvider {...theme} local>
         <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",
-          }}
+          id={`post-listing-${postUri}`}
+          className={`
+          relative
+          flex flex-col overflow-hidden
+          selected-outline border-border-light rounded-lg w-full  hover:outline-accent-contrast
+          hover:border-accent-contrast
+          ${showPageBackground ? "bg-bg-page " : "bg-bg-leaflet"} `}
+          style={
+            hasBackgroundImage
+              ? {
+                  backgroundImage: backgroundImage
+                    ? `url(${backgroundImage})`
+                    : undefined,
+                  backgroundRepeat: backgroundImageRepeat
+                    ? "repeat"
+                    : "no-repeat",
+                  backgroundSize: backgroundImageRepeat
+                    ? `${backgroundImageSize}px`
+                    : "cover",
+                }
+              : {}
+          }
         >
-          <h3 className="text-primary truncate">{postRecord.title}</h3>
-
-          <p className="text-secondary italic">{postRecord.description}</p>
-          <div className="flex flex-col-reverse md:flex-row md gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full">
-            {props.publication && pubRecord && (
-              <PubInfo
-                href={props.publication.href}
-                pubRecord={pubRecord}
-                uri={props.publication.uri}
-              />
-            )}
-            <div className="flex flex-row justify-between gap-2 items-center w-full">
-              <PostInfo publishedAt={postRecord.publishedAt} />
-              <InteractionPreview
-                postUrl={postHref}
-                quotesCount={quotes}
-                commentsCount={comments}
-                tags={tags}
-                showComments={pubRecord?.preferences?.showComments !== false}
-                showMentions={pubRecord?.preferences?.showMentions !== false}
-                share
+          <Link
+            className="h-full w-full absolute top-0 left-0"
+            href={postUrl}
+          />
+          {postRecord.coverImage && (
+            <div className="postListingImage">
+              <img
+                src={blobRefToSrc(postRecord.coverImage.ref, postUri.host)}
+                alt={postRecord.title || ""}
+                className="w-full h-auto aspect-video rounded"
               />
             </div>
+          )}
+          <div className="postListingInfo px-3 py-2">
+            <h3 className="postListingTitle text-primary line-clamp-2 sm:text-lg text-base">
+              {postRecord.title}
+            </h3>
+
+            <p className="postListingDescription text-secondary line-clamp-3 sm:text-base text-sm">
+              {postRecord.description}
+            </p>
+            <div className="flex flex-col-reverse md:flex-row md gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full">
+              {props.publication && pubRecord && (
+                <PubInfo
+                  href={props.publication.href}
+                  pubRecord={pubRecord}
+                  uri={props.publication.uri}
+                />
+              )}
+              <div className="flex flex-row justify-between gap-2 text-xs items-center w-full">
+                <PostDate publishedAt={postRecord.publishedAt} />
+                {tags.length === 0 ? null : <TagPopover tags={tags!} />}
+              </div>
+            </div>
           </div>
         </div>
+      </BaseThemeProvider>
+      <div className="text-sm flex justify-between text-tertiary">
+        <Interactions
+          postUrl={postUrl}
+          quotesCount={quotes}
+          commentsCount={comments}
+          tags={tags}
+          showComments={pubRecord?.preferences?.showComments !== false}
+          showMentions={pubRecord?.preferences?.showMentions !== false}
+        />{" "}
+        <Share postUrl={postUrl} />
       </div>
-    </BaseThemeProvider>
+    </div>
   );
 };
 
@@ -123,10 +163,10 @@ const PubInfo = (props: {
 }) => {
   return (
     <div className="flex flex-col md:w-auto shrink-0 w-full">
-      <hr className="md:hidden block border-border-light mb-2" />
+      <hr className="md:hidden block border-border-light mb-1" />
       <Link
         href={props.href}
-        className="text-accent-contrast font-bold no-underline text-sm flex gap-1 items-center md:w-fit relative shrink-0"
+        className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center md:w-fit relative shrink-0"
       >
         <PubIcon tiny record={props.pubRecord} uri={props.uri} />
         {props.pubRecord.name}
@@ -135,19 +175,78 @@ const PubInfo = (props: {
   );
 };
 
-const PostInfo = (props: { publishedAt: string | undefined }) => {
+const PostDate = (props: { publishedAt: string | undefined }) => {
   let localizedDate = useLocalizedDate(props.publishedAt || "", {
     year: "numeric",
     month: "short",
     day: "numeric",
   });
+  if (props.publishedAt) {
+    return <div className="shrink-0 sm:text-sm text-xs">{localizedDate}</div>;
+  } else return null;
+};
+
+const Interactions = (props: {
+  quotesCount: number;
+  commentsCount: number;
+  tags?: string[];
+  postUrl: string;
+  showComments: boolean;
+  showMentions: boolean;
+}) => {
   return (
-    <div className="flex gap-2 items-center shrink-0 self-start">
-      {props.publishedAt && (
-        <>
-          <div className="shrink-0">{localizedDate}</div>
-        </>
-      )}
+    <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
+            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"
+          >
+            <QuoteTiny /> {props.quotesCount}
+          </SpeedyLink>
+        )}
+        {!props.showComments || props.commentsCount === 0 ? null : (
+          <SpeedyLink
+            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"
+          >
+            <CommentTiny /> {props.commentsCount}
+          </SpeedyLink>
+        )}
+      </div>
     </div>
   );
 };
+
+const Share = (props: { postUrl: string }) => {
+  let smoker = useSmoker();
+  return (
+    <button
+      id={`copy-post-link-${props.postUrl}`}
+      className="flex gap-1 items-center hover:text-accent-contrast relative font-bold"
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        let mouseX = e.clientX;
+        let mouseY = e.clientY;
+
+        if (!props.postUrl) return;
+        navigator.clipboard.writeText(`leaflet.pub${props.postUrl}`);
+
+        smoker({
+          text: <strong>Copied Link!</strong>,
+          position: {
+            y: mouseY,
+            x: mouseX,
+          },
+        });
+      }}
+    >
+      Share <ShareTiny />
+    </button>
+  );
+};
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx
index 574dc018..b68e51b6 100644
--- a/components/ThemeManager/ThemeProvider.tsx
+++ b/components/ThemeManager/ThemeProvider.tsx
@@ -8,6 +8,13 @@ export const CardBorderHiddenContext = createContext<boolean>(false);
 export function useCardBorderHiddenContext() {
   return useContext(CardBorderHiddenContext);
 }
+
+// Context for hasBackgroundImage
+export const HasBackgroundImageContext = createContext<boolean>(false);
+
+export function useHasBackgroundImageContext() {
+  return useContext(HasBackgroundImageContext);
+}
 import {
   colorToString,
   useColorAttribute,
@@ -79,22 +86,24 @@ export function LeafletThemeProvider(props: {
 
   return (
     <CardBorderHiddenContext.Provider value={!!cardBorderHiddenValue}>
-      <BaseThemeProvider
-        local={props.local}
-        bgLeaflet={bgLeaflet}
-        bgPage={bgPage}
-        primary={primary}
-        highlight2={highlight2}
-        highlight3={highlight3}
-        highlight1={highlight1?.data.value}
-        accent1={accent1}
-        accent2={accent2}
-        showPageBackground={showPageBackground}
-        pageWidth={pageWidth?.data.value}
-        hasBackgroundImage={hasBackgroundImage}
-      >
-        {props.children}
-      </BaseThemeProvider>
+      <HasBackgroundImageContext.Provider value={hasBackgroundImage}>
+        <BaseThemeProvider
+          local={props.local}
+          bgLeaflet={bgLeaflet}
+          bgPage={bgPage}
+          primary={primary}
+          highlight2={highlight2}
+          highlight3={highlight3}
+          highlight1={highlight1?.data.value}
+          accent1={accent1}
+          accent2={accent2}
+          showPageBackground={showPageBackground}
+          pageWidth={pageWidth?.data.value}
+          hasBackgroundImage={hasBackgroundImage}
+        >
+          {props.children}
+        </BaseThemeProvider>
+      </HasBackgroundImageContext.Provider>
     </CardBorderHiddenContext.Provider>
   );
 }
-- 
2.54.0