feat(webapp) Add new floating session toolbar for web client sessions

[Krista House (kristahouse)]

Summary

Introduces a new floating session toolbar for web client sessions.

This toolbar replaces the previous implementation with a more flexible, reusable, and protocol-agnostic design, supporting multiple session types and improved user interaction.

Key features

Floating toolbar

• New floating toolbar UI for active sessions
• Supports:
  • docking (top, bottom, left, right)
  • free positioning (drag)
  • auto-hide behavior
• Designed as a presentation-focused component

Protocol support

• Works across all session types:
  • RDP
  • VNC
  • ARD
  • SSH
  • Telnet
• Protocol-specific behavior handled outside the base toolbar

Interaction controls

• Session control actions (e.g. close, special keys where applicable)
• Feature toggles:
  • dynamic resize
  • unicode keyboard
  • cursor crosshair
  • wheel speed (where supported)

Session info popover

• Added session info popover to display:
  • Session ID
  • Gateway URL
  • Username
• Default key/value renderer with:
  • stable ordering
  • hidden row support
  • empty value handling
  • boolean formatting (Yes/No)
• Row-based model (ToolbarSessionInfo) for protocol-provided data

Extensibility

• Optional sessionInfoTemplate input for future custom rendering
• Base toolbar remains protocol-agnostic and presentation-focused

Styling

• New SCSS structure for the toolbar
• Ensured compliance with Angular anyComponentStyle budget
• Improved theme consistency using CSS variables

Notes

• Gateway URL currently uses existing connection data
• sessionInfoTemplate is not yet used by built-in protocols

Validation

• Verified across all supported protocols

[github-actions]

Let maintainers know that an action is required on their side

• Add the label release-required Please cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module) when you request a maintainer to cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module)

• Add the label release-blocker Follow-up is required before cutting a new release if a follow-up is required before cutting a new release

• Add the label publish-required Please publish libraries (`Devolutions.Gateway.Utils`, OpenAPI clients, etc) when you request a maintainer to publish libraries (Devolutions.Gateway.Utils, OpenAPI clients, etc.)

• Add the label publish-blocker Follow-up is required before publishing libraries if a follow-up is required before publishing libraries

[Copilot]

Pull request overview

This PR replaces the legacy session-toolbar with a new standalone, protocol-agnostic floating-session-toolbar overlay component and migrates the web client session UIs (RDP/VNC/ARD/SSH/Telnet) to use it via thin protocol wrappers (where applicable).

Changes:

• Added a new standalone floating-session-toolbar component (drag, dock, auto-hide, dropdown settings, session info popover) with modular SCSS partials and documented usage.
• Introduced thin protocol wrapper components for desktop protocols (RDP/VNC/ARD) and updated session templates to render the overlay toolbar after session readiness.
• Updated shared base components to align with the new toolbar API (clipboard actions model + shared screenModeChange handler) and removed the old session-toolbar component usage.

Reviewed changes

Copilot reviewed 34 out of 34 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
webapp/apps/gateway-ui/src/client/app/shared/components/session-toolbar/session-toolbar.component.ts	Removed legacy toolbar component implementation.
webapp/apps/gateway-ui/src/client/app/shared/components/session-toolbar/session-toolbar.component.scss	Removed legacy toolbar styles.
webapp/apps/gateway-ui/src/client/app/shared/components/session-toolbar/session-toolbar.component.html	Removed legacy toolbar template.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/utils/floating-session-toolbar.utils.ts	Added drag/positioning helpers (clamp, proximity check, dropzone rects).
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/styles/_toolbar.scss	Added main toolbar layout styles for docked/free/vertical variants.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/styles/_tokens.scss	Added CSS token definitions and host overlay behavior.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/styles/_indicator.scss	Added auto-hide indicator styles.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/styles/_floating-session-toolbar-theme.scss	Added centralized .theme-light token overrides.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/styles/_dropzones.scss	Added drag dock-target dropzone styles.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/styles/_dropdown.scss	Added dropdown/menu/toggle/slider + session info popover styles.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/styles/_buttons.scss	Added toolbar button styling and variants (drag/active/CAD/close).
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/models/session-info.model.ts	Added session info row model + template context types.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/models/floating-session-toolbar-config.model.ts	Added toolbar config/state/feature flag models.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/models/floating-session-toolbar-action.model.ts	Added action model + backward-compat alias for clipboard actions.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/floating-session-toolbar.component.ts	Added the new standalone toolbar component logic (drag, dock, hide, settings, session info).
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/floating-session-toolbar.component.scss	Added SCSS entry-point composing partials.
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/floating-session-toolbar.component.html	Added toolbar template (controls, menu, popover, indicator, dropzones).
webapp/apps/gateway-ui/src/client/app/shared/components/floating-session-toolbar/README.md	Added comprehensive component documentation and wrapper guidance.
webapp/apps/gateway-ui/src/client/app/shared/bases/terminal-web-client-base.component.ts	Removed legacy close-button toolbar state; added default onSessionInfoPress().
webapp/apps/gateway-ui/src/client/app/shared/bases/desktop-web-client-base.component.ts	Updated clipboard action model, made action setup idempotent, and added shared handleScreenModeChange().
webapp/apps/gateway-ui/src/client/app/modules/web-client/web-client.module.ts	Registered the new standalone toolbar and wrapper components; removed legacy toolbar component.
webapp/apps/gateway-ui/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts	Migrated VNC session to wrapper-based floating toolbar + session info + wheel speed plumbing.
webapp/apps/gateway-ui/src/client/app/modules/web-client/vnc/web-client-vnc.component.html	Replaced <session-toolbar> with overlay wrapper usage.
webapp/apps/gateway-ui/src/client/app/modules/web-client/vnc/vnc-toolbar-wrapper.component.ts	Added VNC toolbar wrapper connecting toolbar outputs to VNC remote client.
webapp/apps/gateway-ui/src/client/app/modules/web-client/telnet/web-client-telnet.component.ts	Migrated Telnet session to floating toolbar + session info model.
webapp/apps/gateway-ui/src/client/app/modules/web-client/telnet/web-client-telnet.component.html	Replaced <session-toolbar> with <floating-session-toolbar>.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ssh/web-client-ssh.component.ts	Migrated SSH session to floating toolbar + session info model and updated close flow.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ssh/web-client-ssh.component.html	Replaced <session-toolbar> with <floating-session-toolbar>.
webapp/apps/gateway-ui/src/client/app/modules/web-client/rdp/web-client-rdp.component.ts	Migrated RDP session to wrapper-based floating toolbar + session info plumbing.
webapp/apps/gateway-ui/src/client/app/modules/web-client/rdp/web-client-rdp.component.html	Replaced <session-toolbar> with overlay wrapper usage.
webapp/apps/gateway-ui/src/client/app/modules/web-client/rdp/rdp-toolbar-wrapper.component.ts	Added RDP toolbar wrapper connecting toolbar outputs to RDP remote client.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ard/web-client-ard.component.ts	Migrated ARD session to wrapper-based floating toolbar + session info + wheel speed plumbing.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ard/web-client-ard.component.html	Replaced <session-toolbar> with overlay wrapper usage.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ard/ard-toolbar-wrapper.component.ts	Added ARD toolbar wrapper wiring toolbar outputs to ARD session component.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 35 out of 35 changed files in this pull request and generated 7 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.