<script lang="ts">
import { git } from "../../../stores/git.svelte.js";
import AppIcon from "../../layout/AppIcon.svelte";
let {
onclose,
}: {
onclose: () => void;
} = $props();
let message = $state("merge-back: merge feature into main");
function handleSubmit() {
const accepted = git.mergeBack(message.trim() || undefined);
if (accepted) onclose();
}
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="Fleet Merge Back"
tabindex="0"
>
<div class="modal-header">
<h2 class="modal-title">Fleet Merge Back</h2>
<button class="modal-close" onclick={onclose} aria-label="Close">
<AppIcon name="x" size={14} />
</button>
</div>
<div class="modal-body">
<div class="description">
Stage, commit, push feature branch, checkout main, fast-forward merge, push main — in every repo.
</div>
<label class="field">
<span class="field-label">Commit message (for uncommitted changes)</span>
<textarea
class="field-textarea"
placeholder="Describe the merge-back"
bind:value={message}
rows="3"
></textarea>
</label>
<div class="modal-actions">
<button class="btn-cancel" onclick={onclose}>Cancel</button>
<button
class="btn-submit"
onclick={handleSubmit}
>
Merge Back
</button>
</div>
</div>
</div>
</div>
<style>
.description {
font-size: var(--wb-font-size-12);
color: var(--vscode-disabledForeground);
margin-bottom: var(--wb-spacing-12);
line-height: 1.5;
}
.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-60);
}
.field-textarea:focus {
outline: none;
border-color: var(--vscode-focusBorder);
}
.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>