[QUA] Enhance use of nested dropdowns with dialogs

I think there's a better way to build these Dropdowns with dialog triggers that get rid of creating one state for each Dialog.

You basically need to create a Dialog that have the DropdownMenuItem as a trigger (preventing the default close behavior on onSelect) and control the open/close state of the dropdown and pass it as prop to a Dialog. Here is an example:

```typescript
import { useState } from "react";
import { BotIcon } from "lucide-react";
import { Button } from "@sophys-web/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@sophys-web/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@sophys-web/ui/dropdown-menu";

export function ExampleDropdownItemDialog() {
const [openDropdown, setOpenDropdown] = useState(false);

return (


Open Menu


Item 1
Item 2

Item 3: Controlled with Dialog{" "}


}
onClose={() => {
alert("Closing dialog from Item 3");
setOpenDropdown(false);
}}
/>


);
}

function DropdownItemWithDialog({
triggerContent,
onClose,
}: {
triggerContent?: React.ReactNode;
onClose?: () => void;
}) {
const [open, setOpen] = useState(false);

return (
{
setOpen(nextOpen);
if (!nextOpen) onClose?.();
}}
>

{
e.preventDefault();
setOpen(true);
}}
>
{triggerContent ?? "Controlled Item with Dialog"}




Controlled Dialog

This dialog is controlled by the DropdownItemWithDialog component.
It opens when the item is selected and can be closed with the button
below. It also calls the onClose callback when closed, allowing the
parent component to react to the dialog being closed if needed.


{
setOpen(false);
onClose?.();
}}
>
Close Dialog



);
}

```

_Originally posted by @brnovasco in https://github.com/cnpem/sophys-web/pull/74#discussion_r3017626768_