updated postListing design

app/(home-pages)/reader/InboxContent.tsx

···
 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[];
···
 
     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>
   );
 };

app/(home-pages)/reader/page.tsx

···
 
 export default async function Reader(props: {}) {
   let posts = await getReaderFeed();
+
   return (
     <DashboardLayout
       id="reader"

components/ActionBar/NavigationButtons.tsx

···
         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>
   );

components/Icons/ShareTiny.tsx

···
+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>
+  );
+};

components/InteractionsPreview.tsx

···
   );
 };
 
-const TagPopover = (props: { tags: string[] }) => {
+export const TagPopover = (props: { tags: string[] }) => {
   return (
     <Popover
       className="p-2! max-w-xs"

components/Pages/useHasBackgroundImage.ts

···
+import { useHasBackgroundImageContext } from "components/ThemeManager/ThemeProvider";
+
+export function useHasBackgroundImage(entityID?: string | null) {
+  return useHasBackgroundImageContext();
+}

components/PostListing.tsx

···
 "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,
···
 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
···
   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)
···
   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>
+          <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="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
-              />
+            <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>
   );
 };
 
···
 }) => {
   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}
···
   );
 };
 
-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>
+  );
+};

components/ThemeManager/ThemeProvider.tsx

···
 export function useCardBorderHiddenContext() {
   return useContext(CardBorderHiddenContext);
 }
+
+// Context for hasBackgroundImage
+export const HasBackgroundImageContext = createContext<boolean>(false);
+
+export function useHasBackgroundImageContext() {
+  return useContext(HasBackgroundImageContext);
+}
 import {
   colorToString,
   useColorAttribute,
···
 
   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>
   );
 }