PR 5/10 — Port shared and core components (Loader, ErrorMessage, Header, Footer, Settings)

[devanshi-gpta]

Summary

Part of the Angular → React migration chain; based on devin-09.08.2026-devanshi/add-settings-context.

Ports the presentational shell components from src/app/{shared,core} to react-app/src/components, keeping markup and class names identical so the global theme stylesheet (src/styles/_themes.scss, which targets .wrapper, .nav, #header, …) keeps working. Each component's SCSS is copied next to its .tsx with the @import paths repointed from ../../shared/scss/* to ../../styles/* and imported globally (not as CSS Modules).

Angular-specific behaviour mapped as:

• routerLink + routerLinkActive="active" → <NavLink to=... className={({isActive}) => isActive ? 'active' : ''}>, preserving /news/1, /newest/1, /show/1, /ask/1, /jobs/1 and the scrollTop() click handler.
• SettingsService injection → useSettings(); the cog image calls toggleSettings, and Settings renders only when settings.showSettings.
• Settings inputs become controlled inputs bound to the context (openLinkInNewTab checkbox, three theme radios, numeric font-size / list-spacing). Angular updated the numeric inputs on keyup; React uses onChange so the number spinners also work.

Tests: Settings modal smoke tests (toggle a setting, pick a theme, change font/spacing persist to localStorage), Header active-link + cog-toggles-modal (wrapped in MemoryRouter), and an ErrorMessage render test. npm run typecheck, npm run build, npm run lint and npm test pass in react-app/.

Proposed fixes

• Add react-app/src/components/shared/{Loader,ErrorMessage}.{tsx,scss}.
• Add react-app/src/components/core/{Header,Footer,Settings}.{tsx,scss}.
• Add Header.test.tsx, Settings.test.tsx, ErrorMessage.test.tsx.
• No changes to the Angular app under src/ (removed in the final cleanup PR).

Link to Devin session: https://app.devin.ai/sessions/1e1c792cfa2e4508b64c8061876debf6
Open in Devin Desktop: https://app.devin.ai/desktop/session/1e1c792cfa2e4508b64c8061876debf6?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