Skip to content

feat: modern panel redesign, dot dividers, sidebar drag-grip fix - #23

Merged
slverma merged 9 commits into
mainfrom
enh/design-change
Jul 19, 2026
Merged

feat: modern panel redesign, dot dividers, sidebar drag-grip fix#23
slverma merged 9 commits into
mainfrom
enh/design-change

Conversation

@slverma

@slverma slverma commented Jul 19, 2026

Copy link
Copy Markdown
Owner

Summary

  • Redesign the request/response split with matching rounded-card panels and a dot-indicator resize handle that turns into a bold gradient line on hover (no separator border between panels).
  • Fix the sidebar's drag cursor covering the entire folder/request row: draggable now lives on a dedicated grip handle that fades in on hover, which also resolves click-vs-drag ambiguity. Extracted FolderItem out of Sidebar.tsx (was 678 lines) into its own file to stay under the project's 500-line component limit.
  • Follow-up polish pass: reclaim sidebar space (tighter row spacing/indentation, overlay hover actions on the label instead of reserving layout width), remove now-redundant decorative accent lines, fix a dropdown-menu translucent-background bug and a transform-triggered z-index stacking bug, add right-anchored tooltip positions (top-right/bottom-right) to stop tooltips clipping at panel edges, fix a missing .rotate-180 utility (broke the export submenu's back arrow), and make the Monaco editor theme follow VS Code's actual color theme instead of a never-registered hardcoded theme name.
  • Unrelated fix carried on this branch: switch tsconfig.json off the deprecated moduleResolution: "node" to "bundler" (TS 7.0 removal), and fix the @monaco-editor/react typing gap it exposed.

Test plan

  • npx tsc --noEmit passes clean (no test suite/lint script in this repo, per project convention)
  • Manual QA in the Extension Development Host:
    • Request/response panel: rounded cards, dot divider idle state, bold line on hover/drag, both split orientations, 680px breakpoint, 150% zoom
    • Sidebar: grip-only drag (folder reorder, request reorder, move into folder, drop at root), row click still opens/toggles, "More Actions" dropdown renders opaque and above sibling rows, export submenu back arrow points left
    • Tooltips: no clipping on row-end/toolbar-end icons
    • Monaco editor theme matches the active VS Code color theme and updates live on theme switch

slverma and others added 9 commits July 19, 2026 09:31
Rounded-card request/response panels with a dotted drag handle, plus
a scoped grip handle to fix the sidebar's whole-row grab cursor.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ng gap

TS 5.9 deprecates moduleResolution "node" (removed in TS 7.0). Since this
extension has no native Node runtime resolution (everything ships through
Vite bundles), "bundler" is the correct replacement. That switch exposed
a packaging gap in @monaco-editor/react's deep import into monaco-editor,
which silently degraded a completion-provider callback to implicit any;
annotated it explicitly instead of suppressing the error.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…tips

- Remove the decorative gradient accent lines on the request/response
  panels and the folder/request row accent bars — they didn't carry
  meaning and just added visual noise.
- Reclaim horizontal/vertical space in the sidebar tree: drop the
  connector line, tighten row gaps/margins/line-height, shrink the drag
  grip and row-level action buttons, reduce per-depth indentation, and
  overlay hover actions on the label (absolutely positioned) instead of
  permanently reserving flex width for them.
- Give row-level action buttons and dropdown triggers an opaque backing
  now that they overlay label text, and fix a stacking-context bug where
  transform-based centering trapped an open dropdown-menu's z-index,
  letting a folder's expanded children paint over it.
- Fix the "More Actions" dropdown menu rendering with a translucent
  theme background (some themes give --vscode-dropdown-background
  partial alpha, which only looks opaque under VS Code's native
  compositor) by using the same solid token the tooltip uses.
- Add a `top-right`/`bottom-right` Tooltip position (right-edge anchored
  instead of centered) and apply it across every tooltip that sits at
  the end of a row/toolbar, fixing right-edge clipping.
- Fix the export submenu's "Back" chevron rendering right-pointing
  instead of left-pointing — it referenced an undefined `.rotate-180`
  utility class.
- Make the Monaco editor theme follow VS Code's actual active color
  theme (via the vscode-* class VS Code keeps live on <body>) instead of
  a hardcoded "restlab-dark" theme name that was never registered with
  Monaco and had no effect.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@slverma
slverma merged commit aa63164 into main Jul 19, 2026
1 check passed
slverma pushed a commit that referenced this pull request Jul 19, 2026
## 1.8.0 (2026-07-19)

* feat: modern panel redesign, dot dividers, sidebar drag-grip fix (#23) ([aa63164](aa63164)), closes [#23](#23)
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