feature: port the React app shell, router, header, footer and settings modal (Phase 2a)

[vibhaseshadri-cognition]

Summary

Phase 2a of the Angular → React migration: ports AppComponent, app.routes.ts and src/app/core/* (header, footer, settings) into web/. The Angular app in src/ is untouched; the ported DOM structure, class names and copy are identical to the Angular templates.

App is now the router layout element (no more children prop) and reproduces the Angular GA pageview subscription with a useLocation() effect:

useEffect(() => {
    if (typeof window.ga !== 'function') return;   // Angular assumed the global existed
    window.ga('set', 'page', pathname);
    window.ga('send', 'pageview');
}, [pathname]);

Routes live in web/src/routes.tsx as a RouteObject[] (plus an AppRoutes wrapper over useRoutes) so tests can mount the real table; main.tsx renders <SettingsProvider><BrowserRouter><AppRoutes /></BrowserRouter></SettingsProvider>. The Angular per-feed child route with data: {feedType} becomes one route per feed passing the prop: { path: `${feedType}/:page`, element: <FeedPage feedType={feedType} /> }, and '' → /news/1 becomes an index route rendering <Navigate to="/news/1" replace />.

Behavioural notes worth flagging:

• NavLink supplies the active class that routerLinkActive="active" used to, so the header SCSS applies unchanged.
• Angular's number inputs used (keyup); React uses onChange, which is equivalent here (fires per keystroke) and keeps the inputs controlled. Theme radios likewise move from (click) to onChange.
• Image sources become root-relative (/assets/images/logo.svg); the Angular templates relied on <base href="/">, which Vite's index.html does not have, so a relative path would break on /news/1-style URLs.

Component SCSS is copied verbatim from the Angular components (only the @import paths retargeted to web/src/styles/, then prettier-formatted).

Tests

New Vitest + RTL suites (55 tests pass overall): route table per feed + / redirect + /item/:id + /user/:id + navigation via each header link (pages are vi.mocked since the real ones are placeholders until 2b–2d), GA firing on initial render and on navigation and staying silent when window.ga is undefined, header links/active state/scrollTop, settings modal open/close from the cog and ×, and theme/font-size/list-spacing/new-tab controls updating both the context and localStorage.

npm run lint, npm test and npm run build all pass in web/.

Screenshots

vite dev on /news/1 — the feed area is empty because FeedPage is still the Phase 2b placeholder:

Link to Devin session: https://app.devin.ai/sessions/eca3fd83ff8741bf9f9367a1e437f89a
Requested by: @vibhaseshadri-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, CI, and merge conflict monitoring