Skip to content

feat: Add right-hand sidebar - default state (workflow info) #144

@lornakelly

Description

@lornakelly

Description

Add a collapsible right-hand sidebar to the diagram editor using the shadcn Sidebar component. This is the first phase of the sidebar feature; node selection behaviour is out of scope for this ticket.

By default the sidebar is collapsed to a rail and stays collapsed until the user explicitly opens it. When expanded, it shows read-only top-level workflow document properties when no node is selected, along with a hint prompting the user to select a node to view its details.

All field values are read-only for this ticket. No editing.

Motivation

  • The canvas currently has no persistent information panel. Users have no way to inspect workflow-level properties without reading the raw YAML.
  • A right-hand sidebar is the conventional location for a properties panel in diagram editors, and keeps the canvas unobstructed by default since it starts collapsed as a rail.

Proposed Implementation

  • Introduce a new sidebar component
  • The sidebar header contains a workflow icon, a "Workflow" title, and the collapse toggle.
  • The sidebar content area shows a hint ("Select a node to view its details") followed read-only workflow details like Document (name, version, dsl, metadata etc
  • Workflow info should read from the workflow model held in state.
  • The sidebar must respect the dec: Tailwind prefix throughout, including any shadcn component class overrides. Dark mode is handled via the dec-root.dark class convention rather than Tailwind's dark: variant.
  • Both light and dark modes must be accounted for.

Definition of Done

  • Implementation: Fully implemented according to the Serverless Workflow spec.
  • Unit Tests: Comprehensive unit tests are included and passing.
  • Integration Tests: Verified within the monorepo and target environments (Web/VS Code).
  • Documentation: Updated README.md, ADRs, or official docs.
  • Performance: No significant regression in editor responsiveness.
  • Accessibility: UI changes comply with accessibility standards.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

Status

Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions