Fix indent guide hovering

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',
           )}
         />
       ))}

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',

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) => {