Skip to content

refactor: per-destination top bar and shared DevView UI kit - #159

Open
MaxMichel2 wants to merge 2 commits into
feat/networkmock-ux-revampfrom
refactor/devview-shell-ui-kit
Open

MaxMichel2 wants to merge 2 commits into
feat/networkmock-ux-revampfrom
refactor/devview-shell-ui-kit

Conversation

@MaxMichel2

@MaxMichel2 MaxMichel2 commented Nov 6, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • Render the toolbar inside each Navigation3 entry so its title/actions move with its content. Add back/close controls, required action labels and key-aware callbacks, and confirmation for reset-to-network.
  • Publish shared DevView UI helpers for filters, recovery, grouped rows, section headings and clipboard copying.
  • Give home modules distinct icons and useful subtitles, consistent names, and theme-toned, animated tiles with host colour overrides preserved.
  • Update API signatures, documentation and the knowledge graph. Add local PNG/XML capture tooling and preserve audit 001 as the implementation reference.

Dependency and scope

Depends on #157 (informational, not enforced by GitHub). Merge #157 first, then this PR.

The description covers only checkpoints 1–2 against #157's source commit a6bcca4dc4513347c892b54488435bed190efd7c. The merge target is main, as requested. Until #157 lands, GitHub's merge diff also includes its inherited changes. A squash/rebase merge of #157 may require an explicitly approved restack. No existing PR was retargeted and no gh-stack metadata was created.

Validation

  • Six module Android host suites passed.
  • 18 core connected-device tests passed, including action keys, back/close, transition titles, replacement modules, popup cleanup, filters and recovery actions.
  • Konsist, Detekt, API generation/compatibility and sample debug build passed.
  • Settled home screen inspected in light and dark; tile contrast assertions and capture PNG self-test passed.
  • Graph document recovery validated unchanged file hashes and edge references. Clustered reports/wiki were not regenerated.

Native iOS execution, TalkBack and enlarged-font walkthrough remain for later validation. The sample's light status-bar contrast fix is scheduled in checkpoint 9.

Excluded local changes: DEVELOPER-TOOLING-ROADMAP.md, graph cache/build-state artifacts and local capture files.

RetriggerView in GreptileConfidence Score: 4/5

Satisfy the required module-page updates before merging; the sequence-draft and preview-width issues are non-blocking.

Findings

  1. P2 Tab changes erase unfinished sequences ▶
  2. P2 Wide characters can be clipped ▶
  3. P2 Module pages miss API updates ▶

Summary

Moves each destination's toolbar into its navigation entry and adds the shared DevView UI kit.

  • Each DevView screen shows its own title and toolbar actions.
  • Home tiles and modules use clearer names, themed colors, and shared UI parts.
  • NetworkMock puts response, failure, and sequence controls in one operation sheet.
  • Response previews format JSON for reading and scroll through large bodies efficiently.
  • Local UI capture tooling creates PNG and XML snapshots for developers.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  A[DevView backstack] --> B[NavDisplay entry]
  B --> C[Saved state and ViewModel decorators]
  C --> D[DestinationScaffold]
  D --> E[Entry title and labelled actions]
  D --> F[Entry content]
  F --> G[Module registration with measured bottom inset]
  E --> H{Action kind}
  H --> I[Menu]
  H --> J[Confirmation]
  H --> K[Callback with displayed NavKey]
  J --> K
Loading

Reviews (1) · Last reviewed commit: ":sparkles: Add public DevView UI kit and..." · Reviewed by Greptile

Keep titles, navigation and labelled actions inside each Navigation3 entry so their content and chrome transition together. Pass the displayed key to action callbacks and confirm resets before clearing mocks. Preserve measured module insets and isolate transient confirmations during navigation.

Validation: core 15 device tests pass; core, Analytics, Console and NetworkMock host tests pass; sample debug builds and is installed; toolbar labels and Reset confirmation checked in light/dark via UI dumps; Konsist, Detekt, metalava signature/compatibility and diff checks pass. Graphify update attempted but refused by its missing semantic-node guard; existing graph retained.
Share filter, recovery and grouping patterns through the public core UI package. Give the home screen distinct, theme-toned module tiles, useful subtitles and animated tile colours while preserving explicit host overrides. Add local PNG/XML capture tooling to keep visual checks out of chat image limits.

Validation: six module Android host suites passed; 18 core device tests passed; Konsist, Detekt, API generation/compatibility and sample debug build passed. Settled home captures checked in light and dark; capture PNG self-test passed. Graph refreshed with unchanged documentation nodes recovered and references validated; clustered reports/wiki remain from the earlier build. Native iOS execution remains untested.
Comment on lines +61 to +67
var steps by remember(key1 = content.operationUiModel.descriptor.key) {
mutableStateOf(
value = (content.operationUiModel.currentState as? OperationMockState.Sequence)
?.responses
.orEmpty()
.toPersistentList()
)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Tab changes erase unfinished sequences

SequenceBuilderPage keeps its draft in remember, but AnimatedContent removes the page after switching tabs. Returning to Sequence starts from the saved sequence again, losing unsaved additions or removals. Keep the draft above the page switch and clear it only on Cancel, Save, or dismissal.

Comment on lines +358 to +364
val longestLine = remember(key1 = lines) { lines.maxByOrNull { it.length }.orEmpty() }
val textMeasurer = rememberTextMeasurer()
val textStyle = MaterialTheme.typography.bodySmall.copy(fontFamily = FontFamily.Monospace)
val textWidth = remember(key1 = longestLine, key2 = textMeasurer, key3 = textStyle) {
textMeasurer
.measure(
text = longestLine,

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Wide characters can be clipped

The pane width comes from the line with the most characters, not the widest rendered line. A shorter line with CJK text or emoji can be wider even with FontFamily.Monospace, since those characters can use fallback fonts. That line is clipped by the shared width, and horizontal scrolling cannot reveal its end. Calculate the widest rendered line and add a mixed-character test.

Comment on lines +20 to +24
property public androidx.compose.ui.graphics.vector.ImageVector icon;
property public String moduleName;
property public kotlin.jvm.functions.Function1<kotlinx.serialization.modules.PolymorphicModuleBuilder<androidx.navigation3.runtime.NavKey>,kotlin.Unit> registerSerializers;
property public com.worldline.devview.core.Section section;
property public String subtitle;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Module pages miss API updates

Analytics now declares public icon, moduleName, and subtitle properties, but docs/modules/analytics.md is unchanged. The repository guide requires updating docs/modules/<module>.md when a module's public API changes. The same gap affects Console and Feature Flip, and appears elsewhere too. Update the affected module pages or explicitly explain why no update is needed. This repository requirement must be satisfied before merging.

Context Used: CLAUDE.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant