feat: add Settings context and migrate SCSS theme system to React

[devin-ai-integration]

Summary

Implements settings state management and SCSS theming for the Angular → React migration (Session 2 of parallel migration).

Settings Context (react-app/src/context/SettingsContext.tsx)

• Converts Angular's SettingsService (DI singleton) to a React Context provider
• Manages: theme, font size, list spacing, open-link-in-new-tab, show-settings toggle
• Persists all preferences to localStorage (matching Angular behavior)
• Detects system color scheme synchronously via getInitialTheme() — no flash on first load
• Subscribes to system theme changes via matchMedia listener with proper cleanup
• Uses functional updaters in toggleSettings and toggleOpenLinksInNewTab to avoid stale closures
• Guards ongoing media query listener so it only auto-switches theme when user hasn't explicitly chosen one

Settings Model (react-app/src/models/settings.ts)

• TypeScript interface matching the Angular Settings model

SCSS Theme System (react-app/src/styles/)

• Core theme files copied from Angular with fixed import paths:
  • _media.scss — responsive breakpoint variables
  • _theme_variables.scss — color tokens for day/night/amoled-black themes
  • _themes.scss — theme mixin + 3 theme instantiations (default, night, amoledblack)
  • global.scss — base styles importing the theme system
• Fixed amoledblack theme: now passes proper border shorthand (2px solid $color) instead of bare color value (bug in Angular source)
• Theme works by applying a CSS class (default, night, amoledblack) on the root <div> in App.tsx

Component CSS Modules

All Angular component SCSS files migrated to CSS Modules with :host replaced by wrapper class names:

• Header.module.scss (.header-root)
• Settings.module.scss (.settings-root)
• Footer.module.scss (.footer-root)
• FeedPage.module.scss (.feed-root)
• FeedItem.module.scss (.feed-item-root)
• ItemDetailsPage.module.scss (.item-details-root)
• Comment.module.scss (.comment-root)
• UserPage.module.scss (.user-root)
• Loader.module.scss (.loader-root)
• ErrorMessage.module.scss (.error-message-root)

Integration

• react-app/src/main.tsx imports global.scss

Review & Testing Checklist for Human

• Verify SettingsContext correctly mirrors Angular SettingsService behavior (localStorage keys, default values, system theme detection)
• Confirm SCSS theme variables and mixin output match Angular's compiled CSS (3 themes: default, night, amoledblack)
• Check that CSS Module wrapper classes (.header-root, .settings-root, etc.) will integrate correctly with the React components from other sessions

Notes

• This PR is part of a parallel migration effort (Session 2). It depends on Session 1's scaffold (react-app/ directory with Vite + React setup) being merged first.
• The main.tsx file is minimal (just the global.scss import) — Session 1 will provide the full React entrypoint; this import line should be merged into it.
• TypeScript type-checking requires React type declarations from Session 1's package.json dependencies.
• Addressed all Devin Review findings: fixed stale closures, theme override guard, amoled border shorthand, and theme flash on first load.

Link to Devin session: https://app.devin.ai/sessions/59528812c4f646c1a5e59d35a60cbd2c
Requested by: @matthewguerra-cog

---

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