feat: enable floating dialog panel mode

[ramizpolic]

Overview

This PR adds a floating "dialog" mode for the panel that allows it to hover as a draggable, resizable overlay above the workbench as an alternative to the docked panel in the grid layout.

Linked Issue: #299869

Architecture

The implementation introduces a PanelMode enum with two states:

export const enum PanelMode {
  Dock = 'dock',    // Traditional grid-docked behavior
  Dialog = 'dialog' // Floating overlay above the workbench
}

Layout Service (layoutService.ts)

• Added PanelMode enum export
• Added getPanelMode(), setPanelMode(), and togglePanelMode() to IWorkbenchLayoutService

Layout Implementation (layout.ts)

• Dialog overlay structure: Creates a safe area container clipped to the editor zone (between titlebar and statusbar) containing a backdrop and the floating panel overlay
• State management: Stores dialog bounds as ratios relative to container dimensions for responsive behavior
• Drag handling: Title bar acts as drag handle with pointer capture for smooth dragging
• Resize handling: Uses native CSS resize: both with bounds clamping to safe area
• Mode transitions: Cleanly saves/restores panel state (position, alignment, size) when switching modes
• Grid isolation: Panel is removed from workbench grid in dialog mode and re-parented to the overlay

Panel Actions (panelActions.ts)

• Added TogglePanelModeAction command with keyboard shortcut
• Added toggle icon in panel title bar (dock/undock)
• Updated maximize action to work in dialog mode regardless of panel alignment

Context Keys (contextkeys.ts)

• Added PanelDialogModeContext for conditional UI (hiding position selectors in dialog mode, etc.)

Storage

Dialog bounds are persisted using the storage key workbench.panel.dialogBoundsRatio with relative ratios:

interface DialogBoundsRatio {
  leftRatio: number;   // 0-1 relative to container width
  topRatio: number;    // 0-1 relative to container height
  widthRatio: number;  // 0-1 relative to container width
  heightRatio: number; // 0-1 relative to container height
}

[vs-code-engineering]

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@bpasero

Matched files:

• src/vs/workbench/browser/contextkeys.ts
• src/vs/workbench/browser/layout.ts
• src/vs/workbench/browser/parts/panel/media/panelpart.css
• src/vs/workbench/browser/parts/panel/panelActions.ts
• src/vs/workbench/browser/parts/panel/panelPart.ts
• src/vs/workbench/common/contextkeys.ts
• src/vs/workbench/services/layout/browser/layoutService.ts

[ramizpolic]

@microsoft-github-policy-service agree

[nyila]

Fixes #291202

[ramizpolic]

the implementation may not be the cleanest/most optimal, but im willing to clean it up. my goal was to get the point across by focusing more on the issue itself