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,57 @@
+<script lang="ts">
+  import { Check, LoaderCircle } from "@lucide/svelte";
+
+  interface Props {
+    commitMessage: string;
+    canCommit: boolean;
+    hasRepository: boolean;
+    isBusy: boolean;
+    operation: string;
+    stagedCount: number;
+    onCommit: () => void;
+    onCommitMessageChange: (msg: string) => void;
+  }
+
+  let {
+    commitMessage = "",
+    canCommit = false,
+    hasRepository = false,
+    isBusy = false,
+    operation = "",
+    stagedCount = 0,
+    onCommit = () => {},
+    onCommitMessageChange = () => {},
+  }: Props = $props();
+
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    onCommit();
+  }
+</script>
+
+<section class="panel flex flex-col" aria-label="Commit">
+  <div class="section-head">
+    <div>
+      <span class="eyebrow">Commit</span>
+      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Message</h2>
+    </div>
+    <span class="pill pill-count">{stagedCount} staged</span>
+  </div>
+
+  <form class="commit-form" onsubmit={handleSubmit}>
+    <textarea
+      value={commitMessage}
+      oninput={(e) => onCommitMessageChange((e.target as HTMLTextAreaElement).value)}
+      placeholder="Commit message..."
+      disabled={!hasRepository || isBusy}
+    ></textarea>
+    <button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit}>
+      {#if operation === "Committing"}
+        <LoaderCircle class="spin" size={16} aria-hidden="true" />
+      {:else}
+        <Check size={16} aria-hidden="true" />
+      {/if}
+      Commit
+    </button>
+  </form>
+</section>