Unify activity directives and spans

[lklyne]

Overview

We separated activity directives and simulated activities in the timeline to better match the Aerie approach for scheduling. This can add many (thousands+) additional items to render on the timeline, significantly complicating the timeline. This also separated the information in a directive from a span, making it more difficult to understand what’s editable and whats generated procedurally.

Current design issues

• Lots of extra items to render
• Clicking on a span doesn't show params that can be edited
• Clicking on a directive doesn't show span details
• Icons add a lot of visual noise to the timeline.
• Borders to the rectangle add additional noise, and increase the number of elements to draw.
• Border radius doesn’t add value, and reduces the crispiness of the edges.

Design direction

• Unify spans and directives on timeline
• Clicking either a span or directive shows related info in instance details panel, this can be collapsed
• Use typography and opacity alone to indicate simulation status. Activity directive thats not simulated is lighter and italic. This differentiates simulation status, even for zero duration simulated activities.
• Vertical bar to represent directives.
• Moving a simulated directive breaks it apart from the span, showing the stale span's duration, as well as a stale view of duration at new directive location.

Moving a simulated directive

Selection picks both directive and span

[AaronPlave]

Some outstanding questions:

• Should we keep the inline editing of the directive name or move it back to a form field? If we keep it, do we have the button live inline with the collapse?
• Where should the directive specific actions like changelog, delete, lock, errors/warnings, etc live?

[lklyne]

Same open questions and dev link as #1375 https://www.figma.com/design/nQ2TqzIr0Kl1SIzqT246Ro/Aerie-%231375-Compound-activities?node-id=65-35353&m=dev&focus-id=69-58754