JMCP: Papers - jmcp/render-an-empty-state-when-no-listings-m-ZKpA5_jp

apps/web/app/conferences/[conferenceId]/page.tsx

@@ -62,6 +62,9 @@ export default async function ConferencePage(props: { params: Promise<{ conferen
           eyebrow="Submissions"
           title={`Peer review live (${detail.submissions.length})`}
         >
+          {detail.submissions.length === 0 && (
+            <p className="muted-copy">No submissions yet. Be the first to submit a paper.</p>
+          )}
           <div className="feed-stack">
             {detail.submissions.map((submission) => (
               <div className="submission-card" key={submission.id}>

apps/web/app/conferences/page.tsx

@@ -14,6 +14,9 @@ export default async function ConferencesPage() {
             <ConferenceCard conference={conference} key={conference.id} />
           ))}
         </div>
+        {conferences.length === 0 && (
+          <p className="muted-copy">No conferences listed yet. Check back soon.</p>
+        )}
       </div>
     </div>
   )

apps/web/app/digest/page.tsx

@@ -15,6 +15,9 @@ export default async function DigestPage() {
             <DigestSectionCard key={section.id} section={section} />
           ))}
         </div>
+        {digest.sections.length === 0 && (
+          <p className="muted-copy">Nothing in today's digest yet. Check back later.</p>
+        )}
       </div>
     </div>
   )

apps/web/app/feed/page.tsx

@@ -46,6 +46,13 @@ export default async function FeedPage({
               <FeedCard entry={entry} key={entry.id} />
             ))}
           </div>
+          {feed.length === 0 && (
+            <p className="muted-copy">
+              {params.q
+                ? "No papers match your search. Try different keywords."
+                : "No papers in the feed yet. Check back soon or add some interests."}
+            </p>
+          )}
         </SectionCard>
       </div>
       <aside className="content-side">
@@ -55,13 +62,15 @@ export default async function FeedPage({
               <FeedCard entry={entry} key={entry.id} />
             ))}
           </div>
+          {trending.length === 0 && <p className="muted-copy">No trending papers right now.</p>}
         </SectionCard>
         <SectionCard eyebrow="Conferences" title="Where feedback is happening">
           <div className="feed-stack">
             {conferences.slice(0, 2).map((conference) => (
               <ConferenceCard conference={conference} key={conference.id} />
             ))}
           </div>
+          {conferences.length === 0 && <p className="muted-copy">No conferences listed yet.</p>}
         </SectionCard>
         {groups.length > 0 && (
           <SectionCard eyebrow="Groups" title="Your circles">
@@ -78,6 +87,9 @@ export default async function FeedPage({
               <OpportunityCard key={opportunity.id} opportunity={opportunity} />
             ))}
           </div>
+          {opportunities.length === 0 && (
+            <p className="muted-copy">No opportunities matched yet.</p>
+          )}
         </SectionCard>
       </aside>
     </div>

apps/web/app/opportunities/page.tsx

@@ -15,6 +15,11 @@ export default async function OpportunitiesPage() {
             <OpportunityCard key={opportunity.id} opportunity={opportunity} />
           ))}
         </div>
+        {opportunities.length === 0 && (
+          <p className="muted-copy">
+            No opportunities matched yet. Save some interests to improve matches.
+          </p>
+        )}
       </div>
     </div>
   )

apps/web/app/page.tsx

@@ -103,6 +103,11 @@ export default async function HomePage() {
                 <FeedCard entry={entry} key={entry.id} />
               ))}
             </div>
+            {feed.length === 0 && (
+              <p className="muted-copy">
+                No papers in the feed yet. Publish or save interests to get started.
+              </p>
+            )}
           </SectionCard>
 
           <SectionCard eyebrow="Trending" title="What is moving right now">
@@ -111,6 +116,7 @@ export default async function HomePage() {
                 <FeedCard entry={entry} key={entry.id} />
               ))}
             </div>
+            {trending.length === 0 && <p className="muted-copy">No trending papers right now.</p>}
           </SectionCard>
 
           <SectionCard
@@ -122,6 +128,7 @@ export default async function HomePage() {
                 <ConferenceCard conference={conference} key={conference.id} />
               ))}
             </div>
+            {conferences.length === 0 && <p className="muted-copy">No conferences listed yet.</p>}
           </SectionCard>
         </div>
 
@@ -155,6 +162,9 @@ export default async function HomePage() {
                 <OpportunityCard key={opportunity.id} opportunity={opportunity} />
               ))}
             </div>
+            {opportunities.length === 0 && (
+              <p className="muted-copy">No opportunities matched yet.</p>
+            )}
             <Link className="ghost-link" href="/opportunities">
               Browse all opportunities
             </Link>

apps/web/app/papers/[paperId]/page.tsx

@@ -106,6 +106,9 @@ export default async function PaperPage({ params }: { params: Promise<{ paperId:
               </article>
             ))}
           </div>
+          {detail.comments.length === 0 && (
+            <p className="muted-copy">No comments yet. Start the discussion.</p>
+          )}
         </SectionCard>
 
         <SectionCard eyebrow="Conferences" title="Where this work could get feedback next">

apps/web/app/u/[handle]/page.tsx

@@ -61,6 +61,7 @@ export default async function ProfilePage({ params }: { params: Promise<{ handle
               </a>
             ))}
           </div>
+          {detail.papers.length === 0 && <p className="muted-copy">No published papers yet.</p>}
         </SectionCard>
 
         <SectionCard eyebrow="Opportunity matches" title="Where this researcher could fit next">
@@ -69,6 +70,9 @@ export default async function ProfilePage({ params }: { params: Promise<{ handle
               <OpportunityCard key={opportunity.id} opportunity={opportunity} />
             ))}
           </div>
+          {opportunities.length === 0 && (
+            <p className="muted-copy">No opportunity matches right now.</p>
+          )}
         </SectionCard>
       </div>
     </div>