feat(ui): refine history graph visuals and layout

Refines history panel visuals and layout, including min width handling.
Removes the old branch visibility select in favor of a dialog button.
It also adds a graph connector to show primary branches.
Adds branch chips, icons, and hover effects to commits for clarity.

- History panel visuals and min width updated to improve layout.
- Removed branch visibility select; added dialog to customize branches.
- Branch chips and graph connectors enhanced with icons and hover effects.

src/App.svelte

@@ -266,7 +266,7 @@
   const LEFT_STASH_PANEL_MAX_HEIGHT = 420;
   const LEFT_EXPLORER_PANEL_MIN_HEIGHT = 220;
   const HISTORY_ASIDE_DEFAULT_WIDTH = 620;
-  const HISTORY_ASIDE_MIN_WIDTH = 560;
+  const HISTORY_ASIDE_MIN_WIDTH = 420;
   const HISTORY_ASIDE_MAX_WIDTH = 920;
   const ERROR_AUTO_HIDE_MS = 6000;
   const COMMIT_HISTORY_PAGE_SIZE = 50;
@@ -4690,7 +4690,7 @@
       <section
         class="workspace"
         aria-label="Git workspace"
-        style="--left-sidebar-width: {leftSidebarWidth}px; --history-aside-width: {historyAsideWidth}px;"
+        style="--left-sidebar-width: {leftSidebarWidth}px; --history-aside-min-width: {HISTORY_ASIDE_MIN_WIDTH}px; --history-aside-width: {historyAsideWidth}px;"
       >
 
       <!-- Left sidebar: branches + explorer -->

src/app.css

@@ -292,58 +292,21 @@
     align-items: center;
     flex: 0 0 auto;
     justify-content: flex-end;
-    gap: 5px;
+    gap: 8px;
     min-width: 0;
   }
 
-  .graph-visibility-select {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    min-height: 28px;
-    padding: 0 7px;
-    border: 1px solid rgba(94,110,156,0.2);
-    border-radius: 6px;
-    color: var(--color-ink-dim);
-    background: rgba(255,255,255,0.035);
-  }
-
-  .graph-visibility-select > svg:first-child { color: #76d995; }
-  .graph-visibility-select > svg:last-child { position: absolute; right: 6px; pointer-events: none; }
-  .graph-visibility-label {
-    color: var(--color-ink-faint);
-    font-size: 9px;
-    font-weight: 800;
-    letter-spacing: .05em;
-    text-transform: uppercase;
-  }
-  .graph-visibility-select select {
-    min-width: 62px;
-    height: 24px;
-    padding: 0 18px 0 2px;
-    border: 0;
-    outline: 0;
-    appearance: none;
-    color: var(--color-ink);
-    background: transparent;
-    box-shadow: none;
-    cursor: pointer;
-    font-size: 11px;
-    font-weight: 800;
-  }
-  .graph-visibility-select select:focus { box-shadow: none; }
-
   .graph-branch-dialog-button {
     display: inline-flex;
     align-items: center;
-    gap: 0;
+    gap: 6px;
     min-height: 26px;
-    padding: 0 5px;
+    padding: 0 9px;
-    border: 1px solid rgba(94,110,156,0.18);
+    overflow: hidden;
-    border-radius: 6px;
+    border: 1px solid rgba(91,209,138,0.24);
-    color: var(--color-ink-dim);
+    border-radius: 999px;
-    background: rgba(255,255,255,0.03);
+    color: #b6f1c4;
+    background: rgba(34,68,48,0.28);
     font-size: 11px;
     font-weight: 800;
     white-space: nowrap;
@@ -351,16 +314,15 @@
   }
 
   .graph-branch-dialog-button:hover {
-    border-color: rgba(91,209,138,0.32);
+    border-color: rgba(91,209,138,0.42);
-    color: var(--color-ink);
+    background: rgba(34,68,48,0.42);
-    background: rgba(34,68,48,0.24);
   }
 
   .graph-branch-dialog-button span {
-    padding: 1px 4px;
+    padding: 1px 5px;
-    border-radius: 4px;
+    border-radius: 999px;
-    color: #9fdcaf;
+    color: #061021;
-    background: transparent;
+    background: #6ce18f;
     font-size: 10px;
     line-height: 1.2;
   }
@@ -1544,7 +1506,7 @@
 
   .workspace {
     display: grid;
-    grid-template-columns: minmax(220px, var(--left-sidebar-width, 280px)) 8px minmax(0, 1fr) 8px minmax(560px, var(--history-aside-width, 620px));
+    grid-template-columns: minmax(220px, var(--left-sidebar-width, 280px)) 8px minmax(0, 1fr) 8px minmax(var(--history-aside-min-width, 420px), var(--history-aside-width, 620px));
     flex: 1 1 0;
     min-width: 0;
     min-height: 0;
@@ -2537,13 +2499,19 @@
     white-space: nowrap;
   }
 
-  .commit-ref-area { display: grid; gap: 5px; min-width: 0; }
+  .commit-ref-area {
+    position: relative;
+    z-index: 3;
+    display: grid;
+    gap: 5px;
+    min-width: 0;
+  }
   .commit-ref-strip {
     display: flex;
     align-items: center;
     gap: 4px;
     min-width: 0;
-    min-height: 19px;
+    min-height: 20px;
   }
   .compact-ref-chip {
     display: inline-flex;
@@ -2564,12 +2532,37 @@
     line-height: 1;
     white-space: nowrap;
   }
+  .compact-ref-chip.branch {
+    flex: 0 1 auto;
+    max-width: 22px;
+    height: 20px;
+    margin-left: -10px;
+    padding: 0 5px;
+    border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 34%, transparent);
+    border-left-width: 2px;
+    border-radius: 0 5px 5px 0 !important;
+    color: #dce9ff;
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #69a7ff) 14%, rgba(18,24,36,.96)), rgba(18,24,36,.82));
+    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ref-lane-color, #69a7ff) 72%, transparent);
+    transition:
+      max-width 190ms cubic-bezier(.2,.75,.25,1),
+      padding-right 190ms cubic-bezier(.2,.75,.25,1),
+      border-color 140ms ease,
+      background 140ms ease,
+      box-shadow 140ms ease;
+  }
+  .compact-ref-branch-icon {
+    flex: 0 0 auto;
+    color: var(--ref-lane-color, #69a7ff);
+    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 28%, transparent));
+    transition: transform 190ms cubic-bezier(.2,.75,.25,1);
+  }
   .compact-ref-chip > span {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .compact-ref-chip.branch > i,
   .commit-ref-detail-item > i {
     flex: 0 0 auto;
     width: 6px;
@@ -2579,20 +2572,56 @@
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 18%, transparent);
   }
   .compact-ref-chip.current {
-    border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 52%, transparent);
+    border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 62%, transparent);
     color: #eaf2ff;
-    background: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 16%, rgba(18,24,36,.92));
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #69a7ff) 25%, rgba(18,24,36,.96)), rgba(18,24,36,.9));
   }
   .compact-ref-chip.remote {
-    border-color: rgba(122,172,255,0.22);
+    border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 38%, transparent);
     color: #bcd2ff;
-    background: rgba(31,43,72,0.52);
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #69a7ff) 14%, rgba(20,27,42,.94)), rgba(20,27,42,.84));
+  }
+  .compact-ref-chip.branch > span,
+  .compact-ref-chip.branch > small {
+    opacity: 0;
+    transition: opacity 80ms ease;
+  }
+  .graph-row:hover .compact-ref-chip.branch,
+  .graph-row.selected .compact-ref-chip.branch,
+  .graph-row:focus-within .compact-ref-chip.branch {
+    max-width: min(62%, 260px);
+    padding-right: 8px;
+    border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 64%, transparent);
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #69a7ff) 24%, rgba(18,24,36,.98)), rgba(18,24,36,.9));
+    box-shadow:
+      inset 2px 0 0 var(--ref-lane-color, #69a7ff),
+      0 3px 12px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, rgba(0,0,0,.24));
+  }
+  .graph-row:hover .compact-ref-branch-icon,
+  .graph-row.selected .compact-ref-branch-icon,
+  .graph-row:focus-within .compact-ref-branch-icon {
+    transform: translateX(1px);
+  }
+  .graph-row:hover .compact-ref-chip.branch > span,
+  .graph-row:hover .compact-ref-chip.branch > small,
+  .graph-row.selected .compact-ref-chip.branch > span,
+  .graph-row.selected .compact-ref-chip.branch > small,
+  .graph-row:focus-within .compact-ref-chip.branch > span,
+  .graph-row:focus-within .compact-ref-chip.branch > small {
+    opacity: 1;
+    transition-delay: 55ms;
+    transition-duration: 120ms;
   }
   .compact-ref-chip.tag {
     flex: 0 1 auto;
-    border-color: rgba(224,180,92,0.22);
+    max-width: min(32%, 150px);
+    padding-inline: 4px;
+    border-color: transparent;
     color: #dbc078;
-    background: rgba(224,180,92,0.075);
+    background: transparent;
   }
   .compact-ref-chip.tag svg { flex: 0 0 auto; }
   .compact-ref-chip small {
@@ -2614,10 +2643,10 @@
     min-height: 19px;
     height: 19px;
     padding: 0 5px;
-    border-color: rgba(94,110,156,0.2);
+    border-color: transparent;
-    border-radius: 5px;
+    border-radius: 4px;
     color: var(--color-ink-dim);
-    background: rgba(255,255,255,0.035);
+    background: rgba(255,255,255,0.025);
     font-family: var(--font-mono);
     font-size: 9px;
     font-weight: 800;
@@ -2832,6 +2861,10 @@
     stroke-dasharray: 4 4;
     filter: drop-shadow(0 0 3px rgba(122,172,255,0.2));
   }
+  .graph-svg path.graph-ref-connector {
+    opacity: 0.35;
+    stroke-linecap: round;
+  }
   .graph-dot {
     position: absolute;
     z-index: 2;
@@ -2871,6 +2904,7 @@
     background: rgba(31,43,72,0.88);
   }
   .commit-body {
+    position: relative;
     display: grid;
     gap: 5px;
     min-width: 0;
@@ -2878,6 +2912,39 @@
     background: rgba(18,24,36,0.5);
     transition: background 120ms ease;
   }
+  .commit-body.has-branch-ref::before {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: 24px;
+    bottom: calc(50% + 16px);
+    left: -16px;
+    width: 16px;
+    min-height: 14px;
+    border-top: 1.5px solid var(--ref-lane-color, #69a7ff);
+    border-left: 1.5px solid var(--ref-lane-color, #69a7ff);
+    border-top-left-radius: 14px;
+    opacity: .35;
+    pointer-events: none;
+    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, transparent));
+    transition: opacity 140ms ease, filter 140ms ease;
+  }
+  .commit-body.has-branch-ref::after {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: calc(50% - 16px);
+    left: -32px;
+    width: 16px;
+    height: 16px;
+    border-right: 1.5px solid var(--ref-lane-color, #69a7ff);
+    border-bottom: 1.5px solid var(--ref-lane-color, #69a7ff);
+    border-bottom-right-radius: 14px;
+    opacity: .35;
+    pointer-events: none;
+    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, transparent));
+    transition: opacity 140ms ease, filter 140ms ease;
+  }
   .graph-row + .graph-row .commit-body { border-top: 1px solid rgba(226,232,240,0.075); }
   .graph-row.graph-ahead-row .commit-body {
     box-shadow: inset 3px 0 0 rgba(224,160,64,0.72);
@@ -2887,6 +2954,18 @@
   }
   .graph-row:hover .commit-body { background: rgba(30,39,57,0.72); }
   .graph-row:hover .graph-svg path { opacity: 1; stroke-width: 2.65; }
+  .graph-row:hover .graph-svg path.graph-ref-connector,
+  .graph-row.selected .graph-svg path.graph-ref-connector,
+  .graph-row:focus-within .graph-svg path.graph-ref-connector { opacity: .95; stroke-width: 1.8; }
+  .graph-row:hover .commit-body.has-branch-ref::before,
+  .graph-row:hover .commit-body.has-branch-ref::after,
+  .graph-row.selected .commit-body.has-branch-ref::before,
+  .graph-row.selected .commit-body.has-branch-ref::after,
+  .graph-row:focus-within .commit-body.has-branch-ref::before,
+  .graph-row:focus-within .commit-body.has-branch-ref::after {
+    opacity: .95;
+    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 24%, transparent));
+  }
   .graph-row:hover .graph-svg path.hidden-branch { opacity: 0.12; stroke-width: 2.2; }
   .graph-row:hover .graph-dot { transform: translate(-50%, -50%) scale(1.12); }
   .graph-row:hover .graph-dot.hidden-branch { transform: translate(-50%, -50%) scale(1); }
@@ -2899,6 +2978,28 @@
       rgba(20,27,40,0.62);
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .compact-ref-chip.branch,
+    .compact-ref-chip.branch > span,
+    .compact-ref-chip.branch > small,
+    .compact-ref-branch-icon,
+    .commit-body.has-branch-ref::before,
+    .commit-body.has-branch-ref::after {
+      transition: none;
+    }
+  }
+
+  @media (hover: none) {
+    .compact-ref-chip.branch {
+      max-width: min(62%, 260px);
+      padding-right: 8px;
+    }
+    .compact-ref-chip.branch > span,
+    .compact-ref-chip.branch > small {
+      opacity: 1;
+    }
+  }
+
   /* --- Compare panel --- */
 
   .compare-panel {
@@ -5621,7 +5722,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 .repo-toolbar-divider { height: 34px; margin-inline: 6px; }
 
 .workspace {
-  grid-template-columns: minmax(220px, var(--left-sidebar-width, 280px)) 7px minmax(360px, 1fr) 7px minmax(560px, var(--history-aside-width, 620px));
+  grid-template-columns: minmax(220px, var(--left-sidebar-width, 280px)) 7px minmax(360px, 1fr) 7px minmax(var(--history-aside-min-width, 420px), var(--history-aside-width, 620px));
   flex: 1 1 0;
   padding: 0;
   background: var(--color-border-subtle);
@@ -5989,32 +6090,58 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 }
 
 :root[data-theme="light"] .compact-ref-chip.branch {
-  border-color: rgba(31,128,76,0.22);
+  border-color: color-mix(in srgb, var(--ref-lane-color, #315fd6) 48%, rgba(49,95,214,.16));
-  color: #146b3b;
+  color: #18345f;
-  background: rgba(224,246,233,0.92);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #315fd6) 14%, #f7faff), #f7faff);
 }
 
 :root[data-theme="light"] .compact-ref-chip.current {
-  border-color: color-mix(in srgb, var(--ref-lane-color, #315fd6) 48%, rgba(49,95,214,.2));
+  border-color: color-mix(in srgb, var(--ref-lane-color, #315fd6) 58%, rgba(49,95,214,.2));
   color: #18345f;
-  background: color-mix(in srgb, var(--ref-lane-color, #315fd6) 12%, #f7faff);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #315fd6) 20%, #f7faff), #f7faff);
 }
 
-:root[data-theme="light"] .compact-ref-chip.remote,
 :root[data-theme="light"] .branch-filter-option.remote {
   border-color: rgba(49,95,214,0.22);
   color: #315fd6;
   background: rgba(231,237,255,0.92);
 }
 
+:root[data-theme="light"] .compact-ref-chip.remote {
+  border-color: color-mix(in srgb, var(--ref-lane-color, #315fd6) 42%, rgba(49,95,214,.16));
+  color: #315fd6;
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #315fd6) 12%, #f7faff), #f7faff);
+}
+
+:root[data-theme="light"] .graph-row:hover .compact-ref-chip.branch,
+:root[data-theme="light"] .graph-row.selected .compact-ref-chip.branch,
+:root[data-theme="light"] .graph-row:focus-within .compact-ref-chip.branch {
+  border-color: color-mix(in srgb, var(--ref-lane-color, #315fd6) 62%, rgba(49,95,214,.2));
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #315fd6) 22%, #f7faff), #ffffff);
+  box-shadow:
+    inset 2px 0 0 var(--ref-lane-color, #315fd6),
+    0 3px 12px color-mix(in srgb, var(--ref-lane-color, #315fd6) 10%, rgba(34,49,78,.16));
+}
+
 :root[data-theme="light"] .compact-ref-chip.tag,
 :root[data-theme="light"] .commit-ref-detail-item.tag {
   color: #8b5d0e;
-  background: rgba(255,244,224,.9);
 }
 
-:root[data-theme="light"] .compact-ref-overflow,
+:root[data-theme="light"] .compact-ref-chip.tag {
-:root[data-theme="light"] .graph-visibility-select,
+  background: transparent;
+}
+
+:root[data-theme="light"] .compact-ref-overflow {
+  color: #60708a;
+  border-color: transparent;
+  background: rgba(49,95,214,.035);
+}
+
 :root[data-theme="light"] .graph-branch-dialog-button {
   color: #475873;
   border-color: rgba(49,95,214,.16);
@@ -6236,16 +6363,16 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 /* --- Responsive breakpoints --- */
 
 @media (min-width: 1800px) {
-  .workspace    { grid-template-columns: minmax(220px, var(--left-sidebar-width, 320px)) 8px minmax(0, 1fr) 8px minmax(560px, var(--history-aside-width, 680px)); }
+  .workspace    { grid-template-columns: minmax(220px, var(--left-sidebar-width, 320px)) 8px minmax(0, 1fr) 8px minmax(var(--history-aside-min-width, 420px), var(--history-aside-width, 680px)); }
 }
 
 @media (max-width: 1400px) {
-  .workspace { grid-template-columns: minmax(200px, var(--left-sidebar-width, 265px)) 8px minmax(0, 1fr) 8px minmax(540px, var(--history-aside-width, 580px)); }
+  .workspace { grid-template-columns: minmax(200px, var(--left-sidebar-width, 265px)) 8px minmax(0, 1fr) 8px minmax(var(--history-aside-min-width, 420px), var(--history-aside-width, 580px)); }
 }
 
 /* Stack CommitPanel below StatusPanel; history panels stay side by side */
 @media (max-width: 1100px) {
-  .workspace    { grid-template-columns: minmax(185px, var(--left-sidebar-width, 220px)) 8px minmax(0, 1fr) 8px minmax(500px, var(--history-aside-width, 560px)); }
+  .workspace    { grid-template-columns: minmax(185px, var(--left-sidebar-width, 220px)) 8px minmax(0, 1fr) 8px minmax(var(--history-aside-min-width, 420px), var(--history-aside-width, 560px)); }
   .top-section  { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 14px var(--commit-panel-height, 190px); }
 }
 

src/lib/components/HistoryPanel.svelte

@@ -47,6 +47,7 @@
     "#ff7c9f", "#48c7d8", "#c5cf54", "#e18c55",
   ];
   const GRAPH_LANE = 18;
+  const GRAPH_REF_ARM = 16;
   const GRAPH_VISIBILITY_STORAGE_PREFIX = "gitlite.graphVisibility.v1:";
   const commitDateFormatter = new Intl.DateTimeFormat(undefined, {
     dateStyle: "medium",
@@ -411,12 +412,6 @@
     branchVisibilityMode = "focus";
   }
 
-  function changeBranchVisibilityMode(event: Event) {
-    const value = (event.currentTarget as HTMLSelectElement).value as BranchVisibilityMode;
-    branchVisibilityMode = value;
-    if (value === "custom") openBranchDialog();
-  }
-
   function openBranchDialog() {
     branchDialogOpen = true;
   }
@@ -760,21 +755,6 @@
     </div>
     {#if graphBranchNames.length > 0}
       <div class="section-head-actions">
-        <label class="graph-visibility-select" title="Choose which branches are shown in the graph">
-          <GitBranch size={13} aria-hidden="true" />
-          <span class="graph-visibility-label">Branches</span>
-          <select
-            aria-label="Branch visibility mode"
-            value={branchVisibilityMode}
-            onchange={changeBranchVisibilityMode}
-          >
-            <option value="focus">Focus</option>
-            <option value="local">Local</option>
-            <option value="all">All</option>
-            <option value="custom">Custom…</option>
-          </select>
-          <ChevronDown size={12} aria-hidden="true" />
-        </label>
         <button
           class="graph-branch-dialog-button"
           type="button"
@@ -782,6 +762,8 @@
           title="Customize visible branches"
           aria-label={`${visibleBranchCount} of ${graphBranchNames.length} branches visible. Customize branches.`}
         >
+          <GitBranch size={13} aria-hidden="true" />
+          Branches
           <span>{visibleBranchCount}/{graphBranchNames.length}</span>
         </button>
       </div>
@@ -837,6 +819,15 @@
                     vector-effect="non-scaling-stroke"
                   />
                 {/each}
+                {#if refSummary.primaryBranch}
+                  <path
+                    class="graph-ref-connector"
+                    d={`M ${graphColX(row.dotCol)} 50 L ${graphWidth - GRAPH_REF_ARM * 2} 50`}
+                    stroke={row.dotColor}
+                    stroke-width="1.5"
+                    vector-effect="non-scaling-stroke"
+                  />
+                {/if}
               </svg>
               <span
                 class="graph-dot"
@@ -851,9 +842,13 @@
             {/if}
           </div>
 
-          <div class="commit-body">
+          <div
+            class="commit-body"
+            class:has-branch-ref={Boolean(refSummary.primaryBranch)}
+            style={`--ref-lane-color:${row?.dotColor ?? GRAPH_COLORS[0]}`}
+          >
             {#if refSummary.primaryBranch || refSummary.primaryTag || refSummary.overflowCount > 0}
-              <div class="commit-ref-area" style={`--ref-lane-color:${row?.dotColor ?? GRAPH_COLORS[0]}`}>
+              <div class="commit-ref-area">
                 <div class="commit-ref-strip" aria-label="Commit references">
                   {#if refSummary.primaryBranch}
                     <span
@@ -862,7 +857,7 @@
                       class:remote={refSummary.primaryBranch.kind === "remote"}
                       title={branchDecorationTitle(refSummary.primaryBranch)}
                     >
-                      <i aria-hidden="true"></i>
+                      <GitBranch class="compact-ref-branch-icon" size={10} aria-hidden="true" />
                       <span>{refSummary.primaryBranch.label}</span>
                       {#if branchStatusLabel(refSummary.primaryBranch)}
                         <small class:up-to-date={Boolean(refSummary.primaryBranch.trackedRemote)}>