Fix shift selecting files after rebasing Pavel's work

- works but will need more love

gitbutler-ui/src/lib/components/BranchFilesList.svelte

@@ -29,7 +29,7 @@
 		{readonly}
 		{isUnapplied}
 		showCheckbox={showCheckboxes}
-		selected={$selectedFileIds && $fileSelection.has(file.id, $commit?.id)}
+		selected={$selectedFileIds && $selectedFileIds.includes(file.id + '|' + $commit?.id)}
 		on:click={(e) => {
 			selectFilesInList(e, file, $fileSelection, sortedFiles, allowMultiple, $commit);
 		}}

gitbutler-ui/src/lib/components/BranchLane.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import BranchCard from './BranchCard.svelte';
 	import FileCard from './FileCard.svelte';
 	import { Project } from '$lib/backend/projects';
 	import Resizer from '$lib/components/Resizer.svelte';
@@ -50,10 +51,13 @@
 	const selectedFileIds = $fileSelection.fileIds;
 
 	const selectedFiles = createSelectedFiles([]);
-	$: if ($selectedFileIds.length > 0 && $fileSelection.toOnly().context === undefined)
+	$: if ($selectedFileIds.length > 0 && $fileSelection.toOnly().context == 'undefined') {
 		selectedFiles.set(
-			$selectedFileIds.map((fileId) => branch.files.find((f) => f.id == fileId)).filter(isDefined)
+			$selectedFileIds
+				.map((fileId) => branch.files.find((f) => f.id + '|' + undefined == fileId))
+				.filter(isDefined)
 		);
+	}
 
 	$: displayedFile = $selectedFiles.length == 1 ? $selectedFiles[0] : undefined;
 

gitbutler-ui/src/lib/components/FileListItem.svelte

@@ -84,7 +84,7 @@
 		on:keydown
 		on:dragstart={() => {
 			// Reset selection if the file being dragged is not in the selected list
-			if ($selectedFileIds.length > 0 && !$selectedFileIds.includes(file.id)) {
+			if ($selectedFileIds.length > 0 && !$fileSelection.has(file.id, $commit?.id)) {
 				$fileSelection.clear();
 				$fileSelection.add(file.id, $commit?.id);
 			}
@@ -139,15 +139,11 @@
 		text-align: left;
 		user-select: none;
 		outline: none;
-		background: var(--clr-theme-container-light);
+		background: var(--clr-container-light);
 		border: 1px solid transparent;
 
 		&:not(.selected-draggable):hover {
-			background-color: color-mix(
-				in srgb,
-				var(--clr-theme-container-light),
-				var(--darken-tint-light)
-			);
+			background-color: color-mix(in srgb, var(--clr-container-light), var(--darken-tint-light));
 		}
 	}
 
@@ -190,15 +186,11 @@
 	}
 
 	.selected-draggable {
-		background-color: var(--clr-theme-scale-pop-80);
-		border: 1px solid var(--clr-theme-container-light);
+		background-color: var(--clr-scale-pop-80);
+		border: 1px solid var(--clr-container-light);
 
 		&:hover {
-			background-color: color-mix(
-				in srgb,
-				var(--clr-theme-scale-pop-80),
-				var(--darken-tint-extralight)
-			);
+			background-color: color-mix(in srgb, var(--clr-scale-pop-80), var(--darken-tint-extralight));
 		}
 	}
 </style>

gitbutler-ui/src/lib/dragging/draggable.ts

@@ -223,11 +223,14 @@ export function draggable(node: HTMLElement, opts: DraggableConfig) {
 	}
 
 	const viewport = opts.viewportId ? document.getElementById(opts.viewportId) : null;
-	const triggerRange = 100;
-	const scrollSpeed = 5;
+	const triggerRange = (viewport?.clientWidth || 500) / 4;
+	const scrollSpeed = (viewport?.clientWidth || 500) / 2;
+	let lastDrag = new Date().getTime();
 
 	function handleDrag(e: DragEvent) {
 		if (!viewport) return;
+		if (new Date().getTime() - lastDrag < 500) return;
+		lastDrag = new Date().getTime();
 
 		const viewportWidth = viewport.clientWidth;
 		const relativeX = e.clientX - viewport.getBoundingClientRect().left;

gitbutler-ui/src/lib/utils/selectFilesInList.ts

@@ -14,22 +14,22 @@ export function selectFilesInList(
 	e.stopPropagation();
 	const isAlreadySelected = selectedFileIds && fileSelection.has(file.id, commit?.id);
 
-	// Ctrl + Click or Cmd + Click to select multiple files
 	if (e.ctrlKey || e.metaKey) {
-		// if file is already selected, unselect it
 		if (isAlreadySelected) {
 			fileSelection.remove(file.id, commit?.id);
 		} else {
 			fileSelection.add(file.id, commit?.id);
 		}
-	}
-	// Shift + Click to select range
-	else if (e.shiftKey && allowMultiple) {
-		const initiallySelectedIndex = sortedFiles.findIndex((f) => f.id == selectedFileIds[0]);
+	} else if (e.shiftKey && allowMultiple) {
+		const initiallySelectedIndex = sortedFiles.findIndex(
+			(f) => f.id + '|' + undefined == selectedFileIds[0]
+		);
 
 		// detect the direction of the selection
 		const selectionDirection =
-			initiallySelectedIndex < sortedFiles.findIndex((f) => f.id == file.id) ? 'down' : 'up';
+			initiallySelectedIndex < sortedFiles.findIndex((f) => f.id == file.id + '|' + commit?.id)
+				? 'down'
+				: 'up';
 
 		const updatedSelection = sortedFiles.slice(
 			Math.min(
@@ -42,20 +42,18 @@ export function selectFilesInList(
 			) + 1
 		);
 
-		selectedFileIds = updatedSelection.map((f) => f.id);
+		selectedFileIds = updatedSelection.map((f) => f.id + '|' + commit?.id);
 
 		if (selectionDirection === 'down') {
 			selectedFileIds = selectedFileIds.reverse();
 		}
-	}
-	// select only one file
-	else {
+		fileSelection.set(selectedFileIds);
+	} else {
 		// if only one file is selected and it is already selected, unselect it
 		if (selectedFileIds.length == 1 && isAlreadySelected) {
-			selectedFileIds = [];
+			fileSelection.clear();
 		} else {
-			selectedFileIds = [file.id];
+			fileSelection.set([file.id + '|' + commit?.id]);
 		}
 	}
-	fileSelection.set(selectedFileIds);
 }

gitbutler-ui/src/lib/vbranches/fileSelection.ts

@@ -11,16 +11,16 @@ export class FileSelection {
 	constructor() {}
 
 	add(fileId: string, context?: string) {
-		this._fileIds.add(context ? fileId + '|' + context : fileId);
+		this._fileIds.add(fileId + '|' + context);
 		this.fileIds.set([...this._fileIds.values()]);
 	}
 
 	has(fileId: string, context?: string) {
-		return this._fileIds.has(context ? fileId + '|' + context : fileId);
+		return this._fileIds.has(fileId + '|' + context);
 	}
 
 	remove(fileId: string, context?: string) {
-		this._fileIds.delete(context ? fileId + '|' + context : fileId);
+		this._fileIds.delete(fileId + '|' + context);
 		this.fileIds.set([...this._fileIds.values()]);
 	}
 

gitbutler-ui/src/routes/[projectId]/board/+page.svelte

@@ -35,13 +35,12 @@
 </script>
 
 <div class="board-wrapper">
-	<div class="scroll-viewport hide-native-scrollbar" bind:this={viewport}>
+	<div class="scroll-viewport hide-native-scrollbar" id="board-viewport" bind:this={viewport}>
 		<div class="scroll-contents" bind:this={contents}>
 			<Board />
 		</div>
 		<Scrollbar {viewport} {contents} horz zIndex={50} />
 	</div>
-	<Scrollbar {viewport} {contents} horz zIndex={50} />
 </div>
 
 <style lang="postcss">
@@ -58,6 +57,7 @@
 		overflow-x: scroll;
 		height: 100%;
 		width: 100%;
+		scroll-behavior: smooth !important;
 	}
 	.scroll-contents {
 		display: flex;