From bad1263dcf77b70c11b49bd3362ac96696a33189 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <Christoph.Brandau@janus-engineering.com>
Date: Sun, 12 Jul 2026 23:46:44 +0200
Subject: [PATCH] feat(ui): enhance workspace status and diff styling

This commit updates several UI components to improve visual consistency and readability across various themes. It adds necessary class names to the Git branch display component and significantly refines the CSS for diff markers and general workspace status elements. These changes ensure that semantic colors are maintained on hover states and that key indicators remain highly visible in light mode.

- Updated styling for diff marker focus/hover states
- Improved visual feedback for line patch buttons (stage, unstage, discard)
- Added specific light theme styles for branch indicator and status counters
---
 src/App.svelte |  2 +-
 src/app.css    | 57 ++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 494eccd..30f38b7 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4103,7 +4103,7 @@
       {/if}
       <span class="workspace-status-spacer"></span>
       {#if workspaceActive}
-        <span><GitBranch size={12} aria-hidden="true" />{status?.current_branch ?? "No branch"}</span>
+        <span class="workspace-branch"><GitBranch size={12} aria-hidden="true" />{status?.current_branch ?? "No branch"}</span>
         <span class="ahead">↑ {status?.ahead ?? 0}</span>
         <span class="behind">↓ {status?.behind ?? 0}</span>
         <span class:active={autoRefreshEnabled} class="workspace-auto">Auto <i aria-hidden="true"></i></span>
diff --git a/src/app.css b/src/app.css
index f4a86b1..6f4e35a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5862,6 +5862,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   border-radius: 2px;
   transform: translateY(-50%);
   box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
+  appearance: none;
 }
 .diff-overview-marker.add { color: var(--code-add-strong); background: var(--code-add-strong); }
 .diff-overview-marker.delete { color: var(--code-delete-strong); background: var(--code-delete-strong); }
@@ -5871,9 +5872,57 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 }
 .diff-overview-marker:hover:not(:disabled),
 .diff-overview-marker:focus-visible {
-  width: 13px;
-  left: 1px;
   filter: brightness(1.18);
-  outline: 1px solid var(--color-ink);
-  outline-offset: 1px;
+  outline: 0;
+  box-shadow: 0 0 0 1px currentColor, 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
+}
+
+/* Preserve semantic diff colors against global button hover rules. */
+.diff-overview .diff-overview-marker.add:hover:not(:disabled),
+.diff-overview .diff-overview-marker.add:focus-visible {
+  border: 0 !important;
+  color: var(--code-add-strong) !important;
+  background-color: var(--code-add-strong) !important;
+  background-image: none !important;
+}
+.diff-overview .diff-overview-marker.delete:hover:not(:disabled),
+.diff-overview .diff-overview-marker.delete:focus-visible {
+  border: 0 !important;
+  color: var(--code-delete-strong) !important;
+  background-color: var(--code-delete-strong) !important;
+  background-image: none !important;
+}
+.diff-overview .diff-overview-marker.mixed:hover:not(:disabled),
+.diff-overview .diff-overview-marker.mixed:focus-visible {
+  border: 0 !important;
+  color: var(--color-accent) !important;
+  background-color: transparent !important;
+  background-image: linear-gradient(90deg, var(--code-delete-strong) 0 48%, var(--code-add-strong) 52% 100%) !important;
+}
+.line-patch-hunk-button.stage:hover:not(:disabled),
+.line-patch-hunk-button.unstage:hover:not(:disabled) {
+  border-color: var(--code-add-strong);
+  color: var(--code-add-strong);
+  background: var(--code-add-bg);
+}
+.line-patch-hunk-button.discard:hover:not(:disabled) {
+  border-color: var(--code-delete-strong);
+  color: var(--code-delete-strong);
+  background: var(--code-delete-bg);
+}
+
+/* Footer status must stay readable on the bright theme. */
+:root[data-theme="light"] .workspace-statusbar { color: #526078; }
+:root[data-theme="light"] .workspace-branch {
+  color: #172033;
+  font-weight: 750;
+}
+:root[data-theme="light"] .workspace-branch svg { color: #0b63e6; }
+:root[data-theme="light"] .workspace-statusbar .ahead {
+  color: #9a5200;
+  font-weight: 800;
+}
+:root[data-theme="light"] .workspace-statusbar .behind {
+  color: #0755c8;
+  font-weight: 800;
 }