+6

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

··· 29 29 HomeEmptyState, 30 30 PublicationBanner, 31 31 } from "./HomeEmpty/HomeEmpty"; 32 32 + import { EmptyState } from "components/EmptyState"; 32 33 33 34 export type Leaflet = { 34 35 added_at: string; ··· 213 214 w-full 214 215 ${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 "} `} 215 216 > 217 217 + {searchedLeaflets.length === 0 && ( 218 218 + <EmptyState> 219 219 + <div className="italic">Oh no! No results!</div> 220 220 + </EmptyState> 221 221 + )} 216 222 {props.leaflets.map(({ token: leaflet, added_at, archived }, index) => ( 217 223 <ReplicacheProvider 218 224 disablePull

+3 -2

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

··· 21 21 import { useRouter } from "next/navigation"; 22 22 import Link from "next/link"; 23 23 import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 24 24 + import { EmptyState } from "components/EmptyState"; 24 25 25 26 export const ReaderContent = (props: { 26 27 posts: Post[]; ··· 272 273 }; 273 274 export const ReaderEmpty = () => { 274 275 return ( 275 275 - <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"> 276 276 + <EmptyState> 276 277 Nothing to read yet… <br /> 277 278 Subscribe to publications and find their posts here! 278 279 <Link href={"/discover"}> ··· 280 281 <DiscoverSmall /> Discover Publications 281 282 </ButtonPrimary> 282 283 </Link> 283 283 - </div> 284 284 + </EmptyState> 284 285 ); 285 286 };

+3 -2

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

··· 8 8 import { useEffect, useRef } from "react"; 9 9 import { Cursor } from "./getReaderFeed"; 10 10 import Link from "next/link"; 11 11 + import { EmptyState } from "components/EmptyState"; 11 12 12 13 export const SubscriptionsContent = (props: { 13 14 publications: PublicationSubscription[]; ··· 93 94 94 95 export const SubscriptionsEmpty = () => { 95 96 return ( 96 96 - <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"> 97 97 + <EmptyState> 97 98 You haven't subscribed to any publications yet! 98 99 <Link href={"/discover"}> 99 100 <ButtonPrimary className="mx-auto place-self-center"> 100 101 <DiscoverSmall /> Discover Publications 101 102 </ButtonPrimary> 102 103 </Link> 103 103 - </div> 104 104 + </EmptyState> 104 105 ); 105 106 };

+33 -20

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

··· 4 4 import React from "react"; 5 5 import { usePublicationData } from "./PublicationSWRProvider"; 6 6 import { LeafletList } from "app/(home-pages)/home/HomeLayout"; 7 7 + import { EmptyState } from "components/EmptyState"; 7 8 8 9 export function DraftList(props: { 9 10 searchValue: string; ··· 12 13 let { data: pub_data } = usePublicationData(); 13 14 if (!pub_data?.publication) return null; 14 15 let { leaflets_in_publications, ...publication } = pub_data.publication; 16 16 + let filteredLeaflets = leaflets_in_publications 17 17 + .filter((l) => !l.documents) 18 18 + .filter((l) => !l.archived) 19 19 + .map((l) => { 20 20 + return { 21 21 + archived: l.archived, 22 22 + added_at: "", 23 23 + token: { 24 24 + ...l.permission_tokens!, 25 25 + leaflets_in_publications: [ 26 26 + { 27 27 + ...l, 28 28 + publications: { 29 29 + ...publication, 30 30 + }, 31 31 + }, 32 32 + ], 33 33 + }, 34 34 + }; 35 35 + }); 36 36 + 37 37 + 38 38 + 39 39 + if (!filteredLeaflets || filteredLeaflets.length === 0) 40 40 + return ( 41 41 + <EmptyState> 42 42 + No drafts yet! 43 43 + <NewDraftSecondaryButton publication={pub_data?.publication?.uri} /> 44 44 + </EmptyState> 45 45 + ); 46 46 + 15 47 return ( 16 48 <div className="flex flex-col gap-4"> 17 49 <NewDraftSecondaryButton ··· 24 56 showPreview={false} 25 57 defaultDisplay="list" 26 58 cardBorderHidden={!props.showPageBackground} 27 27 - leaflets={leaflets_in_publications 28 28 - .filter((l) => !l.documents) 29 29 - .filter((l) => !l.archived) 30 30 - .map((l) => { 31 31 - return { 32 32 - archived: l.archived, 33 33 - added_at: "", 34 34 - token: { 35 35 - ...l.permission_tokens!, 36 36 - leaflets_in_publications: [ 37 37 - { 38 38 - ...l, 39 39 - publications: { 40 40 - ...publication, 41 41 - }, 42 42 - }, 43 43 - ], 44 44 - }, 45 45 - }; 46 46 - })} 59 59 + leaflets={filteredLeaflets} 47 60 initialFacts={pub_data.leaflet_data.facts || {}} 48 61 titles={{ 49 62 ...leaflets_in_publications.reduce(

+1

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

··· 32 32 <ButtonSecondary 33 33 fullWidth={props.fullWidth} 34 34 id="new-leaflet-button" 35 35 + className="mx-auto" 35 36 onClick={async () => { 36 37 let newLeaflet = await createPublicationDraft(props.publication); 37 38 router.push(`/${newLeaflet}`);

+2 -5

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

··· 20 20 import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 21 21 import { LeafletOptions } from "app/(home-pages)/home/LeafletList/LeafletOptions"; 22 22 import { StaticLeafletDataContext } from "components/PageSWRDataProvider"; 23 23 + import { EmptyState } from "components/EmptyState"; 23 24 24 25 export function PublishedPostsList(props: { 25 26 searchValue: string; ··· 30 31 let { publication } = data!; 31 32 if (!publication) return null; 32 33 if (publication.documents_in_publications.length === 0) 33 33 - return ( 34 34 - <div className="italic text-tertiary w-full container text-center place-items-center flex flex-col gap-3 p-3"> 35 35 - Nothing's been published yet... 36 36 - </div> 37 37 - ); 34 34 + return <EmptyState>Nothing's been published yet...</EmptyState>; 38 35 return ( 39 36 <div className="publishedList w-full flex flex-col gap-2 pb-4"> 40 37 {publication.documents_in_publications