refine ui

restore in a Dialog

src/lib/components/CompareDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ArrowRight, FileCode, X } from "@lucide/svelte";
+  import { ArrowRight, FileCode, RotateCcw, X } from "@lucide/svelte";
   import type { GitCommitComparison, GitDiffFile, FileStatusKind } from "../types";
 
   type SplitRow =
@@ -14,7 +14,9 @@
     comparison: GitCommitComparison;
     selectedDiffPath: string;
     isBusy: boolean;
+    restoreLabel?: string;
     onClose: () => void;
+    onRestore?: () => void;
     onSelectFile: (file: GitDiffFile) => void;
   }
 
@@ -22,7 +24,9 @@
     comparison,
     selectedDiffPath = "",
     isBusy = false,
+    restoreLabel = "",
     onClose = () => {},
+    onRestore = undefined,
     onSelectFile = () => {},
   }: Props = $props();
 
@@ -175,9 +179,17 @@
           <span class="hash">{comparison.to_short}</span>
         </h2>
       </div>
-      <button class="dialog-close" type="button" onclick={onClose} title="Close">
-        <X size={18} aria-hidden="true" />
-      </button>
+      <div class="dialog-header-actions">
+        {#if restoreLabel && onRestore}
+          <button class="btn-secondary compare-restore" type="button" onclick={onRestore} disabled={isBusy} title={restoreLabel}>
+            <RotateCcw size={15} aria-hidden="true" />
+            <span>{restoreLabel}</span>
+          </button>
+        {/if}
+        <button class="dialog-close" type="button" onclick={onClose} title="Close">
+          <X size={18} aria-hidden="true" />
+        </button>
+      </div>
     </header>
 
     {#if comparison.files.length === 0}

src/lib/components/CredentialDialog.svelte

@@ -7,6 +7,7 @@
     Key,
     LoaderCircle,
     Lock,
+    ShieldCheck,
     Upload,
     User,
     X,
@@ -41,6 +42,11 @@
     password.trim().length > 0 &&
     (mode === "token" || username.trim().length > 0),
   );
+  let actionLabel = $derived(action === "push" ? "Push" : "Pull");
+  let actionTitle = $derived(action === "push" ? "Push authentifizieren" : "Pull authentifizieren");
+  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.");
 
   function handleSubmit(e: SubmitEvent) {
     e.preventDefault();
@@ -55,29 +61,33 @@
   onclick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
 >
   <div class="cred-card" role="dialog" aria-modal="true" aria-label="Git-Zugangsdaten" tabindex="-1">
-
-    <!-- Hero header -->
     <div class="cred-hero">
-      <div class="cred-hero-icon">
-        {#if action === "push"}
-          <Upload size={28} aria-hidden="true" />
-        {:else}
-          <Download size={28} aria-hidden="true" />
-        {/if}
+      <div class="cred-hero-top">
+        <div class="cred-hero-icon">
+          {#if action === "push"}
+            <Upload size={27} aria-hidden="true" />
+          {:else}
+            <Download size={27} aria-hidden="true" />
+          {/if}
+        </div>
+        <div class="cred-hero-text">
+          <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">
+          <X size={16} aria-hidden="true" />
+        </button>
       </div>
-      <div class="cred-hero-text">
-        <p class="cred-hero-label">{action === "push" ? "Push" : "Pull"}</p>
-        <h2 class="cred-hero-title">Zugangsdaten erforderlich</h2>
+
+      <p class="cred-hero-copy">{actionHint}</p>
+
+      <div class="cred-security-note">
+        <ShieldCheck size={14} aria-hidden="true" />
+        <span>Wird nur an Git fuer diese Remote-Operation weitergegeben.</span>
       </div>
-      <button class="cred-close" type="button" onclick={onCancel} title="Abbrechen" aria-label="Abbrechen">
-        <X size={16} aria-hidden="true" />
-      </button>
     </div>
 
-    <!-- Form -->
     <form class="cred-body" onsubmit={handleSubmit}>
-
-      <!-- Mode segmented control -->
       <div class="cred-segment" role="group" aria-label="Authentifizierungsart">
         <button
           type="button"
@@ -87,7 +97,7 @@
           aria-pressed={mode === "credentials"}
         >
           <User size={13} aria-hidden="true" />
-          Username & Passwort
+          Username + Passwort
         </button>
         <button
           type="button"
@@ -101,7 +111,6 @@
         </button>
       </div>
 
-      <!-- Fields -->
       <div class="cred-fields">
         {#if mode === "credentials"}
           <div class="cred-field">
@@ -131,7 +140,7 @@
               type={showPassword ? "text" : "password"}
               bind:value={password}
               placeholder={mode === "token"
-                ? "ghp_… oder anderer Zugangstoken"
+                ? "ghp_... oder anderer Zugangstoken"
                 : "Passwort oder Personal Access Token"}
               autocomplete="current-password"
               disabled={isBusy}
@@ -153,15 +162,13 @@
         </div>
       </div>
 
-      <!-- Token hint -->
       {#if mode === "token"}
         <div class="cred-token-hint">
           <Key size={13} aria-hidden="true" />
-          <span>Username wird automatisch auf <code>oauth2</code> gesetzt — funktioniert mit GitHub, GitLab & Bitbucket.</span>
+          <span>Username wird automatisch auf <code>oauth2</code> gesetzt. Das funktioniert mit GitHub, GitLab und Bitbucket.</span>
         </div>
       {/if}
 
-      <!-- Error banner -->
       {#if error}
         <div class="cred-error" role="alert">
           <AlertCircle size={14} aria-hidden="true" />
@@ -169,11 +176,10 @@
         </div>
       {/if}
 
-      <!-- Footer -->
       <div class="cred-footer">
         <label class="cred-save">
           <input type="checkbox" bind:checked={saveSession} disabled={isBusy} />
-          <span>Für diese Sitzung merken</span>
+          <span>Fuer diese Sitzung merken</span>
         </label>
 
         <div class="cred-btns">
@@ -188,11 +194,10 @@
             {:else}
               <Download size={15} aria-hidden="true" />
             {/if}
-            {action === "push" ? "Push" : "Pull"}
+            {actionLabel}
           </button>
         </div>
       </div>
-
     </form>
   </div>
 </div>

src/lib/components/HistoryPanel.svelte

@@ -27,7 +27,7 @@
     isBusy: boolean;
     expandedCommitHashes: Set<string>;
     onRestoreCommit: (commit: GitCommit) => void;
-    onRestoreCommitFile: (commit: GitCommit, file: GitCommitFile) => void;
+    onPreviewCommitFile: (commit: GitCommit, file: GitCommitFile) => void;
     onToggleCommitFiles: (hash: string) => void;
   }
 
@@ -37,7 +37,7 @@
     isBusy = false,
     expandedCommitHashes = new Set(),
     onRestoreCommit = () => {},
-    onRestoreCommitFile = () => {},
+    onPreviewCommitFile = () => {},
     onToggleCommitFiles = () => {},
   }: Props = $props();
 
@@ -204,9 +204,9 @@
                       <button
                         class="commit-file-button"
                         type="button"
-                        onclick={() => onRestoreCommitFile(item, file)}
+                        onclick={() => onPreviewCommitFile(item, file)}
                         disabled={isBusy}
-                        title="Restore this file from this commit"
+                        title="Show differences before restoring"
                       >
                         <span class={`status-badge ${file.status}`}>{statusLabel(file.status)}</span>
                         <strong>{displayCommitFile(file)}</strong>