Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract Changes section into a separate component
Rūdolfs Ošiņš committed 1 year ago
commit 2edf730e783db3ee28ff89de618d4f333f87479f
parent 7cf21972cdcfecf235700519d6e1cc85d7c89bc1
2 files changed +149 -115
added 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>
modified 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} />