GitLite/src/lib/components/ReflogDialog.svelte

<script lang="ts">
  import { GitBranch, History, LoaderCircle, Search, ShieldCheck, X } from "@lucide/svelte";
  import type { ReflogEntry } from "../types";
  import { t } from "../i18n.svelte";

  interface Props {
    entries: ReflogEntry[];
    currentHash: string;
    isLoading: boolean;
    isBusy: boolean;
    operation: string;
    error: string;
    onPreview: (entry: ReflogEntry) => void;
    onRestore: (entry: ReflogEntry, branch: string) => void;
    onClose: () => void;
  }

  let { entries = [], currentHash = "", isLoading = false, isBusy = false, operation = "", error = "", onPreview = () => {}, onRestore = () => {}, onClose = () => {} }: Props = $props();
  let query = $state("");
  let selectedHash = $state("");
  let recoveryBranch = $state("");
  let filteredEntries = $derived(entries.filter((entry) => `${entry.selector} ${entry.action} ${entry.short_hash} ${entry.author_name}`.toLowerCase().includes(query.trim().toLowerCase())));
  let selected = $derived(entries.find((entry) => entry.hash === selectedHash) ?? filteredEntries[0] ?? null);

  $effect(() => {
    if (!selectedHash && entries.length > 0) select(entries[0]);
  });

  function select(entry: ReflogEntry) {
    selectedHash = entry.hash;
    recoveryBranch = `recovery/${entry.short_hash}`;
  }
</script>

<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
  <div class="dialog reflog-dialog" role="dialog" aria-modal="true" aria-label={t("reflog.title")} tabindex="-1">
    <header class="dialog-header unified-dialog-header">
      <span class="unified-dialog-icon" aria-hidden="true"><History size={18} /></span>
      <div class="unified-dialog-text"><span class="eyebrow">{t("reflog.eyebrow")}</span><h2 class="dialog-title">{t("reflog.title")}</h2></div>
      <button class="dialog-close" type="button" onclick={onClose} disabled={isBusy} title={t("common.close")}><X size={18} aria-hidden="true" /></button>
    </header>
    <div class="reflog-body">
      <aside class="reflog-list-pane">
        <label class="reflog-search"><Search size={15} aria-hidden="true" /><input bind:value={query} placeholder={t("reflog.searchPlaceholder")} aria-label={t("reflog.searchLabel")} /></label>
        {#if isLoading}
          <div class="blank-state"><LoaderCircle class="spin" size={18} aria-hidden="true" /> {t("reflog.loading")}</div>
        {:else if filteredEntries.length === 0}
          <div class="blank-state">{t("reflog.noMatch")}</div>
        {:else}
          <div class="reflog-list" role="listbox" aria-label={t("reflog.listLabel")}>
            {#each filteredEntries as entry (`${entry.selector}:${entry.hash}`)}
              <button class:active={selected?.selector === entry.selector} type="button" role="option" aria-selected={selected?.selector === entry.selector} onclick={() => select(entry)}>
                <span class="reflog-row-top"><code>{entry.selector}</code><span>{new Date(entry.date).toLocaleString()}</span></span>
                <strong>{entry.action}</strong>
                <span class="reflog-row-bottom"><code>{entry.short_hash}</code><span>{entry.author_name}</span></span>
              </button>
            {/each}
          </div>
        {/if}
      </aside>

      <section class="reflog-detail">
        {#if error}<div class="rebase-warning error">{error}</div>{/if}
        {#if selected}
          <div class="reflog-detail-head"><History size={20} aria-hidden="true" /><div><span class="eyebrow">{selected.selector}</span><h3>{selected.action}</h3></div></div>
          <dl><div><dt>{t("common.commit")}</dt><dd><code>{selected.hash}</code></dd></div><div><dt>{t("reflog.author")}</dt><dd>{selected.author_name}</dd></div><div><dt>{t("reflog.date")}</dt><dd>{new Date(selected.date).toLocaleString()}</dd></div></dl>
          <button class="btn-secondary reflog-preview" type="button" onclick={() => onPreview(selected)} disabled={isBusy || selected.hash === currentHash}><History size={15} aria-hidden="true" /> {t("reflog.preview")}</button>
          <div class="reflog-recovery-card">
            <div class="reflog-recovery-title"><ShieldCheck size={18} aria-hidden="true" /><div><strong>{t("reflog.safeRecovery")}</strong><span>{t("reflog.safeRecoveryNote")}</span></div></div>
            <label><span>{t("reflog.recoveryBranch")}</span><div><GitBranch size={15} aria-hidden="true" /><input bind:value={recoveryBranch} disabled={isBusy} spellcheck="false" /></div></label>
            <button class="btn-primary" type="button" onclick={() => onRestore(selected, recoveryBranch.trim())} disabled={isBusy || !recoveryBranch.trim()}>
              {#if operation === "Restoring reflog entry"}<LoaderCircle class="spin" size={16} aria-hidden="true" />{:else}<ShieldCheck size={16} aria-hidden="true" />{/if}
              {t("reflog.createBranch")}
            </button>
          </div>
        {:else}
          <div class="blank-state">{t("reflog.selectEntry")}</div>
        {/if}
      </section>
    </div>
  </div>
</div>