GitLite/src/lib/components/FileHistoryDialog.svelte

<script lang="ts">
  import { AlertCircle, GitCompare, History, LoaderCircle, RotateCcw, X } from "@lucide/svelte";
  import type { GitCommit } from "../types";

  const commitDateFormatter = new Intl.DateTimeFormat(undefined, {
    dateStyle: "medium",
    timeStyle: "short",
  });

  interface Props {
    fileHistory: GitCommit[];
    filePath: string;
    isBusy: boolean;
    isLoading: boolean;
    error?: string;
    language?: "de" | "en";
    onDiff: (commit: GitCommit) => void;
    onRestore: (commit: GitCommit) => void;
    onClose: () => void;
  }

  let {
    fileHistory = [],
    filePath = "",
    isBusy = false,
    isLoading = false,
    error = "",
    language = "en",
    onDiff = () => {},
    onRestore = () => {},
    onClose = () => {},
  }: Props = $props();

  function formatCommitDate(value: string): string {
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return value;
    return commitDateFormatter.format(date);
  }

  function fileName(path: string): string {
    return path.split(/[\\/]/).pop() ?? path;
  }

  function closeFromBackdrop(event: MouseEvent) {
    if (event.target === event.currentTarget && !isBusy) onClose();
  }
</script>

<div class="dialog-backdrop app-chrome-backdrop file-history-dialog-backdrop" role="presentation" onclick={closeFromBackdrop}>
  <div class="file-history-dialog" role="dialog" aria-modal="true" aria-labelledby="file-history-dialog-title" tabindex="-1">
    <header class="file-history-dialog-header unified-dialog-header">
      <div class="file-history-dialog-icon unified-dialog-icon" aria-hidden="true"><History size={19} /></div>
      <div class="file-history-dialog-heading unified-dialog-text">
        <span class="eyebrow">File history</span>
        <h2 id="file-history-dialog-title">{fileName(filePath)}</h2>
        <span class="file-history-dialog-path" title={filePath}>{filePath}</span>
      </div>
      <button class="dialog-icon-button" type="button" onclick={onClose} disabled={isBusy} aria-label="Close file history">
        <X size={16} aria-hidden="true" />
      </button>
    </header>

    <div class="file-history-dialog-body">
      {#if isLoading}
        <div class="file-history-dialog-state" role="status" aria-live="polite">
          <LoaderCircle class="spin" size={22} aria-hidden="true" />
          <strong>Loading file history…</strong>
          <span>Reading commits that changed this file.</span>
        </div>
      {:else if error}
        <div class="file-history-dialog-state error" role="alert">
          <AlertCircle size={22} aria-hidden="true" />
          <strong>File history could not be loaded.</strong>
          <span>{error}</span>
        </div>
      {:else if fileHistory.length === 0}
        <div class="file-history-dialog-state">
          <History size={22} aria-hidden="true" />
          <strong>No history found.</strong>
          <span>This file has no committed changes yet.</span>
        </div>
      {:else}
        <div class="file-history-dialog-list">
          {#each fileHistory as item (item.hash)}
            <article class="file-history-dialog-row">
              <div class="file-history-dialog-commit">
                <span class="commit-avatar" aria-hidden="true">{item.author_name.trim().slice(0, 2).toUpperCase() || "?"}</span>
                <div>
                  <strong title={item.summary}>{item.summary}</strong>
                  <span><code>{item.short_hash}</code> · {item.author_name}</span>
                  {#if item.matches_working_tree}<span class="current-version">{language === "de" ? "Aktueller Stand" : "Current version"}</span>{/if}
                </div>
              </div>
              <time datetime={item.date}>{formatCommitDate(item.date)}</time>
              <div class="file-history-dialog-actions">
                <button class="btn-sm" type="button" onclick={() => onDiff(item)} disabled={isBusy || item.matches_working_tree} title={item.matches_working_tree ? (language === "de" ? "Identisch mit der aktuellen Datei" : "Identical to the current file") : "Show changes against the working tree"}>
                  <GitCompare size={14} aria-hidden="true" /> Diff
                </button>
                <button class="btn-sm" type="button" onclick={() => onRestore(item)} disabled={isBusy || item.matches_working_tree} title={item.matches_working_tree ? (language === "de" ? "Identisch mit der aktuellen Datei" : "Identical to the current file") : "Restore this file from the selected commit"}>
                  <RotateCcw size={14} aria-hidden="true" /> Restore
                </button>
              </div>
            </article>
          {/each}
        </div>
      {/if}
    </div>
  </div>
</div>

<style>
  .file-history-dialog-commit .current-version{display:inline-flex;width:fit-content;margin-top:4px;padding:2px 6px;border:1px solid color-mix(in srgb,var(--color-accent) 25%,transparent);border-radius:4px;background:color-mix(in srgb,var(--color-accent) 8%,transparent);color:var(--color-accent);font-size:10px;font-weight:600}
</style>