feature: PR 4/8 — routes, App shell, Header/Footer/Settings

[devin-ai-integration]

Summary

PR 4 of 8 (stacked on #700). Ports app.routes.ts, app.component.* and src/app/core/* to React. Feed, ItemDetails and User are placeholders here — PRs 5-7 fill them in. Nothing under src/app/ changes.

src/react/routes.tsx mirrors the Angular route table, with App as the layout route supplying <Outlet/> in place of router-outlet:

<Route path="/" element={<App/>}>
  <Route index element={<Navigate to="/news/1" replace/>}/>
  <Route path="news/:page"   element={<Feed feedName="news"/>}/>   // ...newest/show/ask/jobs
  <Route path="item/:id" element={<Suspense …><ItemDetails/></Suspense>}/>  // React.lazy ≈ loadChildren
  <Route path="user/:id" element={<Suspense …><User/></Suspense>}/>
</Route>

feedName is passed as a prop rather than re-derived from the URL, so the five feeds stay exhaustive over FeedName. ItemDetails/User are React.lazy and build into their own chunks, preserving Angular's lazy modules.

• App reproduces app.component.html exactly (theme wrapper → body-cover → wrapper → Header / Outlet / Footer) and ports app.component.scss.
• GA is kept behind a usePageViews() hook: a useEffect on pathname that fires ga('set','page') + ga('send','pageview') only when the index.html snippet actually defined ga. Isolated in one file so it's trivial to drop.
• Header uses NavLink; Angular's routerLinkActive was non-exact, so any page of a feed must mark it active. NavLink's isActive alone only matches /news/1, so activity is also derived from the first path segment — /news/2 still highlights news.
• Settings popup ported with controlled inputs. Angular fired (keyup) on the number inputs; onChange is used instead, which additionally catches spinner clicks. Values stay strings, min attributes preserved.
• Component SCSS files are ported and imported from their components. These were Angular view-encapsulated; they are now global. Selectors are unchanged and match the same DOM, but generic ones (h1, .content, .active, .popup) are now app-wide — worth keeping in mind for later PRs.

Verified: npm run typecheck:react, npx vite build (separate lazy chunks emitted), and dev-server route checks for / → /news/1, /news/2, /ask/1, /item/123, /user/pg with a clean console.

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/e6419ebe67ff4f749fe1573a8e26cd07
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