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

[landigf]

Now I have a complete picture. Here's the review:

---

Review: Render empty state when no listings match

Change summary

Adds <p className="muted-copy">…</p> empty-state messages to 8 pages across the app. Each listing section (feed, trending, conferences, opportunities, submissions, digest, profile papers, profile opportunities) now renders a contextual hint when the array is empty. The feed page additionally distinguishes search-miss ("No papers match your search") from zero-state ("No papers in the feed yet").

Pages touched: page.tsx (home), feed/page.tsx, conferences/page.tsx, conferences/[conferenceId]/page.tsx, digest/page.tsx, opportunities/page.tsx, u/[handle]/page.tsx.

Pattern used: {items.length === 0 && <p className="muted-copy">…</p>} placed after the .feed-stack div.

Validation confidence: Medium-High

• The pattern is simple, consistent, and low-risk — pure render-time conditional with no state mutation.
• The search-aware branch in feed/page.tsx (params.q ? … : …) is a nice touch.
• All changes are unstaged (working tree only), so nothing has been committed yet for this task.

Risks that still remain

Risk	Severity	Detail
muted-copy class has no CSS definition	High	No .muted-copy rule exists in globals.css or any stylesheet. The text will render unstyled (default <p>). Either define .muted-copy or use an existing class (e.g., field-note).
Empty div still renders	Low	The .feed-stack div is always rendered even when the list is empty — harmless but adds an empty container to the DOM. Could wrap it in items.length > 0 && for cleanliness, but not required.
feed/page.tsx groups section skipped	Low	Groups sidebar already has groups.length > 0 && around the whole SectionCard, so no empty state is shown for groups. Intentional? If a user has left all groups they see nothing — no prompt to join one.
No empty state on groups/page.tsx or groups/[groupSlug]/page.tsx	Low	These pages (added in earlier commits on this branch) also render listings but weren't touched. Consistency gap.
Tests not run	Medium	Per CLAUDE.md, npm run test && npm run check must pass after every change. Should verify before committing.

Verdict

The main blocker is the missing .muted-copy CSS class — without it the empty states render as unstyled paragraphs. Define the class or switch to an existing one, then run npm run test && npm run check and this is ready to ship.

[landigf]

Closing: will integrate valuable features directly on main to avoid cascade merge conflicts.