refine ui

restore in a Dialog

src/lib/components/CompareDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ArrowRight, FileCode, X } from "@lucide/svelte";
+  import { ArrowRight, FileCode, RotateCcw, X } from "@lucide/svelte";
   import type { GitCommitComparison, GitDiffFile, FileStatusKind } from "../types";
 
   type SplitRow =
@@ -14,7 +14,9 @@
     comparison: GitCommitComparison;
     selectedDiffPath: string;
     isBusy: boolean;
+    restoreLabel?: string;
     onClose: () => void;
+    onRestore?: () => void;
     onSelectFile: (file: GitDiffFile) => void;
   }
 
@@ -22,7 +24,9 @@
     comparison,
     selectedDiffPath = "",
     isBusy = false,
+    restoreLabel = "",
     onClose = () => {},
+    onRestore = undefined,
     onSelectFile = () => {},
   }: Props = $props();
 
@@ -175,9 +179,17 @@
           <span class="hash">{comparison.to_short}</span>
         </h2>
       </div>
-      <button class="dialog-close" type="button" onclick={onClose} title="Close">
-        <X size={18} aria-hidden="true" />
-      </button>
+      <div class="dialog-header-actions">
+        {#if restoreLabel && onRestore}
+          <button class="btn-secondary compare-restore" type="button" onclick={onRestore} disabled={isBusy} title={restoreLabel}>
+            <RotateCcw size={15} aria-hidden="true" />
+            <span>{restoreLabel}</span>
+          </button>
+        {/if}
+        <button class="dialog-close" type="button" onclick={onClose} title="Close">
+          <X size={18} aria-hidden="true" />
+        </button>
+      </div>
     </header>
 
     {#if comparison.files.length === 0}