Add base & head links to file header for GH diffs

closes #26 closes #29

Author: jpenilla

web/src/lib/components/diff/concise-diff-view.svelte.ts

@@ -15,9 +15,7 @@ import type { IRawThemeSetting } from "shiki/textmate";
 import chroma from "chroma-js";
 import { getEffectiveGlobalTheme } from "$lib/theme.svelte";
 import { onDestroy } from "svelte";
-
-export const DEFAULT_THEME_LIGHT: BundledTheme = "github-light-default";
-export const DEFAULT_THEME_DARK: BundledTheme = "github-dark-default";
+import { DEFAULT_THEME_LIGHT } from "$lib/global-options.svelte";
 
 export type DiffViewerPatch = {
     hunks: DiffViewerPatchHunk[];

web/src/lib/global-options.svelte.ts

@@ -1,10 +1,12 @@
-import { DEFAULT_THEME_DARK, DEFAULT_THEME_LIGHT } from "$lib/components/diff/concise-diff-view.svelte";
 import type { BundledTheme } from "shiki";
 import { browser } from "$app/environment";
 import { getEffectiveGlobalTheme } from "$lib/theme.svelte";
 import { watchLocalStorage } from "$lib/util";
 import { Context } from "runed";
 
+export const DEFAULT_THEME_LIGHT: BundledTheme = "github-light-default";
+export const DEFAULT_THEME_DARK: BundledTheme = "github-dark-default";
+
 export type SidebarLocation = "left" | "right";
 
 export class GlobalOptions {

web/src/routes/DiffTitle.svelte

@@ -15,7 +15,9 @@
             <span class="iconify size-6 shrink-0 octicon--mark-github-24"></span>
             <h1 class="text-base">{details.owner}<span class="mx-1.5 font-light text-em-med">/</span>{details.repo}</h1>
         </div>
-        <h2 class="text-sm text-em-med"><a href={details.backlink} target="_blank" class="hover:text-primary">{details.description}</a></h2>
+        <h2 class="text-sm text-em-med">
+            <a href={details.backlink} target="_blank" rel="noopener noreferrer" class="hover:text-primary">{details.description}</a>
+        </h2>
     </div>
 {/snippet}
 

web/src/routes/FileHeader.svelte

@@ -31,6 +31,17 @@
     }
 
     let patchHeaderDiffOnly = $derived(value.type === "text" && value.patchHeaderDiffOnly);
+
+    let { baseFileUrl, headFileUrl } = $derived.by(() => {
+        if (viewer.diffMetadata?.type === "github") {
+            const ghDetails = viewer.diffMetadata.details;
+            return {
+                baseFileUrl: `https://github.com/${ghDetails.owner}/${ghDetails.repo}/blob/${ghDetails.base}/${value.fromFile}`,
+                headFileUrl: `https://github.com/${ghDetails.owner}/${ghDetails.repo}/blob/${ghDetails.head}/${value.toFile}`,
+            };
+        }
+        return { baseFileUrl: undefined, headFileUrl: undefined };
+    });
 </script>
 
 {#snippet fileName()}
@@ -85,6 +96,12 @@
                         }
                     }
                 />
+                {#if baseFileUrl}
+                    <Button.Root href={baseFileUrl} target="_blank" rel="noopener noreferrer" class="btn-ghost px-2 py-1">View file at base</Button.Root>
+                {/if}
+                {#if headFileUrl}
+                    <Button.Root href={headFileUrl} target="_blank" rel="noopener noreferrer" class="btn-ghost px-2 py-1">View file at head</Button.Root>
+                {/if}
                 <Popover.Arrow class="text-edge" />
             </Popover.Content>
         </Popover.Portal>