Add optional realtime updates mode with Firebase SDK integration

[devin-ai-integration]

Add optional realtime updates mode with Firebase SDK integration

Summary

This PR implements an optional realtime updates feature that allows users to see new Hacker News stories appear automatically without refreshing the page. When enabled in Settings, the app subscribes to the official Hacker News Firebase Realtime Database API and prepends new stories to the feed as they are posted.

Key Changes:

• Added Firebase SDK v8.10.1 as a dependency
• Created RealtimeUpdatesService to manage Firebase subscriptions and story updates
• Extended Settings model and service with realtimeUpdates toggle
• Updated Settings UI with checkbox to enable/disable realtime mode
• Modified FeedComponent to integrate realtime updates (only on page 1 of feeds)
• Added unit tests for RealtimeUpdatesService
• Added e2e test script to verify realtime updates work without page reload
• Updated README with Realtime Mode documentation

Review & Testing Checklist for Human

⚠️ Risk Level: YELLOW - Manual testing required

• Test realtime updates manually: Enable realtime mode in Settings, navigate to home feed, and verify that new stories appear at the top without refreshing. Wait at least 5-10 minutes to see if new stories arrive.
• Verify Service Worker compatibility: Test offline functionality with realtime mode both enabled and disabled. Ensure cached content still loads when offline.
• Check Firebase path mappings: Verify that the feed type mappings in getFeedPath() are correct, especially 'news' -> 'v0/topstories'. The official HN Firebase API docs should confirm this.
• Test race conditions: Rapidly navigate between feeds and pages while realtime mode is enabled to check for duplicate stories or memory leaks.
• Verify toggle behavior: Test enabling/disabling realtime mode multiple times and ensure the setting persists correctly in localStorage.

Test Plan

1. Install dependencies: npm install
2. Start dev server: npm start
3. Open app in browser at localhost:4200
4. Open Settings (gear icon) and enable "Enable realtime story updates"
5. Return to home feed and wait 5-10 minutes
6. Verify new stories appear at the top without manual refresh
7. Test with browser DevTools Network tab throttled to "Slow 3G" to verify it doesn't break
8. Test offline mode by stopping the dev server and verifying cached content still loads

Notes

• The Firebase subscription uses child_added events which fire for all existing items on initial subscription. I mitigate this with a seenStoryIds Set that tracks already-loaded stories, but there's a potential race condition if the REST API fetch and Firebase subscription happen simultaneously.
• Realtime updates only activate on page 1 of feeds to optimize performance and avoid unnecessary Firebase connections.
• The e2e test waits 30 seconds for new stories, which may produce false negatives if HN is quiet during test runs.
• Pre-existing lint errors in the codebase were left untouched per guidelines; only new files follow full linting standards.
• The SettingsService now implements OnDestroy, but since it's a root-level singleton, ngOnDestroy will likely never be called in practice.

Session: https://app.devin.ai/sessions/28354384d4914097a9c95e7775a075d1
Requested by: Luke Page (luke.page@cognition.ai) / @lukepage-COG

[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