refactor(comments): Stage 5 — merge Comments + FeedComments into CommentThread

[spe1020]

Summary

Final stage of Task 6. Consolidates the two remaining thread containers (Comments.svelte + FeedComments.svelte) into a single src/components/comments/CommentThread.svelte with a variant: 'recipe' | 'feed' prop, introduces a minimal Toast primitive for unified error surfacing, and removes vestigial API surface accumulated across earlier stages.

Stage 5 net: +129 lines (of which: −32 comment-system consolidation, +161 new Toast infrastructure).

Cumulative Task 6: −2,083 lines across 5 stages. Below the projected −2,300…−2,400 range because the Toast primitive came in at 161 lines rather than the ~30–40 the estimate assumed — flagged honestly in the commit body.

What Task 6 accomplished

A six-file tangled cluster (pre-Task-6: ~4,977 lines across the originals + auxiliary dead files) has been replaced by a clean architecture:

src/lib/comments/
├── subscription.ts     — createCommentSubscription factory
└── postComment.ts      — spec-grounded NIP-22/NIP-10 post flow

src/lib/commentFilters.ts       — shared isAddressableRoot predicate
src/lib/tagUtils.ts             — buildNip22CommentTags (spec-compliant)
src/lib/toast.ts                — new, general-purpose toast store

src/components/comments/
├── CommentThread.svelte  — thread container, variant: 'recipe' | 'feed'
├── CommentCard.svelte    — single comment, variant-driven sizing
└── ReplyComposer.svelte  — shared composer UI + post flow

src/components/
├── Toast.svelte          — single toast visual
└── ToastContainer.svelte — global mount point

Zero duplication. Every spec path audited against canonical NIP documents via mcp__nostr__read_nip during Stage 2.

Unification decisions made in this stage

Three previously-deferred decisions resolved:

1. Signing strategy → hardcoded 'explicit-with-timeout'

The signingStrategy prop was removed from ReplyComposer. All call sites converge on one strategy. Feed's previous 'implicit' (silent failures) is gone; errors now always surface via toast.

2. Error UX → unified toast

ReplyComposer's catch block fires:

console.error('[ReplyComposer] post failed:', error);
showToast('error', "Couldn't post comment — please try again.");

The onErrorStrategy: 'alert' | 'silent' prop is removed. No more modal alert(), no more silent failure. Technical details to console; human-friendly message to the user.

3. Anon reply-button gating → unified sign-in link

CommentCard now renders a <a href="/login?redirect={pathname}" class="action-btn action-btn-text">Sign in to reply</a> for anon users — styled identically to the Reply button so the row doesn't reflow. Works on mobile (no tooltip hover dependency). Preserves return-to-thread post-login. Replaces recipe's "always-visible-but-non-functional button" / feed's "hidden-for-anon" split with one clearer affordance for both variants.

Plus the vestigial refresh prop is gone from CommentCard. It was a no-op since Stage 2 when subscription auto-delivery replaced manual refresh calls.

Architecture preserved

Subscription semantics per variant:

• Recipe: eager subscribe on mount, no mute filter, optimistic add via sub.addLocal().
• Feed: lazy subscribe on toggle, applyMuteFilter: true, no optimistic add.

NoteTotalComments DOM-event bridge preserved verbatim. CommentThread's feed variant emits <div class="inline-comments" data-event-id={event.id}> and registers the toggleComments CustomEvent listener via the same document.querySelector pattern used pre-Stage-5. NoteTotalComments.svelte is unchanged.

Root element differs by variant via a single top-level {#if variant === 'recipe'} block — <section id="comments-section"> with h2/h3 headings vs <div class="inline-comments" data-event-id>. Too divergent to parameterize; two honest branches produce cleaner code than forced unification.

Toast primitive

Intentionally narrow. No stacking priority, no animation library, no accessibility theatre beyond basic aria-live. One file for the store + helper, one for a single toast visual, one for the container. Mounted once in +layout.svelte grouped with the other overlay primitives.

Positioning: bottom-right on desktop; left: 1rem; right: 1rem; bottom: calc(64px + 1rem) on mobile (above the BottomNav). z-index 9999 matches MobileSearchOverlay's convention in this codebase and sits above all modals (~50–100).

Migrated call sites

In order (simplest first per migration plan):

1. src/routes/polls/+page.svelte — FeedComments → CommentThread variant="feed" (1-line import + 1-line tag)
2. src/components/FoodstrFeedOptimized.svelte — same
3. src/components/Recipe/Recipe.svelte — Comments → CommentThread variant="recipe" (1-line import + 1-line tag)

Each migration verified with pnpm run check before moving on.

Deleted

• src/components/Comments.svelte (105 lines)
• src/components/FeedComments.svelte (113 lines)

Verification

Check	Result
pnpm run check	4 pre-existing errors / 127 warnings — unchanged from main. Zero introduced.
pnpm run build	passes (adapter-cloudflare successful).
Dev server — /, /polls, /reads	all 200, no runtime errors.

Zero-vestigial greps (all pass)

$ grep -rn "import Comments\|import FeedComments" src/    →  empty
$ grep -rn "onErrorStrategy"                     src/    →  empty
$ grep -rn "refresh.*NDKEvent"   src/components/comments/  →  empty

Manual browser verification (all 7 passed by author)

• Recipe page: top-level composer posts with optimistic add
• Feed card: NoteTotalComments toggle opens/closes thread
• Toggle contract: comment count updates when new comments arrive
• Mute filter: muted-user comments don't appear in feed threads
• Anon state: "Sign in to reply" link + sign-in prompts render correctly
• Polls page: threads render, comment post works
• Toast: deliberate error surfaces toast that auto-dismisses

Spec re-check

postComment lib is untouched in Stage 5. CommentThread and CommentCard call <ReplyComposer> with the same parentEvent + replyTo shape Stage 4 used. The hardcoded 'explicit-with-timeout' flows into postComment({ signingStrategy: 'explicit-with-timeout' }) — identical to the recipe variant's pre-Stage-5 call. NIP-22/NIP-10 tag output is byte-equivalent to Stage 4 by construction (same library path). Browser-captured event JSONs confirm.

Test plan

• Open a recipe page: top-level ReplyComposer renders with <Button> submit. Post a comment — appears instantly (optimistic add). Reply to an existing comment — same flow; inline composer is compact, with Cancel.
• Open /: click the 💬 icon on a feed post — thread panel opens (via NoteTotalComments bridge). Click again — closes. Open, post a comment — appears after subscription round-trip.
• On /polls: open a poll's comments panel, post a comment. Post a poll-kind comment (if composer supports polls — it does). Kind 1068 event has correct NIP-10 tags + client tag + poll tags.
• Sign out. Open a recipe: top-level composer replaced by "Sign in" link (href preserves redirect). Reply button on any card replaced by "Sign in to reply" link (styled identically). Open a feed post's thread: same — composer area shows sign-in link, Reply button on each card shows sign-in link.
• Sign back in, open the same recipe via the redirected link: returns to the comments section.
• Mute a user whose comments were visible on /: their comments disappear from feed threads reactively (live mute filter).
• Kill network connection, click Post on a recipe reply → toast fires with "Couldn't post comment — please try again." in the bottom-right. Auto-dismisses after 4s. Also dismissable with the × button.
• Kill network, click Post on a feed reply → same toast UX (previously was silent failure — this is now fixed).
• ZapModal on a comment: click the zap icon → modal opens. Close it. Toast fires above modal if an error happens inside (z-index 9999 > modal's ~50–100).

Follow-ups filed (not in Stage 5 scope)

Added to docs/dev/FOLLOWUPS.md candidates for future work:

• Unify empty-state sign-in prompt copy across variants (recipe's empty state doesn't include the inline sign-in hint that feed's does)
• Differentiated error messages (signing cancelled / network timeout / generic) instead of one generic toast message

Task 6 — Complete

Stage	Work	Δ
1	Delete 4 dead components (InlineComments tree)	−1,293
2	Extract /lib/comments/ with spec-grounded NIP-22/10/89 handling	+311
3	Extract ReplyComposer shared composer	−870
4	Merge Comment + FeedComment → CommentCard	−360
5	Merge containers → CommentThread + Toast primitive	+129
Total		−2,083 lines

PRs in order: #298, #299, #300, #301, this one.

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying frontend with    Cloudflare Pages

Latest commit:	8a2792c
Status:	✅  Deploy successful!
Preview URL:	https://f55c92c2.frontend-hvd.pages.dev
Branch Preview URL:	https://refactor-comments-stage-5-co.frontend-hvd.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	frontend	8a2792c	Apr 18 2026, 03:19 PM

[Copilot]

Pull request overview

Final stage of the Task 6 comment-system refactor: consolidates the remaining thread containers into a single CommentThread component with recipe/feed variants, and introduces a minimal global toast primitive to unify comment-post error surfacing across contexts.

Changes:

• Replace Comments.svelte and FeedComments.svelte with src/components/comments/CommentThread.svelte (variant: 'recipe' | 'feed') and migrate call sites.
• Introduce a lightweight toast system ($lib/toast + Toast/ToastContainer) and mount it globally in +layout.svelte.
• Simplify ReplyComposer/CommentCard APIs by removing now-vestigial props (signingStrategy, onErrorStrategy, refresh) and standardizing error UX via toast.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/routes/polls/+page.svelte	Migrates polls comment UI from FeedComments to CommentThread feed variant.
src/routes/+layout.svelte	Mounts ToastContainer once at the app root for global toast rendering.
src/lib/toast.ts	Adds toast store + showToast/dismissToast helpers.
src/components/comments/ReplyComposer.svelte	Unifies post error handling via toast and hardcodes signing strategy.
src/components/comments/CommentThread.svelte	New unified thread container replacing Comments + FeedComments.
src/components/comments/CommentCard.svelte	Removes refresh prop and adds anon “Sign in to reply” link behavior.
src/components/ToastContainer.svelte	New global toast stream renderer.
src/components/Toast.svelte	New toast UI component with dismiss action.
src/components/Recipe/Recipe.svelte	Migrates recipe comments from Comments to CommentThread recipe variant.
src/components/FoodstrFeedOptimized.svelte	Migrates feed comments from FeedComments to CommentThread feed variant.
src/components/FeedComments.svelte	Deleted (replaced by CommentThread).
src/components/Comments.svelte	Deleted (replaced by CommentThread).
package.json	Version bump.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

loginRedirectHref is assigned via $: but is not declared anywhere in the <script lang="ts">. This will cause a TypeScript error / implicit global. Declare it (e.g. let loginRedirectHref = '') before the reactive assignment.

Suggested change

	// Preserves redirect-to-thread post-login.
	// Preserves redirect-to-thread post-login.
	let loginRedirectHref = '';

[spe1020]

Fixed in 8a2792c. Added let loginRedirectHref = '' before the $: assignment. svelte-check passed clean on this file without the explicit declaration (Svelte 4 auto-declares reactive-label targets), but the explicit form is stylistically cleaner and forward-compatible with Svelte 5's stricter rules.

[Copilot]

ToastContainer sets aria-live="polite", but each Toast also sets its own aria-live (and role). Nested live regions can lead to duplicate or inconsistent announcements in some screen readers. Prefer a single live-region strategy (either keep it on the container and remove per-toast aria-live, or drop it from the container and let each toast control its own).

Suggested change

	<div class="toast-container" aria-live="polite">
	<div class="toast-container">

[spe1020]

Real concern — nested live regions are unreliable across screen readers. Fixed in 8a2792c by dropping aria-live from the container and keeping it on each <Toast>. That way per-variant urgency still works (errors get assertive, info/success get polite) without the nesting ambiguity. Added an explanatory comment on the container so nobody re-adds the attribute.

[Copilot]

loginRedirectHref is assigned in a reactive statement but never declared (let/const). In a <script lang="ts"> this will fail type-checking (and can become an implicit global). Declare it (e.g. let loginRedirectHref = '') before the $: assignment.

Suggested change

	let loginRedirectHref = '';

[spe1020]

Same fix — declared let loginRedirectHref = '' before the $: in 8a2792c. Applied to both this file and CommentCard.svelte (which had the identical pattern).