Fix history page performance issue

Looks like code was in need of a bit of love.

Author: mtsgrd

apps/desktop/src/components/FileList.svelte

@@ -36,7 +36,7 @@
 		draggableFiles?: boolean;
 		ancestorMostConflictedCommitId?: string;
 		hideLastFileBorder?: boolean;
-		onselect?: () => void;
+		onselect?: (change: TreeChange) => void;
 	};
 
 	const {
@@ -182,7 +182,7 @@
 		if (e.key === 'Enter' || e.key === ' ' || e.key === 'l') {
 			e.stopPropagation();
 			selectFilesInList(e, change, changes, idSelection, selectedFileIds, true, idx, selectionId);
-			onselect?.();
+			onselect?.(change);
 			return true;
 		}
 
@@ -251,7 +251,7 @@
 		onclick={(e) => {
 			e.stopPropagation();
 			selectFilesInList(e, change, changes, idSelection, selectedFileIds, true, idx, selectionId);
-			onselect?.();
+			onselect?.(change);
 		}}
 		{conflictEntries}
 	/>

apps/desktop/src/components/FileListItemWrapper.svelte

@@ -110,7 +110,7 @@
 
 	async function onContextMenu(e: MouseEvent) {
 		const changes = await idSelection.treeChanges(projectId, selectionId);
-		if (idSelection.has(change.path, selectionId)) {
+		if (idSelection.has(change.path, selectionId) && changes.length > 0) {
 			contextMenu?.open(e, { changes });
 			return;
 		}

apps/desktop/src/components/SnapshotAttachment.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Icon } from '@gitbutler/ui';
 	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 
 	interface Props {
@@ -20,24 +19,6 @@
 
 	let isOpen: boolean = $state(false);
 	let el = $state<HTMLElement>();
-
-	let contentHeight = $state<string>();
-
-	function setHeight() {
-		contentHeight = `calc(${pxToRem(el?.scrollHeight ?? 0)}rem + ${pxToRem(8)}rem)`;
-	}
-
-	onMount(() => {
-		if (!foldable) return;
-
-		setHeight();
-	});
-
-	$effect(() => {
-		if (el) {
-			setHeight();
-		}
-	});
 </script>
 
 <div class="snapshot-attachment">
@@ -51,7 +32,7 @@
 			}
 		}}
 		class="snapshot-attachment__content"
-		style="max-height: {foldable ? (isOpen ? contentHeight : foldedHeight) : 'auto'}"
+		style="max-height: {foldable ? (isOpen ? pxToRem(300) + 'rem' : foldedHeight) : 'auto'}"
 	>
 		{@render children?.()}
 	</div>

apps/desktop/src/components/SnapshotCard.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import FileList from '$components/FileList.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import SnapshotAttachment from '$components/SnapshotAttachment.svelte';
 	import { createdOnDay, HISTORY_SERVICE } from '$lib/history/history';
 	import { MODE_SERVICE } from '$lib/mode/modeService';
 	import { toHumanReadableTime } from '$lib/utils/time';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Icon, FileListItem } from '@gitbutler/ui';
+	import { Button, Icon, ScrollableContainer } from '@gitbutler/ui';
 	import { focusable } from '@gitbutler/ui/focus/focusable';
 	import type { Snapshot, SnapshotDetails } from '$lib/history/types';
 	import type iconsJson from '@gitbutler/ui/data/icons.json';
@@ -15,23 +16,10 @@
 		isWithinRestore?: boolean;
 		onRestoreClick: () => void;
 		onDiffClick: (filePath: string) => void;
-		selectedFile?:
-			| {
-					entryId: string;
-					path: string;
-			  }
-			| undefined;
 		projectId: string;
 	}
 
-	const {
-		projectId,
-		entry,
-		isWithinRestore = true,
-		selectedFile = undefined,
-		onRestoreClick,
-		onDiffClick
-	}: Props = $props();
+	const { projectId, entry, isWithinRestore = true, onRestoreClick, onDiffClick }: Props = $props();
 
 	function getShortSha(sha: string | undefined) {
 		if (!sha) return '';
@@ -223,25 +211,22 @@
 		<ReduxResult result={snapshotDiff.result} {projectId}>
 			{#snippet children(files)}
 				{#if files.length > 0 && !isRestoreSnapshot}
-					<SnapshotAttachment foldable={files.length > 2} foldedAmount={files.length}>
-						<div class="files-attacment" use:focusable={{ vertical: true }}>
-							{#each files as file, idx}
-								<div
-									use:focusable={{
-										focusable: true,
-										onActive: () => onDiffClick(file.path)
-									}}
-								>
-									<FileListItem
-										listMode="list"
-										filePath={file.path}
-										selected={selectedFile?.path === file.path &&
-											selectedFile?.entryId === entry.id}
-										hideBorder={idx === files.length - 1}
-									/>
-								</div>
-							{/each}
-						</div>
+					<SnapshotAttachment
+						foldable={files.length > 2}
+						foldedAmount={files.length}
+						foldedHeight="7rem"
+					>
+						<ScrollableContainer>
+							<FileList
+								selectionId={{ type: 'snapshot', snapshotId: entry.id }}
+								{projectId}
+								stackId={undefined}
+								changes={files}
+								listMode="list"
+								hideLastFileBorder={false}
+								onselect={(change) => onDiffClick(change.path)}
+							/>
+						</ScrollableContainer>
 					</SnapshotAttachment>
 				{/if}
 			{/snippet}
@@ -386,12 +371,6 @@
 		white-space: nowrap;
 	}
 
-	/* ATTACHMENT FILES */
-	.files-attacment {
-		display: flex;
-		flex-direction: column;
-	}
-
 	/* ATTACHMENT RESTORE */
 	.restored-attacment {
 		display: flex;

apps/desktop/src/lib/selection/fileSelectionManager.svelte.ts

@@ -164,7 +164,17 @@ export class FileSelectionManager {
 			case 'commit':
 				return await this.stackService.commitChangesByPaths(projectId, params.commitId, paths);
 			case 'snapshot':
-				throw new Error('unsupported');
+				// TODO: Use the commented out code once back end support restored!
+				// Without this we can't show a multi file context menu for snapshots.
+				// if (paths[0]) {
+				// 	const change = await this.oplogService.fetchDiffWorktreeByPath({
+				// 		projectId,
+				// 		snapshotId: params.snapshotId,
+				// 		path: paths[0]
+				// 	});
+				// 	return change ? [change] : [];
+				// }
+				return [];
 		}
 	}
 

apps/desktop/src/routes/[projectId]/history/+page.svelte

@@ -70,17 +70,6 @@
 		return ranges.map((snapshot) => snapshot.id);
 	}
 
-	async function updateFilePreview(entry: Snapshot, path: string) {
-		const selectionId = createSnapshotSelection({ snapshotId: entry.id });
-		// Get the diff data to find the file index
-		const diffs = await historyService.getSnapshotDiff(projectId, entry.id);
-		const fileIndex = diffs.findIndex((tc) => tc.path === path);
-		if (fileIndex === -1) return;
-
-		idSelection.set(path, selectionId, fileIndex);
-		currentSelectionId = selectionId;
-	}
-
 	let scrollContainer: HTMLDivElement | undefined = $state();
 </script>
 
@@ -126,28 +115,17 @@
 						{#if entry.details}
 							<SnapshotCard
 								{projectId}
-								isWithinRestore={withinRestoreItems.includes(entry.id)}
 								{entry}
+								isWithinRestore={withinRestoreItems.includes(entry.id)}
 								onRestoreClick={() => {
 									historyService.restoreSnapshot(projectId, entry.id);
 									// In some cases, restoring the snapshot doesnt update the UI correctly
 									// Until we have that figured out, we need to reload the page.
 									location.reload();
 								}}
-								onDiffClick={(path) => {
-									if (
-										selectedFile?.path === path &&
-										selectedFile?.type === 'snapshot' &&
-										selectedFile.snapshotId === entry.id
-									) {
-										currentSelectionId = undefined;
-									} else {
-										updateFilePreview(entry, path);
-									}
+								onDiffClick={() => {
+									currentSelectionId = createSnapshotSelection({ snapshotId: entry.id });
 								}}
-								selectedFile={currentSelectionId && selectedFile && selectedFile.type === 'snapshot'
-									? { entryId: selectedFile.snapshotId, path: selectedFile.path }
-									: undefined}
 							/>
 						{/if}
 					{/each}