feat: add Header, Footer, Settings shell components and port SCSS theme system

[devin-ai-integration]

Summary

Step 2 of the Angular-to-React migration. This PR adds the application shell — Header, Footer, and Settings components — and ports the SCSS theme system from the Angular source.

Components created:

• Header.tsx — Ported from src/app/core/header/. Navigation links to /news/1, /newest/1, /show/1, /ask/1, /jobs/1 using react-router-dom NavLink. Includes logo, settings toggle button, and conditionally renders Settings when showSettings is true via useSettings() hook.
• Footer.tsx — Ported from src/app/core/footer/. Static footer with GitHub attribution link.
• Settings.tsx — Ported from src/app/core/settings/. Theme radio buttons (default/night/amoledblack), open-links-in-new-tab checkbox, font size number input, and list spacing number input. All wired to useSettings() hook.

Styles ported:

• src/styles/_media.scss — Media query breakpoint variables
• src/styles/_theme_variables.scss — Color variables for day, night, and AMOLED black themes
• src/styles/_themes.scss — Theme mixin generating .default, .night, .amoledblack CSS class scopes
• src/styles/app.scss — Global wrapper and body-cover styles with theme imports
• Component-level SCSS files for Header, Footer, and Settings

App.tsx updated:

• Wrapped app in BrowserRouter with Routes (placeholder route for feeds)
• Theme class applied on root wrapper div via settings.theme
• Shell layout: <Header /> → <Routes /> → <Footer />

Review & Testing Checklist for Human

• Verify theme switching works: click settings cog → select Default/Night/AMOLED Black → confirm background, text, and header colors change
• Verify nav links render and navigate correctly (/news/1, /newest/1, /show/1, /ask/1, /jobs/1)
• Verify Settings panel opens/closes via the cog icon
• Verify settings persist across page reload (theme, font size, list spacing, open-links-in-new-tab are stored in localStorage)
• Test responsive layout: header should be fixed on mobile, footer hidden on mobile

Notes

• Sass @import deprecation warnings are expected — the Angular source uses @import and a migration to @use/@forward can be done in a future step
• Feed content routes are placeholders — actual feed components will be implemented in Step 3
• The darken() function deprecation warning in the AMOLED theme is inherited from the original Angular SCSS

Link to Devin session: https://app.devin.ai/sessions/f3b795b2d1434067a78fd5b58d3d572f
Requested by: @eashansinha

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

[devin-ai-integration]

Original prompt from Eashan

Repository: COG-GTM/angular2-hn
Branch: react-migration-shell (branched from react-migration-scaffold)

You are performing Step 2 of an Angular-to-React migration. The scaffold branch react-migration-scaffold already has Vite + React + TypeScript set up with types, API layer, SettingsContext, Loader, and ErrorMessage components.

Complete ALL of the following steps:

1. Create your branch from react-migration-scaffold:

   git fetch origin
   git checkout -b react-migration-shell origin/react-migration-scaffold
   

2. Create src/components/Header.tsx — port from src/app/core/header/header.component.html + header.component.ts. Navigation links to: /news/1, /newest/1, /show/1, /ask/1, /jobs/1. Include settings toggle button. Use useSettings() hook from src/context/SettingsContext.tsx and <Link> / <NavLink> from react-router-dom.

3. Create src/components/Footer.tsx — port from src/app/core/footer/footer.component.html. Simple static footer with attribution.

4. Create src/components/Settings.tsx — port from src/app/core/settings/settings.component.html + settings.component.ts. Include theme radio buttons (default/night/amoledblack), open-links-in-new-tab checkbox, font size number input, list spacing number input. Use useSettings() hook.

5. Port SCSS files from src/app/shared/scss/ (including _themes.scss, _theme_variables.scss) into src/styles/. Port component-level SCSS and convert to CSS modules or global imports. Ensure theme classes (default, night, amoledblack) apply correctly on a root wrapper div.

6. Make sure the project builds without errors (npm run build).

7. Commit, push the branch react-migration-shell, and open a draft PR targeting react-migration-scaffold.

[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 and CI monitoring