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 (
@@ -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_
({
isSelected && 'selected',
)}
>
-
+
{
});
});
+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) => {