From d51adc886f53c43e1cd283d6c95108ebe3cce3db Mon Sep 17 00:00:00 2001
From: Alejandro Nieto <contact@axyss.dev>
Date: Mon, 11 Aug 2025 23:24:32 +0200
Subject: [PATCH] Add "Open in GitHub" button for GitHub diffs

---
 web/src/routes/FileHeader.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/src/routes/FileHeader.svelte b/web/src/routes/FileHeader.svelte
index c66aee9..500f30b 100644
--- a/web/src/routes/FileHeader.svelte
+++ b/web/src/routes/FileHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import DiffStats from "$lib/components/diff/DiffStats.svelte";
     import LabeledCheckbox from "$lib/components/LabeledCheckbox.svelte";
-    import { type FileDetails, GlobalOptions, MultiFileDiffViewerState } from "$lib/diff-viewer-multi-file.svelte";
+    import { type FileDetails, type GithubDiffMetadata, GlobalOptions, MultiFileDiffViewerState } from "$lib/diff-viewer-multi-file.svelte";
     import { Popover, Button } from "bits-ui";
     import { tick } from "svelte";
 
@@ -15,6 +15,7 @@
     let { index, value }: Props = $props();
 
     let popoverOpen = $state(false);
+    let isGithubDiff = viewer.diffMetadata?.type === "github";
 
     async function showInFileTree() {
         const fileTreeElement = document.getElementById("file-tree-file-" + index);
@@ -29,6 +30,15 @@
         }
     }
 
+    async function openInGithub() {
+        if (isGithubDiff) {
+            popoverOpen = false;
+            const filePath = value.toFile;
+            const { owner, repo, head } = (viewer.diffMetadata as GithubDiffMetadata).details;
+            window.open(`https://github.com/${owner}/${repo}/blob/${head}/${filePath}`, "_blank");
+        }
+    }
+
     let patchHeaderDiffOnly = $derived(value.type === "text" && value.patchHeaderDiffOnly);
 </script>
 
@@ -84,6 +94,13 @@
                         }
                     }
                 />
+                <Button.Root
+                    onclick={openInGithub}
+                    disabled={!isGithubDiff}
+                    class="disabled:btn-disabled px-2 py-1 not-disabled:btn-ghost disabled:text-gray-500"
+                >
+                    Open in GitHub
+                </Button.Root>
                 <Popover.Arrow class="text-edge" />
             </Popover.Content>
         </Popover.Portal>