Start showing diffs

gitbutlerapp · Oct 30, 2024 · 9414437 · 9414437
1 parent 7a0bd28
commit 9414437
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 5 deletions.
diff --git a/...op/src/routes/[projectId]/series/branches/[cloudBranchId]/patches/[changeId]/+page.svelte b/...op/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
@@ -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
@@ -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
@@ -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
@@ -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;