[Feature] Dev Toolbar

[hkbertoson]

Describe the solution you'd like

A Dev Toolbar App that allows the user to interact with their Cloudinary images.
Maybe updating the blur? Or the opacity?

[colbyfayock]

love the idea of a dev toolbar

a few ideas ive had in my wish list for dev-only debugging/warnings:

• Warning about LCP images once the page loads similar to the Next.js Image component (Related: Add Warning in Docs about Lazy Loading and LCP #9, https://github.com/vercel/next.js/blob/7418b26d8a27feb6925e488ac4e0c30ad15a3346/packages/next/src/shared/lib/get-img-props.ts#L570-L605)
• Log the value of the x-cld-error header when an image has an error (related: [Feature] Log X-Cld-Error header in dev mode next-cloudinary#512)
• There's a Cloudinary Chrome Extension that could be used for inspiration: https://chromewebstore.google.com/detail/cloudinary-media-inspecto/ehnkhkglbafecknplfmjklnnjimokpkg
• Show the file size, format, and rendered dimensions

the editing capabilities seem interesting, but im thinking about what that woudl look like from a workflow perspective. if i wanted to make a change to an image, i would want to be able to save those changes, so would i copy a code snippet? what if i already have a value for that transformation? would i have some kind of field editor? just something to think about. could get complicated, but an interesting thread to pull

are there any existing toolbars that you've seen that i could check out as examples of what this sort of thing looks like?

I would imagine it would be handy to be able to enable/disable debug features, could store those in localstorage for in-UI toggling for people or even have flags in the configuration itself (or both)

can't help but wonder if there is any potential to develop any of the toolbar in a framework agnostic way so that we ecould take advantage of it in other frameworks, but that might be out of scope for getting a v1 😁

[colbyfayock]

Another interesting thing i thought of, i was trying to create a visual editor in my Next.js documentation, wonder if thats a thread ot pull on

https://next-cloudinary-git-20230718-visual-editor-cloudinarydevx.vercel.app/cldimage/basic-usage

Imagine for the editing experience, you click a button that pops upen an editor as a tooltip like you see in that link above, and instead of having the options, you just rewrite the code, which you can then copy and paste or w/e

[colbyfayock]

looks like we could likely add a button to the existing astro bar: https://x.com/astrodotbuild/status/1843632271708000723?s=46