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

@@ -3352,8 +3352,8 @@
     align-items: end;
     gap: 10px;
   }
-  .compare-field { display: grid; gap: 4px; min-width: 0; }
+  .compare-field { display: grid; gap: 6px; 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 > 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 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); font-size: 11px; font-weight: 400; line-height: 1.35; }
+  .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 h3 { margin: 0; color: var(--color-ink); font-size: 14px; 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 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; }

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" })),
+    ...localBranches.map((branch) => ({
-    ...remoteBranches.map((branch) => ({ value: branchValue(branch), label: branch.name, group: "Branches - Remote" })),
+      value: branchValue(branch),
-    ...commits.map((item) => ({ value: item.hash, label: commitOptionLabel(item), group: "Commits" })),
+      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) {