feat(media): improve UI & UX of ModalMediaPicker

[TotomInc]

• Add IPX route-handler to transform images into thumbnails (large image sizes like 2K or 4K can cause browser freeze).
• Add search input to filter images by their path/filename.
• Add pagination, by default page-size is of 12 items.
  • Maybe it should be configurable somewhere?
• Refactor ImagePreview.vue & VideoPreview.vue
• Added a tooltip on hover of a media asset, which display the full relative path of the asset.
• Add a Slideover when selecting a media-item:
  • Slideover displays details about the selected item (file-size, resolution, full image, etc).
  • Slideover allows for confirming the selection of the media item ("Confirm" or "Cancel" action buttons).

Demo

Related issues

Resolves #191

[vercel]

@TotomInc is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

[pkg-pr-new]

npm i https://pkg.pr.new/nuxt-studio@369

commit: 60c0868

[hendrikheil]

@TotomInc What do you think about adding a tree-like hierarchy to the picker?

I think a lot could be gained by making the picker behave more like a file explorer and seeing the path right away?

That's what I built locally, @larbish pointed me to your PR. So I figured a discussion might be good?

[TotomInc]

@hendrikheil looks great, already thought about this one but didn't had enough time to do it. 🙂

In the long-term, we could take example on the most popular WordPress plugin "FileBird" to give us globally an idea of specs, UI + UX & features, for everything related to file-upload.

What we crucially need first, is what you've done: browsing assets on a folder-tree structure.

• About the UI, I would instead make the tree on the left side, using Nuxt UI Tree component.
• Tree structure only shows folders from the public assets path defined on the Nuxt Studio config.
• Clicking on a folder will filter assets from the selected directory.

What do you think @hendrikheil @larbish?

I think we can still get this PR merged when possible (e.g. rebase your PR from my branch?), and then you'll implement the tree-structure on your PR @hendrikheil?

Because this PR has many improvements aside of the tree-based browsing, such as performance improvements, IPX route handler, etc.

[hendrikheil]

Yeah, I agree making the asset browser reflect the tree structure is definitely the most important things.

I would argue that filtering is a low hanging fruit, so we might as well implement that too? In my local approach I didn't go with the nuxt UI tree component because of performance concerns, though if we just use it to list folders it could be a good approach?

I'd be more than happy to add the tree and search features to your PR once merged 👍

[larbish]

Hey @TotomInc, just pushed my latest changes, ready to merge ✅

I did refactor a few things and handle it for external storage. I've also removed the confirm state which is adding an extra step not necessary for UX IMO.

Indeed I feel like we need to merge this big PR first and then improve it visually!

@hendrikheil Feel free to propose an other PR 🚀

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
content-studio	Ready	Preview, Comment	Mar 17, 2026 5:51pm
nuxt.studio	Ready	Preview	Mar 17, 2026 5:51pm