Phase 2: Core Infrastructure Migration - Settings Context & API Service

[devin-ai-integration]

Phase 2: Core Infrastructure Migration - Settings Context & API Service

Summary

This PR implements Phase 2 of the Angular to React migration, adding the core infrastructure components that will be used throughout the React application. Building on the Phase 1 foundation (project setup, type definitions, utility functions), this phase migrates the Angular services to React patterns.

Key changes:

The SettingsContext (src/contexts/SettingsContext.tsx) provides theme management with three options (default, night, amoledblack), localStorage persistence for all settings, and a media query listener for prefers-color-scheme: dark that automatically sets the theme when no saved preference exists.

The API hooks (src/hooks/useHackerNewsAPI.ts) replace the Angular RxJS-based HackerNewsAPIService with React hooks: useFeed for paginated story lists, useItemDetails for individual items with poll support, and useUser for user profiles. All hooks include loading/error states and request cancellation.

React Router v6 is configured in App.tsx with routes matching the Angular app structure. ItemDetails and User components are lazy-loaded using React.lazy() to match the Angular lazy loading pattern.

Review & Testing Checklist for Human

• Verify SettingsContext media query behavior: The theme initialization logic has two useEffect hooks - confirm the listener properly responds to system theme changes when no saved preference exists
• Test API hooks against live API: Run the app and verify useFeed, useItemDetails, and useUser successfully fetch data from https://node-hnapi.herokuapp.com
• Review dangerouslySetInnerHTML usage: The User component renders user.about with dangerouslySetInnerHTML - verify this is acceptable given the API source
• Test localStorage persistence: Toggle settings, refresh the page, and confirm values persist correctly

Recommended test plan:

1. cd react-app && npm install && npm run dev
2. Navigate to /news/1 and verify stories load
3. Click an item to test /item/:id route and lazy loading
4. Navigate to /user/:id to test user profile loading
5. Open browser devtools > Application > Local Storage to verify settings persistence

Notes

This PR includes the Phase 1 foundation work (models, utils, project setup) as it builds on that branch. The Feed, ItemDetails, and User components are intentionally minimal placeholders - full UI implementation is planned for Phase 3.

Link to Devin run: https://app.devin.ai/sessions/1c95de9914fa4b998b4f736184b1ed5c
Requested by: Jack Meigel (@cogjack)

[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