feat(CreateIssueDialog): replace plain textarea with CommentEditor for description

Replace the simple <textarea> with the CommentEditor component (imported at
top) and bind description to it. Pass locale-aware props (language,
ariaLabel, previewLabel, placeholder) and keep disabled/rows bindings so the
dialog behavior is unchanged.

Also adjust styles to remove textarea-specific rules (resize/line-height and
focus handling) and update the selector sets to reflect the component change.
This commit is contained in:
2026-09-22 09:13:28 +02:00
parent 6f55cf8ba1
commit 865a9a5560
+11 -4
View File
@@ -2,6 +2,7 @@
import { onMount, onDestroy } from "svelte";
import { CirclePlus, X } from "@lucide/svelte";
import SelectMenu from "./SelectMenu.svelte";
import CommentEditor from "./CommentEditor.svelte";
import { createIntegrationIssue, listIntegrationRepositories, listAzureIssueProjects, listAzureIssueTypes } from "../git";
import { integrationCredentialKey } from "../integrations";
import type { GitIntegrationSource, IntegrationIssue, StoredCredential } from "../types";
@@ -98,7 +99,13 @@
{:else if repository && !typesLoading && !types.length}<p>{de ? "Keine Work-Item-Typen verfügbar." : "No work item types available."}</p>{/if}
{/if}
<label>{de ? "Titel" : "Title"}<input bind:this={titleInput} bind:value={title} disabled={busy} required placeholder={de ? "Was soll erledigt werden?" : "What needs to be done?"}/></label>
<label>{de ? "Beschreibung" : "Description"}<textarea bind:value={description} disabled={busy} rows="7" placeholder={de ? "Details zum Issue (optional)" : "Issue details (optional)"}></textarea></label>
<div class="field">
<span>{de ? "Beschreibung" : "Description"}</span>
<CommentEditor bind:value={description} language={de ? "de" : "en"} disabled={busy} rows={7}
ariaLabel={de ? "Beschreibung" : "Description"}
previewLabel={de ? "Beschreibungsvorschau" : "Description preview"}
placeholder={de ? "Details zum Issue (optional)" : "Issue details (optional)"} />
</div>
{#if error}<p class="error" role="alert">{de ? "Issue konnte nicht bestätigt werden." : "Issue creation could not be confirmed."} {error}</p>{/if}
</div>
<footer><button type="button" disabled={busy} onclick={onClose}>{de ? "Abbrechen" : "Cancel"}</button><button class="primary" type="submit" disabled={!canSubmit}>{busy ? (de ? "Wird erstellt …" : "Creating …") : (de ? "Issue erstellen" : "Create issue")}</button></footer>
@@ -112,10 +119,10 @@
header>div {flex:1} header>:global(svg) {color:var(--color-accent)}
h2 {font-size:17px;margin:0} p {margin:4px 0;color:var(--color-ink-dim);font-size:12px}
.body {display:grid;gap:18px;padding:22px 24px}.field,label {display:grid;gap:8px;min-width:0;font-size:12px}
button,input,textarea {font:inherit;color:var(--color-ink);border:1px solid var(--color-border);background:var(--color-surface);border-radius:0}
input,textarea {box-sizing:border-box;width:100%;padding:10px;font-size:13px}textarea {resize:vertical;line-height:1.5}
button,input {font:inherit;color:var(--color-ink);border:1px solid var(--color-border);background:var(--color-surface);border-radius:0}
input {box-sizing:border-box;width:100%;padding:10px;font-size:13px}
button {padding:8px 12px;cursor:pointer;font-size:12px}button:disabled {opacity:.5;cursor:default}
input:focus-visible,textarea:focus-visible,button:focus-visible {outline:2px solid var(--color-accent);outline-offset:2px}
input:focus-visible,button:focus-visible {outline:2px solid var(--color-accent);outline-offset:2px}
.dialog-close {display:grid;place-items:center;padding:6px;border:0;background:transparent}
.error {color:var(--color-danger);overflow-wrap:anywhere;line-height:1.5}
footer {display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--color-border);background:var(--app-dialog-chrome)}