feat: implement visibility logic for sidebar nodes

Add support for hiding file tree nodes and headings based on path
revelation status. This allows the sidebar to dynamically show only
the relevant parts of the file structure and table of contents.

src/components/FileTree.tsx

@@ -20,6 +20,7 @@ export const FileTreeNode: Component<{
   pathHeadings: Record<string, TocNode[]>;
   depth: number;
   onClose: () => void;
+  isHidden?: (node: FileNode) => boolean;
 }> = (props) => {
   const navigate = useNavigate();
   const isDir = !!props.node.children;
@@ -41,7 +42,7 @@ export const FileTreeNode: Component<{
   const indent = props.depth * 12;
 
   return (
-    <div>
+    <div class={props.isHidden?.(props.node) === true ? "hidden" : ""}>
       <div
         class={`flex items-center py-1 px-2 cursor-pointer hover:bg-gray-100 rounded ${
           isActive() ? "bg-blue-50 text-blue-700" : "text-gray-700"
@@ -66,6 +67,7 @@ export const FileTreeNode: Component<{
               pathHeadings={props.pathHeadings}
               depth={props.depth + 1}
               onClose={props.onClose}
+              isHidden={props.isHidden}
             />
           ))}
         </div>
@@ -81,6 +83,7 @@ export const HeadingNode: Component<{
   node: TocNode;
   basePath: string;
   depth: number;
+  isHidden?: (node: TocNode) => boolean;
 }> = (props) => {
   const navigate = useNavigate();
   const anchor = props.node.id || "";
@@ -112,7 +115,7 @@ export const HeadingNode: Component<{
   const indent = props.depth * 12;
 
   return (
-    <div>
+    <div class={props.isHidden?.(props.node) === true ? "hidden" : ""}>
       <div class="flex flex-row">
         <span
           class={`cursor-pointer mr-1 text-gray-400 text-xs w-3 shrink-0`}
@@ -140,6 +143,7 @@ export const HeadingNode: Component<{
               node={child}
               basePath={props.basePath}
               depth={props.depth + 1}
+              isHidden={props.isHidden}
             />
           ))}
         </div>