PR 4/10 — Port settings service to a React context

[devanshi-gpta]

Summary

Part of the Angular → React migration chain; based on devin-09.08.2026-devanshi/port-hackernews-data-layer.

Ports src/app/shared/services/settings.service.ts to react-app/src/context/SettingsContext.tsx (SettingsProvider + useSettings(), which throws outside the provider). Same localStorage keys/defaults and the same persistence behaviour per setter; showSettings stays in memory only.

The one non-mechanical part is initTheme: Angular re-dispatched a synthetic MediaQueryListEvent to reuse its change handler. Here the effect calls the same handler directly with the MediaQueryList when no theme is saved, so the mount path and the change path share one code path without faking an event:

const handleChange = (event: MediaQueryListEvent | MediaQueryList) =>
    setTheme(event.matches ? 'night' : 'default');
media.addEventListener('change', handleChange);
if (!localStorage.getItem('theme')) handleChange(media);
return () => media.removeEventListener('change', handleChange);

Note the saved theme is read in the initial state (Angular hardcoded 'default' then overwrote it in initTheme), so no first-render flash of the wrong theme.

Proposed fixes

• react-app/src/context/SettingsContext.tsx: provider with toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing; memoised context value.
• react-app/src/context/SettingsContext.test.tsx: vitest coverage for defaults, localStorage reads/writes, showSettings not persisted, saved theme winning over the system preference, live prefers-color-scheme changes, and listener cleanup on unmount (window.matchMedia is stubbed — jsdom has no implementation).

npm run typecheck, npm run build, npm run lint and npm test pass in react-app/.

Link to Devin session: https://app.devin.ai/sessions/451b5e68d2dc4745ba01847041b9c0af
Open in Devin Desktop: https://app.devin.ai/desktop/session/451b5e68d2dc4745ba01847041b9c0af?variant=devin
Requested by: @devanshi-gpta

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