feat: add ItemDetails, Comment, and UserProfile pages (Step 4)

[devin-ai-integration]

Summary

Step 4 of the Angular-to-React migration. Ports the following Angular components to React + TypeScript:

• src/pages/ItemDetails.tsx — Ported from item-details.component.ts/.html. Uses useParams() for item id, fetchItem() for data. Renders title, points, user link, time_ago, URL. Supports polls with vote bar charts. Renders nested <Comment> components. Shows <Loader /> / <ErrorMessage /> for loading/error states.

• src/components/Comment.tsx — Ported from comment.component.ts/.html. Recursive component for nested comment threads. Collapsible toggle via useState. Indents based on comment.level. Renders time_ago, user link, and content via dangerouslySetInnerHTML.

• src/pages/UserProfile.tsx — Ported from user.component.ts/.html. Uses useParams() for user id, fetchUser() for data. Displays id, karma, created date, and about (HTML). Shows <Loader /> / <ErrorMessage />.

• src/types/Story.ts — Added content field (used by Ask HN / text posts).

Both page components are exported as default for React.lazy integration (to be wired up by the integration session).

Build passes: npm run build succeeds with no errors.

Review & Testing Checklist for Human

• Verify ItemDetails renders correctly for different post types (links, Ask HN, Show HN, jobs, polls)
• Verify Comment component handles deeply nested comments and collapsed state
• Verify UserProfile renders user info and HTML "about" sections safely
• Once routing is wired up by the integration session, test navigation between items, users, and back

Notes

• SCSS files are ported from the Angular component styles with media queries converted from SCSS variables to standard @media breakpoints.
• Poll support fetches poll data directly from the Story.poll array returned by fetchItem().
• These components are designed to be lazy-loaded via React.lazy() — the routing integration session will set that up.

Link to Devin session: https://app.devin.ai/sessions/577c217a6c0349ff99ddbe7389f2e01e
Requested by: @eashansinha

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

[devin-ai-integration]

Original prompt from Eashan

Repository: COG-GTM/angular2-hn
Branch: react-migration-details (branched from react-migration-scaffold)

You are performing Step 4 of an Angular-to-React migration. The scaffold branch react-migration-scaffold already has Vite + React + TypeScript set up with types, API layer, SettingsContext, Loader, and ErrorMessage components.

Complete ALL of the following steps:

1. Create your branch from react-migration-scaffold:

   git fetch origin
   git checkout -b react-migration-details origin/react-migration-scaffold
   

2. Create src/pages/ItemDetails.tsx — port from src/app/item-details/item-details.component.ts + item-details.component.html. This will be lazy-loaded via React.lazy (the integration session will set that up). Use useParams() to get item id. Call fetchItem(id) from src/api/hackerNewsApi.ts in useEffect. Render title, points, user link, time_ago, URL. Support polls: if story.type === 'poll', fetch poll options via fetchPollContent() and render a vote bar chart. Render <Comment> components for the comments array. Show <Loader /> while loading and <ErrorMessage /> on error.

3. Create src/components/Comment.tsx — port from src/app/item-details/comment/comment.component.ts + comment.component.html. Recursive component for nested comments (each Comment has a comments: Comment[] array). Include collapsible toggle using local useState. Indent based on comment.level. Render time_ago, user (linked to /user/${user}), and content (as HTML via dangerouslySetInnerHTML).

4. Create src/pages/UserProfile.tsx — port from src/app/user/user.component.ts + user.component.html. Lazy-loaded via React.lazy (the integration session will set that up). Use useParams() to get user id. Call fetchUser(id) from src/api/hackerNewsApi.ts. Display user id, karma, created date, and about (rendered as HTML). Show <Loader /> while loading and <ErrorMessage /> on error.

5. Make sure the project builds without... (143 chars truncated...)

[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