feat(ui): localize commit AI and git error messages to English

Translate commit AI prompts, model labels, and git/keychain errors to English so the app and generated messages are consistent. Also add a discard confirmation dialog and update the UI text/styles to match the new flow. - src-tauri/crates/commit_ai/src/cloud.rs - Translate HTTP and API error messages to English. - Keep request timeout and token sizing behavior unchanged. - src-tauri/crates/commit_ai/src/lib.rs - Translate model labels, prompt text, and validation errors. - Keep diff truncation and message sanitization logic intact. - src-tauri/src/git.rs - Translate git, credential, merge, and history errors. - Update AI provider validation messages to English. - src/lib/components/* - Update AI settings, commit panel, credential, and loading UI text. - Add discard confirmation dialog for destructive actions. - src/App.svelte, src/app.css - Adjust app layout and styling for the new dialog and text changes.
2026-07-02 22:12:20 +02:00
parent 6b7186d040
commit 70de45e1ba
11 changed files with 537 additions and 187 deletions
@@ -11,6 +11,7 @@
  import CompareDialog from "./lib/components/CompareDialog.svelte";
  import CompareSelectDialog from "./lib/components/CompareSelectDialog.svelte";
  import CredentialDialog from "./lib/components/CredentialDialog.svelte";
+  import DiscardConfirmDialog from "./lib/components/DiscardConfirmDialog.svelte";
  import ExplorerPanel from "./lib/components/ExplorerPanel.svelte";
  import FileHistoryPanel from "./lib/components/FileHistoryPanel.svelte";
  import GlobalSearchDialog from "./lib/components/GlobalSearchDialog.svelte";
@@ -96,6 +97,9 @@

  type UpdateToastState = "available" | "downloading" | "installed" | "error";
  type AppView = "management" | "repository";
+  type PendingDiscard =
+    | { kind: "file"; file: GitFileStatus; staged: boolean }
+    | { kind: "hunk"; file: GitFileStatus; staged: boolean; action: PatchApplyAction; patch: string };

  interface RepoTab {
    path: string;
@@ -110,6 +114,10 @@
  const OPEN_REPOS_KEY = "gitlite.openRepos.v1";
  const RECENT_REPOS_KEY = "gitlite.recentRepos.v1";
  const AI_SETTINGS_KEY = "gitlite.aiSettings.v1";
+  const COMMIT_PANEL_HEIGHT_KEY = "gitlite.commitPanelHeight.v1";
+  const COMMIT_PANEL_DEFAULT_HEIGHT = 220;
+  const COMMIT_PANEL_MIN_HEIGHT = COMMIT_PANEL_DEFAULT_HEIGHT;
+  const COMMIT_PANEL_MAX_HEIGHT = 640;

  // ── State ──────────────────────────────────────────────────────────────────

@@ -157,6 +165,7 @@
  let linePatchText = "";
  let linePatchLoading = false;
  let linePatchError = "";
+  let pendingDiscard: PendingDiscard | null = null;
  let globalSearchOpen = false;
  let lastSearchQuery = "";
  let globalSearchResults: GitSearchHit[] = [];
@@ -186,6 +195,10 @@
  let updateCheckInFlight = false;
  let updateDownloadTotal = 0;
  let updateDownloadedBytes = 0;
+  let commitPanelHeight = loadCommitPanelHeight();
+  let resizingCommitPanel = false;
+  let resizeStartY = 0;
+  let resizeStartHeight = 0;

  // ── Derived ────────────────────────────────────────────────────────────────

@@ -542,6 +555,56 @@
    }
  }

+  function clampCommitPanelHeight(value: number): number {
+    return Math.min(COMMIT_PANEL_MAX_HEIGHT, Math.max(COMMIT_PANEL_MIN_HEIGHT, Math.round(value)));
+  }
+
+  function loadCommitPanelHeight(): number {
+    try {
+      const stored = Number(localStorage.getItem(COMMIT_PANEL_HEIGHT_KEY));
+      if (Number.isFinite(stored) && stored > 0) return clampCommitPanelHeight(stored);
+    } catch {
+      // Fall through to the default below.
+    }
+    return COMMIT_PANEL_DEFAULT_HEIGHT;
+  }
+
+  function persistCommitPanelHeight(value: number) {
+    try {
+      localStorage.setItem(COMMIT_PANEL_HEIGHT_KEY, String(value));
+    } catch {
+      // Local storage is best-effort only; resizing must keep working without it.
+    }
+  }
+
+  function startCommitPanelResize(event: PointerEvent) {
+    event.preventDefault();
+    resizingCommitPanel = true;
+    resizeStartY = event.clientY;
+    resizeStartHeight = commitPanelHeight;
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+  }
+
+  function onCommitPanelResizeMove(event: PointerEvent) {
+    if (!resizingCommitPanel) return;
+    commitPanelHeight = clampCommitPanelHeight(resizeStartHeight + (resizeStartY - event.clientY));
+  }
+
+  function endCommitPanelResize(event: PointerEvent) {
+    if (!resizingCommitPanel) return;
+    resizingCommitPanel = false;
+    persistCommitPanelHeight(commitPanelHeight);
+    const target = event.currentTarget as HTMLElement;
+    if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+  }
+
+  function onCommitPanelResizeKeydown(event: KeyboardEvent) {
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+    event.preventDefault();
+    commitPanelHeight = clampCommitPanelHeight(commitPanelHeight + (event.key === "ArrowUp" ? 20 : -20));
+    persistCommitPanelHeight(commitPanelHeight);
+  }
+
  function rememberRecentRepo(path: string) {
    recentRepoPaths = uniqueRepoPaths([path, ...recentRepoPaths]).slice(0, 40);
    persistRepoLists();
@@ -692,7 +755,7 @@
  }

  function isCancellationMessage(message: string): boolean {
-    return message.toLowerCase().includes("abgebrochen");
+    return message.toLowerCase().includes("cancelled");
  }

  function cancelActiveFileHistoryLoad() {
@@ -766,7 +829,7 @@
    if (isBusy) return;
    try {
      const selected = await openDialog({
-        title: "Repository folder auswaehlen",
+        title: "Select repository folder",
        directory: true,
        multiple: false,
        defaultPath: repoPath.trim() || activeRepoPath || undefined,
@@ -975,7 +1038,7 @@
      if (auth) {
        if (key) void credDelete(key).catch(() => {});
        credDialogError =
-          "Zugangsdaten wurden abgelehnt oder sind abgelaufen. Bitte erneut anmelden.";
+          "Credentials were rejected or have expired. Please sign in again.";
        credDialogAction = action;
        credDialogKey = key;
        credDialogOpen = true;
@@ -984,7 +1047,7 @@
        errorMessage = message;
      }
    } else {
-      credDialogError = message || "Anmeldung fehlgeschlagen.";
+      credDialogError = message || "Sign-in failed.";
    }
  }

@@ -1022,11 +1085,11 @@
    if (errorMessage && !isAuthError(errorMessage) && isNonFastForwardPushError(errorMessage)) {
      errorMessage = "";
      const shouldSync = window.confirm(
-        "Der Remote hat neuere Commits, deshalb wurde der Push abgelehnt.\n\nJetzt Pull/Merge ausfuehren und danach den Push erneut versuchen?",
+        "The remote has newer commits, so the push was rejected.\n\nRun Pull/Merge now and try pushing again afterwards?",
      );

      if (!shouldSync) {
-        const message = "Push abgelehnt: Der Remote hat neuere Commits. Pull zuerst ausfuehren, dann erneut pushen.";
+        const message = "Push rejected: the remote has newer commits. Pull first, then push again.";
        if (fromStore) errorMessage = message;
        else credDialogError = message;
        return;
@@ -1050,7 +1113,7 @@
      if (statusHasConflicts(status)) {
        credDialogOpen = false;
        credDialogAction = null;
-        errorMessage = "Pull hat Merge-Konflikte erzeugt. Loese die Konflikte, committe den Merge und pushe danach erneut.";
+        errorMessage = "Pull produced merge conflicts. Resolve the conflicts, commit the merge, and then push again.";
        return;
      }

@@ -1125,7 +1188,12 @@
    });
  }

-  async function discardFile(file: GitFileStatus, staged: boolean) {
+  function discardFile(file: GitFileStatus, staged: boolean) {
+    if (!activeRepoPath || isBusy) return;
+    pendingDiscard = { kind: "file", file, staged };
+  }
+
+  async function runDiscardFile(file: GitFileStatus, staged: boolean) {
    await runOperation(`Discarding ${file.path}`, async () => {
      applyStatus(await restoreFiles(activeRepoPath, [file.path], staged));
      await refreshExplorerFiles(activeRepoPath);
@@ -1176,9 +1244,17 @@
    }
  }

-  async function applyLinePatch(action: PatchApplyAction, patch: string) {
-    if (!activeRepoPath || !linePatchFile || isBusy) return;
-    const file = linePatchFile;
+  function isDiscardPatchAction(action: PatchApplyAction): boolean {
+    return action === "discard-staged" || action === "discard-unstaged";
+  }
+
+  async function runLinePatchAction(
+    action: PatchApplyAction,
+    patch: string,
+    file: GitFileStatus,
+    staged: boolean,
+  ) {
+    if (!activeRepoPath || isBusy) return;
    operation = patchOperationLabel(action, file);
    errorMessage = "";
    linePatchError = "";
@@ -1188,7 +1264,7 @@
      await refreshExplorerFiles(activeRepoPath);
      await refreshFileHistory(activeRepoPath);

-      const updatedPatch = await getFilePatch(activeRepoPath, file.path, linePatchStaged);
+      const updatedPatch = await getFilePatch(activeRepoPath, file.path, staged);
      if (updatedPatch.trim()) {
        linePatchText = updatedPatch;
      } else {
@@ -1204,6 +1280,37 @@
    }
  }

+  async function applyLinePatch(action: PatchApplyAction, patch: string) {
+    if (!activeRepoPath || !linePatchFile || isBusy) return;
+    const file = linePatchFile;
+    const staged = linePatchStaged;
+
+    if (isDiscardPatchAction(action)) {
+      pendingDiscard = { kind: "hunk", file, staged, action, patch };
+      return;
+    }
+
+    await runLinePatchAction(action, patch, file, staged);
+  }
+
+  async function confirmDiscard() {
+    const discard = pendingDiscard;
+    if (!discard || !activeRepoPath || isBusy) return;
+
+    if (discard.kind === "file") {
+      await runDiscardFile(discard.file, discard.staged);
+    } else {
+      await runLinePatchAction(discard.action, discard.patch, discard.file, discard.staged);
+    }
+
+    pendingDiscard = null;
+  }
+
+  function closeDiscardConfirm() {
+    if (isBusy) return;
+    pendingDiscard = null;
+  }
+
  async function stageAllFiles() {
    const paths = changedFiles.filter((f) => f.unstaged !== null).map((f) => f.path);
    if (paths.length === 0) return;
@@ -1441,7 +1548,7 @@
    } catch (error) {
      if (globalSearchId === searchId) {
        const message = errorToMessage(error);
-        globalSearchError = message.includes("abgebrochen") ? "Suche wurde abgebrochen." : message;
+        globalSearchError = message.includes("cancelled") ? "Search was cancelled." : message;
      }
    } finally {
      if (globalSearchId === searchId) {
@@ -1454,7 +1561,7 @@
  async function cancelGlobalSearch() {
    if (!globalSearchId) return;
    const searchId = globalSearchId;
-    globalSearchError = "Abbruch wird angefordert...";
+    globalSearchError = "Requesting cancellation...";
    try {
      await cancelCodeSearch(searchId);
    } catch (error) {
@@ -1533,7 +1640,8 @@
  // ── Event handlers ─────────────────────────────────────────────────────────

  function handleWindowKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape" && compareDialogOpen) closeCompareDialog();
+    if (event.key === "Escape" && pendingDiscard && !isBusy) closeDiscardConfirm();
+    else if (event.key === "Escape" && compareDialogOpen) closeCompareDialog();
    else if (event.key === "Escape" && newBranchCommit) newBranchCommit = null;
    else if (event.key === "Escape" && renameBranchTarget) renameBranchTarget = null;
    else if (event.key === "Escape" && compareSelectOpen) compareSelectOpen = false;
@@ -1813,7 +1921,7 @@
          </div>
        </div>

-        <div class="top-section">
+        <div class="top-section" style="--commit-panel-height: {commitPanelHeight}px;">
          <StatusPanel
            {changedFiles}
            {stagedCount}
@@ -1830,6 +1938,24 @@
            onStageAll={stageAllFiles}
            onUnstageAll={unstageAllFiles}
          />
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+          <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+          <div
+            class="panel-resize-handle"
+            class:resizing={resizingCommitPanel}
+            role="separator"
+            aria-orientation="horizontal"
+            aria-label="Resize commit panel height"
+            aria-valuenow={commitPanelHeight}
+            aria-valuemin={COMMIT_PANEL_MIN_HEIGHT}
+            aria-valuemax={COMMIT_PANEL_MAX_HEIGHT}
+            tabindex="0"
+            onpointerdown={startCommitPanelResize}
+            onpointermove={onCommitPanelResizeMove}
+            onpointerup={endCommitPanelResize}
+            onpointercancel={endCommitPanelResize}
+            onkeydown={onCommitPanelResizeKeydown}
+          ></div>
          <CommitPanel
            {commitMessage}
            {canCommit}
@@ -1908,6 +2034,17 @@
  />
 {/if}

+{#if pendingDiscard}
+  <DiscardConfirmDialog
+    file={pendingDiscard.file}
+    staged={pendingDiscard.staged}
+    scope={pendingDiscard.kind === "hunk" ? "hunk" : "file"}
+    {isBusy}
+    onConfirm={confirmDiscard}
+    onClose={closeDiscardConfirm}
+  />
+{/if}
+
 {#if globalSearchOpen}
  <GlobalSearchDialog
    {hasRepository}
@@ -150,6 +150,19 @@
    background: linear-gradient(180deg, rgba(65, 209, 255, 0.18), rgba(100, 108, 255, 0.16));
  }

+  .btn-danger {
+    border-color: rgba(255, 90, 103, 0.72);
+    color: #ffffff;
+    background: linear-gradient(135deg, rgba(255, 90, 103, 0.92), rgba(195, 44, 64, 0.9));
+    box-shadow: 0 0 22px rgba(255, 90, 103, 0.16);
+    font-weight: 700;
+  }
+  .btn-danger:hover:not(:disabled) {
+    border-color: rgba(255, 161, 169, 0.86);
+    color: #ffffff;
+    background: linear-gradient(135deg, rgba(255, 111, 124, 0.96), rgba(214, 55, 77, 0.95));
+  }
+
  .panel {
    min-width: 0;
    min-height: 0;
@@ -940,13 +953,39 @@
  .top-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr) minmax(210px, auto);
+    grid-template-rows: minmax(120px, 1fr) 14px var(--commit-panel-height, 220px);
    min-height: 0;
-    gap: 8px;
+    gap: 0;
    padding: 8px;
    overflow: hidden;
  }

+  .panel-resize-handle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: row-resize;
+    touch-action: none;
+  }
+  .panel-resize-handle::before {
+    content: "";
+    width: 40px;
+    height: 3px;
+    border-radius: 999px;
+    background: var(--color-border);
+    transition: background-color 0.15s ease;
+  }
+  .panel-resize-handle:hover::before,
+  .panel-resize-handle.resizing::before {
+    background: var(--color-accent);
+  }
+  .panel-resize-handle:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -2px;
+    border-radius: 4px;
+  }
+
  /* --- File list / change lanes --- */

  .file-list { padding: 6px; overflow: auto; }
@@ -1330,9 +1369,35 @@

  /* --- Commit form --- */

-  .commit-form { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 8px; padding: 10px; }
-  .commit-form textarea { flex: 1 1 0; min-height: 80px; resize: none; }
-  .commit-actions-row { display: flex; gap: 8px; }
+  .commit-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .commit-panel .section-head { flex: 0 0 auto; }
+  .commit-form {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto auto;
+    flex: 1 1 0;
+    min-height: 0;
+    gap: 8px;
+    padding: 10px;
+    overflow: hidden;
+  }
+  .commit-form textarea {
+    min-height: 0;
+    height: 100%;
+    resize: none;
+    overflow: auto;
+  }
+  .commit-actions-row {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 8px;
+    min-width: 0;
+  }
+  .commit-actions-row .btn-primary { min-width: 0; }
  .commit-ai-button { flex: 0 0 auto; min-width: 64px; justify-content: center; }
  .commit-ai-settings-button { flex: 0 0 auto; width: 38px; min-width: 38px; padding: 0; justify-content: center; }
  .commit-block-reason {
@@ -1606,6 +1671,14 @@
    max-height: calc(100vh - 32px);
    overflow: auto;
  }
+  .discard-confirm-dialog {
+    display: grid;
+    grid-template-rows: auto auto auto;
+    width: min(560px, calc(100vw - 32px));
+    height: auto;
+    max-height: calc(100vh - 32px);
+    overflow: auto;
+  }
  .ai-settings-dialog {
    display: block;
    width: min(560px, calc(100vw - 32px));
@@ -1857,6 +1930,59 @@

  .prepared-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: #4eca76; font-size: 12px; font-weight: 700; }

+  .discard-confirm-body {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 14px;
+    padding: 18px 16px 16px;
+  }
+  .discard-warning-icon {
+    display: grid;
+    place-items: center;
+    width: 42px;
+    height: 42px;
+    border: 1px solid rgba(255, 90, 103, 0.32);
+    border-radius: 10px;
+    color: #ff9aa4;
+    background: rgba(255, 90, 103, 0.1);
+  }
+  .discard-confirm-copy {
+    display: grid;
+    gap: 10px;
+    min-width: 0;
+    color: var(--color-ink-muted);
+    font-size: 13px;
+    line-height: 1.45;
+  }
+  .discard-confirm-copy p { margin: 0; }
+  .discard-target {
+    display: block;
+    min-width: 0;
+    max-height: 84px;
+    overflow: auto;
+    padding: 8px 9px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 6px;
+    color: var(--color-ink);
+    background: rgba(0, 0, 0, 0.18);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .discard-warning-text {
+    color: #ffb8bf;
+    font-weight: 650;
+  }
+  .discard-confirm-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 16px 14px;
+    border-top: 1px solid var(--color-border-subtle);
+    background: var(--color-surface-dim);
+  }
+
  .line-patch-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
@@ -2893,7 +3019,7 @@
 /* Stack CommitPanel below StatusPanel; history panels stay side by side */
@media (max-width: 1100px) {
  .workspace    { grid-template-columns: clamp(185px, 16vw, 220px) minmax(0, 1fr) clamp(380px, 38vw, 500px); }
-  .top-section  { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 190px; }
+  .top-section  { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 14px var(--commit-panel-height, 190px); }
 }

 /* Compact: stack history panels vertically, narrow sidebars */
@@ -2919,7 +3045,7 @@
  .workspace      { grid-template-columns: 1fr; gap: 6px; }
  .history-aside  { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 1fr) minmax(150px, 0.5fr); min-height: 380px; }
  .left-sidebar   { grid-template-rows: minmax(200px, 1fr) minmax(240px, 1.2fr); min-height: 440px; }
-  .top-section    { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 190px; }
+  .top-section    { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 14px var(--commit-panel-height, 190px); }
  .repo-form      { grid-template-columns: 1fr; }
  .repo-tabbar    { grid-template-columns: minmax(0, 1fr) auto; }
  .repo-tab.management { min-width: 0; }
@@ -153,9 +153,9 @@
        <div class="cred-token-hint">
          <AlertCircle size={13} aria-hidden="true" />
          <span>
-            Beim Wechsel wird das Modell{selectedLocalModel ? ` (${formatSize(selectedLocalModel.approx_size_mb)})` : ""}
-            im Hintergrund heruntergeladen — je nach Internetverbindung kann das mehrere Minuten dauern.
-            Danach bleibt es lokal zwischengespeichert und lädt beim nächsten Start sofort.
+            Switching downloads the model{selectedLocalModel ? ` (${formatSize(selectedLocalModel.approx_size_mb)})` : ""}
+            in the background — depending on your internet connection this can take several minutes.
+            After that it stays cached locally and loads instantly on the next start.
          </span>
        </div>
      {:else if provider === "openai"}
@@ -230,7 +230,7 @@
        </div>
        <div class="cred-token-hint">
          <Globe size={13} aria-hidden="true" />
-          <span>Für lokale OpenAI-kompatible Server wie Ollama oder LM Studio. Die Basis-URL sollte auf /v1 enden.</span>
+          <span>For local OpenAI-compatible servers like Ollama or LM Studio. The base URL should end in /v1.</span>
        </div>
      {/if}

@@ -58,7 +58,7 @@
  );
 </script>

-<section class="panel flex flex-col" aria-label="Commit">
+<section class="panel commit-panel" aria-label="Commit">
  <div class="section-head">
    <div>
      <span class="eyebrow">Commit</span>
@@ -44,10 +44,10 @@
    (mode === "token" || username.trim().length > 0),
  );
  let actionLabel = $derived(action === "push" ? "Push" : "Pull");
-  let actionTitle = $derived(action === "push" ? "Push authentifizieren" : "Pull authentifizieren");
+  let actionTitle = $derived(action === "push" ? "Authenticate push" : "Authenticate pull");
  let actionHint = $derived(action === "push"
-    ? "Der Remote braucht Schreibrechte. Nutze ein Passwort oder einen Token mit passenden Repository-Rechten."
-    : "Der Remote braucht Zugriff auf das Repository. Nutze deine Git-Zugangsdaten oder einen Personal Access Token.");
+    ? "The remote needs write access. Use a password or a token with the appropriate repository permissions."
+    : "The remote needs access to the repository. Use your Git credentials or a personal access token.");

  function handleSubmit(e: SubmitEvent) {
    e.preventDefault();
@@ -66,7 +66,7 @@
  role="presentation"
  onclick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
 >
-  <div class="cred-card" role="dialog" aria-modal="true" aria-label="Git-Zugangsdaten" tabindex="-1">
+  <div class="cred-card" role="dialog" aria-modal="true" aria-label="Git credentials" tabindex="-1">
    <div class="cred-hero">
      <div class="cred-hero-top">
        <div class="cred-hero-icon">
@@ -80,7 +80,7 @@
          <p class="cred-hero-label">{actionLabel} Remote</p>
          <h2 class="cred-hero-title">{actionTitle}</h2>
        </div>
-        <button class="cred-close" type="button" onclick={onCancel} title="Abbrechen" aria-label="Abbrechen">
+        <button class="cred-close" type="button" onclick={onCancel} title="Cancel" aria-label="Cancel">
          <X size={16} aria-hidden="true" />
        </button>
      </div>
@@ -89,12 +89,12 @@

      <div class="cred-security-note">
        <ShieldCheck size={14} aria-hidden="true" />
-        <span>Beim Speichern landet der Token verschluesselt im Schluesselbund des Betriebssystems – nie im Klartext.</span>
+        <span>When saved, the token is stored encrypted in the operating system's keychain — never in plain text.</span>
      </div>
    </div>

    <form class="cred-body" onsubmit={handleSubmit}>
-      <div class="cred-segment" role="group" aria-label="Authentifizierungsart">
+      <div class="cred-segment" role="group" aria-label="Authentication method">
        <button
          type="button"
          class="cred-seg-btn"
@@ -103,7 +103,7 @@
          aria-pressed={mode === "credentials"}
        >
          <User size={13} aria-hidden="true" />
-          Username + Passwort
+          Username + password
        </button>
        <button
          type="button"
@@ -127,7 +127,7 @@
                id="cred-username"
                type="text"
                bind:value={username}
-                placeholder="z. B. mein-github-username"
+                placeholder="e.g. my-github-username"
                autocomplete="username"
                disabled={isBusy}
              />
@@ -137,7 +137,7 @@

        <div class="cred-field">
          <label class="cred-field-label" for="cred-password">
-            {mode === "token" ? "Token" : "Passwort"}
+            {mode === "token" ? "Token" : "Password"}
          </label>
          <div class="cred-input">
            <Lock size={15} class="cred-field-icon" aria-hidden="true" />
@@ -146,8 +146,8 @@
              type={showPassword ? "text" : "password"}
              bind:value={password}
              placeholder={mode === "token"
-                ? "ghp_... oder anderer Zugangstoken"
-                : "Passwort oder Personal Access Token"}
+                ? "ghp_... or another access token"
+                : "Password or personal access token"}
              autocomplete="current-password"
              disabled={isBusy}
            />
@@ -156,7 +156,7 @@
              class="cred-reveal"
              onclick={() => { showPassword = !showPassword; }}
              tabindex="-1"
-              aria-label={showPassword ? "Verbergen" : "Anzeigen"}
+              aria-label={showPassword ? "Hide" : "Show"}
            >
              {#if showPassword}
                <EyeOff size={14} aria-hidden="true" />
@@ -171,7 +171,7 @@
      {#if mode === "token"}
        <div class="cred-token-hint">
          <Key size={13} aria-hidden="true" />
-          <span>Username wird automatisch auf <code>oauth2</code> gesetzt. Das funktioniert mit GitHub, GitLab und Bitbucket.</span>
+          <span>Username is automatically set to <code>oauth2</code>. This works with GitHub, GitLab, and Bitbucket.</span>
        </div>
      {/if}

@@ -184,26 +184,26 @@

      {#if saveSession}
        <div class="cred-expiry">
-          <label class="cred-field-label" for="cred-expiry">Ablaufdatum (optional)</label>
+          <label class="cred-field-label" for="cred-expiry">Expiration date (optional)</label>
          <input
            id="cred-expiry"
            type="date"
            bind:value={expiresAt}
            disabled={isBusy}
          />
-          <span class="cred-expiry-hint">Nach diesem Datum wird automatisch erneut nach dem Login gefragt.</span>
+          <span class="cred-expiry-hint">After this date you'll automatically be asked to log in again.</span>
        </div>
      {/if}

      <div class="cred-footer">
        <label class="cred-save">
          <input type="checkbox" bind:checked={saveSession} disabled={isBusy} />
-          <span>Im Schluesselbund speichern</span>
+          <span>Save in keychain</span>
        </label>

        <div class="cred-btns">
          <button type="button" class="cred-cancel" onclick={onCancel} disabled={isBusy}>
-            Abbrechen
+            Cancel
          </button>
          <button class="cred-submit" type="submit" disabled={!canSubmit}>
            {#if isBusy}
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { AlertTriangle, LoaderCircle, RotateCcw, X } from "@lucide/svelte";
+  import type { GitFileStatus } from "../types";
+
+  interface Props {
+    file: GitFileStatus;
+    staged: boolean;
+    scope: "file" | "hunk";
+    isBusy: boolean;
+    onConfirm: () => void | Promise<void>;
+    onClose: () => void;
+  }
+
+  let {
+    file,
+    staged = false,
+    scope = "file",
+    isBusy = false,
+    onConfirm = () => {},
+    onClose = () => {},
+  }: Props = $props();
+
+  let targetPath = $derived(file.old_path ? `${file.old_path} -> ${file.path}` : file.path);
+  let title = $derived(scope === "hunk" ? "Discard hunk?" : "Discard file changes?");
+  let scopeLabel = $derived(scope === "hunk" ? "Selected hunk" : "File changes");
+  let sourceLabel = $derived(staged ? "staged changes" : "unstaged changes");
+
+  function closeFromBackdrop(event: MouseEvent) {
+    if (isBusy || event.target !== event.currentTarget) return;
+    onClose();
+  }
+</script>
+
+<div class="dialog-backdrop" role="presentation" onclick={closeFromBackdrop}>
+  <div class="dialog discard-confirm-dialog" role="dialog" aria-modal="true" aria-label={title}>
+    <header class="dialog-header">
+      <div>
+        <span class="eyebrow">Confirm discard</span>
+        <p class="dialog-title">{title}</p>
+      </div>
+      <button class="btn-sm dialog-close" type="button" onclick={onClose} disabled={isBusy} aria-label="Close">
+        <X size={16} aria-hidden="true" />
+      </button>
+    </header>
+
+    <div class="discard-confirm-body">
+      <div class="discard-warning-icon" aria-hidden="true">
+        <AlertTriangle size={22} />
+      </div>
+
+      <div class="discard-confirm-copy">
+        <p>
+          This will reset the {sourceLabel} for the {scopeLabel.toLowerCase()} below.
+        </p>
+        <code class="discard-target" title={targetPath}>{targetPath}</code>
+        <p class="discard-warning-text">
+          This cannot be undone. If the file only exists in your working tree, it can be deleted entirely.
+        </p>
+      </div>
+    </div>
+
+    <footer class="discard-confirm-actions">
+      <button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>Cancel</button>
+      <button class="btn-danger" type="button" onclick={onConfirm} disabled={isBusy}>
+        {#if isBusy}
+          <LoaderCircle class="spin" size={15} aria-hidden="true" />
+        {:else}
+          <RotateCcw size={15} aria-hidden="true" />
+        {/if}
+        Discard
+      </button>
+    </footer>
+  </div>
+</div>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let label = "Repository wird geöffnet";
+  export let label = "Opening repository";
  export let repoName = "";
 </script>