feature: scaffold React + TypeScript app alongside Angular (migration PR 1/N)

[charityquinn-cognition]

Summary

First PR of the Angular → React migration: adds a Vite React + TypeScript app under react-app/ that builds and renders a placeholder page. No Angular code is touched or removed; feature components come in later stacked PRs.

The React app is a separate npm project (react-app/package.json, its own node_modules) rather than sharing the root package.json. Reason: Vite 8 / React 19 need TypeScript ~6, while the Angular app pins typescript ~3.7.5 — a single manifest can't satisfy both, and merging them would break npm run build/ng serve for the Angular app that still has to work during the migration. The final PR of the series deletes the Angular sources and moves react-app/ to the repo root.

What's in it:

• react-app/ Vite + React 19 + TS scaffold, npm run dev|build|lint|format.
• ESLint flat config (@eslint/js, typescript-eslint, react-hooks, react-refresh, eslint-config-prettier) and Prettier configured with the Angular app's existing settings (trailingComma: es5, tabWidth: 4, singleQuote: true, printWidth: 120).
• Global styles ported from src/styles.scss + src/app/shared/scss/{_media,_theme_variables,_themes}.scss into react-app/src/styles/, imported from main.tsx. Deprecated Sass APIs were modernized so the build is warning-free:

-@import "./media";                                   // themes partial
-$skull-size / 8
-darken($theme-amoledblack-text-color, 33%)
+@use './media' as *;
+math.div($skull-size, 8)
+color.adjust($theme-amoledblack-text-color, $lightness: -33%)

• index.html carries over the PWA/social meta, skip link and .app-loader markup; the Angular app-root:empty loader selector becomes #root:empty.
• Static assets copied to react-app/public/: assets/icons/*, assets/images/*, favicon.ico, manifest.json.
• Placeholder App renders inside the default theme wrapper so the ported theme SCSS is exercised.

npm run lint, npm run format:check and npm run build all pass in react-app/; dev server renders:

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/8edab78f01c5451f9d61c114b94b7484
Open in Devin Desktop: https://app.devin.ai/desktop/session/8edab78f01c5451f9d61c114b94b7484?variant=devin
Requested by: @charityquinn-cognition

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

---

[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

[devin-ai-integration]

Devin Review found 3 potential issues.

[devin-ai-integration]

📝 Info: Carried-over broken social-image reference

The twitter:image and og:image tags point at assets/images/logo-loading.png, which does not exist under public/assets/images (only cog.svg, logo-header.png, logo.svg). This is copied verbatim from the original Angular index.html, so the broken reference is pre-existing, not introduced here.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Correct, logo-loading.png is missing on master too — carried over verbatim on purpose. Picking a replacement social image is a content decision, so I'd rather not change it silently here; flagging it for the PWA/metadata PR at the end of the migration series.

[devin-ai-integration]

📝 Info: Pre-existing wrong tile-image path

square150x150logo points at /mstile-150x150.png, but the file lives at /assets/icons/mstile-150x150.png, so the tile image will not load. This is copied verbatim from the original Angular asset, so the issue is pre-existing.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Agreed, and pre-existing — the file is a byte-for-byte copy of the Angular asset. Leaving it as-is so this PR stays a pure port; the tile path (and the browserconfig.xml reference itself) is better fixed in the PWA PR at the end of the series.

[devin-ai-integration]

📝 Info: SCSS port matches the Angular original

The ported theme mixin, all three @include argument lists (12 args each), math.div($skull-size, 8), and color.adjust(..., $lightness: -33%) (replacing darken(..., 33%)) all match the original faithfully, with @import swapped for correctly-namespaced @use. No behavior change.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Runtime verification — React scaffold

Tested end-to-end locally: Vite dev server (:5173), production build + preview (:4173), lint/format, and an Angular regression pass.

Verified working

React dev server renders the ported default theme — #header computes to rgb(185, 43, 39) (#b92b27), logo loads, zero console errors, zero failed resource loads.

• npm run build exits 0 with no sass deprecation warnings; built CSS contains the theme rules (19× b92b27, .default .wrapper{...#f5f5f5} + mobile #fff override) and the #root:empty+.app-loader selector (no stale app-root:empty).
• npm run preview renders identically; /manifest.json, /favicon.ico, icon PNGs and logo.svg all return 200.
• npm run lint and npm run format:check both pass.

768px mobile breakpoint + #root:empty loader

At 500px width .wrapper background flips #f5f5f5 → #fff per the ported _media.scss mobile-only query. Clearing #root makes the loader visible (opacity: 1, z-index: 100), confirming the app-root:empty → #root:empty rename works.

Issue found and fixed: relative asset paths broke on nested routes

On /story/123 (SPA fallback) assets/images/logo.svg resolved to /story/assets/images/logo.svg and the logo rendered broken — the fallback returns index.html with HTTP 200, so it did not surface as a 404. Fixed in 33c9f25 by switching index.html and App.tsx to root-absolute /assets/... (matching manifest.json/favicon.ico).

Regression: Angular app unaffected

ng serve on :4200 still renders the HN story list, and root npm run build exits 0. Note the root app needs NODE_OPTIONS=--openssl-legacy-provider on Node 17+ (pre-existing, unrelated to this PR).

Recording of the run is attached in the Devin session: https://app.devin.ai/sessions/8edab78f01c5451f9d61c114b94b7484

Written by Devin