Repository navigation
refactor(ui): split the six large panel pages, with templates and styles in own files - #498
Merged
Merged
Conversation
Move the Pipes tab into app/src/pages/pipes/: a PipesState service the page provides, a model file, and the list, detail, async subscriptions and lint sections as components that attach to the page's existing elements, so the DOM stays the same. Every component keeps its template and styles in .html and .scss files next to it; shared styles are mixins in app/src/styles/_pipes.scss, in the page's old rule order. The page conventions test now reads the pages' .html templates too.
…wn files Components keep their markup and styles in separate .html and .scss files next to the .ts file, so the network page shell and its section components now use templateUrl and styleUrl. The content moves unchanged. The package JIT tests inline those files through a small Vite plugin, and the page convention test reads a component's template and style files with its source.
Move the Routes, Server, Render, Content and Lint views of the Analog tab into app/src/pages/analog/. Each view attaches to its own tabpanel div, so the DOM stays the same. Shared state lives in AnalogPageState and AnalogCallsState, provided by the page, and the page keeps the members its tests read as delegates. The page styles move into mixins in _analog.scss, in their original order. Every component in the split keeps its template and styles in separate .html and .scss files. Package JIT tests inline them with the shared inline-resources plugin, and the page source checks read the sibling files.
The split rendered a new tab panel per view, so its enter animation replayed on every switch. The page now keeps one tab panel, as before the split, and each view attaches to a wrapper inside it whose host is display: contents, so its parts stay items of the panel grid. Data and Runtime render straight in the panel again.
… into refactor/split-panel-pages
…into refactor/split-panel-pages # Conflicts: # app/src/__tests__/page-conventions.test.ts
… into refactor/split-panel-pages
The Components tab was one 2,980 line component. Its tree, directive host detail, component detail and source list are now section components in app/src/pages/components/ that attach to the page's existing elements, so the DOM stays the same. The shared state lives in TreeState, PickState, SourceScan and DetailState, which the page provides, and the styles shared between sections are mixins in app/src/styles/_components.scss in their original order. Every component keeps its template and styles in .html and .scss files next to it. The page still has the members the app and the tests read.
…nto refactor/split-panel-pages
The Signals page was one 2,500 line component. Its graph, watched list, source scan list, resource and signal lists and the detail panel now live in app/src/pages/signals/ as components with their own template and style files, attached to the elements the page already had, so the DOM, labels and behaviour do not change. The shared state is in SignalState and SignalDetailState, which the page provides, and the shared styles are mixins in _signals.scss in their original order. The page convention and token checks read each component's template and style files with its source, and the package tests inline templateUrl and styleUrl for panel components rendered in JIT.
… into refactor/split-panel-pages # Conflicts: # app/src/__tests__/tint-contrast.test.ts
Move the Store tab out of one 2,870-line file into app/src/pages/store/: StoreState and StoreActions services the page provides, and section components for the live stores, store detail, log, entry detail, Store DevTools history, stats, dispatch, events and source declarations. Each section attaches to the page's existing element, so the DOM is unchanged. Every component keeps its template and styles in .html and .scss files next to it, and the shared styles are mixins in _store.scss in their old order. The package JIT tests inline templateUrl and styleUrl with the shared Vite plugin, and the page convention checks read each component's template and style files with its source.
…into refactor/split-panel-pages
The Injectors page moves into app/src/pages/injectors/: the tree, the selected injector's detail with its injected and provided blocks, the gone injector, the never-injected hint and the source scan list. They share the InjectorsState and SourceScan services the page provides, and their styles are mixins in app/src/styles/_injectors.scss. Every component, the page included, uses templateUrl and styleUrl. The DOM, labels, keys and RPC calls stay the same. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TeSKq1utVUofyf3af3AnoW
…o refactor/split-panel-pages
The split pages put each template and stylesheet next to its component. The Angular rules and the contributing guide now say so, and the lint baseline drops the max-lines entries of the split pages.
github-actions
Bot
added
area: panel
Contributor
|
Caution Review failedThe pull request is closed.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. |
🚀 Deploying Preview to Cloudflare 🚀Preview Deployments by commit
|
|
View your CI Pipeline Execution ↗ for commit 3db8497
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
Member
Author
|
"Workers Builds: angular-devtools" is the Cloudflare preview build. It fails on every pull request in this repository, including docs-only ones, so this PR didn't cause it. It isn't one of the repository's GitHub Actions checks, and I can't re-run it from here. No fix exists yet. The project's own checks are the ones this PR is judged on. Generated by Claude Code |
Vite gives module ids with forward slashes on Windows, while the plugin compared them with a backslash path, so no panel file matched and the JIT tests failed with 'Component is not resolved'. Both sides are now compared with forward slashes, and case-insensitively on Windows.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Splits the last six panel pages that were over the 1,500-line limit. Every component involved now keeps its template and styles in separate
.htmland.scssfiles, including the network page split in #495. This is a pure move: RPC calls, data shapes, labels, ARIA, keyboard behaviour and styles stay the same.Pages
pages/components/pages/store/pages/analog/pages/injectors/pages/signals/pages/pipes/pages/network/Each page follows the #495 pattern:
section[appX]).app/src/styles/_<area>.scss, included in the original rule order.app.tsand the tests use, as thin delegates.app/src/pagesis over 1,100 any more.Separate template and style files
templateUrl: './x.html'andstyleUrl: './x.scss', with no inlinetemplate:orstyles:..claude/rules/angular.mdnow says to use separate files instead of preferring inline templates.contributing/development.md) says the same.packages/devtools/src/__tests__/inline-resources.ts, registered invitest.config.ts) inlinestemplateUrlandstyleUrlforapp/srcfiles.page-conventions.test.tsandtint-contrast.test.tsread each.tstogether with its sibling.htmland.scss. No assertion was weakened.Behaviour checks
Each page was built before and after and compared in a real browser at 1280px dark and light and at 360px, with seeded data.
Checks
pnpm test:panel: 1,095 passed, 1 skippedpnpm test:devtools: 4,470 passed, 4 skippedpnpm test:axe: every view okpnpm typecheck: 0 errorspnpm lint: no new warnings; the baseline drops the six max-lines entriespnpm format:check,pnpm docs:build,pnpm skills:check,pnpm commit:check: passedextension/uiis rebuilt and committed lastUnder heavy machine load a few package tests near their 5 s limit (
cd-record-hints,audit-tools,native-page-tools) timed out in individual agent runs. They pass on their own and in the combined run.Generated by Claude Code