From 74cffe225326668f709caed627d5560b3ce83924 Mon Sep 17 00:00:00 2001 From: Jonathan van Rij Date: Thu, 3 Sep 2026 08:16:43 +0200 Subject: [PATCH] perfect hover-open-focus state colors --- src/renderer/src/App.tsx | 12 +++++++----- src/renderer/src/styles.css | 28 ++++++++++++++++++---------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 92272fc..95ddf15 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -261,9 +261,9 @@ export function App(): React.ReactElement { const gitSelPath = gitSelRow?.path ?? null const treeSelItem = treeNav[treeSel] ?? null - // Clicking a row moves the keyboard cursor onto it. Without this the cursor - // stays at index 0, so the top row of the list keeps its highlight next to - // whichever row the click actually selected. + // Clicking or hovering a row moves the keyboard cursor onto it. Hover and focus + // are the same state, so the cursor follows the pointer and no second row keeps + // a stale ring next to the one under the mouse. const syncGitSel = (target: EventTarget): void => { const row = (target as HTMLElement).closest?.('.git-row') as HTMLElement | null const id = row?.dataset.rowId @@ -1023,7 +1023,8 @@ export function App(): React.ReactElement {
{showGit && (<>
{ setActivePanel('git'); syncGitSel(e.target) }}> + onMouseDownCapture={(e) => { setActivePanel('git'); syncGitSel(e.target) }} + onMouseOver={(e) => syncGitSel(e.target)}> )}
{ setActivePanel('tree'); syncTreeSel(e.target) }}> + onMouseDownCapture={(e) => { setActivePanel('tree'); syncTreeSel(e.target) }} + onMouseOver={(e) => syncTreeSel(e.target)}> {proj.tree ? (