feat: add ImageDiff component to load and show before/after images

apps/desktop/src/components/ImageDiff.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+	import { FILE_SERVICE } from '$lib/files/fileService';
+	import { inject } from '@gitbutler/core/context';
+	import type { TreeChange } from '$lib/hunks/change';
+
+	type Props = {
+		projectId: string;
+		change: TreeChange;
+		/** If provided, this is a commit diff (not a workspace diff). */
+		commitId?: string;
+	};
+
+	type ImageSource =
+		| { type: 'workspace'; path: string }
+		| { type: 'commit'; path: string; commitId: string }
+		| { type: 'blob'; path: string; blobId: string };
+
+	type LoadStrategy = {
+		before: ImageSource | null;
+		after: ImageSource | null;
+	};
+
+	const { projectId, change, commitId }: Props = $props();
+	const fileService = inject(FILE_SERVICE);
+
+	let beforeImageUrl = $state<string | null>(null);
+	let afterImageUrl = $state<string | null>(null);
+	let loadError = $state<string | null>(null);
+
+	// Decide image sources for before/after panels without changing logic.
+	function getLoadStrategy(): LoadStrategy {
+		const { status, path } = change;
+		const isCommitDiff = !!commitId;
+
+		switch (status.type) {
+			case 'Addition':
+				return isCommitDiff
+					? { before: null, after: { type: 'commit' as const, path, commitId: commitId! } }
+					: { before: null, after: { type: 'workspace' as const, path } };
+
+			case 'Deletion':
+				return isCommitDiff
+					? { before: { type: 'commit' as const, path, commitId: `${commitId}^` }, after: null }
+					: {
+							before: { type: 'blob' as const, path, blobId: status.subject.previousState.id },
+							after: null
+						};
+
+			case 'Modification':
+				return isCommitDiff
+					? {
+							before: { type: 'commit' as const, path, commitId: `${commitId}^` },
+							after: { type: 'commit' as const, path, commitId: commitId! }
+						}
+					: {
+							before: { type: 'blob' as const, path, blobId: status.subject.previousState.id },
+							after: { type: 'workspace' as const, path }
+						};
+
+			case 'Rename':
+				return isCommitDiff
+					? {
+							before: {
+								type: 'commit' as const,
+								path: status.subject.previousPath,
+								commitId: `${commitId}^`
+							},
+							after: { type: 'commit' as const, path, commitId: commitId! }
+						}
+					: {
+							before: {
+								type: 'blob' as const,
+								path: status.subject.previousPath,
+								blobId: status.subject.previousState.id
+							},
+							after: { type: 'workspace' as const, path }
+						};
+		}
+	}
+
+	// Load image from workspace, commit, or blob.
+	async function loadImage(source: ImageSource | null): Promise<string | null> {
+		if (!source) return null;
+
+		try {
+			let fileInfo;
+
+			if (source.type === 'workspace') {
+				const { data } = await fileService.readFromWorkspace(source.path, projectId);
+				fileInfo = data;
+			} else if (source.type === 'commit') {
+				fileInfo = await fileService.readFromCommit(source.path, projectId, source.commitId);
+			} else {
+				// type === 'blob'
+				fileInfo = await fileService.readFromBlob(source.path, projectId, source.blobId);
+			}
+
+			if (fileInfo?.content && fileInfo?.mimeType) {
+				return `data:${fileInfo.mimeType};base64,${fileInfo.content}`;
+			}
+
+			return null;
+		} catch (err) {
+			console.warn(`Failed to load image from ${source.type}: ${source.path}`, err);
+			return null;
+		}
+	}
+
+	// Load both images according to the strategy.
+	async function loadImages() {
+		loadError = null;
+		beforeImageUrl = null;
+		afterImageUrl = null;
+
+		try {
+			const strategy = getLoadStrategy();
+
+			const [before, after] = await Promise.all([
+				loadImage(strategy.before),
+				loadImage(strategy.after)
+			]);
+
+			beforeImageUrl = before;
+			afterImageUrl = after;
+
+			if (!before && !after) {
+				loadError = 'Failed to load images';
+			}
+		} catch (err) {
+			console.error('Failed to load images:', err);
+			loadError = 'Failed to load images';
+		}
+	}
+
+	$effect(() => {
+		loadImages();
+	});
+</script>
+
+{#if loadError}
+	<div class="error-message">
+		<p>{loadError}</p>
+	</div>
+{:else}
+	<div class="image-diff-container">
+		{#if beforeImageUrl || afterImageUrl}
+			<div class="image-comparison">
+				{#if beforeImageUrl}
+					<div class="image-panel before">
+						<div class="image-header">
+							<span class="label">Before</span>
+						</div>
+						<div class="image-wrapper">
+							<img src={beforeImageUrl} alt="Before" />
+						</div>
+					</div>
+				{/if}
+
+				{#if afterImageUrl}
+					<div class="image-panel after">
+						<div class="image-header">
+							<span class="label">After</span>
+						</div>
+						<div class="image-wrapper">
+							<img src={afterImageUrl} alt="After" />
+						</div>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="loading">Loading images...</div>
+		{/if}
+	</div>
+{/if}
+
+<style lang="postcss">
+	.error-message {
+		padding: 20px;
+		color: var(--clr-scale-warn-40);
+		text-align: center;
+	}
+
+	.image-diff-container {
+		padding: 14px;
+		border: 1px solid var(--clr-border-3);
+		border-radius: var(--radius-m);
+		background: var(--clr-bg-2);
+	}
+
+	.image-comparison {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 14px;
+	}
+
+	.image-panel {
+		overflow: hidden;
+		border-radius: var(--radius-s);
+		background: var(--clr-bg-1);
+
+		&.before {
+			border: 2px solid var(--clr-scale-err-40);
+		}
+
+		&.after {
+			border: 2px solid var(--clr-scale-succ-40);
+		}
+	}
+
+	.image-header {
+		padding: 8px 12px;
+		font-weight: 600;
+		font-size: 12px;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+
+		.before & {
+			background: var(--clr-scale-err-40);
+			color: var(--clr-core-ntrl-100);
+		}
+
+		.after & {
+			background: var(--clr-scale-succ-40);
+			color: var(--clr-core-ntrl-100);
+		}
+	}
+
+	.label {
+		display: inline-block;
+	}
+
+	.image-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 200px;
+		padding: 14px;
+		background-image:
+			linear-gradient(45deg, var(--clr-bg-3) 25%, transparent 25%),
+			linear-gradient(-45deg, var(--clr-bg-3) 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, var(--clr-bg-3) 75%),
+			linear-gradient(-45deg, transparent 75%, var(--clr-bg-3) 75%);
+		background-position:
+			0 0,
+			0 10px,
+			10px -10px,
+			-10px 0px;
+		background-size: 20px 20px;
+	}
+
+	.image-wrapper img {
+		display: block;
+		max-width: 100%;
+		max-height: 600px;
+		object-fit: contain;
+		border-radius: var(--radius-s);
+	}
+
+	.loading {
+		padding: 40px;
+		color: var(--clr-scale-ntrl-50);
+		text-align: center;
+	}
+</style>

apps/desktop/src/components/UnifiedDiffView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import HunkContextMenu from '$components/HunkContextMenu.svelte';
+	import ImageDiff from '$components/ImageDiff.svelte';
 	import LargeDiffMessage from '$components/LargeDiffMessage.svelte';
 	import LineLocksWarning from '$components/LineLocksWarning.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
@@ -86,6 +87,23 @@
 
 	const assignments = $derived(uncommittedService.assignmentsByPath(stackId || null, change.path));
 
+	function isImageFile(path: string): boolean {
+		const imageExtensions = [
+			'.png',
+			'.jpg',
+			'.jpeg',
+			'.gif',
+			'.webp',
+			'.bmp',
+			'.ico',
+			'.heic',
+			'.heif',
+			'.avif'
+		];
+		const lowerPath = path.toLowerCase();
+		return imageExtensions.some((ext) => lowerPath.endsWith(ext));
+	}
+
 	function filter(hunks: DiffHunk[]): DiffHunk[] {
 		if (selectionId.type !== 'worktree') return hunks;
 		// TODO: It does concern me that this is an N+1;
@@ -317,13 +335,17 @@
 				</EmptyStatePlaceholder>
 			</div>
 		{:else if diff.type === 'Binary'}
-			<div class="hunk-placehoder">
-				<EmptyStatePlaceholder image={binarySvg} gap={12} topBottomPadding={34}>
-					{#snippet caption()}
-						Binary! Not for human eyes
-					{/snippet}
-				</EmptyStatePlaceholder>
-			</div>
+			{#if isImageFile(change.path)}
+				<ImageDiff {projectId} {change} {commitId} />
+			{:else}
+				<div class="hunk-placehoder">
+					<EmptyStatePlaceholder image={binarySvg} gap={12} topBottomPadding={34}>
+						{#snippet caption()}
+							Binary! Not for human eyes
+						{/snippet}
+					</EmptyStatePlaceholder>
+				</div>
+			{/if}
 		{/if}
 	</div>
 {/snippet}

apps/desktop/src/lib/files/fileService.ts

@@ -26,6 +26,22 @@ export class FileService {
 		};
 	}
 
+	async readFromCommit(filePath: string, projectId: string, commitId: string): Promise<FileInfo> {
+		return await this.backend.invoke('get_commit_file', {
+			relativePath: filePath,
+			projectId: projectId,
+			commitId: commitId
+		});
+	}
+
+	async readFromBlob(filePath: string, projectId: string, blobId: string): Promise<FileInfo> {
+		return await this.backend.invoke('get_blob_file', {
+			relativePath: filePath,
+			projectId: projectId,
+			blobId: blobId
+		});
+	}
+
 	async readFile(path: string): Promise<Uint8Array> {
 		return await this.backend.readFile(path);
 	}

crates/but-api/src/legacy/repo.rs

@@ -73,8 +73,16 @@ pub fn get_commit_file(
     commit_id: String,
 ) -> Result<FileInfo> {
     let project = gitbutler_project::get(project_id)?;
-    let commit_id = git2::Oid::from_str(&commit_id).map_err(anyhow::Error::from)?;
-    project.read_file_from_commit(commit_id, &relative_path)
+
+    let commit_oid = if let Ok(oid) = git2::Oid::from_str(&commit_id) {
+        oid
+    } else {
+        // Support refs like "HEAD" by resolving with gix
+        let repo = project.open_repo()?;
+        repo.rev_parse_single(commit_id.as_bytes())?.to_git2()
+    };
+
+    project.read_file_from_commit(commit_oid, &relative_path)
 }
 
 #[but_api]
@@ -84,6 +92,24 @@ pub fn get_workspace_file(project_id: ProjectId, relative_path: PathBuf) -> Resu
     project.read_file_from_workspace(&relative_path)
 }
 
+#[but_api]
+#[instrument(err(Debug))]
+pub fn get_blob_file(
+    project_id: ProjectId,
+    relative_path: PathBuf,
+    blob_id: String,
+) -> Result<FileInfo> {
+    let project = gitbutler_project::get(project_id)?;
+    let repo = project.open_repo()?;
+
+    let oid = gix::ObjectId::from_hex(blob_id.as_bytes()).context("Failed to parse blob ID")?;
+
+    let object = repo.find_object(oid).context("Failed to find blob")?;
+    let blob = object.try_into_blob()?;
+
+    Ok(FileInfo::from_content(&relative_path, &blob.data))
+}
+
 #[but_api]
 #[instrument(err(Debug))]
 pub fn pre_commit_hook(

crates/but-server/src/lib.rs

@@ -346,6 +346,7 @@ async fn handle_command(
         "get_uncommited_files" => legacy::repo::get_uncommited_files_cmd(request.params),
         "get_commit_file" => legacy::repo::get_commit_file_cmd(request.params),
         "get_workspace_file" => legacy::repo::get_workspace_file_cmd(request.params),
+        "get_blob_file" => legacy::repo::get_blob_file_cmd(request.params),
         "find_files" => legacy::repo::find_files_cmd(request.params),
         "pre_commit_hook" => legacy::repo::pre_commit_hook_cmd(request.params),
         "pre_commit_hook_diffspecs" => legacy::repo::pre_commit_hook_diffspecs_cmd(request.params),