From e1bd6685227c0e2b89687ebed8b898dfdf554f95 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 2 Dec 2025 19:45:02 -0500
Subject: [PATCH] unifying empty state

---
 app/(home-pages)/home/HomeLayout.tsx          |  6 +++
 app/(home-pages)/reader/ReaderContent.tsx     |  5 +-
 .../reader/SubscriptionsContent.tsx           |  5 +-
 .../[publication]/dashboard/DraftList.tsx     | 53 ++++++++++++-------
 .../dashboard/NewDraftButton.tsx              |  1 +
 .../dashboard/PublishedPostsLists.tsx         |  7 +--
 6 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index 9669e893..568a6e7e 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -29,6 +29,7 @@ import {
   HomeEmptyState,
   PublicationBanner,
 } from "./HomeEmpty/HomeEmpty";
+import { EmptyState } from "components/EmptyState";
 
 export type Leaflet = {
   added_at: string;
@@ -213,6 +214,11 @@ export function LeafletList(props: {
         w-full
         ${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 "} `}
     >
+      {searchedLeaflets.length === 0 && (
+        <EmptyState>
+          <div className="italic">Oh no! No results!</div>
+        </EmptyState>
+      )}
       {props.leaflets.map(({ token: leaflet, added_at, archived }, index) => (
         <ReplicacheProvider
           disablePull
diff --git a/app/(home-pages)/reader/ReaderContent.tsx b/app/(home-pages)/reader/ReaderContent.tsx
index 53b6edb5..e27ed483 100644
--- a/app/(home-pages)/reader/ReaderContent.tsx
+++ b/app/(home-pages)/reader/ReaderContent.tsx
@@ -21,6 +21,7 @@ import { useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+import { EmptyState } from "components/EmptyState";
 
 export const ReaderContent = (props: {
   posts: Post[];
@@ -272,7 +273,7 @@ const PostInterations = (props: {
 };
 export const ReaderEmpty = () => {
   return (
-    <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
+    <EmptyState>
       Nothing to read yet… <br />
       Subscribe to publications and find their posts here!
       <Link href={"/discover"}>
@@ -280,6 +281,6 @@ export const ReaderEmpty = () => {
           <DiscoverSmall /> Discover Publications
         </ButtonPrimary>
       </Link>
-    </div>
+    </EmptyState>
   );
 };
diff --git a/app/(home-pages)/reader/SubscriptionsContent.tsx b/app/(home-pages)/reader/SubscriptionsContent.tsx
index ca9cce13..585a3cfb 100644
--- a/app/(home-pages)/reader/SubscriptionsContent.tsx
+++ b/app/(home-pages)/reader/SubscriptionsContent.tsx
@@ -8,6 +8,7 @@ import useSWRInfinite from "swr/infinite";
 import { useEffect, useRef } from "react";
 import { Cursor } from "./getReaderFeed";
 import Link from "next/link";
+import { EmptyState } from "components/EmptyState";
 
 export const SubscriptionsContent = (props: {
   publications: PublicationSubscription[];
@@ -93,13 +94,13 @@ export const SubscriptionsContent = (props: {
 
 export const SubscriptionsEmpty = () => {
   return (
-    <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
+    <EmptyState>
       You haven't subscribed to any publications yet!
       <Link href={"/discover"}>
         <ButtonPrimary className="mx-auto place-self-center">
           <DiscoverSmall /> Discover Publications
         </ButtonPrimary>
       </Link>
-    </div>
+    </EmptyState>
   );
 };
diff --git a/app/lish/[did]/[publication]/dashboard/DraftList.tsx b/app/lish/[did]/[publication]/dashboard/DraftList.tsx
index c7f9a11d..db7724ae 100644
--- a/app/lish/[did]/[publication]/dashboard/DraftList.tsx
+++ b/app/lish/[did]/[publication]/dashboard/DraftList.tsx
@@ -4,6 +4,7 @@ import { NewDraftSecondaryButton } from "./NewDraftButton";
 import React from "react";
 import { usePublicationData } from "./PublicationSWRProvider";
 import { LeafletList } from "app/(home-pages)/home/HomeLayout";
+import { EmptyState } from "components/EmptyState";
 
 export function DraftList(props: {
   searchValue: string;
@@ -12,6 +13,37 @@ export function DraftList(props: {
   let { data: pub_data } = usePublicationData();
   if (!pub_data?.publication) return null;
   let { leaflets_in_publications, ...publication } = pub_data.publication;
+  let filteredLeaflets = leaflets_in_publications
+    .filter((l) => !l.documents)
+    .filter((l) => !l.archived)
+    .map((l) => {
+      return {
+        archived: l.archived,
+        added_at: "",
+        token: {
+          ...l.permission_tokens!,
+          leaflets_in_publications: [
+            {
+              ...l,
+              publications: {
+                ...publication,
+              },
+            },
+          ],
+        },
+      };
+    });
+  
+  
+
+  if (!filteredLeaflets || filteredLeaflets.length === 0)
+    return (
+      <EmptyState>
+        No drafts yet!
+        <NewDraftSecondaryButton publication={pub_data?.publication?.uri} />
+      </EmptyState>
+    );
+
   return (
     <div className="flex flex-col gap-4">
       <NewDraftSecondaryButton
@@ -24,26 +56,7 @@ export function DraftList(props: {
         showPreview={false}
         defaultDisplay="list"
         cardBorderHidden={!props.showPageBackground}
-        leaflets={leaflets_in_publications
-          .filter((l) => !l.documents)
-          .filter((l) => !l.archived)
-          .map((l) => {
-            return {
-              archived: l.archived,
-              added_at: "",
-              token: {
-                ...l.permission_tokens!,
-                leaflets_in_publications: [
-                  {
-                    ...l,
-                    publications: {
-                      ...publication,
-                    },
-                  },
-                ],
-              },
-            };
-          })}
+        leaflets={filteredLeaflets}
         initialFacts={pub_data.leaflet_data.facts || {}}
         titles={{
           ...leaflets_in_publications.reduce(
diff --git a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
index aedf8c79..dcc2f96a 100644
--- a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
+++ b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
@@ -32,6 +32,7 @@ export function NewDraftSecondaryButton(props: {
     <ButtonSecondary
       fullWidth={props.fullWidth}
       id="new-leaflet-button"
+      className="mx-auto"
       onClick={async () => {
         let newLeaflet = await createPublicationDraft(props.publication);
         router.push(`/${newLeaflet}`);
diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
index cacd36e8..d7388a53 100644
--- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
@@ -20,6 +20,7 @@ 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";
+import { EmptyState } from "components/EmptyState";
 
 export function PublishedPostsList(props: {
   searchValue: string;
@@ -30,11 +31,7 @@ export function PublishedPostsList(props: {
   let { publication } = data!;
   if (!publication) return null;
   if (publication.documents_in_publications.length === 0)
-    return (
-      <div className="italic text-tertiary w-full container text-center place-items-center flex flex-col gap-3 p-3">
-        Nothing's been published yet...
-      </div>
-    );
+    return <EmptyState>Nothing's been published yet...</EmptyState>;
   return (
     <div className="publishedList w-full flex flex-col gap-2 pb-4">
       {publication.documents_in_publications
-- 
2.51.2