feat: Migrate Angular Components to React - Phase 1 & 2

[devin-ai-integration]

Summary

This PR migrates 6 Angular components to React as part of the incremental migration plan for the Hacker News application. The components are organized into two phases:

Phase 1 - Shared/Utility Components:

• Loader - Loading indicator with CSS animation
• ErrorMessage - Error display with skull icon, accepts message prop
• Item - Story card component that displays HN items with settings integration

Phase 2 - Core Layout Components:

• Footer - Static footer with GitHub link
• Header - Navigation header with React Router links and settings toggle
• Settings - Settings panel for theme, font size, link behavior, and spacing

Supporting Infrastructure:

• SettingsContext - React Context replacing Angular's SettingsService with localStorage persistence
• TypeScript interfaces for Story, Settings, Comment, etc.
• formatComment utility (replaces Angular pipe)
• README with usage documentation

Review & Testing Checklist for Human

• Verify React compilation - These components cannot be tested in the current Angular project since React/react-router-dom are not installed. Install dependencies (npm install react react-dom react-router-dom @types/react @types/react-dom) and verify TypeScript compilation passes
• Check CSS styling accuracy - The SCSS was manually converted to plain CSS. Theme variables and mixins were not migrated, so theme switching won't visually work until theme CSS is integrated
• Verify SettingsContext localStorage keys - Confirm the localStorage keys (openLinkInNewTab, theme, titleFontSize, listSpacing) match what the Angular app uses for migration compatibility
• Test Item component rendering - The time_ago field type was changed from number to string based on template usage - verify this matches the actual API response
• Check asset paths - Header references /assets/images/logo.svg and /assets/images/cog.svg - verify these paths work in the target React environment

Recommended test plan: After installing React dependencies, create a simple test harness that renders each component with mock data to verify they render without errors and match the original Angular styling.

Notes

The existing Angular lint errors in the output are pre-existing issues in the Angular codebase, not related to this PR's React components.

Link to Devin run: https://app.devin.ai/sessions/586e15d293494ac5acb128ed1f69f077
Requested by: @iancmoritz

[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