Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › 4fd016d
Fix copyable Id reactivity
Rūdolfs Ošiņš committed 9 months ago
commit 4fd016de9ecdfdd5733f1c463d09f55e3e632451
parent 0936d7f
11 files changed +55 -40
modified src/components/Changes.svelte
@@ -170,6 +170,7 @@
            {pluralize("commit", commits.length)} on base

            <Id

              id={revision.base}
+ 
              clipboard={revision.base}

              variant={selectedCommit ? "none" : "commit"} />

            <div class="global-counter">Base</div>

          </div>
modified src/components/CobCommitTeaser.svelte
@@ -100,7 +100,10 @@
  </div>

  <div class="right">

    <CompactCommitAuthorship {commit}>
- 
      <Id id={commit.id} variant={disabled ? "none" : "commit"} />
+ 
      <Id
+ 
        id={commit.id}
+ 
        clipboard={commit.id}
+ 
        variant={disabled ? "none" : "commit"} />

    </CompactCommitAuthorship>

  </div>

</div>
modified src/components/Comment.svelte
@@ -135,7 +135,7 @@
      <NodeId {...utils.authorForNodeId(author)} />

      {caption}

      {#if id}
- 
        <Id {id} variant="oid" />
+ 
        <Id {id} clipboard={id} variant="oid" />

      {/if}

      {#if beforeTimestamp}

        {@render beforeTimestamp()}
modified src/components/Id.svelte
@@ -1,5 +1,5 @@
<script lang="ts">
- 
  import type { ComponentProps, Snippet } from "svelte";
+ 
  import type { ComponentProps } from "svelte";



  import debounce from "lodash/debounce";
@@ -25,33 +25,20 @@
  }



  let visible: boolean = $state(false);
+ 


  interface Props {
- 
    children?: Snippet;
+ 
    ariaLabel?: string;
+ 
    clipboard: string;

    id: string;
- 
    clipboard?: string;

    shorten?: boolean;

    variant: "oid" | "commit" | "none";
- 
    ariaLabel?: string;
- 
    debounceTimeout?: number;
- 
    styleBottom?: string;
- 
    styleLeft?: string;

  }
- 
  const {
- 
    children,
- 
    id,
- 
    clipboard = id,
- 
    shorten = true,
- 
    variant,
- 
    ariaLabel,
- 
    debounceTimeout = 50,
- 
    styleBottom = "1.5rem",
- 
    styleLeft = "1rem",
- 
  }: Props = $props();
+ 
  const { ariaLabel, clipboard, id, shorten = true, variant }: Props = $props();



  const setVisible = debounce((value: boolean) => {

    visible = value;
- 
  }, debounceTimeout);
+ 
  }, 50);

</script>



<style>
@@ -104,9 +91,7 @@
    }}

    role="button"

    tabindex="0">
- 
    {#if children}
- 
      {@render children()}
- 
    {:else if shorten}
+ 
    {#if shorten}

      {formatOid(id)}

    {:else}

      {id}
@@ -115,7 +100,7 @@


  {#if visible}

    <div style:position="absolute">
- 
      <div class="popover" style:bottom={styleBottom} style:left={styleLeft}>
+ 
      <div class="popover" style:bottom="1.5rem" style:left="1rem">

        <Icon name={icon} />

        {tooltip}

      </div>
modified src/components/IssueTeaser.svelte
@@ -102,7 +102,7 @@
        <div class="global-flex txt-small" style:flex-wrap="wrap">

          <NodeId {...authorForNodeId(issue.author)} />

          opened
- 
          <Id id={issue.id} variant="oid" />
+ 
          <Id id={issue.id} clipboard={issue.id} variant="oid" />

          {formatTimestamp(issue.timestamp)}

        </div>

      </div>
modified src/components/IssueTimeline.svelte
@@ -213,7 +213,9 @@
          </div>

          <div class="wrapper">

            <NodeId {...authorForNodeId(op.author)} />
- 
            <div>opened issue <Id id={op.id} variant="oid" /></div>
+ 
            <div>
+ 
              opened issue <Id id={op.id} clipboard={op.id} variant="oid" />
+ 
            </div>

            <div title={absoluteTimestamp(op.timestamp)}>

              {formatTimestamp(op.timestamp)}

            </div>
modified src/components/PatchTeaser.svelte
@@ -116,7 +116,7 @@
        <div class="global-flex txt-small" style:flex-wrap="wrap">

          <NodeId {...authorForNodeId(patch.author)} />

          opened
- 
          <Id id={patch.id} variant="oid" />
+ 
          <Id id={patch.id} clipboard={patch.id} variant="oid" />

          {formatTimestamp(patch.timestamp)}

        </div>

      </div>
modified src/components/PatchTimeline.svelte
@@ -105,7 +105,9 @@
          </div>

          <div class="wrapper">

            <NodeId {...authorForNodeId(op.author)} />
- 
            <div>opened patch <Id id={op.id} variant="oid" /></div>
+ 
            <div>
+ 
              opened patch <Id id={op.id} clipboard={op.id} variant="oid" />
+ 
            </div>

            <div title={absoluteTimestamp(op.timestamp)}>

              {formatTimestamp(op.timestamp)}

            </div>
@@ -118,7 +120,9 @@
          </div>

          <div class="wrapper">

            <NodeId {...authorForNodeId(op.author)} />
- 
            <div>created revision <Id id={op.id} variant="oid" /></div>
+ 
            <div>
+ 
              created revision <Id id={op.id} clipboard={op.id} variant="oid" />
+ 
            </div>

            <div title={absoluteTimestamp(op.timestamp)}>

              {formatTimestamp(op.timestamp)}

            </div>
@@ -224,7 +228,10 @@
        <div class="wrapper">

          <NodeId {...authorForNodeId(op.author)} />

          <div>
- 
            merged patch at revision <Id id={op.revision} variant="oid" />
+ 
            merged patch at revision <Id
+ 
              id={op.revision}
+ 
              clipboard={op.revision}
+ 
              variant="oid" />

          </div>

          <div title={absoluteTimestamp(op.timestamp)}>

            {formatTimestamp(op.timestamp)}
@@ -256,7 +263,10 @@
          </div>

          <div class="wrapper">

            <NodeId {...authorForNodeId(op.author)} />
- 
            accepted revision <Id id={op.revision} variant="oid" />
+ 
            accepted revision <Id
+ 
              id={op.revision}
+ 
              clipboard={op.revision}
+ 
              variant="oid" />

            <div title={absoluteTimestamp(op.timestamp)}>

              {formatTimestamp(op.timestamp)}

            </div>
@@ -267,7 +277,10 @@
          </div>

          <div class="wrapper">

            <NodeId {...authorForNodeId(op.author)} />
- 
            rejected revision <Id id={op.revision} variant="oid" />
+ 
            rejected revision <Id
+ 
              id={op.revision}
+ 
              clipboard={op.revision}
+ 
              variant="oid" />

            <div title={absoluteTimestamp(op.timestamp)}>

              {formatTimestamp(op.timestamp)}

            </div>
@@ -278,7 +291,10 @@
          </div>

          <div class="wrapper">

            <NodeId {...authorForNodeId(op.author)} />
- 
            reviewed revision <Id id={op.revision} variant="oid" />
+ 
            reviewed revision <Id
+ 
              id={op.revision}
+ 
              clipboard={op.revision}
+ 
              variant="oid" />

            <div title={absoluteTimestamp(op.timestamp)}>

              {formatTimestamp(op.timestamp)}

            </div>
@@ -294,6 +310,7 @@
          <NodeId {...authorForNodeId(op.author)} />

          {op.replyTo ? "replied to a comment" : "commented"} on review <Id

            id={op.review}
+ 
            clipboard={op.review}

            variant="oid" />

          <div title={absoluteTimestamp(op.timestamp)}>

            {formatTimestamp(op.timestamp)}
@@ -309,6 +326,7 @@
          <NodeId {...authorForNodeId(op.author)} />

          {op.replyTo ? "replied to a comment" : "commented"} on revision <Id

            id={op.revision}
+ 
            clipboard={op.revision}

            variant="oid" />

          <div title={absoluteTimestamp(op.timestamp)}>

            {formatTimestamp(op.timestamp)}
modified src/components/RepoMetadata.svelte
@@ -114,7 +114,10 @@
      <span>

        <span class="txt-selectable">{project.data.defaultBranch}</span>

        ->
- 
        <Id id={project.meta.head} variant="commit" />
+ 
        <Id
+ 
          id={project.meta.head}
+ 
          clipboard={project.meta.head}
+ 
          variant="commit" />

      </span>

    </div>
modified src/components/Review.svelte
@@ -476,7 +476,10 @@
          }, review.id)}

        body={review.summary}>

        {#snippet beforeTimestamp()}
- 
          on revision <Id id={revision.id} variant="oid" />
+ 
          on revision <Id
+ 
            id={revision.id}
+ 
            clipboard={revision.id}
+ 
            variant="oid" />

        {/snippet}

      </CommentComponent>

    </div>
modified src/views/repo/RepoHome.svelte
@@ -19,7 +19,6 @@


  import { invoke, InvokeError } from "@app/lib/invoke";

  import { highlight } from "@app/lib/syntax";
- 
  import { formatOid } from "@app/lib/utils";



  import Border from "@app/components/Border.svelte";

  import CheckoutRepoButton from "@app/components/CheckoutRepoButton.svelte";
@@ -204,9 +203,10 @@
                  stylePadding="0 0.5rem"

                  styleAlignItems="center"

                  styleAlignSelf="flex-end">
- 
                  <Id variant="commit" id={blob.commit.id}>
- 
                    {formatOid(blob.commit.id)}
- 
                  </Id>
+ 
                  <Id
+ 
                    variant="commit"
+ 
                    id={blob.commit.id}
+ 
                    clipboard={blob.commit.id} />

                  <span class="commit-msg txt-overflow" style:max-width="20rem">

                    {blob.commit.message}

                  </span>