From 9414437353cc43dd4b0325038fa66d4a6594712c Mon Sep 17 00:00:00 2001
From: Caleb Owens <hello@calebowens.com>
Date: Wed, 30 Oct 2024 10:37:51 +0000
Subject: [PATCH] Start showing diffs

---
 .../patches/[changeId]/+page.svelte           |  7 ++++
 .../cloud/patches/CloudPatchDetails.svelte    |  4 +--
 .../cloud/patches/CloudPatchSections.svelte   | 36 +++++++++++++++++++
 .../src/lib/cloud/patches/DiffSection.svelte  | 22 ++++++++++++
 packages/shared/src/lib/cloud/types.ts        |  4 +--
 5 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 packages/shared/src/lib/cloud/patches/CloudPatchSections.svelte
 create mode 100644 packages/shared/src/lib/cloud/patches/DiffSection.svelte

diff --git a/apps/desktop/src/routes/[projectId]/series/branches/[cloudBranchId]/patches/[changeId]/+page.svelte b/apps/desktop/src/routes/[projectId]/series/branches/[cloudBranchId]/patches/[changeId]/+page.svelte
index b21e74fed5..aaa84f9850 100644
--- a/apps/desktop/src/routes/[projectId]/series/branches/[cloudBranchId]/patches/[changeId]/+page.svelte
+++ b/apps/desktop/src/routes/[projectId]/series/branches/[cloudBranchId]/patches/[changeId]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CloudPatchDetails from '@gitbutler/shared/cloud/patches/CloudPatchDetails.svelte';
+	import CloudPatchSections from '@gitbutler/shared/cloud/patches/CloudPatchSections.svelte';
 	import { CloudBranchesService } from '@gitbutler/shared/cloud/stacks/service';
 	import { getContext } from '@gitbutler/shared/context';
 	import { getRoutesService } from '@gitbutler/shared/sharedRoutes';
@@ -27,6 +28,9 @@
 	<div>
 		<CloudPatchDetails />
 	</div>
+	<div>
+		<CloudPatchSections />
+	</div>
 </div>
 
 <style lang="postcss">
@@ -38,7 +42,10 @@
 		width: 100%;
 
 		margin: 24px auto;
+		margin-bottom: 0;
 
 		gap: 16px;
+
+		overflow: auto;
 	}
 </style>
diff --git a/packages/shared/src/lib/cloud/patches/CloudPatchDetails.svelte b/packages/shared/src/lib/cloud/patches/CloudPatchDetails.svelte
index 467ac02de3..52bc03f66e 100644
--- a/packages/shared/src/lib/cloud/patches/CloudPatchDetails.svelte
+++ b/packages/shared/src/lib/cloud/patches/CloudPatchDetails.svelte
@@ -4,8 +4,6 @@
 
 	const cloudPatchService = getContext(CloudPatchService);
 	const optionalPatch = cloudPatchService.patch;
-
-	$inspect(optionalPatch);
 </script>
 
 {#if $optionalPatch.state === 'uninitialized'}
@@ -44,7 +42,7 @@
 			</div>
 		</div>
 		<div class="card">
-			<p class="card__header text-15 text-bold">Reviews (all versions):</p>
+			<p class="card__header text-15 text-bold">Reviews (all revisions):</p>
 			<div class="card__content">
 				<p>Viewings: {patch.reviewAll.viewed}</p>
 				<p>Sign offs: {patch.reviewAll.signedOff}</p>
diff --git a/packages/shared/src/lib/cloud/patches/CloudPatchSections.svelte b/packages/shared/src/lib/cloud/patches/CloudPatchSections.svelte
new file mode 100644
index 0000000000..b77779ba92
--- /dev/null
+++ b/packages/shared/src/lib/cloud/patches/CloudPatchSections.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import DiffSection from '$lib/cloud/patches/DiffSection.svelte';
+	import { CloudPatchService } from '$lib/cloud/patches/service';
+	import { getContext } from '$lib/context';
+
+	const cloudPatchService = getContext(CloudPatchService);
+	const optionalPatch = cloudPatchService.patch;
+</script>
+
+{#if $optionalPatch.state === 'uninitialized'}
+	<p>Loading...</p>
+{:else if $optionalPatch.state === 'not-found'}
+	<p>Failed to find patch</p>
+{:else if $optionalPatch.state === 'found'}
+	{@const patch = $optionalPatch.value}
+
+	<h1 class="text-head-24 padding-bottom">{patch.title}</h1>
+
+	{#each patch.sections as section}
+		{#if section.sectionType === 'diff'}
+			<DiffSection diffSection={section} />
+		{/if}
+	{/each}
+{/if}
+
+<style lang="postcss">
+	.padding-bottom {
+		margin-bottom: 16px;
+	}
+
+	.two-by-two {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 8px;
+	}
+</style>
diff --git a/packages/shared/src/lib/cloud/patches/DiffSection.svelte b/packages/shared/src/lib/cloud/patches/DiffSection.svelte
new file mode 100644
index 0000000000..11bc7190bb
--- /dev/null
+++ b/packages/shared/src/lib/cloud/patches/DiffSection.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { CloudDiffSection } from '$lib/cloud/types';
+
+	interface Props {
+		diffSection: CloudDiffSection;
+	}
+
+	const { diffSection }: Props = $props();
+</script>
+
+<div class="card">
+	<p class="card__header text-15 text-bold">{diffSection.newPath || diffSection.oldPath}</p>
+	<div class="card__content no-overflow">
+		<pre>{diffSection.diffPatch}</pre>
+	</div>
+</div>
+
+<style lang="postcss">
+	.no-overflow {
+		overflow: hidden;
+	}
+</style>
diff --git a/packages/shared/src/lib/cloud/types.ts b/packages/shared/src/lib/cloud/types.ts
index f7c78fdc50..c791d84d39 100644
--- a/packages/shared/src/lib/cloud/types.ts
+++ b/packages/shared/src/lib/cloud/types.ts
@@ -139,7 +139,7 @@ interface CloudSection {
 	position?: number;
 }
 
-class CloudTextSection implements CloudSection {
+export class CloudTextSection implements CloudSection {
 	id: number;
 	sectionType: 'text' = 'text' as const;
 	identifier?: string | undefined;
@@ -164,7 +164,7 @@ class CloudTextSection implements CloudSection {
 		this.data = apiTextSection.data;
 	}
 }
-class CloudDiffSection implements CloudSection {
+export class CloudDiffSection implements CloudSection {
 	id: number;
 	sectionType: 'diff' = 'diff' as const;
 	identifier?: string | undefined;