[Task] - Implement Context Button with Configuration and Context Menu for Blocks

[c0rtexR]

Task Overview

Implement a context button for blocks in data-river. When a block is selected, display two UI icons: one for opening the sidebar configuration and another for a context menu (with delete and hotkey preview options).

SMART Criteria

• Specific 🎯
  Implement a UI component for a context button that appears when selecting a block. It will include two icons:

  1. A configuration button to open the sidebar with block settings.
  2. A dropdown menu using Shadcn's dropdown-menu component with two items: a delete option (styled with destructive text) and a hotkey preview.

  The buttons should be grouped with a background similar to the controls in the bottom left, with margin so it's positioned above the block at the top right.

• Measurable 📏
  The task is completed when:

  • The configuration button opens the sidebar for block settings.
  • The context menu displays a delete button (with destructive text class) and a hotkey preview.
  • The component is styled and positioned correctly in relation to the block.

• Achievable 🚀
  Utilize Shadcn's dropdown-menu for the context menu and ensure integration with existing block UI. Test compatibility with current React setup.

• Relevant 🎯
  This task enhances the usability of data-river by providing quick access to block configuration and additional context actions, aligning with the goal of improving UI interactivity.

• Time-bound ⏳
  Complete the implementation within 3 days.

Subtasks 📝

• Design the context button with two icons: configuration and dropdown menu.
• Implement Shadcn's dropdown-menu for the context menu with delete and hotkey options.
• Style the delete button with destructive text class (red).
• Position the button group top-right of the block, with margin above.
• Ensure the background matches the controls in the bottom-left UI.
• Test the sidebar opening on configuration button click.
• Test dropdown menu functionality and styling.

Acceptance Criteria ✅

• The context button appears when a block is selected.
• The configuration icon opens the sidebar for block settings.
• The dropdown menu includes a delete option (with destructive styling) and a hotkey preview.
• The buttons are grouped and positioned correctly with matching background style.

Additional Notes 🗒

• Use Shadcn's dropdown-menu component for the context menu (Already installed in shared package).
• Ensure the delete option uses destructive text class to be easily visible and styled as red.

Icon Suggestions (using lucide-react):

1. Configuration Button: You could use the Settings icon from Lucide to symbolize configuration or settings.
2. Context Menu: For the three dots icon (indicating more options), you can use MoreVertical or MoreHorizontal from Lucide.
3. Delete Button: No icon needed since it's just a text button, but you could add a small Trash icon to enhance visual clarity.

[c0rtexR]

Inspiration for the look:

Langflow:

Miro: