Make file tree items selectable

packages/ui/src/lib/components/contextmenu/ContextMenuItem.svelte

@@ -5,7 +5,7 @@
 	import type { ContextMenuContext } from './contextMenu';
 
 	export let icon: keyof typeof iconsJson | undefined = undefined;
-	export let checked: boolean;
+	export let checked = false;
 	const context = getContext<ContextMenuContext>('ContextMenu');
 </script>
 

packages/ui/src/routes/[projectId]/components/BranchFiles.svelte

@@ -88,6 +88,7 @@
 							isRoot={true}
 							class="p-2"
 							{selectedOwnership}
+							{selectedFileId}
 						/>
 					{/if}
 				</div>

packages/ui/src/routes/[projectId]/components/FileTree.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-	import { writable } from 'svelte/store';
+	import { writable, type Writable } from 'svelte/store';
 	import type { TreeNode } from '$lib/vbranches/filetree';
 	import { Ownership } from '$lib/vbranches/ownership';
 	import TreeListFile from './TreeListFile.svelte';
@@ -16,6 +16,7 @@
 	export let isRoot = false;
 	export let withCheckboxes: boolean = false;
 	export let selectedOwnership = writable(Ownership.default());
+	export let selectedFileId: Writable<string | undefined>;
 
 	function isNodeChecked(selectedOwnership: Ownership, node: TreeNode): boolean {
 		if (node.file) {
@@ -87,6 +88,7 @@
 						node={childNode}
 						{selectedOwnership}
 						{withCheckboxes}
+						{selectedFileId}
 						on:checked
 						on:unchecked
 					/>
@@ -97,11 +99,10 @@
 		<!-- Node is a file -->
 		<TreeListFile
 			file={node.file}
+			selected={node.file?.id == $selectedFileId}
 			on:click={() => {
-				const el = document.getElementById('file-' + node.file?.id);
-				el?.scrollIntoView({ behavior: 'smooth' });
-				setTimeout(() => el?.classList.add('wiggle'), 50);
-				setTimeout(() => el?.classList.remove('wiggle'), 550);
+				if ($selectedFileId == node.file?.id) $selectedFileId = undefined;
+				else $selectedFileId = node.file?.id;
 			}}
 		/>
 	{:else if node.children.length > 0}
@@ -122,6 +123,7 @@
 								expanded={true}
 								{selectedOwnership}
 								{withCheckboxes}
+								{selectedFileId}
 								on:checked
 								on:unchecked
 							/>

packages/ui/src/routes/[projectId]/components/FileTreeTabPanel.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { filesToFileTree } from '$lib/vbranches/filetree';
-	import type { File } from '$lib/vbranches/types';
-	import type { Writable } from 'svelte/store';
-	import FileTree from './FileTree.svelte';
-	import type { Ownership } from '$lib/vbranches/ownership';
-
-	export let files: File[];
-	export let withCheckboxes: boolean;
-	export let selectedOwnership: Writable<Ownership>;
-</script>
-
-<FileTree
-	node={filesToFileTree(files)}
-	isRoot={true}
-	class="p-2"
-	{selectedOwnership}
-	{withCheckboxes}
-/>

packages/ui/src/routes/[projectId]/components/TreeListFile.svelte

@@ -6,9 +6,10 @@
 	import FileStatusCircle from './FileStatusCircle.svelte';
 
 	export let file: File;
+	export let selected: boolean;
 </script>
 
-<button on:click class="tree-list-file">
+<button on:click class="tree-list-file" class:selected>
 	<div class="dot">
 		<Icon name="dot" />
 	</div>
@@ -33,11 +34,11 @@
 	.tree-list-file {
 		display: flex;
 		align-items: center;
-		padding: var(--space-4);
+		padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
 		gap: var(--space-6);
 		border-radius: var(--radius-s);
 		max-width: 100%;
-		&:hover {
+		&:not(.selected):hover {
 			background: var(--clr-theme-container-pale);
 		}
 		overflow: hidden;
@@ -51,4 +52,10 @@
 		color: var(--clr-theme-scale-ntrl-0);
 		opacity: 0.3;
 	}
+	.selected {
+		background-color: var(--clr-theme-pop-element);
+		& .name {
+			color: var(--clr-theme-pop-on-element);
+		}
+	}
 </style>