copilotkit__copilotkit/docs/components/ui/sidebar/folder.tsx

"use client";

import { useCallback } from "react";
import { DocsLayoutProps } from "fumadocs-ui/layouts/docs";
import { usePathname, useRouter } from "next/navigation";
import Page from "./page";
import ChevronDownIcon from "../icons/chevron";
import { cn } from "@/lib/utils";
import Separator from "./separator";
import { useOpenedFolders } from "@/lib/hooks/use-opened-folders";
import { normalizeUrl, normalizeUrlForMatching } from "@/lib/analytics-utils";

type Node = DocsLayoutProps["tree"]["children"][number] & {
  url: string;
  $id?: string;
};

interface FolderProps {
  node: Node & { index?: { url: string; $id?: string } };
  onNavigate?: () => void;
}

/**
 * Checks if a folder's index URL matches the current pathname.
 * Handles:
 * - Index page normalization (e.g., /langgraph matches /langgraph/index)
 * - Rewrite matches (e.g., /langgraph matches /integrations/langgraph)
 * - Normalizes integration URLs and relative URLs
 */
function isFolderActive(
  indexUrl: string | undefined,
  pathname: string,
): boolean {
  if (!indexUrl) return false;

  const normalizedIndexUrl = normalizeUrlForMatching(indexUrl);
  const normalizedPathname = normalizeUrlForMatching(pathname);

  // Exact match
  if (normalizedIndexUrl === normalizedPathname) {
    return true;
  }

  // Handle index pages: /langgraph should match /langgraph/index
  if (normalizedPathname === normalizedIndexUrl.replace(/\/index$/, "")) {
    return true;
  }

  // Handle reverse: /langgraph/index should match /langgraph
  if (normalizedIndexUrl === `${normalizedPathname}/index`) {
    return true;
  }

  // Handle rewrite patterns: /langgraph should match /integrations/langgraph
  const pathnameBase = normalizedPathname.replace(/^\/integrations\//, "/");
  const indexUrlBase = normalizedIndexUrl.replace(/^\/integrations\//, "/");

  if (pathnameBase === indexUrlBase) {
    return true;
  }

  // Handle index with rewrite: /langgraph should match /integrations/langgraph/index
  if (pathnameBase === indexUrlBase.replace(/\/index$/, "")) {
    return true;
  }

  if (indexUrlBase === `${pathnameBase}/index`) {
    return true;
  }

  return false;
}

const Folder = ({ node }: FolderProps) => {
  const { isFolderOpen, toggleFolder } = useOpenedFolders();
  const pathname = usePathname();
  const router = useRouter();
  const folderUrl = node.index?.url;
  const folderId = node.$id;

  // Check if folder should be open by default from meta.json defaultOpen property
  // Fumadocs exposes this property from meta.json files
  const defaultOpen = (node as any).defaultOpen === true;

  const isOpen = folderId ? isFolderOpen(folderId) || defaultOpen : false;

  // Check if any child page is active - if so, don't mark the folder as active
  const folderChildren = (node as { children?: Node[] }).children || [];
  const normalizedPathname = normalizeUrlForMatching(pathname);
  const hasActiveChild = folderChildren.some((child: any) => {
    if (child.type === "page" && child.url) {
      const childUrl = normalizeUrlForMatching(child.url);
      return (
        normalizedPathname === childUrl ||
        normalizedPathname.startsWith(childUrl + "/")
      );
    }
    return false;
  });

  // Only mark folder as active if we're on the folder's index page AND no child is active
  const isActive =
    !hasActiveChild && isFolderActive(node?.index?.url, pathname);

  const NODE_COMPONENTS = {
    separator: Separator,
    page: Page,
    folder: Folder,
  };

  const handleLinkClick = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      e.preventDefault();
      e.stopPropagation();

      if (folderId) {
        toggleFolder(folderId);
      }

      if (folderUrl) {
        const normalizedUrl = normalizeUrl(folderUrl);
        router.push(normalizedUrl);
      }
    },
    [folderUrl, router, folderId, toggleFolder],
  );

  return (
    <div className="w-full">
      <li
        className={cn(
          "w-full shrink-0 opacity-60 transition-all duration-300 hover:opacity-100 hover:bg-white dark:hover:bg-white/10 rounded-lg",
          isActive && "opacity-100 bg-white dark:bg-white/10",
        )}
      >
        <button
          type="button"
          onClick={handleLinkClick}
          className="flex gap-2 justify-between items-center px-3 w-full h-10 cursor-pointer"
        >
          <span className="w-max text-sm shrink-0">{node.name}</span>
          <ChevronDownIcon className={cn(isOpen ? "rotate-180" : "")} />
        </button>
      </li>
      {isOpen && (
        <ul className="flex relative flex-col gap-2 ml-4">
          <div className="absolute top-1/2 -translate-y-1/2 -left-2 w-px h-[calc(100%-8px)] bg-foreground/10" />

          {(node as { children: Node[] }).children.map((page, index) => {
            const Component =
              NODE_COMPONENTS[page.type as keyof typeof NODE_COMPONENTS];
            const pageWithIndex = page as Node & { index?: { url: string } };
            const pageUrl =
              pageWithIndex.index?.url || page.url || `page-${index}`;
            const key = `${page.type}-${pageUrl}`;
            return <Component key={key} node={page as Node} minimal={true} />;
          })}
        </ul>
      )}
    </div>
  );
};

export default Folder;