From f24c39c573ba27e3f571b077ef8ae8b360c196d6 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Sat, 15 Aug 2026 19:12:40 +0200
Subject: [PATCH] feat(compare): localize compare dialog and refine styles

Add German labels to compare select options and refine styles.
Group names and the current marker are localized for German.
Style tweaks adjust spacing, weights, and muted colors for better
readability and visual consistency.

- Localize option groups and current marker to German.
- Refine dialog typography, spacing, and muted color tokens.
---
 src/app.css                                   | 12 ++++++------
 src/lib/components/CompareSelectDialog.svelte | 18 +++++++++++++++---
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app.css b/src/app.css
index 21347a2..7ea5445 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3352,8 +3352,8 @@
     align-items: end;
     gap: 10px;
   }
-  .compare-field { display: grid; gap: 4px; min-width: 0; }
-  .compare-field span { color: var(--color-ink-faint); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
+  .compare-field { display: grid; gap: 6px; min-width: 0; }
+  .compare-field > span { color: var(--color-ink-muted); font-size: 10.5px; font-weight: 750; }
   .compare-target-help {
     display: flex;
     align-items: flex-start;
@@ -3527,8 +3527,8 @@
   .compare-dialog-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
   .compare-dialog-title > div { min-width: 0; }
   .compare-dialog-mark { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); border-radius: 10px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
-  .compare-dialog-title h2 { margin: 0; color: var(--color-accent); font-size: 18px; font-weight: 700; line-height: 1.2; }
-  .compare-dialog-title p { margin: 3px 0 0; color: var(--color-ink); font-size: 11px; font-weight: 400; line-height: 1.35; }
+  .compare-dialog-title h2 { margin: 0; color: var(--color-ink); font-size: 18px; font-weight: 700; line-height: 1.2; }
+  .compare-dialog-title p { margin: 3px 0 0; color: var(--color-ink-dim); font-size: 11px; font-weight: 400; line-height: 1.35; }
   .global-search-dialog {
     width: min(1180px, calc(100vw - 32px));
     height: min(840px, calc(100vh - 32px));
@@ -3553,8 +3553,8 @@
   .compare-select-shell { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
   .compare-select-body { display: grid; align-content: start; gap: 12px; min-height: 0; padding: 18px 20px 20px; overflow: auto; }
   .compare-target-panel { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: 12px; background: color-mix(in srgb, var(--app-settings-row-bg) 72%, transparent); }
-  .compare-target-heading h3 { margin: 0; color: var(--color-accent); font-size: 18px; font-weight: 700; line-height: 1.2; }
-  .compare-target-heading p { margin: 4px 0 0; color: var(--color-ink); font-size: 11px; font-weight: 400; line-height: 1.45; }
+  .compare-target-heading h3 { margin: 0; color: var(--color-ink); font-size: 14px; font-weight: 700; line-height: 1.2; }
+  .compare-target-heading p { margin: 3px 0 0; color: var(--color-ink-dim); font-size: 10.5px; font-weight: 400; line-height: 1.4; }
   .compare-arrow-shell { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border-subtle); border-radius: 9px; color: var(--color-accent); background: var(--color-surface-raised); }
   .compare-select-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 11px 16px; border-top: 1px solid var(--color-border-subtle); background: var(--app-dialog-chrome); }
   .compare-select-footer > span { color: var(--color-ink-faint); font-size: 9.5px; }
diff --git a/src/lib/components/CompareSelectDialog.svelte b/src/lib/components/CompareSelectDialog.svelte
index a6e5277..bbf7980 100644
--- a/src/lib/components/CompareSelectDialog.svelte
+++ b/src/lib/components/CompareSelectDialog.svelte
@@ -47,9 +47,21 @@
   let remoteBranches = $derived(branches.filter((branch) => branch.remote));
   let targetCount = $derived(branches.length + commits.length);
   let compareOptions = $derived([
-    ...localBranches.map((branch) => ({ value: branchValue(branch), label: `${branch.name}${branch.current ? " (current)" : ""}`, group: "Branches - Local" })),
-    ...remoteBranches.map((branch) => ({ value: branchValue(branch), label: branch.name, group: "Branches - Remote" })),
-    ...commits.map((item) => ({ value: item.hash, label: commitOptionLabel(item), group: "Commits" })),
+    ...localBranches.map((branch) => ({
+      value: branchValue(branch),
+      label: `${branch.name}${branch.current ? (isGerman ? " (aktuell)" : " (current)") : ""}`,
+      group: isGerman ? "Lokale Branches" : "Local branches",
+    })),
+    ...remoteBranches.map((branch) => ({
+      value: branchValue(branch),
+      label: branch.name,
+      group: isGerman ? "Remote-Branches" : "Remote branches",
+    })),
+    ...commits.map((item) => ({
+      value: item.hash,
+      label: commitOptionLabel(item),
+      group: "Commits",
+    })),
   ]);
 
   function handleSubmit(event: SubmitEvent) {