wsb-daemon 0.275.7622

<script lang="ts">
  import { git } from "../../../stores/git.svelte.js";
  import AppIcon from "../../layout/AppIcon.svelte";

  let {
    repoPath,
    fleet = false,
    onclose,
  }: {
    repoPath?: string;
    fleet?: boolean;
    onclose: () => void;
  } = $props();

  let message = $state("");
  /// Why this dialog is still open. It rendered one and never set it, so a
  /// commit the git store refused — another operation was already running —
  /// looked like a button that did nothing.
  let error = $state<string | null>(null);

  function handleSubmit() {
    const trimmed = message.trim();
    if (!trimmed) {
      error = "A commit needs a message.";
      return;
    }
    error = null;
    const accepted = fleet ? git.commitAll(trimmed) : git.commit(trimmed, repoPath);
    if (accepted) {
      onclose();
      return;
    }
    const running = git.operationInProgress;
    error = running
      ? `git ${running} is still running — nothing was committed. Try again when it finishes.`
      : "The commit was not started.";
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "Escape") onclose();
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
  }
</script>

<div class="modal-overlay" onclick={onclose} onkeydown={handleKeydown} role="presentation">
  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
  <div
    class="modal-panel"
    onclick={(e) => e.stopPropagation()}
    onkeydown={handleKeydown}
    role="dialog"
    aria-label="Commit"
    tabindex="0"
  >
    <div class="modal-header">
      <h2 class="modal-title">{fleet ? "Fleet Commit All" : "Commit"}</h2>
      <button class="modal-close" onclick={onclose} aria-label="Close">
        <AppIcon name="x" size={14} />
      </button>
    </div>
    <div class="modal-body">
      {#if error}
        <div class="modal-error">{error}</div>
      {/if}

      <label class="field">
        <span class="field-label">Commit message</span>
        <textarea
          class="field-textarea"
          placeholder="Describe your changes"
          bind:value={message}
          rows="4"
        ></textarea>
      </label>

      <div class="hint">Press {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to commit</div>

      <div class="modal-actions">
        <button class="btn-cancel" onclick={onclose}>Cancel</button>
        <button
          class="btn-submit"
          disabled={!message.trim()}
          onclick={handleSubmit}
        >
          Commit
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--wb-spacing-4);
    margin-bottom: var(--wb-spacing-12);
  }

  .field-label {
    font-size: var(--wb-font-size-11);
    font-weight: 600;
    color: var(--vscode-foreground);
  }

  .field-textarea {
    padding: var(--wb-spacing-8) var(--wb-spacing-10);
    font-size: var(--wb-font-size-13);
    font-family: var(--wsb-font-sans);
    color: var(--vscode-editor-foreground);
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-widget-border);
    border-radius: var(--wsb-radius-sm);
    resize: vertical;
    min-height: var(--wb-control-size-80);
  }

  .field-textarea:focus {
    outline: none;
    border-color: var(--vscode-focusBorder);
  }

  .hint {
    font-size: var(--wb-font-size-11);
    color: var(--vscode-disabledForeground);
    margin-bottom: var(--wb-spacing-12);
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--wb-spacing-8);
    margin-top: var(--wb-spacing-16);
  }

  .btn-cancel {
    height: var(--wb-control-size-32);
    padding: 0 var(--wb-spacing-14);
    font-size: var(--wb-font-size-12);
    font-weight: 500;
    color: var(--vscode-foreground);
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-widget-border);
    border-radius: var(--wsb-radius-sm);
    cursor: pointer;
  }

  .btn-cancel:hover {
    background: var(--vscode-list-hoverBackground);
  }

  .btn-submit {
    height: var(--wb-control-size-32);
    padding: 0 var(--wb-spacing-14);
    font-size: var(--wb-font-size-12);
    font-weight: 600;
    color: white;
    background: var(--vscode-testing-iconPassed);
    border-radius: var(--wsb-radius-sm);
    cursor: pointer;
  }

  .btn-submit:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .btn-submit:hover:not(:disabled) {
    opacity: 0.9;
  }
</style>