Display diff stats badge in patch summary — radicle-explorer

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

 <script lang="ts">
   export let insertions: number;
   export let deletions: number;
   export let hoverable: boolean = false;
 </script>
 <style>

     border-radius: var(--border-radius-round);
     overflow: hidden;
   }
   .badge:hover .positive {
   .hoverable:hover .positive {
     background-color: var(--color-fill-diff-green);
   }
   .badge:hover .negative {
   .hoverable:hover .negative {
     background-color: var(--color-fill-diff-red);
   }
   .positive {

   }
 </style>
 <div class="badge">
 <div class="badge" class:hoverable>
   <div class="positive">
     +{insertions}
   </div>

               view: { name: "diff", fromCommit, toCommit: revisionOid },
             }}>
             {@const { insertions, deletions } = response.diff.stats}
             <DiffStatBadge {insertions} {deletions} />
             <DiffStatBadge hoverable {insertions} {deletions} />
           </Link>
         {/if}
         <Popover

     LifecycleState,
     PatchState,
     Revision,
     Diff,
   } from "@httpd-client";
   interface Thread {

   import CobStateButton from "@app/views/projects/Cob/CobStateButton.svelte";
   import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
   import DiffStatBadge from "@app/components/DiffStatBadge.svelte";
   import DropdownList from "@app/components/DropdownList.svelte";
   import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
   import Embeds from "@app/views/projects/Cob/Embeds.svelte";

   export let baseUrl: BaseUrl;
   export let patch: Patch;
   export let stats: Diff["stats"];
   export let rawPath: (commit?: string) => string;
   export let project: Project;
   export let view: PatchView;

     ].sort((a, b) => a.timestamp - b.timestamp),
   ]);
   $: firstRevision = timelineTuple[0][0];
   $: latestRevision = patch.revisions[patch.revisions.length - 1];
   $: session =
     $httpdStore.state === "authenticated" && utils.isLocal(baseUrl.hostname)
       ? $httpdStore.session

             <IconSmall name="patch" />
             {capitalize(patch.state.status)}
           </Badge>
           <Link
             route={{
               resource: "project.patch",
               project: project.id,
               node: baseUrl,
               patch: patch.id,
               view: { name: "changes", revision: latestRevision.id },
             }}>
             <DiffStatBadge
               hoverable
               insertions={stats.insertions}
               deletions={stats.deletions} />
           </Link>
         </svelte:fragment>
         <svelte:fragment slot="description">
           <div class="revision-description">

     api.project.getPatchById(route.project, route.patch),
   ]);
   const latestRevision = patch.revisions[patch.revisions.length - 1];
   const { diff } = await api.project.getDiff(
     route.project,
     latestRevision.base,
     latestRevision.oid,
   );
   let view: PatchView;
   switch (route.view?.name) {

       project,
       rawPath,
       patch,
       stats: diff.stats,
       view,
     },
   };