edit

2026-06-27 23:08:19 +02:00
parent 25700821d1
commit 5b44a65e51
22 changed files with 3388 additions and 3538 deletions
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { GitCompare, History, RotateCcw } from "@lucide/svelte";
+  import type { GitCommit } from "../types";
+
+  interface Props {
+    fileHistory: GitCommit[];
+    selectedExplorerPath: string;
+    selectedExplorerLabel: string;
+    hasRepository: boolean;
+    isBusy: boolean;
+    onDiff: (commit: GitCommit) => void;
+    onRestore: (commit: GitCommit) => void;
+  }
+
+  let {
+    fileHistory = [],
+    selectedExplorerPath = "",
+    selectedExplorerLabel = "File history",
+    hasRepository = false,
+    isBusy = false,
+    onDiff = () => {},
+    onRestore = () => {},
+  }: Props = $props();
+
+  function formatCommitDate(value: string): string {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+    return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
+  }
+</script>
+
+<section class="panel grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Selected file history">
+  <div class="section-head">
+    <div class="min-w-0">
+      <span class="eyebrow">{selectedExplorerLabel}</span>
+      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight truncate">{selectedExplorerPath || "No file"}</h2>
+    </div>
+    <span class="pill pill-count flex-shrink-0">{fileHistory.length}</span>
+  </div>
+
+  {#if !hasRepository}
+    <div class="blank-state">No repository loaded.</div>
+  {:else if !selectedExplorerPath}
+    <div class="blank-state">Select a file in Explorer.</div>
+  {:else if fileHistory.length === 0}
+    <div class="blank-state">No history returned for this selection.</div>
+  {:else}
+    <div class="history-list overflow-auto p-2">
+      {#each fileHistory as item (item.hash)}
+        <article class="commit-row compact">
+          <div class="commit-line">
+            <History size={16} aria-hidden="true" />
+            <div>
+              <strong title={item.summary}>{item.summary}</strong>
+              <span>{item.short_hash} - {item.author_name}</span>
+            </div>
+          </div>
+
+          <div class="commit-actions">
+            <time datetime={item.date}>{formatCommitDate(item.date)}</time>
+            <div class="commit-action-buttons">
+              <button class="btn-sm" type="button" onclick={() => onDiff(item)} disabled={isBusy} title="Show changes vs working tree">
+                <GitCompare size={15} aria-hidden="true" />
+                Diff
+              </button>
+              <button class="btn-sm" type="button" onclick={() => onRestore(item)} disabled={isBusy} title="Restore selected file from this commit">
+                <RotateCcw size={15} aria-hidden="true" />
+                Restore
+              </button>
+            </div>
+          </div>
+        </article>
+      {/each}
+    </div>
+  {/if}
+</section>