Add unified-diff copy buttons to the commit diff

src/components/CopyButton.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { writeToClipboard } from "@app/lib/invoke";
+
+  import Icon from "@app/components/Icon.svelte";
+
+  interface Props {
+    // Produces the text lazily, so large content isn't built until clicked.
+    text: () => string;
+    title?: string;
+  }
+
+  const { text, title = "Copy" }: Props = $props();
+
+  let copied = $state(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  async function copy() {
+    await writeToClipboard(text());
+    copied = true;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      copied = false;
+    }, 1000);
+  }
+
+  $effect(() => () => clearTimeout(timer));
+</script>
+
+<style>
+  .copy {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    display: flex;
+    align-items: center;
+  }
+  .copy:hover {
+    color: var(--color-text-primary);
+  }
+</style>
+
+<button class="copy" {title} onclick={copy}>
+  <Icon name={copied ? "checkmark" : "clipboard"} />
+</button>

src/components/DiffRow.svelte

@@ -4,7 +4,9 @@
   import escape from "lodash/escape";
 
   import type { DiffRow } from "@app/lib/diffRows";
+  import { fileDiffToText } from "@app/lib/diffText";
 
+  import CopyButton from "@app/components/CopyButton.svelte";
   import Icon from "@app/components/Icon.svelte";
   import Path from "@app/components/Path.svelte";
 
@@ -191,6 +193,7 @@
         <span class="del">-{row.file.diff.stats.deletions}</span>
       {/if}
     </span>
+    <CopyButton text={() => fileDiffToText(row.file)} title="Copy file diff" />
   </div>
 {:else if row.type === "hunk-header"}
   <div class="line hunk-header">