[ Feature Request ] Show progress names next to the bar

[OliverDudgeon]

Hi, many thanks for developing Pluto.jl. It's of great use in my research.

The support for ProgressLogging.jl is very useful to me. Often I have several progress bars for different parts of a program (often nested inside a package, so not easily separable into multiple cells). Currently, it seems that the name from the name kwarg to the @progress or @withprogress macros, e.g.

@progress name = "iterating..." for i in 1:100
	sleep(0.1)
end

isn't displayed inline, which is can make it difficult to figure out what is currently running. I tried to figure this out in the preact code but I got quite confused with the custom elements which I'm not used to in the react code I've written. Presumably, this info is available to the frontend and could be displayed inline next to the progress bar?

[Pangoraw]

With preact, components are not written as JSX syntax but interpoled in the html string macro. This is the progress component:

Pluto.jl/frontend/components/Logs.js

Lines 91 to 100 in be51e4b

	const Progress = ({ progress }) => {
	const bar_ref = useRef(/** @type {HTMLElement?} */ (null))
	useLayoutEffect(() => {
	if (!bar_ref.current) return
	bar_ref.current.style.backgroundSize = `${progress * 100}% 100%`
	}, [bar_ref.current, progress])
	return html`<pluto-progress-bar ref=${bar_ref}>${Math.ceil(100 * progress)}%</pluto-progress-bar>`
	}

Which is invoked here depending on the whether or not the log message is a progress log, where progress is extracted from the log's kwargs:

Pluto.jl/frontend/components/Logs.js

Lines 134 to 135 in be51e4b

	>${is_progress
	? html`<${Progress} progress=${progress} />`