Filetree overhaul (sveltejs#244)

Rich-Harris · Rich Harris · web-flow · commit cc3548ab660d · 2023-03-09T23:35:06.000-05:00
* flatten DOM

* fix blur

* tidy up

* fix arrow

* remove scope.depth

* remove depth property

* various tweaks

* simplification

* add file icon

* keyboard nav

* toggle expanded state with arrow keys

* prevent duplicates

* improve input styles

* tweaks

* fix

* fix

---------

Co-authored-by: Rich Harris &lt;git@rich-harris.dev&gt;
diff --git a/content/tutorial/01-svelte/01-introduction/meta.json b/content/tutorial/01-svelte/01-introduction/meta.json
@@ -2,7 +2,6 @@
 	"title": "Introduction",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/02-reactivity/meta.json b/content/tutorial/01-svelte/02-reactivity/meta.json
@@ -2,7 +2,6 @@
 	"title": "Reactivity",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/03-props/meta.json b/content/tutorial/01-svelte/03-props/meta.json
@@ -2,7 +2,6 @@
 	"title": "Props",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/04-logic/meta.json b/content/tutorial/01-svelte/04-logic/meta.json
@@ -2,7 +2,6 @@
 	"title": "Logic",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/05-events/meta.json b/content/tutorial/01-svelte/05-events/meta.json
@@ -2,7 +2,6 @@
 	"title": "Events",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/06-bindings/meta.json b/content/tutorial/01-svelte/06-bindings/meta.json
@@ -2,7 +2,6 @@
 	"title": "Bindings",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/07-lifecycle/meta.json b/content/tutorial/01-svelte/07-lifecycle/meta.json
@@ -2,7 +2,6 @@
 	"title": "Lifecycle",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/08-stores/meta.json b/content/tutorial/01-svelte/08-stores/meta.json
@@ -2,7 +2,6 @@
 	"title": "Stores",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/01-svelte/meta.json b/content/tutorial/01-svelte/meta.json
@@ -2,7 +2,6 @@
 	"title": "Welcome to Svelte",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/02-sveltekit/meta.json b/content/tutorial/02-sveltekit/meta.json
@@ -2,7 +2,6 @@
 	"title": "Introduction to SvelteKit",
 	"scope": {
 		"prefix": "/",
-		"depth": 0,
 		"name": "project"
 	},
 	"focus": "/src/routes/+page.svelte"
diff --git a/content/tutorial/03-advanced-svelte/01-motion/meta.json b/content/tutorial/03-advanced-svelte/01-motion/meta.json
@@ -2,7 +2,6 @@
 	"title": "Motion",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/meta.json b/content/tutorial/03-advanced-svelte/02-transitions/meta.json
@@ -2,7 +2,6 @@
 	"title": "Transitions",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/03-animations/meta.json b/content/tutorial/03-advanced-svelte/03-animations/meta.json
@@ -2,7 +2,6 @@
 	"title": "Animations",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/04-actions/meta.json b/content/tutorial/03-advanced-svelte/04-actions/meta.json
@@ -2,7 +2,6 @@
 	"title": "Actions",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/05-bindings/meta.json b/content/tutorial/03-advanced-svelte/05-bindings/meta.json
@@ -2,7 +2,6 @@
 	"title": "Advanced bindings",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/06-classes/meta.json b/content/tutorial/03-advanced-svelte/06-classes/meta.json
@@ -2,7 +2,6 @@
 	"title": "Classes",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/07-composition/meta.json b/content/tutorial/03-advanced-svelte/07-composition/meta.json
@@ -2,7 +2,6 @@
 	"title": "Component composition",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/08-context/meta.json b/content/tutorial/03-advanced-svelte/08-context/meta.json
@@ -2,7 +2,6 @@
 	"title": "Context API",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/meta.json b/content/tutorial/03-advanced-svelte/09-special-elements/meta.json
@@ -2,7 +2,6 @@
 	"title": "Special elements",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/10-module-context/meta.json b/content/tutorial/03-advanced-svelte/10-module-context/meta.json
@@ -2,7 +2,6 @@
 	"title": "Module context",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/11-special-tags/meta.json b/content/tutorial/03-advanced-svelte/11-special-tags/meta.json
@@ -2,7 +2,6 @@
 	"title": "Debugging",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/12-next-steps/meta.json b/content/tutorial/03-advanced-svelte/12-next-steps/meta.json
@@ -2,7 +2,6 @@
 	"title": "Next steps",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/03-advanced-svelte/meta.json b/content/tutorial/03-advanced-svelte/meta.json
@@ -2,7 +2,6 @@
 	"title": "Advanced Svelte",
 	"scope": {
 		"prefix": "/src/lib/",
-		"depth": 2,
 		"name": "src"
 	},
 	"focus": "/src/lib/App.svelte"
diff --git a/content/tutorial/04-advanced-sveltekit/meta.json b/content/tutorial/04-advanced-sveltekit/meta.json
@@ -2,7 +2,6 @@
 	"title": "Advanced SvelteKit",
 	"scope": {
 		"prefix": "/",
-		"depth": 0,
 		"name": "project"
 	},
 	"focus": "/src/routes/+page.svelte"
diff --git a/src/lib/icons/file.svg b/src/lib/icons/file.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3C4 2.44771 4.44771 2 5 2H15M20 7H15V2M20 7L15 2" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
@@ -32,7 +32,6 @@ export interface Adapter extends AdapterInternal {
 
 export interface Scope {
 	prefix: string;
-	depth: number;
 	name: string;
 }
 
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
@@ -71,7 +71,7 @@
 				pos={$mobile ? (selected_view === 1 ? '100%' : '0%') : '50%'}
 			>
 				<section slot="a">
-					<SplitPane type="horizontal" min="80px" max="300px" pos="200px">
+					<SplitPane type="horizontal" min="120px" max="300px" pos="200px">
 						<section class="navigator" slot="a">
 							<Filetree readonly={mobile} />
 
diff --git a/src/routes/tutorial/[slug]/filetree/File.svelte b/src/routes/tutorial/[slug]/filetree/File.svelte
@@ -1,11 +1,15 @@
 <script>
 	import * as context from './context.js';
 	import Item from './Item.svelte';
+	import file_icon from '$lib/icons/file.svg';
 	import { selected, solution, state } from '../state.js';
 
 	/** @type {import('$lib/types').FileStub} */
 	export let file;
 
+	/** @type {number} */
+	export let depth;
+
 	const { rename, remove, readonly } = context.get();
 
 	let renaming = false;
@@ -33,40 +37,22 @@
 		: [];
 </script>
 
-<div class="row" class:selected={file.name === $selected?.name}>
-	<Item
-		can_rename={can_remove}
-		{renaming}
-		basename={file.basename}
-		{actions}
-		on:click={() => state.select_file(file.name)}
-		on:edit={() => {
-			renaming = true;
-		}}
-		on:rename={(e) => {
-			rename(file, e.detail.basename);
-		}}
-		on:cancel={() => {
-			renaming = false;
-		}}
-	/>
-</div>
-
-<style>
-	.selected {
-		color: var(--prime) !important;
-	}
-
-	.selected::after {
-		content: '';
-		position: absolute;
-		width: 1rem;
-		height: 1rem;
-		top: 0.1rem;
-		right: calc(-2.6rem - 2px);
-		background-color: var(--sk-back-3);
-		border: 1px solid var(--sk-back-4);
-		transform: translate(0, 0.2rem) rotate(45deg);
-		z-index: 2;
-	}
-</style>
+<Item
+	{depth}
+	can_rename={can_remove}
+	{renaming}
+	basename={file.basename}
+	icon={file_icon}
+	selected={file.name === $selected?.name}
+	{actions}
+	on:click={() => state.select_file(file.name)}
+	on:edit={() => {
+		renaming = true;
+	}}
+	on:rename={(e) => {
+		rename(file, e.detail.basename);
+	}}
+	on:cancel={() => {
+		renaming = false;
+	}}
+/>
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -22,6 +22,12 @@
 				return;
 			}
 
+			const existing = $state.stubs.find((stub) => stub.name === name);
+			if (existing) {
+				modal_text = `A ${existing.type} already exists with this name`;
+				return;
+			}
+
 			const basename = /** @type {string} */ (name.split('/').pop());
 
 			/** @type {import('$lib/types').Stub} */
@@ -135,19 +141,31 @@
 	}
 </script>
 
-<div class="filetree">
+<ul
+	class="filetree"
+	on:keydown={(e) => {
+		if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+			e.preventDefault();
+			const lis = Array.from(e.currentTarget.querySelectorAll('li'));
+			const focused = lis.findIndex((li) => li.contains(e.target));
+
+			const d = e.key === 'ArrowUp' ? -1 : +1;
+
+			lis[focused + d]?.querySelector('button')?.focus();
+		}
+	}}
+>
 	<Folder
 		prefix={$scope.prefix}
-		depth={$scope.depth}
+		depth={0}
 		directory={{
 			type: 'directory',
 			name: '',
 			basename: $scope.name
 		}}
 		files={$stubs.filter((stub) => !hidden.has(stub.basename))}
-		expanded
 	/>
-</div>
+</ul>
 
 {#if modal_text}
 	<Modal on:close={() => (modal_text = '')}>
@@ -165,8 +183,10 @@
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
-		padding: 2rem;
+		padding: 1rem 0rem;
+		margin: 0;
 		background: var(--sk-back-1);
+		list-style: none;
 	}
 
 	.filetree::before {
@@ -179,34 +199,6 @@
 		border-right: 1px solid var(--sk-back-4);
 	}
 
-	.filetree :global(.row) {
-		--bg: var(--sk-back-1);
-		--inset: calc((var(--depth) * 1.2rem) + 1.5rem);
-		position: relative;
-		width: calc(100% - 1px);
-		padding: 0 0 0 var(--inset);
-		height: 1.4em;
-		z-index: 1;
-		background: var(--bg);
-		color: var(--sk-text-2);
-	}
-
-	.filetree :global(.row:hover) {
-		--bg: var(--sk-back-3);
-	}
-
-	.filetree :global(button),
-	.filetree :global(input) {
-		background-size: 1.2rem 1.2rem;
-		background-position: 0 45%;
-		background-repeat: no-repeat;
-	}
-
-	.filetree :global(:focus-visible) {
-		outline: none;
-		border: 2px solid var(--sk-theme-3) !important;
-	}
-
 	.modal-contents p {
 		white-space: pre-line;
 	}
diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte
diff --git a/src/routes/tutorial/[slug]/filetree/Item.svelte b/src/routes/tutorial/[slug]/filetree/Item.svelte
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
