[fix] compute correct depth offset

Fixes #122

Author: dummdidumm

src/lib/components/filetree/Filetree.svelte

@@ -10,7 +10,7 @@
 	/** @type {import('svelte/store').Writable<Record<string, import('$lib/types').Stub>>} */
 	export let endstate;
 
-	/** @type {{ prefix: string, depth: number, name: string }} */
+	/** @type {import('svelte/store').Writable<import('$lib/types').Scope>} */
 	export let scope;
 
 	/** @type {import('svelte/store').Writable<boolean>} */
@@ -33,6 +33,7 @@
 		files,
 		selected,
 		readonly,
+		scope,
 
 		select: async (file) => {
 			selected.set(file);
@@ -166,12 +167,12 @@
 
 <div class="filetree">
 	<Folder
-		prefix={scope.prefix}
-		depth={scope.depth}
+		prefix={$scope.prefix}
+		depth={$scope.depth}
 		directory={{
 			type: 'directory',
 			name: '',
-			basename: scope.name
+			basename: $scope.name
 		}}
 		files={$files.filter((stub) => !hidden.has(stub.basename))}
 		expanded

src/lib/components/filetree/Folder.svelte

@@ -21,7 +21,7 @@
 	/** @type {'idle' | 'add_file' | 'add_directory' | 'renaming'} */
 	let state = 'idle';
 
-	const { endstate, files: all_files, rename, add, remove, readonly } = context.get();
+	const { endstate, files: all_files, rename, add, remove, readonly, scope } = context.get();
 
 	$: children = files
 		.filter((file) => file.name.startsWith(prefix))
@@ -104,7 +104,7 @@
 	].filter(Boolean);
 </script>
 
-<div class="directory row" class:expanded style="--depth: {depth};">
+<div class="directory row" class:expanded style="--depth: {depth - $scope.depth};">
 	<Item
 		can_rename={can_remove}
 		renaming={state === 'renaming'}
@@ -126,10 +126,10 @@
 </div>
 
 {#if expanded}
-	<ul style="--depth: {depth}">
+	<ul style="--depth: {depth - $scope.depth}">
 		{#if state === 'add_directory'}
 			<li>
-				<div class="directory row" style="--depth: {depth + 1}">
+				<div class="directory row" style="--depth: {depth - $scope.depth + 1}">
 					<Item
 						renaming
 						on:rename={(e) => {

src/lib/components/filetree/context.js

@@ -6,6 +6,7 @@ import { setContext, getContext } from 'svelte';
  *   files: import('svelte/store').Writable<import('$lib/types').Stub[]>;
  *   selected: import('svelte/store').Writable<import('$lib/types').FileStub | null>;
  *   readonly: import('svelte/store').Writable<boolean>;
+ * 	 scope: import('svelte/store').Writable<import('$lib/types').Scope>;
  *   select: (file: import('$lib/types').FileStub) => void;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
  *   rename: (stub: import('$lib/types').Stub, name: string) => Promise<void>;

src/lib/types/index.d.ts

@@ -24,6 +24,12 @@ export interface Adapter {
 	destroy(): Promise<void>;
 }
 
+export interface Scope {
+	prefix: string;
+	depth: number;
+	name: string;
+}
+
 export interface Exercise {
 	part: {
 		slug: string;
@@ -34,11 +40,7 @@ export interface Exercise {
 		slug: string;
 		title: string;
 	};
-	scope: {
-		prefix: string;
-		depth: number;
-		name: string;
-	};
+	scope: Scope;
 	focus: string;
 	title: string;
 	slug: string;
@@ -49,7 +51,7 @@ export interface Exercise {
 	editing_constraints: {
 		create: string[];
 		remove: string[];
-	}
+	};
 	a: Record<string, Stub>;
 	b: Record<string, Stub>;
 }
@@ -83,14 +85,6 @@ export interface PartStub {
 	chapters: ChapterStub[];
 }
 
-export interface FileTreeContext {
-	select: (file: FileStub) => void;
-	add: (name: string, type: 'file' | 'directory') => Promise<void>;
-	edit: (stub: Stub, name: string) => Promise<void>;
-	remove: (stub: Stub) => Promise<void>;
-	selected: Writable<FileStub | null>;
-}
-
 export interface EditingConstraints {
 	create: string[];
 	remove: string[];

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

@@ -27,6 +27,9 @@
 	/** @type {import('svelte/store').Writable<import('$lib/types').FileStub | null>} */
 	const selected = writable(null);
 
+	/** @type {import('svelte/store').Writable<import('$lib/types').Scope>} */
+	const scope = writable({ depth: 0, name: '', prefix: '' });
+
 	/** @type {HTMLIFrameElement} */
 	let iframe;
 	let loading = true;
@@ -159,6 +162,7 @@
 	async function load_exercise() {
 		try {
 			$files = Object.values(data.exercise.a);
+			$scope = data.exercise.scope;
 			selected.set(
 				/** @type {import('$lib/types').FileStub} */ (
 					$files.find((stub) => stub.name === data.exercise.focus)
@@ -348,7 +352,7 @@
 					<SplitPane type="horizontal" min="80px" max="300px" pos="200px">
 						<section class="navigator" slot="a">
 							<Filetree
-								scope={data.exercise.scope}
+								{scope}
 								{endstate}
 								{files}
 								readonly={mobile}