[feat] Ability to insert an input field / element

[drfarrell]

Requires a design for toolbar v2 or something similar but ability to insert or drag / drop an input element.

[hitaspdotnet]

I like current short toolbar; we can remove text tool from it. for DnD ability, we need a drop zone manager. for example, changing the usage of the div tool to draw drop zone inside components that allows drops.

[drfarrell]

Design for button / input as an extended toolbar. We'll keep the text tool because it's very intuitive to users.

Feature: Update Toolbar for Button/Input Tools with Enhanced Interactivity

Description:
Enhance the toolbar to include:

1. Up Chevron Addition: Add the radix up chevron icon to the right of the square in the toolbar file for better user visual cues.
2. Drag-and-Drop Functionality: Allow users to:
   • Select an item (e.g., Button, Input) from the toolbar and drag it onto the page.
   • Alternatively, click to select an item, which the mouse then holds onto with a default size, ready for placement on the page.

Expected Behavior:

1. Toolbar Design Update:
   • The up chevron icon should be added to the existing toolbar next to the square icon.
   • The new design should be consistent with existing toolbar elements and intuitive for users.
   • The up chevron should have its own clickable space and match the height of the square next to it, but be about half as wide as the square in terms of padding around the icon.
2. Interactive Item Selection:
   • When a user drags an item (e.g., Button, Input) from the toolbar to the page, the element should render immediately in its default state at the dropped position. These should drop in and elements.
   • When a user clicks an item, the mouse should hold a preview of the element (e.g., ghost or outline of the element) with a default size. The user can then place it on the page by clicking again.

Implementation Notes:

• Update toolbar.tsx or equivalent file to include the up chevron next to the square icon.
• Add logic for drag-and-drop functionality:
  • Define default dimensions and properties for each element (Button, Input) when rendered.
  • Implement mouse cursor behavior to hold and place selected items upon click.
• Ensure compatibility with existing toolbar functionality (e.g., the text tool).

Design Mockup Reference:

Testing Criteria:

1. Verify the up chevron key is properly added and aligned with other toolbar icons.
2. Test drag-and-drop for Button and Input elements:
   • Ensure elements render correctly where they are dropped.
3. Test click-to-select functionality:
   • Ensure the mouse holds the selected item with a preview.
   • Verify the default size and properties of rendered elements.
4. Validate behavior across different browsers and screen resolutions.

Purpose and Context: This update improves usability and intuitiveness for designers, allowing for faster and more flexible element insertion onto the page. The up arrow addition also visually aligns with existing toolbar expectations.

Some additional resources:

• https://github.com/onlook-dev/onlook/pull/627/files#diff-f1c3650a2f6d8c20249858eb27e4d5f8d9aba0a1f0629a72f05714b08cf013c6
• https://github.com/onlook-dev/onlook/blob/971d2de29612349aecfb6fcef06caff176c7ab43/apps/studio/electron/preload/webview/elements/move/drag.ts#L7 dragging
• https://github.com/onlook-dev/onlook/pull/627 A very similar pull request with MANY details to borrow and great commentary

[caleb8315]

I started working on this.

[abhiroopc84]

Bring it on @drfarrell