feat: migrate ItemDetails and Comment components from Angular to React + TypeScript

[devin-ai-integration]

Summary

Migrates the item-details Angular module (ItemDetailsComponent + CommentComponent) to React functional components with TypeScript, following the Angular → React mapping rules specified in the task.

5 new files created (original Angular files preserved alongside):

File	Purpose
src/app/item-details/ItemDetails.tsx	Main component — replaces item-details.component.ts + .html
src/app/item-details/ItemDetails.module.scss	CSS Modules styles (camelCase class names)
src/app/item-details/comment/Comment.tsx	Recursive comment tree — replaces comment.component.ts + .html
src/app/item-details/comment/Comment.module.scss	CSS Modules styles (camelCase class names)
src/app/shared/utils/formatCommentCount.ts	Utility function replacing the comment pipe

Key conversions applied:

• @Component + template → functional component with inline JSX
• ngOnInit + route.params.subscribe() → useEffect + useParams() (react-router-dom v6)
• HackerNewsAPIService (DI) → plain fetch with useEffect + useState + AbortController cleanup
• SettingsService (DI) → useSettings() hook (React Context)
• _location.back() → useNavigate() → navigate(-1)
• *ngIf / *ngFor → conditional && / .map()
• [innerHTML] → dangerouslySetInnerHTML
• [ngStyle] → inline style object
• [class.X]="cond" → template literal class concatenation
• [routerLink] → <Link to="...">
• @Input() → typed Props interface
• comment pipe → formatCommentCount() utility
• Subscription → AbortController cleanup in useEffect
• SCSS styleUrls → CSS Modules (.module.scss)
• (click) → onClick

All existing behavior preserved: loading state, error state, scroll-to-top, back navigation, poll rendering with vote bars, recursive comment tree with collapse/expand, conditional link targets (_blank), deleted comment handling.

Review & Testing Checklist for Human

• Verify ItemDetails.tsx correctly fetches and displays story content including title, points, user, time_ago, domain, and comments
• Verify poll rendering works correctly — poll bars width should be proportional to vote count
• Verify the recursive Comment component handles deeply nested comment trees and collapse/expand toggle
• Verify formatCommentCount returns "discuss" for 0, "1 comment" for 1, and "N comments" for N > 1
• Verify CSS Modules class names use camelCase (per repo knowledge: "always use camel case")

Recommended test plan:

1. Set up a React + React Router v6 environment and wire ItemDetails as a route at /item/:id
2. Provide a SettingsContext with useSettings() hook, and stub Loader/ErrorMessage components
3. Navigate to /item/<valid-hn-item-id> and verify full rendering
4. Test a poll item, a job item, and a story with nested comments
5. Test back button navigation and collapse/expand on comments

Notes

• The original Angular files are intentionally kept so both implementations can be compared side-by-side
• The new React files reference useSettings, Loader, and ErrorMessage imports — these would need to be created as part of the broader migration effort (they are the React equivalents of the existing Angular shared components)
• The Story and Comment models are imported from the existing shared models (Angular classes), which should be converted to TS interfaces as part of the full migration

Link to Devin session: https://app.devin.ai/sessions/e966af3e2bda440d801d01a782a95eca
Requested by: @charityquinn-cognition

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

---

[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 and CI monitoring