[REG-1903] Drag and Drop Sequence Editor

[addisonbgross]

The main focus of this PR is to establish the drag and drop interaction that will be used for creating and editing bot Sequences. The next PR will use real Segments, and will save the new Sequence

I apologize for the size of this PR. Luckily most of the changes are from new prefabs

What has been done

• Added the Sequence Editor prefab, where the user can drag and drop Segment Cards into a Drop Zone
  • Cards can be added or removed from the Drop Zone
  • Cards can be reordered within the Drop Zone
    • This Drop Zone can display an optional empty state/message
  • An animation will play when removing a card (or choosing not to add it to the Drop Zone)
• Added assets used in the Sequence Editor, Drop Zone, and Segment Cards

Out of Scope

• Fetching Bot Segments and using them to populate the list of Available Segments within the Sequence Editor
• The Sequence Editor's button to refresh the Available Segments list
• A scrollable list of Segments within the Drop Zone. Getting this particular section scrolling was breaking my brain, I'll take it on in my follow-up PR to this
• Saving the new Bot Sequence, and the button needed to do so
• More styling updates
• Tests! They will be my next task after this create flow is ready

LOOM

https://www.loom.com/share/1176801c9be147fd948630be6505a7af

[addisonbgross]

Do I need to do any special handling of these mouse input events?

[vontell]

This is seriously so awesome to see! Love the attention to detail, especially with that fade out deletion. Also appreciate the comments and code structure, was super easy to review. LGTM!

[batu]

This looks sweet!

Non blocking, most likely already in scope for the next PR: How difficult would it be to implement this type of drop shadow when dragging/reordering segments already in the dropzone?

[batu]

Idea/Question:

What should/does happen when we double click on a segment? In this view, do we have a way for the user to get more information about each segment?

[RG-nAmKcAz]

Regarding the drag/drop into a scrollable box. I've seen this done a few different ways, but one way is to treat the draggable area as a fixed area.

Then transform those coordinates into the scrollable component behind it based on its relative scroll position at the time.

A bit tedious/manual but reliable

[addisonbgross]

@batu thanks for the great input!

• I think having some sort of visual indicator when reordering segments is a solid idea
• I'm hoping to add an expanded view of the segment cards when clicked on. Larger, with more information