[devin-ai-integration]

Summary

Workstream 3 of the Angular→React port: replaces the placeholders in react-app/src/features/item-details/** and react-app/src/features/user/** (exports ItemDetails, Comment, UserProfile unchanged for the frozen lazy route table). Only those two folders are touched.

• ItemDetails (/item/:id): useScrollToTop(id) first, then useItem(id). Loader → ErrorMessage with Angular's exact Could not load item comments. (unknown/invalid ids like /item/abc and server errors all surface isError, never an endless loader). Title link honours Settings openLinkInNewTab; internal item?id= stories route in-app; domain, points/user/time, commentLabel(comments_count); jobs drop points/comments like Angular. content + poll option text go through sanitizeHtml (no extra item?id= rewriting). Polls: points per option + .pollBar width points / poll_votes_count, guarded to 0% when poll_votes_count === 0.
• Comment: recursive, each node owns collapse state. span.collapse toggles [-]/[+], adds .meta-collapse, hides the subtree; role="button", tabIndex={0}, Enter/Space, aria-expanded. Deleted → .deleted-meta [deleted] | Comment Deleted. Header whitespace matches Angular (measured 0px gaps [-]→user→.time on :4300 vs :4200).
• UserProfile (/user/:id): useScrollToTop(id) first, useUser(id); 'Could not load user ' + id + '.' for HNPWA null/plain-text/404; id, karma ★, Created …, sanitized about (block omitted when empty), mobile Profile: id header with keyboard-operable .back-button.
• SCSS: rule-for-rule ports under :where(.main-content.item-details), :where(.app-comment), :where(.user-profile) so _themes.scss still wins. Pinned (normal specificity) inside scope against leaks from other features: browser-default p margins and normal-weight underlined links in sanitized story/poll/comment HTML (Angular's :host >>> a { bold; none } never reached comment HTML — measured on :4300), item title stays 16px (no feed titleFontSize), profile .name inline.
• buttonKeys.ts: tiny feature-local onButtonKeyDown(action) helper for Enter/Space on Angular-markup role="button" elements.

Tests (no network; mockFetch + renderWithProviders): loading, exact error strings, invalid id / null / plain-text / 404 user, sanitization incl. HN-relative links, Settings new-tab effect, polls incl. zero-vote guard, jobs, recursive collapse independence, keyboard a11y (Enter/Space), back navigation.

npm ci && npm run lint && npm run format:check && npm run typecheck && npm test && npm run build all pass locally.

Shared changes needed: none.

Devin-Org: engineering

Link to Devin session: https://devin-gtm.devinenterprise.com/sessions/8cd0fe143ae548cd8651488878934a00
Open in Devin Desktop: https://devin-gtm.devinenterprise.com/desktop/session/8cd0fe143ae548cd8651488878934a00?variant=devin
Requested by: @ishita-cog

---

Note

Devin errored when opening this Pull Request as ishita-cog.
As a fallback, Devin opened this PR as itself.

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

---

[devin-ai-integration]

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

• Disable automatic comment, CI, and merge conflict monitoring

[devin-ai-integration]

Ran live-data testing with React on :4200 next to Angular on :4300. After the checks finished, no in-scope feature defect remained. Header/footer differences belong to other workstreams and were excluded. Angular's user requests were forwarded to live HNPWA, because the node-hnapi user endpoint returns 404.

Primary feature evidence: Angular left, React right

Verified: collapse is recursive and each comment collapses independently; Enter/Space toggle and aria-expanded follows; commenter/poster links navigate correctly; profile fields match; mobile Back works from the keyboard.

Desktop item, default	Mobile item, default

The desktop title is 16px, and comment-header gaps are 0px/0px. Content links are normal weight and underlined, and paragraph margins match Angular. Mobile headers stay fixed at 62px with no horizontal overflow.

Remaining viewport/theme comparisons (Angular left, React right)

1280px	375px

Variants, errors and caveats

• Passed: live Ask HN content, job metadata omission, poll options/points/bar widths (73/49/179 → 24.25%/16.28%/59.47%), and rendering of a real deleted comment.
• Passed: /item/abc, /item/99999999999 and nonexistent-user routes show the exact Angular errors with no endless loader.
• Not exercised live (covered by unit tests only): adversarial sanitizer payloads and zero-vote polls.

Poll (settled)	Ask HN

[devin-ai-integration]

Devin Review found 1 potential issue.