Flattened the sidebar tree

src-web/components/core/tree/TreeIndentGuide.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
+import { memo } from 'react';
+import { hoveredParentDepthFamily } from './atoms';
+
+export const TreeIndentGuide = memo(function TreeIndentGuide({
+  treeId,
+  depth,
+}: {
+  treeId: string;
+  depth: number;
+}) {
+  const parentDepth = useAtomValue(hoveredParentDepthFamily(treeId));
+
+  return (
+    <div className="flex">
+      {Array.from({ length: depth }).map((_, i) => (
+        <div
+          key={i}
+          className={classNames(
+            'w-[1rem] border-r border-r-text-subtlest',
+            parentDepth !== i + 1 && 'opacity-30',
+          )}
+        />
+      ))}
+    </div>
+  );
+});