feat: Drag & drop for re-ordering event types (without any external library)

[anikdhabal]

What does this PR do?

Fixes #14701

[vercel]

@anikdhabal is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link.

[graphite-app]

Graphite Automations

"Add community label" took an action on this PR • (04/23/24)

1 label was added to this PR based on Keith Williams's automation.

"Add consumer team as reviewer" took an action on this PR • (04/23/24)

1 reviewer was added to this PR based on Keith Williams's automation.

[github-actions]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[zomars]

This is quite clever. Good job. Could you please attach a loom or video demoing it? 🙏

[anikdhabal]

This is quite clever. Good job. Could you please attach a loom or video demoing it? 🙏

Sure @zomars 🙏

260444574-7cc0ca2c-ab32-40d8-b57d-3e332123c9fd.1.mp4

[Udit-takkar]

Tested this and worked fine but it swaps both the event types instead of moving only one. is this fine @ciaranha?

Screen.Recording.2024-04-24.at.2.08.42.PM.mov

[sean-brydon]

Tested this and worked fine but it swaps both the event types instead of moving only one. is this fine @ciaranha?

Screen.Recording.2024-04-24.at.2.08.42.PM.mov

Yeah I was testing this and notice this too - i was checking a few drag and drop instances across a few different apps and they all seem to have a mixture of inserting it where you dropped it and swapping. I think its just a matter of preference.

I would lean to inserting as that is kinda what happens when you use the arrows

[ciaranha]

Tested this and worked fine but it swaps both the event types instead of moving only one. is this fine @ciaranha?

No, this is weird. I'm sure the fact that it looks like you're picking up a URL could be worked on, but the swap thing is not what we want.

[anikdhabal]

@Udit-takkar @sean-brydon @ciaranha thanks for your review. I understand what's needed, and I'm on it. I will fix it shortly.

[ciaranha]

I'd like for us to have a specific draggable area rather than the whole thing draggable as re-ordering is not a super high need, but in terms of the interaction, this is more what I would hope for:

CleanShot.2024-04-24.at.14.08.24.mp4

Requirements

• It's clear what I'm dragging
• It's clear where I'm going to drop it and how that will impact the items around it
• It should feel smooth and predictable

[keithwillcode]

Closing for now based on @ciaranha comments. Feel free to reopen if changes are made.

[anikdhabal]

Closing for now based on @ciaranha comments. Feel free to reopen if changes are made.

Yeah, I will fix it shortly and reopen it.