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

apps/desktop/src/components/ImageDiff.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import emptyFileSvg from '$lib/assets/empty-state/empty-file.svg?raw';
+	import { FILE_SERVICE } from '$lib/files/fileService';
+	import { inject } from '@gitbutler/core/context';
+	import { ImageDiff, EmptyStatePlaceholder } from '@gitbutler/ui';
+	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);
+	let isLoading = $state<boolean>(true);
+
+	// 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.
+	 *
+	 * @param source - The image source to load.
+	 * @param signal - Optional AbortSignal. Note: The backend service methods
+	 *   (readFromWorkspace, readFromCommit, readFromBlob) do NOT support AbortSignal,
+	 *   so the actual IO operations cannot be cancelled once started. The signal is
+	 *   only used to prevent processing results after abortion, not to abort the IO itself.
+	 *
+	 * @returns A data URL string or null.
+	 *
+	 * @remarks
+	 *   This function cannot cancel backend IO operations. If abort support is needed,
+	 *   the backend service methods must be updated to accept and honor AbortSignal.
+	 *   See: https://github.com/gitbutlerapp/gitbutler/issues (file a follow-up if needed)
+	 */
+	async function loadImage(
+		source: ImageSource | null,
+		signal?: AbortSignal
+	): 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 (signal?.aborted) return null;
+
+			if (fileInfo?.content && fileInfo?.mimeType) {
+				return `data:${fileInfo.mimeType};base64,${fileInfo.content}`;
+			}
+
+			return null;
+		} catch (err) {
+			if (signal?.aborted) return null;
+			console.warn(`Failed to load image from ${source.type}: ${source.path}`, err);
+			return null;
+		}
+	}
+
+	// Load both images according to the strategy.
+	async function loadImages(signal?: AbortSignal) {
+		isLoading = true;
+		loadError = null;
+		beforeImageUrl = null;
+		afterImageUrl = null;
+
+		try {
+			const strategy = getLoadStrategy();
+
+			const [before, after] = await Promise.all([
+				loadImage(strategy.before, signal),
+				loadImage(strategy.after, signal)
+			]);
+
+			if (signal?.aborted) return;
+
+			beforeImageUrl = before;
+			afterImageUrl = after;
+
+			if (!before && !after) {
+				loadError = 'Failed to load both images (before and after).';
+			} else if (!before && strategy.before) {
+				loadError = 'Failed to load before image.';
+			} else if (!after && strategy.after) {
+				loadError = 'Failed to load after image.';
+			}
+		} catch (err) {
+			console.error('Failed to load images:', err);
+			loadError = `Failed to load images: ${err instanceof Error ? err.message : String(err)}`;
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	$effect(() => {
+		const abortController = new AbortController();
+		loadImages(abortController.signal);
+		return () => abortController.abort();
+	});
+</script>
+
+{#if loadError}
+	<div class="imagediff-placeholder">
+		<EmptyStatePlaceholder image={emptyFileSvg} gap={12} topBottomPadding={34}>
+			{#snippet caption()}
+				Can't preview this file type
+			{/snippet}
+		</EmptyStatePlaceholder>
+	</div>
+{:else}
+	<ImageDiff {beforeImageUrl} {afterImageUrl} fileName={change.path} {isLoading} />
+{/if}
+
+<style lang="scss">
+	.imagediff-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 200px;
+		border: 1px solid var(--clr-border-3);
+		border-radius: var(--radius-m);
+	}
+</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';
@@ -21,7 +22,7 @@
 	import { SETTINGS } from '$lib/settings/userSettings';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/core/context';
-
+	import { isImageFile } from '@gitbutler/shared/utils/file';
 	import { EmptyStatePlaceholder, HunkDiff, TestId } from '@gitbutler/ui';
 	import { DRAG_STATE_SERVICE } from '@gitbutler/ui/drag/dragStateService.svelte';
 	import { parseHunk } from '@gitbutler/ui/utils/diffParsing';
@@ -317,13 +318,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

@@ -1,5 +1,6 @@
 use std::path::PathBuf;
 
+use crate::json::HexHash;
 use anyhow::{Context as _, Result};
 use but_api_macros::but_api;
 use but_core::DiffSpec;
@@ -70,11 +71,10 @@ pub fn get_uncommitted_files(project_id: ProjectId) -> Result<Vec<RemoteBranchFi
 pub fn get_commit_file(
     project_id: ProjectId,
     relative_path: PathBuf,
-    commit_id: String,
+    commit_id: HexHash,
 ) -> 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)
+    project.read_file_from_commit(commit_id.0.to_git2(), &relative_path)
 }
 
 #[but_api]
@@ -84,6 +84,28 @@ pub fn get_workspace_file(project_id: ProjectId, relative_path: PathBuf) -> Resu
     project.read_file_from_workspace(&relative_path)
 }
 
+/// Retrieves file content directly from a Git blob object by its blob ID.
+///
+/// This function is used for displaying image diff previews when the file
+/// isn't available in the current workspace or a specific commit (e.g., for
+/// deleted files or when comparing against a previous state).
+///
+/// # Arguments
+/// * `blob_id` - Git blob object ID as a hexadecimal string
+#[but_api]
+#[instrument(err(Debug))]
+pub fn get_blob_file(
+    project_id: ProjectId,
+    relative_path: PathBuf,
+    blob_id: HexHash,
+) -> Result<FileInfo> {
+    let project = gitbutler_project::get(project_id)?;
+    let repo = project.open_isolated_repo()?;
+    let object = repo.find_object(blob_id).context("Failed to find blob")?;
+    let blob = object.try_into_blob().context("Object is not a 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_uncommitted_files" => legacy::repo::get_uncommitted_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),

crates/gitbutler-tauri/src/main.rs

@@ -240,6 +240,7 @@ fn main() -> anyhow::Result<()> {
                 legacy::repo::tauri_get_uncommitted_files::get_uncommitted_files,
                 legacy::repo::tauri_get_commit_file::get_commit_file,
                 legacy::repo::tauri_get_workspace_file::get_workspace_file,
+                legacy::repo::tauri_get_blob_file::get_blob_file,
                 legacy::repo::tauri_find_files::find_files,
                 legacy::repo::tauri_pre_commit_hook::pre_commit_hook,
                 legacy::repo::tauri_pre_commit_hook_diffspecs::pre_commit_hook_diffspecs,

packages/shared/src/lib/utils/file.ts

@@ -40,3 +40,21 @@ export function getFilePathInfo(filePath: string): FilePathInfo | undefined {
 
 	return { fileName, extension, directoryPath };
 }
+
+const IMAGE_EXTENSIONS = [
+	'.png',
+	'.jpg',
+	'.jpeg',
+	'.gif',
+	'.webp',
+	'.bmp',
+	'.ico',
+	'.heic',
+	'.heif',
+	'.avif'
+];
+
+export function isImageFile(path: string): boolean {
+	const lowerPath = path.toLowerCase();
+	return IMAGE_EXTENSIONS.some((ext) => lowerPath.endsWith(ext));
+}

packages/ui/src/lib/components/EmptyStatePlaceholder.svelte

@@ -96,7 +96,7 @@
 	}
 
 	.empty-state__caption {
-		color: var(--clr-scale-ntrl-50);
+		color: var(--clr-text-2);
 		opacity: 0.6;
 	}