From 1c48b309b5b2211272461aa97f1a80f341d12b90 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 20 Oct 2025 09:13:00 -0700
Subject: [PATCH] Fix indent guide hovering

---
 src-web/components/core/tree/TreeIndentGuide.tsx |  7 +++++--
 src-web/components/core/tree/TreeItem.tsx        |  2 +-
 src-web/components/core/tree/atoms.ts            | 12 +++++++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src-web/components/core/tree/TreeIndentGuide.tsx b/src-web/components/core/tree/TreeIndentGuide.tsx
index 942719c3..75825325 100644
--- a/src-web/components/core/tree/TreeIndentGuide.tsx
+++ b/src-web/components/core/tree/TreeIndentGuide.tsx
@@ -1,16 +1,19 @@
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 import { memo } from 'react';
-import { hoveredParentDepthFamily } from './atoms';
+import { hoveredParentDepthFamily, isParentHoveredFamily } from './atoms';
 
 export const TreeIndentGuide = memo(function TreeIndentGuide({
   treeId,
   depth,
+  parentId,
 }: {
   treeId: string;
   depth: number;
+  parentId: string | null;
 }) {
   const parentDepth = useAtomValue(hoveredParentDepthFamily(treeId));
+  const isHovered = useAtomValue(isParentHoveredFamily({ treeId, parentId }));
 
   return (
     <div className="flex">
@@ -19,7 +22,7 @@ export const TreeIndentGuide = memo(function TreeIndentGuide({
           key={i}
           className={classNames(
             'w-[1rem] border-r border-r-text-subtlest',
-            parentDepth !== i + 1 && 'opacity-30',
+            !(parentDepth === i + 1 && isHovered) && 'opacity-30',
           )}
         />
       ))}
diff --git a/src-web/components/core/tree/TreeItem.tsx b/src-web/components/core/tree/TreeItem.tsx
index 09ebd46f..5401226c 100644
--- a/src-web/components/core/tree/TreeItem.tsx
+++ b/src-web/components/core/tree/TreeItem.tsx
@@ -239,7 +239,7 @@ function TreeItem_<T extends { id: string }>({
         isSelected && 'selected',
       )}
     >
-      <TreeIndentGuide treeId={treeId} depth={depth} />
+      <TreeIndentGuide treeId={treeId} depth={depth} parentId={node.parent?.item.id ?? null} />
       <div
         className={classNames(
           'text-text-subtle',
diff --git a/src-web/components/core/tree/atoms.ts b/src-web/components/core/tree/atoms.ts
index 4a811e1e..b8e0b9f8 100644
--- a/src-web/components/core/tree/atoms.ts
+++ b/src-web/components/core/tree/atoms.ts
@@ -45,8 +45,14 @@ export const hoveredParentFamily = atomFamily((_treeId: string) => {
   });
 });
 
+export const isParentHoveredFamily = atomFamily(
+  ({ treeId, parentId }: { treeId: string; parentId: string | null }) =>
+    selectAtom(hoveredParentFamily(treeId), (v) => v.parentId === parentId, Object.is),
+  (a, b) => a.treeId === b.treeId && a.parentId === b.parentId,
+);
+
 export const isIndexHoveredFamily = atomFamily(
-  ({ treeId, index }: { treeId: string; index: number}) =>
+  ({ treeId, index }: { treeId: string; index: number }) =>
     selectAtom(hoveredParentFamily(treeId), (v) => v.index === index, Object.is),
   (a, b) => a.treeId === b.treeId && a.index === b.index,
 );
@@ -55,8 +61,8 @@ export const hoveredParentDepthFamily = atomFamily((treeId: string) =>
   selectAtom(
     hoveredParentFamily(treeId),
     (s) => s.parentDepth,
-    (a, b) => Object.is(a, b) // prevents re-render unless the value changes
-  )
+    (a, b) => Object.is(a, b), // prevents re-render unless the value changes
+  ),
 );
 
 export const collapsedFamily = atomFamily((workspaceId: string) => {