Details panel: Dropdown menu for entity actions

[redmonkez12]

Description of changes

This pull request adds a dropdown menu to the details page. The dropdown menu contains five actions

• Picture in picture
• Upload thumbnail
• Upload version
• View details
• Add to list

Upload version and add to the list are displayed only when they are available

Update

• Renamed dropdown menu option to view data
• Removed picture in picture
• Removed thumbnail context menu
• Used the menu component

Additional context

• Do we want to display picture in picture icon when it's in the dropdown?
• Do all pages with dropdown have all five actions or is it okay as we have it now

[martastain]

It works, but i wouldn't merge it RN because of the mentioned duplicates. not just PIP icon, but i don't think upload thumbnail/version should be at two different places. It's kinda confusing. Let's wait for @Innders

[Innders]

@redmonkez12 please use https://github.com/ynput/ayon-frontend/blob/ae7b98bdfec9d38d74779729dcb0c9bb190055ce/src/components/Menu/MenuComponents/Menu.jsx dropdown menu we already have. Look at https://github.com/ynput/ayon-frontend/blob/ae7b98bdfec9d38d74779729dcb0c9bb190055ce/src/containers/header/AppHeader.jsx to see how it is implemented.

[Innders]

• Remove the current right click menu options on the thumbnail itself.

• Remove pip from top menu (still in dropdown menu)

• View details renamed to "View data"

[Innders]

Cool, it's looking good!

"Add to list" should show a sub menu of lists to add the entity to and the option to create a new list like in the context menu. I think the menu component supports sub menus but I haven't tried it in a while.

The "View Data" item should always be the last item and should have label "View data" only.

[Innders]

• Use more_horiz icon instead (sorry my bad).
• When the menu is open keep the dropdown button highlighted.
• Dragging and dropping files to either upload a thumbnail or create a new version is broken. You should be able to drag and drop a file onto the header to do this.
• I can't seem to ever see the add to list item, is this supported?

[Innders]

All works great!

How hard is it to get the "add to list" on the overview page?

[redmonkez12]

For this to be complete this really needs to have the "add to list" options everywhere, not just on some pages.

This means it needs to work on the overview page, the home page and any other page the details panel might appear on.

Fixed two issues when multiple dropdowns are opened

[Innders]

• The menu goes off the screen. Although it is scrollable it's very weird. The menu itself should not go off the screen and should be a scrollable container itself.

Since opening this PR we have added list folders. This means we will need to add it here as well. (ayon.dev has some good examples of list folders on demo_Commercial)

• The add to list menu should create the same folder structure on the lists page and right click context menu. Make sure to use the icons in the submenu as well.

[Innders]

We are so close! Unfortunately the sub-menus seem really buggy especially when they are multiple levels deep. Often it's near impossible to get to sub menu items.

I would suggest creating some more complex folder structures for lists to test properly.

Screen.Recording.2025-10-09.at.20.23.59.mov

[redmonkez12]

We are so close! Unfortunately the sub-menus seem really buggy especially when they are multiple levels deep. Often it's near impossible to get to sub menu items.

I would suggest creating some more complex folder structures for lists to test properly.
Screen.Recording.2025-10-09.at.20.23.59.mov

I added a similar approach that we have in primereact

Screen.Recording.2025-10-13.at.6.17.43.mov

[Innders]

If you test this with enough folders then this breaks down pretty fast. You need to add far more folders and then sub-folders to test properly.

It should work like the context menu. The sub menu it always in line with the parent menu.

[Innders]

Styling completely different now?