From 2edf730e783db3ee28ff89de618d4f333f87479f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 20 Feb 2025 14:32:06 -0600
Subject: [PATCH] Extract Changes section into a separate component

---
 src/components/Changes.svelte  | 146 +++++++++++++++++++++++++++++++++
 src/components/Revision.svelte | 118 +-------------------------
 2 files changed, 149 insertions(+), 115 deletions(-)
 create mode 100644 src/components/Changes.svelte

diff --git a/src/components/Changes.svelte b/src/components/Changes.svelte
new file mode 100644
index 000000000..2b04eed77
--- /dev/null
+++ b/src/components/Changes.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+  import type { Commit } from "@bindings/repo/Commit";
+  import type { Diff } from "@bindings/diff/Diff";
+  import type { Revision } from "@bindings/cob/patch/Revision";
+
+  import { invoke } from "@app/lib/invoke";
+
+  import Changeset from "@app/components/Changeset.svelte";
+  import CobCommitTeaser from "./CobCommitTeaser.svelte";
+  import CommitsContainer from "@app/components/CommitsContainer.svelte";
+  import Icon from "@app/components/Icon.svelte";
+  import Id from "./Id.svelte";
+  import NakedButton from "@app/components/NakedButton.svelte";
+
+  interface Props {
+    rid: string;
+    patchId: string;
+    revision: Revision;
+  }
+
+  /* eslint-disable prefer-const */
+  let { rid, patchId, revision }: Props = $props();
+  /* eslint-enable prefer-const */
+
+  let hideChanges = $state(false);
+  let filesExpanded = $state(true);
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    patchId;
+
+    hideChanges = false;
+  });
+
+  async function loadHighlightedDiff(rid: string, base: string, head: string) {
+    return invoke<Diff>("get_diff", {
+      rid,
+      options: {
+        base,
+        head,
+        unified: 5,
+        highlight: true,
+      },
+    });
+  }
+
+  async function loadCommits(rid: string, base: string, head: string) {
+    return invoke<Commit[]>("list_commits", {
+      rid,
+      base,
+      head,
+    });
+  }
+</script>
+
+<style>
+  .commits {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.875rem;
+    margin-left: 0.5rem;
+    gap: 0.5rem;
+    padding: 1rem 0.5rem 0.5rem 1rem;
+    border-left: 1px solid var(--color-fill-separator);
+  }
+  .commit:last-of-type::after {
+    content: "";
+    position: absolute;
+    left: -18.5px;
+    top: 14px;
+    bottom: -0.5rem;
+    border-left: 4px solid var(--color-background-default);
+  }
+  .commit-dot {
+    width: 4px;
+    height: 4px;
+    position: absolute;
+    top: 0.625rem;
+    left: -18.5px;
+    background-color: var(--color-fill-separator);
+  }
+  .hide {
+    display: none;
+  }
+</style>
+
+<div
+  class="txt-semibold global-flex"
+  style:margin-bottom={hideChanges ? undefined : "1rem"}>
+  <NakedButton variant="ghost" onclick={() => (hideChanges = !hideChanges)}>
+    <Icon name={hideChanges ? "chevron-right" : "chevron-down"} />
+    <div class="txt-semibold global-flex txt-regular">Changes</div>
+  </NakedButton>
+  {#if !hideChanges}
+    <div style:margin-left="auto">
+      <NakedButton
+        variant="ghost"
+        onclick={() => (filesExpanded = !filesExpanded)}>
+        {#if filesExpanded === true}
+          <Icon name="collapse" />
+          Collapse all
+        {:else}
+          <Icon name="expand" />
+          Expand all
+        {/if}
+      </NakedButton>
+    </div>
+  {/if}
+</div>
+
+<div class:hide={hideChanges}>
+  {#await loadCommits(rid, revision.base, revision.head) then commits}
+    <div style:margin-bottom="1rem">
+      <CommitsContainer expanded={filesExpanded}>
+        {#snippet leftHeader()}
+          <div class="txt-semibold">Commits</div>
+        {/snippet}
+        {#snippet children()}
+          <div style:padding="0 1rem">
+            <div
+              class="global-flex txt-small"
+              style:color="var(--color-foreground-dim)">
+              <Icon name="branch" /><Id id={revision.base} variant="commit" />
+              <div class="global-counter">base</div>
+            </div>
+            <div class="commits">
+              {#each commits.reverse() as commit}
+                <div class="commit" style:position="relative">
+                  <div class="commit-dot"></div>
+                  <CobCommitTeaser {commit} />
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/snippet}
+      </CommitsContainer>
+    </div>
+  {/await}
+
+  {#await loadHighlightedDiff(rid, revision.base, revision.head)}
+    <span class="txt-small">Loading…</span>
+  {:then diff}
+    <Changeset {diff} repoId={rid} expanded={filesExpanded} />
+  {/await}
+</div>
diff --git a/src/components/Revision.svelte b/src/components/Revision.svelte
index 10c5fd653..9bf95ad39 100644
--- a/src/components/Revision.svelte
+++ b/src/components/Revision.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import type { Author } from "@bindings/cob/Author";
-  import type { Commit } from "@bindings/repo/Commit";
   import type { Config } from "@bindings/config/Config";
-  import type { Diff } from "@bindings/diff/Diff";
   import type { Embed } from "@bindings/cob/thread/Embed";
   import type { PatchStatus } from "@app/views/repo/router";
   import type { Revision } from "@bindings/cob/patch/Revision";
@@ -18,14 +16,11 @@
   import { didFromPublicKey, publicKeyFromDid } from "@app/lib/utils";
 
   import Button from "@app/components/Button.svelte";
-  import Changeset from "@app/components/Changeset.svelte";
-  import CobCommitTeaser from "./CobCommitTeaser.svelte";
+  import Changes from "@app/components/Changes.svelte";
   import CommentComponent from "@app/components/Comment.svelte";
-  import CommitsContainer from "@app/components/CommitsContainer.svelte";
   import Discussion from "./Discussion.svelte";
   import Icon from "@app/components/Icon.svelte";
-  import Id from "./Id.svelte";
-  import NakedButton from "./NakedButton.svelte";
+  import NakedButton from "@app/components/NakedButton.svelte";
   import ReviewTeaser from "@app/components/ReviewTeaser.svelte";
 
   interface Props {
@@ -52,11 +47,9 @@
     ),
   );
 
-  let hideChanges = $state(false);
   let hideReviews = $state(
     revision.reviews === undefined || revision.reviews.length === 0,
   );
-  let filesExpanded = $state(true);
 
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -64,7 +57,6 @@
 
     hideReviews =
       revision.reviews === undefined || revision.reviews.length === 0;
-    hideChanges = false;
   });
 
   const commentThreads = $derived(
@@ -226,26 +218,6 @@
       await reload();
     }
   }
-
-  async function loadHighlightedDiff(rid: string, base: string, head: string) {
-    return invoke<Diff>("get_diff", {
-      rid,
-      options: {
-        base,
-        head,
-        unified: 5,
-        highlight: true,
-      },
-    });
-  }
-
-  async function loadCommits(rid: string, base: string, head: string) {
-    return invoke<Commit[]>("list_commits", {
-      rid,
-      base,
-      head,
-    });
-  }
 </script>
 
 <style>
@@ -269,32 +241,6 @@
   .hide {
     display: none;
   }
-  .commits {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    font-size: 0.875rem;
-    margin-left: 0.5rem;
-    gap: 0.5rem;
-    padding: 1rem 0.5rem 0.5rem 1rem;
-    border-left: 1px solid var(--color-fill-separator);
-  }
-  .commit:last-of-type::after {
-    content: "";
-    position: absolute;
-    left: -18.5px;
-    top: 14px;
-    bottom: -0.5rem;
-    border-left: 4px solid var(--color-background-default);
-  }
-  .commit-dot {
-    width: 4px;
-    height: 4px;
-    position: absolute;
-    top: 0.625rem;
-    left: -18.5px;
-    background-color: var(--color-fill-separator);
-  }
 </style>
 
 <div class="txt-small patch-body">
@@ -379,62 +325,4 @@
   {repoDelegates}
   {rid} />
 
-<div
-  class="txt-semibold global-flex"
-  style:margin-bottom={hideChanges ? undefined : "1rem"}>
-  <NakedButton variant="ghost" onclick={() => (hideChanges = !hideChanges)}>
-    <Icon name={hideChanges ? "chevron-right" : "chevron-down"} />
-    <div class="txt-semibold global-flex txt-regular">Changes</div>
-  </NakedButton>
-  {#if !hideChanges}
-    <div style:margin-left="auto">
-      <NakedButton
-        variant="ghost"
-        onclick={() => (filesExpanded = !filesExpanded)}>
-        {#if filesExpanded === true}
-          <Icon name="collapse" />
-          Collapse all
-        {:else}
-          <Icon name="expand" />
-          Expand all
-        {/if}
-      </NakedButton>
-    </div>
-  {/if}
-</div>
-
-<div class:hide={hideChanges}>
-  {#await loadCommits(rid, revision.base, revision.head) then commits}
-    <div style:margin-bottom="1rem">
-      <CommitsContainer expanded={filesExpanded}>
-        {#snippet leftHeader()}
-          <div class="txt-semibold">Commits</div>
-        {/snippet}
-        {#snippet children()}
-          <div style:padding="0 1rem">
-            <div
-              class="global-flex txt-small"
-              style:color="var(--color-foreground-dim)">
-              <Icon name="branch" /><Id id={revision.base} variant="commit" />
-              <div class="global-counter">base</div>
-            </div>
-            <div class="commits">
-              {#each commits.reverse() as commit}
-                <div class="commit" style:position="relative">
-                  <div class="commit-dot"></div>
-                  <CobCommitTeaser {commit} />
-                </div>
-              {/each}
-            </div>
-          </div>
-        {/snippet}
-      </CommitsContainer>
-    </div>
-  {/await}
-
-  {#await loadHighlightedDiff(rid, revision.base, revision.head)}
-    <span class="txt-small">Loading…</span>
-  {:then diff}
-    <Changeset {diff} repoId={rid} expanded={filesExpanded} />
-  {/await}
-</div>
+<Changes {rid} {patchId} {revision} />