Phase 4: shared and leaf components

[devin-ai-integration]

Summary

Phase 4 of the Angular → React migration (stacked on #681). Presentational components only — nothing routes yet, so App.tsx still renders the placeholder.

• Loader.tsx, ErrorMessage.tsx (message prop), Item.tsx (item prop), Comment.tsx (comment prop) and Settings.tsx in src/components/, each importing the component .scss copied over from its Angular counterpart.
• Item.tsx: hasUrl becomes an exported helper (item.url.indexOf('http') === 0, now null-safe since the API omits url for Ask HN posts), settings come from useSettings(), and comments_count renders through formatCommentCount. [ngStyle] → inline style, routerLink → <Link>.
• Comment.tsx recurses on comment.comments with collapse in useState, keeps the [hidden] subtree (so collapse state of children survives) and renders comment.content via dangerouslySetInnerHTML; the deleted branch returns early. Each comment gets a .comment wrapper, which is what Angular's :host >>> a selector becomes in Comment.scss:

.comment a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } }

• Settings.tsx: theme radios are generated from a THEMES list instead of Angular template refs (#default/#night/#amoledblack), and font size / list spacing move from (keyup) to controlled onChange, so programmatic and paste changes register too. The "Open links in a new tab" text is now inside its <label> so clicking it toggles the checkbox.
• Story.time_ago is typed string (it holds "2 hours ago"; the Angular model declared number).
• Tests: 15 new tests via @testing-library/react covering hasUrl, external vs internal item links, openLinkInNewTab/font-size/list-spacing application, the jobs variant, recursive rendering, collapse/expand, the deleted branch, and each settings control's persistence. src/test/setup.ts stubs window.matchMedia, which jsdom lacks.

Verification

npm run lint, npm test (32 passed) and npm run build pass.

Remaining

Phases 5–8: page components (Feed, ItemDetails, User, Header, Footer), routing/app composition, PWA, Angular cleanup + docs.

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/f5e6c49cc7f344bf80df57ffee2e7939
Requested by: @abboudp

---

Note

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

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

[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