feat: move node options into separate dropdown menu

These could later be moved into a right-click context menu, but for now the original triangle button is reused.

This change makes it possible to add more node options in the future, including switching the Union type from AND to OR.

libs/shared/lib/components/dropdowns/index.tsx

@@ -114,7 +114,7 @@ export function DropdownItem({ value, disabled, className, onClick, submenu, sel
     <li
       ref={itemRef}
       style={{ border: 0 }}
-      className={`cursor-pointer divide-y origin-top-right rounded-sm truncate block text-sm px-2 py-1 hover:bg-secondary-200 ${className && className} ${selected ? 'bg-secondary-400 text-white hover:text-black' : ''}`}
+      className={`cursor-pointer divide-y origin-top-right rounded-sm truncate flex items-center justify-between block text-sm px-2 pe-1 py-1 hover:bg-secondary-200 ${className && className} ${selected ? 'bg-secondary-400 text-white hover:text-black' : ''}`}
       onClick={() => {
         !disabled && onClick && onClick(value);
       }}
@@ -122,7 +122,9 @@ export function DropdownItem({ value, disabled, className, onClick, submenu, sel
       onMouseLeave={() => setIsSubmenuOpen(false)}
     >
       {value}
+      {submenu != null ? <Icon component='icon-[ic--baseline-arrow-right] ms-2' size={14} /> : ''}
       {submenu && isSubmenuOpen && <DropdownSubmenuContainer ref={submenuRef}>{submenu}</DropdownSubmenuContainer>}
+      {children}
     </li>
   );
 }
@@ -133,7 +135,7 @@ type DropdownSubmenuContainerProps = {
 
 export const DropdownSubmenuContainer = React.forwardRef<HTMLDivElement, DropdownSubmenuContainerProps>(({ children }, ref) => {
   return (
-    <div ref={ref} className="z-10 absolute bg-light rounded shadow w-44 left-[-80%] -translate-y-7">
+    <div ref={ref} className="absolute bg-light p-1 rounded max-h-60 overflow-auto focus:outline-none shadow-sm border left-[97%]" style={{transform: 'translate(0px, calc(50% - 19px))'}}>
       <ul className="text-sm text-secondary-700">{children}</ul>
     </div>
   );