Allow section name to be empty

[ysmilda]

Closes #129

This allows the section name to be empty. When it is empty it shows a placeholder in edit mode and an empty div in normal mode. The latter is to make sure that everything is still aligned.

This does change the size of the area that can be used to drag the section.

[matt8707]

please don't remove reference width, if you set a input background you'll see why

[ysmilda]

The difficulty lies in displaying the placeholder. With the hidden div in place the input gets squashed to input width + 1 which is basically 1 pixel.

I get that the function is that it makes the area that you can use to drag the section around with bigger. The way I see it is that the icon that shows the draggability still works as intended and that with that the functionality is the same.

Otherwise I'll spend some more time coming up with a way to scale the hidden div to the size of the placeholder.

[ysmilda]

The only other way I found to do this is to just hard code the width off the input once the value is empty.

The one thing I couldn't quite figure out is what this does precisely, could you clarify it so I might come up with a better solution than hard coding?

ha-fusion/src/lib/Main/SectionTitle.svelte

Lines 47 to 49 in 2b36dac

	<div class="hidden" bind:offsetWidth={width}>
	{@html value.replaceAll(' ', '&nbsp;')}
	</div>

[matt8707]

{@html value.replaceAll(' ', ' ')} removes multiple spaces in input field to match what HTML does in plain text.

However, I've noticed that all sections below the one without a title shift when the title is left blank.

screen.mp4

First clip is with title, next no title, last layout shift diff

[ysmilda]

I cannot replicate the behaviour your seeing in Chrome and Safari, could it be some caching issue in the styles?

[matt8707]

I see it in all browsers, cache disabled

[ysmilda]

I've simplified the change by not entering a div with a given height into the h1 element but giving it a set height. This might fix the effect you're seeing.

For me it is drawn as shown here: