PR 6/10 — Port the feed list and story item components

[devanshi-gpta]

Summary

Part of the Angular → React migration chain; based on devin-09.08.2026-devanshi/add-shared-and-core-components. Ports src/app/feeds/ to React, leaving the Angular sources untouched (removed in the final cleanup PR).

• react-app/src/components/feeds/Item.tsx (from feeds/item/): takes item: Story, reads listSpacing / titleFontSize / openLinkInNewTab from the settings context. The Angular get hasUrl() becomes an exported helper hasUrl(item) => item.url?.startsWith('http') ?? false that tolerates a missing url (the Angular version threw on undefined). target="_blank"/rel="noopener" are spread in only when openLinkInNewTab is on, matching Angular's [attr.x]="… : null" semantics; both the subtext-palm and subtext-laptop blocks are preserved, with the comment pipe replaced by formatCommentCount.
• react-app/src/pages/Feed.tsx (from feeds/feed/): feedType arrives as a prop from the router, page from useParams() (default 1). Data comes from useFetch(signal => fetchFeed(feedType, page, signal), [feedType, page]); Loader while loading, ErrorMessage with Could not load {feedType} stories. on failure. listStart = (page - 1) * 30 + 1 feeds the <ol start>, window.scrollTo(0, 0) runs after each successful load, and the jobs header, list-margin rule and Prev (listStart !== 1) / More (items.length === 30) links are ported as-is.
• feed.component.scss / item.component.scss copied verbatim next to the components with their @import paths rewritten to ../styles/….

src/test-setup.ts gains a window.matchMedia fallback: jsdom does not implement it, and any test that renders SettingsProvider (both new test files) crashed without it.

Proposed fixes

• Component tests for Item (external vs. self post links, domain, job stories hiding points/comments) and Feed (list start, pagination links, error message, jobs header) with fetch stubbed.
• npm run typecheck, npm run build, npm run lint and npm test all pass in react-app/ (29 tests).

Follow-up: routing is not wired up yet, so Feed is rendered by the router PR later in the chain.

Link to Devin session: https://app.devin.ai/sessions/6945f05e664647d2b370d15f63e0dd1a
Open in Devin Desktop: https://app.devin.ai/desktop/session/6945f05e664647d2b370d15f63e0dd1a?variant=devin
Requested by: @devanshi-gpta

[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

[devin-ai-integration]

Devin Review found 2 potential issues.

[devin-ai-integration]

🔍 Ported styles are now global

Angular previously scoped these selectors per component. Audit a, p, ol, .nav, .title, and .details before the app shell mounts feeds.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Noted. Global SCSS is the established convention in react-app/ (_themes.scss targets global class names like .wrapper/.nav, so CSS Modules would break theming), and these rules are a verbatim port of feed.component.scss. The one real collision found so far (.name vs the header rule) is fixed in 3967066; a broader audit of the bare a/p/ol selectors is best done once the router mounts all views together.