[devin-ai-integration]

Summary

Workstream 4 of the React port (react-app/): Angular src/app/core/ shell (Header, Footer, Settings) + app layout/theming, PWA (vite-plugin-pwa), Playwright e2e, CI and Firebase hosting. Targets the integration branch devin/1792603540-react-foundation (#917). Only Workstream 4-owned files are touched.

Shell (src/features/shell/**)

• AppShell: .body-cover > .wrapper > Header, <Outlet/>, Footer. Themes come from shared/scss/_themes.scss via the class SettingsProvider already puts on <html>, so the whole page (body cover, wrapper, header, popup) restyles.
• Header: a.home-link → /news/1, .header-nav NavLinks (new/show/ask/jobs) with .active, img.settings cog (role="button", tabIndex=0, Enter/Space, aria-expanded). Clicking the logo or a nav link scrolls to top (Angular scrollTop()).
• Settings: #popup1.overlay > .popup[role=dialog][aria-modal][aria-labelledby]; focus moves to × on open, Tab/Shift+Tab trapped, Escape/× close, focus returns to the cog. Number inputs persist in onChange (Angular only saved on keyup).
• All SCSS scoped under #header, #footer, #popup1.

PWA (vite.config.ts, src/pwa/**, public/)

VitePWA({ registerType: 'autoUpdate', injectRegister: false, manifest: false /* public/manifest.webmanifest */,
  includeManifestIcons: false, // no includeAssets: duplicates break precache (add-to-cache-list-conflicting-entries)
  workbox: { globPatterns: ['**/*.{js,css,html,ico,webmanifest}', 'assets/images/*.{svg,png}'], globIgnores: ['ngsw-worker.js'],
    navigateFallback: 'index.html', navigateFallbackDenylist: [/^\/__\//, STATIC_FILE_PATTERN /* exempts /news|item|user/... */],
    runtimeCaching: [NetworkFirst node-hnapi.herokuapp.com + api.hnpwa.com, StaleWhileRevalidate /assets/** (ngsw "assets" lazy group)] } })

• setupServiceWorker(): on first controllerchange, re-fetches API URLs from performance.getEntriesByType('resource') so the landing page's data is cached for offline.
• public/ngsw-worker.js: safety worker for returning Angular visitors (skipWaiting, delete ngsw:* caches, unregister, reload clients).
• manifest.webmanifest mirrors Angular src/manifest.json.

e2e (playwright.config.ts, e2e/**, runs npm run build && npm run preview, HN API mocked): route smoke + nav active state, footer, theme switch via the popup persisted across reload (asserts computed colours differ per theme), font/spacing/new-tab persistence, keyboard a11y, manifest/SW/Angular-worker handover, offline (requests blocked at the SW level, with uncached negative controls). Feed pagination, comment collapse, user karma and error pages are written against Angular class names but test.fixme until Workstreams 2/3 land. Result: 26 passed, 7 fixme.

CI / hosting: react-app-ci.yml gains an e2e job (uploads Playwright report) and a deploy job (push to master only, skipped with a notice unless FIREBASE_SERVICE_ACCOUNT/FIREBASE_TOKEN is set). firebase.json hosts dist with a regex SPA rewrite (route prefixes + extensionless paths only, so missing assets 404 instead of returning index.html) and no-cache headers for index.html, sw.js, ngsw-worker.js, manifest.

Angular parity kept on purpose: mobile #header is fixed with no shell spacer (pages own their offset); the overlay covers the header so a second click on the cog doesn't close the popup.

Shared changes needed: none.

Devin-Org: engineering

Link to Devin session: https://devin-gtm.devinenterprise.com/sessions/94a7eeb625de4a2f88c1228351ebde56
Open in Devin Desktop: https://devin-gtm.devinenterprise.com/desktop/session/94a7eeb625de4a2f88c1228351ebde56?variant=devin
Requested by: @ishita-cog

---

Note

Devin errored when opening this Pull Request as ishita-cog.
As a fallback, Devin opened this PR as itself.

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

---

[devin-ai-integration]

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

• Disable automatic comment, CI, and merge conflict monitoring

[devin-ai-integration]

Runtime verification: React (:4200) vs Angular (:4300), live HN data

No shell discrepancies at 1280px and 375px in default, night and amoledblack (Angular on the left, React on the right in each pair).

• Header/logo/cog geometry, nav active-link colours, mobile fixed header with no spacer (parity), footer (hidden on mobile), popup colours and short-viewport scrolling all match.
• Settings: checkbox, theme radios, typed values and spinner arrows for the number inputs all persist across reload (theme, openLinkInNewTab, titleFontSize, listSpacing).
• Keyboard: Tab to cog, Enter/Space opens, focus starts on ×, Tab/Shift+Tab stay trapped, Escape returns focus to the cog.
• Prod build (vite preview): manifest and icons load, sw.js controls the page, the first-load API cache gets warmed. With network blocked at the SW level, /news/1 and item/user deep links load and cached JSON equals the online responses. Uncached negative controls fail, and /ngsw-worker.js serves the safety worker JS.
• npm run e2e: 26 passed, 7 fixme (feed/item/user specs waiting on Workstreams 2/3).

Not covered: feed/item/user page content (still placeholders on the integration branch), hosted Firebase deploy.

Desktop 1280px	Mobile 375px
Default	Default
Night	Night
AMOLED	AMOLED

Shell without popup, footer, persistence, offline

Recording (settings, keyboard, theme switching):

Written by Devin