feat(tower): snapshot dialog UX, config toolbar, and sidebar token - #98
Merged
Conversation
…urface scoped values Reuse SnapshotDiffView in the publish modal so the diff styling, change-count header, and Inline/Split toggle match the snapshots tab. Switch both sides to entriesToDocument so per-scope buckets show in the diff (and feed the additions/modifications/deletions counts) instead of being collapsed by the empty-scope resolver. Lift the toolbar out of the scroll region by adding a contentClassName prop on SnapshotDiffView so the publish modal can constrain only the diff body's height. Add a bare option to JsonDiff and clip the wrapper with overflow-hidden so the nested ui-surface-card no longer doubles borders or mismatches corner radii inside SnapshotDiffView.
…ff views Add a Wrap checkbox to the diff toolbar backed by a persisted diffLineWrap tweak; JsonDiff applies whitespace-pre-wrap break-all when on, whitespace-pre with min-w-max otherwise. Switch the diff toolbar background and column dividers so the toolbar reads as a header above an open diff body that matches the surrounding surface. Restructure DiffColumn so horizontal scrolling lives in an inner div around the rows and JS keeps the two columns' scrollLeft in lockstep, eliminating column spillover under no-wrap. Bake overscroll-contain into both inline and split JsonDiff wrappers so the publish modal's diff scroll no longer rubber-bands or chains into its dialog.
Flip the dark-mode surface relationship so cards read as recessed below the page shell: neutral.white (cards/surfaces) drops to #181818, neutral.50 (page/sidebar) lifts to #262626, bg.container sits between at #202020. Replace the warm-purple-tinted dark neutrals with true achromatic greys end to end, and retune body/heading text to read cleanly on the new shell. Bring the violet accent forward: dark accent.600 to #8b5cf6 with hover at #a78bfa so primary buttons pop against the recessed surface, while soft selection tints (accent.50/100/200, bg.selected, buttonSubtle.hover, chipSelected) share a slightly desaturated #9d7cf2 base so chips and row highlights don't compete with primaries. Retune scrim, danger fills, and syntax key/punct/sensitive around the new neutrals. Add semantic.shadow.cardInset and apply it via ui-surface-card / ui-surface-panel so every card-level surface gets the inset top edge that reinforces the recessed reading; expose it as a shadow-ui-card-inset utility for explicit use.
Relax the placeholder regex from `\{\{(\w+)\}\}` to `\{\{\s*(\w+)\s*\}\}`
so `{{ ApiBase }}`, `{{ApiBase }}`, `{{\tApiBase\t}}`, and the canonical
`{{ApiBase}}` all resolve to the same variable. Whitespace is stripped
from the captured name before lookup but preserved in the original token
when a placeholder fails to resolve, so unresolved-name reporting and
round-tripping stay unambiguous.
…/value distinction
Adopt a VS Code dark+ inspired JSON palette in dark mode (key #9cdcfe, string
Add new scopeDimension and scopeValue syntax tokens and post-process Shiki HTML
to split scoped keys ("environment=prod") into a teal dimension and a yellow
value, with the "=" rendered in the key color so multi-dimension labels
("region=eu, environment=prod") still read cleanly.
Highlight JsonDiff before/after as whole documents instead of line by line so
JSON property-name tokenization has the surrounding grammar context. A new
highlightJsonLines helper extracts each line span from the Shiki output, and
buildHighlightedDiffLines walks diffLines parts and pulls the right side's
pre-highlighted HTML for each diff line. Diff syntax colors now match
JsonPreview exactly.
Brighten the diff backgrounds and line markers to a Tailwind green-500 /
rose-500 base with green-300 / red-300 markers so additions and deletions
read as lively rather than muddy on the recessed dark surface.
Extend Dialog with optional maximize toggle and surface it in PublishModal so the resolved-config diff can fill the viewport. Replace the snapshots tab's ad-hoc detail dialog with a full-bleed expanded SnapshotDiffView that exposes inline close/expand controls, source/target labels, and a flex layout that fills available height. Reword diff headers from "Diff vs X" to "Compare source with target" and align active/previous version labels.
Use the default sans titleClassName so project and template detail headings match the rest of the app's heading typography instead of rendering in mono.
Surface a helper message next to the Cancel/Continue row whenever the Continue button is disabled, so users see whether the diff is loading, stale, errored, has no changes, or is otherwise not ready instead of just finding the button greyed out.
…te into entry modal Add a controlsPlacement prop and imperative handle to ConfigFlatView and ConfigTreeView so the project Config route can render filter, expand/collapse, and "New entry" controls in the page toolbar instead of duplicating them inside each view. Replace the per-row Delete button with a destructive action in the EntryModal edit footer that opens the existing DeleteEntryDialog and closes the modal once the entry is removed.
Introduce a dedicated semantic token for the sidebar shell so it can be re-themed independently from the page surface. Today bg.sidebar resolves to color.neutral.white (#ffffff light, #181818 dark), giving the rail a distinct recessed reading without touching consumers.
- Reset publish step back to 'diff' on 409 conflicts so the stale banner is visible next to the refresh action. - Honour the sensitive-masking tweak in SnapshotDiffView so publish and snapshot diffs respect the toggle. - Notify dialog maximize listeners synchronously to avoid spurious useEffect re-runs. - Explain the scoped-key highlighter assumptions inline so the cosmetic-only tradeoffs are obvious.
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
1 participant
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.
Summary
SnapshotDiffViewwith inline close/expand controls, source/target labels, and a flex layout that fills viewport height. Reword diff headers from "Diff vs X" to "Compare source with target". Surface a helper message next to Cancel/Continue when the Publish button is disabled (loading / stale / no changes / preview error).ConfigFlatView/ConfigTreeViewinto the project Config route toolbar via imperative handles. Replace the per-row Delete button with a destructive action in theEntryModaledit footer that opens the existingDeleteEntryDialogand closes the modal once the entry is removed.bg.sidebarsemantic token (currentlycolor.neutral.white—#fffffflight /#181818dark) so the navigation rail can be re-themed independently of the page surface. Drop the mono font from project and template page titles so they match the rest of the app's heading typography.