Replace JSON tree view with a themed OS-style file tree - #88
Merged
Conversation
vue-json-pretty was pinned to theme="dark", so its colors (row highlight, brackets, etc.) came from the library's own hardcoded dark palette rather than the app's Catppuccin theme — wrong and illegible in Latte/Frappé/Macchiato, and only accidentally close in Mocha. Overriding individual classes was whack-a-mole against a foreign theme system. Replace it with a small recursive tree component (JsonTreeNode.vue) that renders objects/arrays as folders and primitives as files, like an OS file explorer: disclosure chevrons, folder icons that open/close, and indentation guide lines. Every color comes from this app's own --ctp-* CSS variables, so it's correct in all four themes automatically instead of fighting another library's palette. Same props API (collapsedKeys/collapseStringsOver) as before, so callers are unaffected. Drops the vue-json-pretty dependency entirely.
Preview deployedURL: https://email.rhosys.cloud/pr/claude-ui-ux-collapsed-elements-roqsvx/ |
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
2 participants
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
vue-json-prettywas pinned totheme="dark", so colors like row-highlight and bracket text came from the library's own hardcoded dark palette, not this app's Catppuccin theme — wrong (and only accidentally close) even in Mocha, and clearly broken in Latte/Frappé/Macchiato. CSS overrides on top of a foreign theme system were whack-a-mole.vue-json-prettyentirely and replaced it with a small recursive component (JsonTreeNode.vue) that renders the JSON as an OS-style file explorer tree: objects/arrays are folders (open/closed icon + disclosure chevron), primitives are files, with indentation guide lines. Every color is one of this app's own--ctp-*variables, so it's automatically correct in all four themes instead of overriding a bundled palette.JsonView.vuekeeps the same public props (data,collapsedKeys,collapseStringsOver) and the same "click to expand" truncation behavior for long strings (e.g. emailbody), soEmailSignalCard.vueneeded no changes.Test plan
npm run typechecknpx eslinton the changed filesnpm run buildGenerated by Claude Code