Put styles in cascade layers, remove unused rules, and load screens on first use (app review batch 6c)

[EmotiveImpact]

Before: the shared stylesheets were imported after every screen's own, so which rule won a tie depended on the order the files reached the page, and screen styles leaned on longer selectors to win. 438 of the app's 1,752 style rules matched nothing it draws: about 2,600 lines, most of them in app.css (6,224 lines), from earlier Home, Hub and settings layouts, the sign-in gate, sample navigation and the Choose menu that #33 deleted. Seventy colours were written out by value where a design token holds the same colour. The sign-in page downloaded every screen: 1,156 kB of files (348 kB compressed), 563 kB of them the app's own code. On the connection and error cards, the icon, the explanation and the retry message asked for a colour token that does not exist, so they showed in the heading's dark ink.

After: every stylesheet sits in a cascade layer declared once, so a screen's stylesheet can arrive at any moment without changing which rule wins. The unused rules are gone: app.css is 3,674 lines and all the styles together 6,524, down from 9,174. Those seventy colours name their tokens, and a test keeps the fixed palette written that way. The sign-in page downloads no screen code: 817 kB (264 kB compressed), 24% less. The signed-in app is fetched while the session is checked; its less used screens and windows load when first opened, or once the browser is idle. Every screen looks exactly as it does on #34, apart from the recovery cards' secondary text, which is now the soft grey it asked for.

This is app review batch 6c, built on #34 (dates and speed), so review that first; the diff here shows only this part. GitHub's diff of app.css reads like a rewrite: git diff --diff-algorithm=histogram shows the real change, 33 lines changed and 2,583 deleted.

What changed, by finding

Finding	Change
61, order	apps/web/src/styles/index.css declares @layer base, screens, overrides; and imports the shared stylesheets in their old order: base holds calendar-date, shared, app, auth and legal; overrides holds the dark theme and the design-language primitives; the font faces stay outside any layer. main.tsx imports it before anything else, and each screen's and window's stylesheet wraps itself in @layer screens {}. Where the layers would have changed which rule wins, the old winner was kept: screen rules that must beat a dialog or dark-theme rule moved into an @layer overrides {} block in their own file, and rules the phone layout used to beat no longer match inside it.
61, unused rules	438 whole rules, 26 selectors from lists and 3 arguments of one :is() are removed, with the @media blocks they left empty. Each was proved unmatched: every string and template literal in apps/web/src counts as evidence, and where a template builds a class from a value, the TypeScript checker's type for that value (a tone, a status) adds every class it can make. A coverage run confirmed none of them matched on any captured state.
61, colours	Seventy colour literals now name the token that holds exactly that colour wherever the rule applies, so every computed colour is unchanged. stylesheets.test.ts checks the layers and keeps the fixed palette written as tokens. calendar-date.css keeps its literals, because the HTML design reference links it without the app's tokens.
61, .is-native	Kept. The finding said nothing sets it, but ?native=1 does: it previews the phone layout at any width (nav.ts, state.tsx), as apps/web/GOAL.md documents and a test covers.
65, code splitting	App lazy-loads the signed-in app (shell/ProductShell.tsx, moved out of App.tsx unchanged), which brings Home, Hub, Expenses and Settle, the phone's four tabs, behind the existing loading page. Funds, Recurring, Templates, Members, Notes, Operations, Activity, Search and the settings load when first opened, behind the page's own skeleton, and the schedule and announcement windows behind the window's record skeleton. Once the browser is idle the rest loads anyway, unless it asks to save data (shell/lazyComponent.tsx). A failed code load reloads the page once; a second failure within 30 seconds reaches the recovery card instead.
Recovery cards	connection-recovery.css asked for var(--soft), which nothing defines; it now uses --ink-soft (#60706b on the white card, 5.2:1), like the app's other secondary text. This bug predates the review, and is the one visible change here.

Releasing

Nothing hosted was touched and there is no migration. Every browser Vite 7 builds for (Safari 16, Chrome 107, Firefox 104 and later) supports cascade layers. A tab left open across a release may ask for a screen's file that the new release no longer has; it reloads once onto the new release instead of failing.

Needs the owner

• The ?native=1 phone preview is kept. Removing it is a product call.
• The app's code starts downloading while the session is checked, so a signed-out visit to / fetches the signed-in app (154 kB of code and 35 kB of styles, 50 kB compressed) before landing on sign-in; /login itself fetches none of it. Waiting for a confirmed session instead would slow the start for everyone signed in. Say if you would rather wait.
• 367 colour literals hold colours no token has, or that a token only holds in one theme. Writing those as tokens needs new tokens, a design-system decision.

Left as they are

• .a-body:not(.is-gate) and two unused :is() arguments in overrides.css: nothing sets .is-gate any more, but removing them would lower specificity and change which rule wins.
• Notes.css uses var(--card, #fffdfa). --card is defined nowhere, so the fallback always applies; the colour is right.
• The sign-in pages' entry file still carries React, state.tsx and live/model.ts, which they need for the session. Shrinking it further means splitting state.tsx.

How it was checked

On this branch:

• 656 web tests in 67 files, 14 of them new (the layers and palette, the lazy loader's fallback, preloading and single reload, the sign-in page not loading the app, and each skeleton while code arrives); the web, local API and worker typechecks; and a production build.
• 28 database tests through run-local.sh (2 more need a Neon branch), then dump-schema.sh --check.
• 22 local API suites on a disposable database and port, and the reminder worker's 7 unit tests and 4 database suites.
• The secret scan over the files and every commit.

In Chromium, builds of #34 and of this branch, pointed at the local API, ran against one disposable database with the sample communes, with the browser clock fixed. 97 states were captured: 13 signed out (the connection card among them), 80 signed in across four communes (windows, dialogs and disclosures open, the quick finder, typed filters and full search, More, and nine ?native=1 states) and 4 for an account with no commune, each at desktop 1440×900 and phone 390×844, light and dark: 388 screenshots per build.

• Pixel by pixel, 382 of 388 screenshots are identical. Four are the connection card, whose grey text is the intended change. The other two differ by 5 pixels and 2 pixels, by 1 of 255, at the rounded corners of the photo cards on Places, pixels that also differ between two captures of the same build.
• Computed styles of every element and pseudo-element, as drawn and with every hover, focus and active rule forced: 384 of 388 states are identical, and the other 4 are the connection card's colours. The report line's removed class name is set aside in that count; its styles are unchanged.
• With the browser asking to save data, so each screen's stylesheet arrives only with its code: the same result, 382 identical screenshots, the same 4 cards and 2 corner differences.

What the sign-in page downloads, from production builds (sizes on disk, then compressed):

Page	#34	This branch
/login	1,156 kB (348 kB): the app's code 563 kB, the Neon client 376 kB, styles 158 kB, fonts and logo	817 kB (264 kB): the entry 302 kB, the Neon client 376 kB, styles 78 kB, the same fonts and logo
/ while signed out (ends on sign-in)	the same 1,156 kB (348 kB)	1,006 kB (314 kB): adds the signed-in app's 154 kB of code and 35 kB of styles, and none of the less used screens

How

The layer plan came from recording, on 376 captured states, every pair of rules from different files that set the same property on the same element (1,785 of them), then checking which would win under every order the screens' stylesheets can arrive in; after the edits above, none changes winner. That was measured before this branch moved onto #34, which changed no stylesheet, and the comparison above repeats the check on #34. The dead-rule check reads the TypeScript checker's types for every class built from a template. lazyComponent wraps React.lazy: a component that has already loaded draws at once without a fallback, preloadAll() loads every lazy part (tests call it in beforeAll, as the browser does once idle), and a failed import reloads once, remembered for 30 seconds under commune.codeReloadedAt in session storage.

🤖 Generated with Claude Code

https://claude.ai/code/session_01A6P7aTcMBccooYYr4xYnVS

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
commune-web	Error		Oct 9, 2026 11:50pm UTC

[EmotiveImpact]

The three CI jobs here (Web app; Database, local API and worker; Secret scan) failed one to two seconds after queuing, with no runner and no steps, as on #34 an hour earlier. No code ran, so these failures say nothing about this branch, and there is nothing to fix in it. GitHub Actions is not starting jobs for this repository; the likely cause is the account's Actions minutes or spending limit. Re-running needs an owner: this session gets a 403 for re-runs.

Meanwhile, the same commands CI runs pass locally on this head (d8c1ed2): 656 web tests in 67 files, the three typechecks and the production build; 28 database tests and the schema dump check; 22 local API suites; the reminder worker's 7 unit tests and 4 database suites; and both secret scans (files and every commit).

---

Generated by Claude Code

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-12T02:02:23.764375Z	d8c1ed2	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.