Add styling for patch diff stats

Author: rudolfs

src/components/DiffStatBadge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Stats } from "@bindings/Stats";
+
+  export let stats: Stats;
+</script>
+
+<style>
+  .diff-stat-badge {
+    display: flex;
+    clip-path: var(--1px-corner-fill);
+    height: 1.5rem;
+  }
+
+  .insertions {
+    display: flex;
+    padding: 0 0.5rem;
+    align-items: center;
+    color: var(--color-foreground-success);
+    background-color: var(--color-fill-diff-green-light);
+  }
+  .deletions {
+    display: flex;
+    padding: 0 0.5rem;
+    align-items: center;
+    color: var(--color-foreground-red);
+    background-color: var(--color-fill-diff-red-light);
+  }
+</style>
+
+<div class="diff-stat-badge txt-mono txt-semibold txt-small">
+  <div class="insertions">+{stats.insertions}</div>
+  <div class="deletions">-{stats.deletions}</div>
+</div>

src/components/PatchTeaser.svelte

@@ -5,6 +5,7 @@
   import { formatOid, formatTimestamp } from "@app/lib/utils";
   import { invoke } from "@tauri-apps/api/core";
 
+  import DiffStatBadge from "./DiffStatBadge.svelte";
   import Icon from "./Icon.svelte";
   import InlineTitle from "./InlineTitle.svelte";
   import NodeId from "./NodeId.svelte";
@@ -82,7 +83,7 @@
   </div>
   <div class="global-flex">
     {#await invoke<Stats>( "diff", { rid, base: patch.base, head: patch.head }, ) then stats}
-      <div>{stats.insertions} / {stats.deletions}</div>
+      <DiffStatBadge {stats} />
     {/await}
     {#each patch.labels as label}
       <div class="global-counter txt-small">{label}</div>