GitLite/src/lib/components/InteractiveRebaseDialog.svelte

<script lang="ts">
  import {GitMerge,  AlertTriangle, ArrowDown, ArrowUp, GitBranch, LoaderCircle, Play, X } from "@lucide/svelte";
  import type { GitBranch as GitBranchInfo, RebaseAction, RebaseCommit, RebasePlanItem } from "../types";
  import { t } from "../i18n.svelte";
  import SelectMenu from "./SelectMenu.svelte";

  interface PlanRow extends RebaseCommit {
    action: RebaseAction;
    message: string;
  }

  interface Props {
    branches: GitBranchInfo[];
    currentBranch: string;
    base: string;
    commits: RebaseCommit[];
    isLoading: boolean;
    isBusy: boolean;
    operation: string;
    error: string;
    onBaseChange: (base: string) => void;
    onStart: (plan: RebasePlanItem[]) => void;
    onClose: () => void;
  }

  let {
    branches = [], currentBranch = "", base = "", commits = [], isLoading = false,
    isBusy = false, operation = "", error = "", onBaseChange = () => {},
    onStart = () => {}, onClose = () => {},
  }: Props = $props();

  let rows = $state<PlanRow[]>([]);

  $effect(() => {
    rows = commits.map((commit) => ({ ...commit, action: "pick", message: commit.summary }));
  });

  let availableBases = $derived(branches.filter((branch) => !branch.current));
  let keptCount = $derived(rows.filter((row) => row.action !== "drop").length);
  let invalidSquash = $derived(rows.some((row, index) =>
    (row.action === "squash" || row.action === "fixup")
      && rows.slice(0, index).every((previous) => previous.action === "drop")
  ));
  let invalidReword = $derived(rows.some((row) => row.action === "reword" && !row.message.trim()));
  let canStart = $derived(Boolean(base) && rows.length > 0 && keptCount > 0 && !invalidSquash && !invalidReword && !isLoading && !isBusy);
  const rebaseActions: RebaseAction[] = ["pick", "reword", "squash", "fixup", "drop"];

  function updateAction(index: number, action: RebaseAction) {
    rows = rows.map((row, rowIndex) => rowIndex === index ? { ...row, action } : row);
  }

  function updateMessage(index: number, message: string) {
    rows = rows.map((row, rowIndex) => rowIndex === index ? { ...row, message } : row);
  }

  function move(index: number, direction: -1 | 1) {
    const target = index + direction;
    if (target < 0 || target >= rows.length) return;
    const next = [...rows];
    [next[index], next[target]] = [next[target], next[index]];
    rows = next;
  }

  function start() {
    if (!canStart) return;
    onStart(rows.map((row) => ({
      hash: row.hash,
      action: row.action,
      message: row.action === "reword" ? row.message.trim() : null,
    })));
  }
</script>

<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
  <div class="dialog interactive-rebase-dialog" role="dialog" aria-modal="true" aria-label={t("rebase.dialogLabel")} tabindex="-1">
    <header class="dialog-header unified-dialog-header">
      <span class="unified-dialog-icon" aria-hidden="true"><GitMerge size={18} /></span>
      <div class="unified-dialog-text">
        <span class="eyebrow">{t("rebase.eyebrow")}</span>
        <h2 class="dialog-title">{t("rebase.dialogLabel")}</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="interactive-rebase-body">
      <section class="rebase-base-bar">
        <label>
          <span>{t("rebase.rebaseOnto")} <strong>{currentBranch || t("rebase.currentBranch")}</strong> {t("rebase.onto")}</span>
          <SelectMenu value={base} options={availableBases.map((branch) => ({ value: branch.name, label: branch.remote ? t("rebase.baseRemote", { name: branch.name }) : t("rebase.baseLocal", { name: branch.name }) }))} placeholder={t("rebase.selectBase")} disabled={isBusy || isLoading} onChange={onBaseChange} />
        </label>
        <p>{t("rebase.hint")}</p>
      </section>

      {#if error}
        <div class="rebase-warning error"><AlertTriangle size={16} aria-hidden="true" /><span>{error}</span></div>
      {/if}

      {#if isLoading}
        <div class="blank-state"><LoaderCircle class="spin" size={18} aria-hidden="true" /> {t("rebase.loading")}</div>
      {:else if !base}
        <div class="blank-state">{t("rebase.selectBaseHint")}</div>
      {:else if rows.length === 0}
        <div class="blank-state">{t("rebase.noCommits")}</div>
      {:else}
        <div class="rebase-plan" role="list" aria-label={t("rebase.planLabel")}>
          {#each rows as row, index (row.hash)}
            <article class:drop={row.action === "drop"} class="rebase-plan-row" role="listitem">
              <div class="rebase-order-actions">
                <button type="button" onclick={() => move(index, -1)} disabled={isBusy || index === 0} title={t("rebase.moveUp")}><ArrowUp size={14} aria-hidden="true" /></button>
                <button type="button" onclick={() => move(index, 1)} disabled={isBusy || index === rows.length - 1} title={t("rebase.moveDown")}><ArrowDown size={14} aria-hidden="true" /></button>
              </div>
              <SelectMenu class={`rebase-action ${row.action}`} value={row.action} options={rebaseActions.map((action) => ({ value: action, label: action }))} disabled={isBusy} ariaLabel={t("rebase.actionFor", { hash: row.short_hash })} onChange={(value) => updateAction(index, value as RebaseAction)} />
              <code>{row.short_hash}</code>
              <div class="rebase-commit-copy">
                {#if row.action === "reword"}
                  <input value={row.message} oninput={(event) => updateMessage(index, (event.target as HTMLInputElement).value)} disabled={isBusy} aria-label={t("rebase.newMessageFor", { hash: row.short_hash })} maxlength="240" />
                {:else}
                  <strong>{row.summary}</strong>
                {/if}
                <span>{row.author_name} · {new Date(row.date).toLocaleString()}</span>
              </div>
            </article>
          {/each}
        </div>
      {/if}

      {#if invalidSquash}
        <div class="rebase-warning"><AlertTriangle size={15} aria-hidden="true" /> {t("rebase.invalidSquash")}</div>
      {:else if invalidReword}
        <div class="rebase-warning"><AlertTriangle size={15} aria-hidden="true" /> {t("rebase.invalidReword")}</div>
      {/if}
    </div>

    <footer class="dialog-footer">
      <span class="dialog-footer-info">{t("rebase.keptCount", { kept: keptCount, total: rows.length })}</span>
      <div class="rebase-footer-actions">
        <button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>{t("common.cancel")}</button>
        <button class="btn-primary" type="button" onclick={start} disabled={!canStart}>
          {#if operation === "Starting interactive rebase"}<LoaderCircle class="spin" size={16} aria-hidden="true" />{:else}<Play size={16} aria-hidden="true" />{/if}
          {t("rebase.start")}
        </button>
      </div>
    </footer>
  </div>
</div>