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.

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
No fields configured for Feature.

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions