wsb-daemon 0.275.7622

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

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

  let branchName = $state("");
  let fromBranch = $state("");
  let branches = $state<string[]>([]);
  let loading = $state(true);
  let error: string | null = $state(null);

  onMount(async () => {
    try {
      const result = await git.getBranches(repoPath);
      branches = result.branches;
      fromBranch = result.current ?? "";
    } catch (e) {
      error = e instanceof Error ? e.message : String(e);
    } finally {
      loading = false;
    }
  });

  function handleSubmit() {
    const name = branchName.trim();
    if (!name) return;
    const accepted = git.createBranch(name, repoPath, fromBranch || undefined);
    if (accepted) onclose();
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "Escape") onclose();
    if (e.key === "Enter" && !e.shiftKey) 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="Create Branch"
    tabindex="0"
  >
    <div class="modal-header">
      <h2 class="modal-title">Create Branch</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}

      {#if loading}
        <div class="loading">Loading...</div>
      {:else}
        <label class="field">
          <span class="field-label">Branch name</span>
          <input
            class="field-input"
            type="text"
            placeholder="feature/my-branch"
            bind:value={branchName}
          />
        </label>

        <label class="field">
          <span class="field-label">From branch</span>
          <select class="field-select" bind:value={fromBranch}>
            {#each branches as branch}
              <option value={branch}>{branch}</option>
            {/each}
          </select>
        </label>

        <div class="modal-actions">
          <button class="btn-cancel" onclick={onclose}>Cancel</button>
          <button
            class="btn-submit"
            disabled={!branchName.trim()}
            onclick={handleSubmit}
          >
            Create Branch
          </button>
        </div>
      {/if}
    </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-input,
  .field-select {
    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);
  }

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

  .loading {
    padding: var(--wb-spacing-12) 0;
    font-size: var(--wb-font-size-12);
    color: var(--vscode-disabledForeground);
  }

  .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>