Optimize repository loading and enhance Git UI

Consolidate multiple Git backend calls into a single bundle to reduce overhead when opening and auto-refreshing repositories. This significantly improves performance by fetching status, branches, commits, and files in one optimized operation, instead of re-running 'git rev-parse' and 'git status' multiple times. Also, streamline commit history loading by fetching file changes inline via 'git log --name-status -z', eliminating expensive per-commit 'git diff-tree' processes. Additionally, introduce the ability to create new branches from a specific commit in the history and refactor the commit comparison feature into a dedicated dialog. The status panel now displays concise file names.
2026-07-01 11:39:22 +02:00
parent 628e2f7c0b
commit fe392d38bf
12 changed files with 528 additions and 56 deletions
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { onDestroy, onMount } from "svelte";
  import { getCurrentWindow } from "@tauri-apps/api/window";
-  import { Download, GitBranch, LoaderCircle, Minus, RefreshCw, Search, Upload, X } from "@lucide/svelte";
+  import { Download, GitBranch, GitCompare, LoaderCircle, Minus, RefreshCw, Search, Upload, X } from "@lucide/svelte";

  export let branch: string = "";
  export let ahead: number = 0;
@@ -16,6 +16,7 @@
  export let onPush: () => void = () => {};
  export let onRefresh: () => void = () => {};
  export let onSearch: () => void = () => {};
+  export let onCompare: () => void = () => {};
  export let onToggleAutoRefresh: () => void = () => {};

  const win = getCurrentWindow();
@@ -92,6 +93,17 @@
        <span class="tb-action-label">Search</span>
      </button>

+      <button
+        class="tb-action"
+        onclick={onCompare}
+        disabled={!hasRepository || isBusy}
+        title="Compare commits"
+        aria-label="Compare commits"
+      >
+        <GitCompare size={14} aria-hidden="true" />
+        <span class="tb-action-label">Compare</span>
+      </button>
+
      <button
        class="tb-action"
        onclick={onPull}
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { ArrowRight, GitCompare, LoaderCircle, X } from "@lucide/svelte";
+  import type { GitCommit } from "../types";
+
+  interface Props {
+    commits: GitCommit[];
+    compareFrom: string;
+    compareTo: string;
+    canCompare: boolean;
+    isBusy: boolean;
+    operation: string;
+    onCompareFromChange: (val: string) => void;
+    onCompareToChange: (val: string) => void;
+    onCompare: () => void;
+    onClose: () => void;
+  }
+
+  let {
+    commits = [],
+    compareFrom = "",
+    compareTo = "",
+    canCompare = false,
+    isBusy = false,
+    operation = "",
+    onCompareFromChange = () => {},
+    onCompareToChange = () => {},
+    onCompare = () => {},
+    onClose = () => {},
+  }: Props = $props();
+
+  function commitOptionLabel(item: GitCommit): string {
+    return `${item.short_hash} - ${item.summary}`;
+  }
+
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    onCompare();
+  }
+</script>
+
+<div
+  class="dialog-backdrop"
+  role="presentation"
+  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+>
+  <div class="dialog compare-select-dialog" role="dialog" aria-modal="true" aria-label="Select commits to compare" tabindex="-1">
+    <header class="dialog-header">
+      <div>
+        <span class="eyebrow">Compare</span>
+        <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Select commits</h2>
+      </div>
+      <button class="dialog-close" type="button" onclick={onClose} title="Close">
+        <X size={18} aria-hidden="true" />
+      </button>
+    </header>
+
+    {#if commits.length < 2}
+      <div class="blank-state">At least two commits are needed to compare.</div>
+    {:else}
+      <form class="compare-form" onsubmit={handleSubmit}>
+        <label class="compare-field">
+          <span>From (older)</span>
+          <select
+            value={compareFrom}
+            onchange={(e) => onCompareFromChange((e.target as HTMLSelectElement).value)}
+            disabled={isBusy}
+          >
+            <option value="" disabled>Select a commit</option>
+            {#each commits as item (item.hash)}
+              <option value={item.hash}>{commitOptionLabel(item)}</option>
+            {/each}
+          </select>
+        </label>
+
+        <ArrowRight class="compare-arrow" size={18} aria-hidden="true" />
+
+        <label class="compare-field">
+          <span>To (newer)</span>
+          <select
+            value={compareTo}
+            onchange={(e) => onCompareToChange((e.target as HTMLSelectElement).value)}
+            disabled={isBusy}
+          >
+            <option value="" disabled>Select a commit</option>
+            {#each commits as item (item.hash)}
+              <option value={item.hash}>{commitOptionLabel(item)}</option>
+            {/each}
+          </select>
+        </label>
+
+        <button class="btn-primary" type="submit" disabled={!canCompare}>
+          {#if operation === "Comparing commits"}
+            <LoaderCircle class="spin" size={16} aria-hidden="true" />
+          {:else}
+            <GitCompare size={16} aria-hidden="true" />
+          {/if}
+          Compare
+        </button>
+      </form>
+
+      {#if compareFrom && compareTo && compareFrom === compareTo}
+        <div class="blank-state">Select two different commits to compare.</div>
+      {:else}
+        <div class="blank-state">Pick two commits and run a comparison.</div>
+      {/if}
+    {/if}
+  </div>
+</div>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ChevronDown, ChevronRight, RotateCcw } from "@lucide/svelte";
+  import { ChevronDown, ChevronRight, GitBranch, RotateCcw } from "@lucide/svelte";
  import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";

  interface GraphSegment {
@@ -29,6 +29,7 @@
    onRestoreCommit: (commit: GitCommit) => void;
    onPreviewCommitFile: (commit: GitCommit, file: GitCommitFile) => void;
    onToggleCommitFiles: (hash: string) => void;
+    onCreateBranchFromCommit: (commit: GitCommit) => void;
  }

  let {
@@ -39,6 +40,7 @@
    onRestoreCommit = () => {},
    onPreviewCommitFile = () => {},
    onToggleCommitFiles = () => {},
+    onCreateBranchFromCommit = () => {},
  }: Props = $props();

  function laneColor(col: number): string {
@@ -220,6 +222,10 @@
            <div class="commit-actions">
              <time datetime={item.date}>{formatCommitDate(item.date)}</time>
              <div class="commit-action-buttons">
+                <button class="btn-sm" type="button" onclick={() => onCreateBranchFromCommit(item)} disabled={isBusy} title="Create a new branch from this commit">
+                  <GitBranch size={15} aria-hidden="true" />
+                  Branch
+                </button>
                <button class="btn-sm" type="button" onclick={() => onRestoreCommit(item)} disabled={isBusy} title="Reset current branch to this commit">
                  <RotateCcw size={15} aria-hidden="true" />
                  Restore
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { GitBranch, LoaderCircle, X } from "@lucide/svelte";
+  import type { GitCommit } from "../types";
+
+  interface Props {
+    commit: GitCommit;
+    isBusy: boolean;
+    onCreate: (name: string) => void;
+    onClose: () => void;
+  }
+
+  let {
+    commit,
+    isBusy = false,
+    onCreate = () => {},
+    onClose = () => {},
+  }: Props = $props();
+
+  let name = $state("");
+
+  function submit(event: SubmitEvent) {
+    event.preventDefault();
+    const value = name.trim();
+    if (!value) return;
+    onCreate(value);
+  }
+</script>
+
+<div
+  class="dialog-backdrop"
+  role="presentation"
+  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+>
+  <div class="dialog new-branch-dialog" role="dialog" aria-modal="true" aria-label="Create branch from commit" tabindex="-1">
+    <header class="dialog-header">
+      <div>
+        <span class="eyebrow">New branch</span>
+        <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">From commit</h2>
+      </div>
+      <button class="dialog-close" type="button" onclick={onClose} title="Close">
+        <X size={18} aria-hidden="true" />
+      </button>
+    </header>
+
+    <form class="new-branch-form" onsubmit={submit}>
+      <div class="new-branch-target">
+        <span class="hash">{commit.short_hash}</span>
+        <span class="new-branch-summary" title={commit.summary}>{commit.summary}</span>
+      </div>
+
+      <label class="new-branch-field">
+        <span>Branch name</span>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          bind:value={name}
+          autocomplete="off"
+          spellcheck="false"
+          placeholder="feature/my-branch"
+          disabled={isBusy}
+          autofocus
+        />
+      </label>
+
+      <div class="new-branch-actions">
+        <button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>
+          Cancel
+        </button>
+        <button class="btn-primary" type="submit" disabled={isBusy || name.trim().length === 0}>
+          {#if isBusy}
+            <LoaderCircle class="spin" size={16} aria-hidden="true" />
+          {:else}
+            <GitBranch size={16} aria-hidden="true" />
+          {/if}
+          Create branch
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
@@ -38,6 +38,14 @@
    return file.old_path ? `${file.old_path} -> ${file.path}` : file.path;
  }

+  function baseName(path: string): string {
+    return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
+  }
+
+  function fileName(file: GitFileStatus): string {
+    return file.old_path ? `${baseName(file.old_path)} -> ${baseName(file.path)}` : baseName(file.path);
+  }
+
  let hasUnstaged = $derived(changedFiles.some((f) => f.unstaged !== null));
  let hasStaged = $derived(changedFiles.some((f) => f.staged !== null));
 </script>
@@ -90,7 +98,7 @@
      {#each changedFiles as file (`${file.old_path ?? ""}:${file.path}`)}
        <article class="file-row">
          <div class="file-title">
-            <strong title={displayPath(file)}>{displayPath(file)}</strong>
+            <strong title={displayPath(file)}>{fileName(file)}</strong>
          </div>

          <div class="change-lanes">
@@ -8,6 +8,7 @@ import type {
  GitRepositoryFile,
  GitSearchHit,
  GitStatus,
+  RepositoryBundle,
  StoredCredential,
 } from "./types";

@@ -15,6 +16,10 @@ export function openRepository(path: string): Promise<GitStatus> {
  return invoke<GitStatus>("open_repository", { path });
 }

+export function openRepositoryBundle(path: string, commitLimit = 100): Promise<RepositoryBundle> {
+  return invoke<RepositoryBundle>("open_repository_bundle", { path, commitLimit });
+}
+
 export function getStatus(path: string): Promise<GitStatus> {
  return invoke<GitStatus>("get_status", { path });
 }
@@ -27,8 +32,12 @@ export function checkoutBranch(path: string, branch: string): Promise<GitStatus>
  return invoke<GitStatus>("checkout_branch", { path, branch });
 }

-export function createBranch(path: string, branch: string): Promise<GitStatus> {
-  return invoke<GitStatus>("create_branch", { path, branch });
+export function createBranch(
+  path: string,
+  branch: string,
+  startPoint?: string,
+): Promise<GitStatus> {
+  return invoke<GitStatus>("create_branch", { path, branch, startPoint: startPoint ?? null });
 }

 export function stageFiles(path: string, files: string[]): Promise<GitStatus> {
@@ -54,6 +54,13 @@ export interface GitRepositoryFile {
  status: FileStatusKind | null;
 }

+export interface RepositoryBundle {
+  status: GitStatus;
+  branches: GitBranch[];
+  commits: GitCommit[];
+  files: GitRepositoryFile[];
+}
+
 export interface GitDiffFile {
  path: string;
  old_path: string | null;