From 216b552e61e71eabcfdec8c2cff12bbbdb1bb8b0 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Fri, 18 Sep 2026 20:41:53 +0200
Subject: [PATCH] refactor(BranchPanel): add per-group accent styling to branch
 group headers

Add local/remote classes to the group header buttons and introduce a
--group-accent CSS variable used with color-mix for background, text tint,
hover state, and an inset accent shadow. Local headers use --color-info and
remote headers use --color-accent.

This is a visual-only change (no toggle/behavior changes): group headers now
have a subtle, distinct accent for local vs. remote sections instead of a
uniform muted surface.
---
 src/lib/components/BranchPanel.svelte | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/BranchPanel.svelte b/src/lib/components/BranchPanel.svelte
index 4fa1e89..11f7f8b 100644
--- a/src/lib/components/BranchPanel.svelte
+++ b/src/lib/components/BranchPanel.svelte
@@ -695,7 +695,7 @@
       <div class="bp-scroll" bind:this={scrollElement} role="tree" aria-label={t("branches.listLabel")}>
         <div class="bp-group">
           <button
-            class="bp-group-head"
+            class="bp-group-head local"
             type="button"
             onclick={() => { if (!filtering) localOpen = !localOpen; }}
             aria-expanded={showLocal}
@@ -717,7 +717,7 @@
 
         <div class="bp-group">
           <button
-            class="bp-group-head"
+            class="bp-group-head remote"
             type="button"
             onclick={() => { if (!filtering) remoteOpen = !remoteOpen; }}
             aria-expanded={showRemote}
@@ -932,7 +932,8 @@
     border: 0;
     border-bottom: 1px solid var(--color-border-subtle);
     border-radius: 0;
-    background: var(--color-surface);
+    background: color-mix(in srgb, var(--group-accent) 7%, var(--color-surface));
+    box-shadow: inset 2px 0 color-mix(in srgb, var(--group-accent) 55%, transparent);
     backdrop-filter: blur(12px);
     color: var(--color-ink-faint);
     font-size: 10px;
@@ -941,7 +942,10 @@
     text-align: left;
     text-transform: uppercase;
   }
-  .bp-group-head:hover:not(:disabled) { color: var(--color-ink-muted); background: var(--color-surface); }
+  .bp-group-head.local { --group-accent: var(--color-info); }
+  .bp-group-head.remote { --group-accent: var(--color-accent); }
+  .bp-group-head { color: color-mix(in srgb, var(--group-accent) 65%, var(--color-ink-muted)); }
+  .bp-group-head:hover:not(:disabled) { color: var(--group-accent); background: color-mix(in srgb, var(--group-accent) 12%, var(--color-surface)); }
   .bp-group-count {
     color: var(--color-ink-faint);
     font-size: 10px;