Site: Make changing the name of a REPL obvious

[gtm-nayan]

Describe the problem

Filing this after I struggled with it for a good few minutes until someone on the discord helped me.

As it stands right now, it isn't obvious how to edit the name of the REPL. The input field where the name is entered blends into the controls toolbar and the cursor for when it is hovered is the same as that for normal text. There isn't really anything to show that it is an input field rather than normal text.

Describe the proposed solution

Here's how I think it could be potentially fixed

1. Add a underline border-bottom when it is hovered/focused. Although the border stretching all the way across might be ugly. Then again it is only seen when hovered so it might not be too bad.
   

2. Add an edit icon to suggest that the text is editable

3. Change the cursor to pointer?

Alternatives considered

Assume that I'm the only one who struggled with this and almost everyone else will figure it out pretty easily.

Importance

nice to have

[baseballyama]

I updated locally about it.
What do you think?

Before update

Default

Hover

Focus

After Update

Default

Hover

Focus

[gtm-nayan]

Looks pretty good, I think the icon's color should match the other icons when it's not hovered. And, ideally the icon and input would be wrapped inside a label so that clicking the icon also focuses the input which I think you've done already.

[rmunn]

The REPL has its own GitHub project and issue tracker: https://github.com/sveltejs/svelte-repl. Perhaps this issue belongs over there?

[baseballyama]

Oh really?
I thought this title input is this <input> tag.

svelte/site/src/routes/repl/[id]/_components/AppControls/index.svelte

Lines 170 to 173 in fffe8c1

	<input
	bind:value={name}
	on:focus="{e => e.target.select()}"
	use:enter="{e => e.target.blur()}"

I thought README of https://github.com/sveltejs/svelte-repl said this repository is guts of REPL.
(guts means like fundamentals right?)
Therefore concrete elements should maintain at this repository I thought.

Maybe is there something wrong with my understanding?

[rmunn]

No, you're correct. I didn't dive that deeply into it, and thought that that input element was part of the Repl component. But you're quite right; it's part of the AppControls component and this issue does belong in the current GitHub repository.

[baseballyama]

@698969

Looks pretty good, I think the icon's color should match the other icons when it's not hovered. And, ideally the icon and input would be wrapped inside a label so that clicking the icon also focuses the input which I think you've done already.

Thank you for the suggestion!
I implemented these points and create PR!

[baseballyama]

Now we can close this issue because PR is merged!