feature: Phase 2B — React item details feature (ItemDetails + Comment)

[vibhaseshadri-cognition]

Summary

Phase 2B of the Angular → React migration: ports the item details page and the recursive comment tree into react/src/features/item/. Builds on the Phase 1 foundation (#713); no wiring into routes yet (Phase 3). Nothing outside react/src/features/item/ is touched.

Behaviour notes / deviations:

• ItemDetails reads :id via useParams, resets state and calls hackerNewsApi.fetchItemContent(itemId) on every id change, with a cancelled flag so stale responses never overwrite a newer one. window.scrollTo(0, 0) runs on mount (before load, as in ngOnInit). Back button → useNavigate()(-1).
• The Angular template reads item.text and item.content, which are not on the shared Story model. Rather than touching the Phase 1 model, ItemDetails uses a local type ItemStory = Story & { text?: string; content?: string } so head-margin and the .subject innerHTML behave exactly as in Angular when the API returns those fields.
• Comment's :host >>> a {…} styles have no React equivalent, so each Comment root <div> gets className="comment" and the SCSS uses .comment a {…}. All other class names are kept verbatim so _themes.scss global selectors keep working. Collapse uses the HTML hidden attribute so subtrees stay mounted.

Rendered standalone with a mocked API (global theme styles come with Phase 3 wiring):

Angular → React mapping

Angular	React
src/app/item-details/item-details.component.ts / .html	react/src/features/item/ItemDetails.tsx
src/app/item-details/item-details.component.scss	react/src/features/item/ItemDetails.scss
src/app/item-details/comment/comment.component.ts / .html	react/src/features/item/Comment.tsx
src/app/item-details/comment/comment.component.scss	react/src/features/item/Comment.scss
src/app/item-details/item-details.component.spec.ts	react/src/features/item/ItemDetails.test.tsx
src/app/item-details/comment/comment.component.spec.ts	react/src/features/item/Comment.test.tsx
ItemDetailsModule exports	react/src/features/item/index.ts

Test coverage (API mocked, no network)

ItemDetails: loading state (Loader, no .item); error text Could not load item comments.; external URL title (href, (domain) span, no target/rel by default; target="_blank" rel="noopener" when localStorage.openLinkInNewTab = 'true'); no-URL story renders internal Link to /item/:id; job type (no points/user, no comment link, item-header present, no item-details class); comments_count 0 non-job → no item-header; head-margin only when text set; poll bars 30/90 of 120 → 25%/75% plus N points; content rendered as HTML; back button navigates to previous history entry; scrollTo(0,0) called before fetch resolves; 3-level nested comments; refetch on id change + stale response ignored; user link navigation.
Comment: author link/time/innerHTML; collapse [-]→[+], meta-collapse class, hidden subtree, re-expand; deleted comment renders .deleted-meta only; 3-level recursion.

Counts: 15 ItemDetails tests + 4 Comment tests = 19 new (57 total across 11 files). Coverage for src/features/item: 99.32% lines / 97.67% branches.

Checks run from react/: npm run format, npm run lint (only pre-existing react-refresh warning), npm run format:check, npm run build, npm test, npm run test:coverage.

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/b23f600352164863a9fb24e24ad59970
Open in Devin Desktop: https://app.devin.ai/desktop/session/b23f600352164863a9fb24e24ad59970?variant=devin
Requested by: @vibhaseshadri-cognition

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring