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,107 @@
+<script lang="ts">
+  import { GitBranch, GitMerge } from "@lucide/svelte";
+  import type { GitBranch as GitBranchInfo } from "../types";
+
+  interface Props {
+    branches: GitBranchInfo[];
+    localBranches: GitBranchInfo[];
+    remoteBranches: GitBranchInfo[];
+    hasRepository: boolean;
+    isBusy: boolean;
+    onCheckout: (branch: GitBranchInfo) => void;
+    onMerge: (branch: GitBranchInfo) => void;
+  }
+
+  let {
+    branches = [],
+    localBranches = [],
+    remoteBranches = [],
+    hasRepository = false,
+    isBusy = false,
+    onCheckout = () => {},
+    onMerge = () => {},
+  }: Props = $props();
+</script>
+
+<section class="panel grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Branches">
+  <div class="section-head">
+    <div>
+      <span class="eyebrow">Branches</span>
+      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Refs</h2>
+    </div>
+    <span class="pill pill-count">{branches.length}</span>
+  </div>
+
+  {#if !hasRepository}
+    <p class="blank-state">Open a repository to list branches.</p>
+  {:else if branches.length === 0}
+    <p class="blank-state">No branches returned.</p>
+  {:else}
+    <div class="overflow-auto p-2 flex flex-col gap-0">
+      {#if localBranches.length > 0}
+        <div class="branch-group-label">
+          <span>Local</span>
+          <span class="branch-group-count">{localBranches.length}</span>
+        </div>
+        {#each localBranches as branch (branch.name)}
+          {#snippet branchCard()}
+            <article class="branch-row" class:current={branch.current}>
+              <div class="branch-info">
+                <GitBranch size={16} aria-hidden="true" />
+                <div>
+                  <strong>{branch.name}</strong>
+                  <span>local</span>
+                </div>
+              </div>
+              {#if branch.current}
+                <span class="pill pill-active">Current</span>
+              {:else}
+                <div class="branch-actions">
+                  <button class="btn-sm" type="button" onclick={() => onCheckout(branch)} disabled={isBusy}>
+                    Checkout
+                  </button>
+                  <button class="btn-sm" type="button" onclick={() => onMerge(branch)} disabled={isBusy} title="Merge into current">
+                    <GitMerge size={15} aria-hidden="true" />
+                    Merge
+                  </button>
+                </div>
+              {/if}
+            </article>
+          {/snippet}
+          {@render branchCard()}
+        {/each}
+      {/if}
+
+      {#if remoteBranches.length > 0}
+        <div class="branch-group-label" style="margin-top: {localBranches.length > 0 ? '12px' : '0'}">
+          <span>Remote</span>
+          <span class="branch-group-count">{remoteBranches.length}</span>
+        </div>
+        {#each remoteBranches as branch (branch.name)}
+          <article class="branch-row" class:current={branch.current}>
+            <div class="branch-info">
+              <GitBranch size={16} aria-hidden="true" />
+              <div>
+                <strong>{branch.name}</strong>
+                <span>remote</span>
+              </div>
+            </div>
+            {#if branch.current}
+              <span class="pill pill-active">Current</span>
+            {:else}
+              <div class="branch-actions">
+                <button class="btn-sm" type="button" onclick={() => onCheckout(branch)} disabled={isBusy}>
+                  Checkout
+                </button>
+                <button class="btn-sm" type="button" onclick={() => onMerge(branch)} disabled={isBusy} title="Merge into current">
+                  <GitMerge size={15} aria-hidden="true" />
+                  Merge
+                </button>
+              </div>
+            {/if}
+          </article>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</section>