Phase 5: page components

[devin-ai-integration]

Summary

Phase 5 of the Angular → React migration (stacked on #682). Route-level components in src/pages/ plus the app chrome in src/components/; App.tsx still renders the placeholder, so nothing is mounted until Phase 6 adds the router.

• Feed.tsx reads feedType/page from useParams (Angular carried feedType in static route data), fetches on every param change, and derives listStart = (page - 1) * 30 + 1. window.scrollTo(0, 0) now runs when the stories actually arrive rather than in the observable's completion callback, and each render is one of loader / error / list instead of three co-existing *ngIf branches.
• Every page cancels its in-flight request on unmount / param change and ignores the resulting rejection, which is what replaces unsubscribing:

const controller = new AbortController();
fetchFeed(feedType, pageNum, controller.signal).then(...).catch(e => { if (!controller.signal.aborted) setErrorMessage(...) });
return () => controller.abort();

• ItemDetails.tsx: title/subtext/poll bars/comment list, goBack via useNavigate(-1) (was Location.back()), dangerouslySetInnerHTML for item.content and poll option content, and the conditional item-header/head-margin classes on the laptop block. It reuses hasUrl from Item.tsx instead of duplicating the getter.
• User.tsx: profile fields, optional about block, goBack, Could not load user <id>. error.
• Header.tsx: feed links become NavLinks (routerLinkActive → className={({ isActive }) => ...}), the cog toggles showSettings, scrollTop is preserved, and <Settings /> renders only when settings.showSettings. Footer.tsx is a straight port.
• SCSS copied per component; User.scss's :host >>> pre becomes .profile pre. Dropped .item-block { display: block } from Feed.scss — it existed to make Angular's inline <item> custom element a block, and Item.tsx renders a div.
• Tests: 15 new tests with a stubbed fetch — feed params → request URL, start offset, Prev/More visibility rules, jobs header, per-page error copy, item body/comments, poll bar widths from points / poll_votes_count, back navigation, user profile/about/error, and header active link + settings toggle.

Verification

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

Remaining

Phases 6–8: routing/app composition (SettingsProvider, theme wrapper, routes), 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