Editing a file removes the `selected` class from the file in the filetree

[tomoam]

Describe the problem

When you edit a file in the editor, selected class is removed from the file in the filetree (only happens on first edit).

selected_class_is_removed.2.mov

• Reproduction
  1. visit a tutorial like https://learn.svelte.dev/tutorial/your-first-component
  2. Edit a file in the editor

This is caused by comparing file with $selected (i.e., these may refer to different objects with the same contents).

learn.svelte.dev/src/lib/components/filetree/File.svelte

Line 36 in 9c9656b

<div class="row" class:selected={file === $selected}>

When you open a tutorial page, deep copy of stub(file) is created...

learn.svelte.dev/src/routes/tutorial/[slug]/Editor.svelte

Lines 190 to 195 in 9c9656b

	/**
	* @param {import('$lib/types').FileStub} stub
	*/
	function create_file(stub) {
	// deep-copy stub so we can mutate it and not create a memory leak
	stub = JSON.parse(JSON.stringify(stub));

...then, if you edit a file, change event will be dispatched, and file will be updated to deep copy of the one.

learn.svelte.dev/src/routes/tutorial/[slug]/Editor.svelte

Lines 210 to 213 in 9c9656b

	if (notify) {
	stub.contents = contents;
	dispatch('change', stub);
	}

learn.svelte.dev/src/routes/tutorial/[slug]/+page.svelte

Lines 390 to 395 in 9c9656b

	<Editor
	stubs={$files}
	selected={$selected}
	read_only={$mobile}
	on:change={update_stub}
	/>

learn.svelte.dev/src/routes/tutorial/[slug]/+page.svelte

Lines 196 to 209 in 9c9656b

	/**
	* @param {CustomEvent<import('$lib/types').FileStub>} event
	*/
	function update_stub(event) {
	const stub = event.detail;
	const index = $files.findIndex((s) => s.name === stub.name);
	$files[index] = stub;
	adapter?.update([stub]).then((reload) => {
	if (reload) {
	schedule_iframe_reload();
	}
	});
	update_complete_states([stub]);
	}

Describe the proposed solution

Comparing with the respective name property instead.