@c-rex/components 0.1.37 → 0.1.39

package/src/check-article-lang.tsx

@@ -1,43 +1,47 @@
-"use client"
-
-import { FC, useEffect } from "react";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
-import { AvailableVersionsInterface } from "@c-rex/interfaces";
-import { toast } from "sonner"
-import { useTranslations } from "next-intl"
-import { useSearchSettingsStore } from "./stores/search-settings-store";
-
-interface Props {
-    availableVersions: AvailableVersionsInterface[]
-}
-
-export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
-    const t = useTranslations();
-    const { setAvailableVersions } = useAppConfig()
-
-    useEffect(() => {
-        setAvailableVersions(availableVersions)
-        const searchLanguage = useSearchSettingsStore.getState().language;
-        const activeArticle = availableVersions.filter((item) => item.active)[0]
-
-        if (activeArticle == undefined || activeArticle.lang == searchLanguage) return
-
-        const articleAvailable = availableVersions.find((item) => item.lang === searchLanguage)
-        if (articleAvailable != undefined) {
-            articleAvailableInToast(articleAvailable.lang, articleAvailable.link)
-        }
-    }, [])
-
-    const articleAvailableInToast = (lang: string, link: string) => {
-        toast(t('toast.read', { lang }), {
-            description: t('toast.description', { lang }),
-            action: {
-                label: t('toast.label', { lang }),
-                onClick: () => window.location.href = link,
-            },
-            duration: 10000,
-        })
-    }
-
-    return null
-}
+"use client"
+
+import { FC, useEffect } from "react";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { AvailableVersionsInterface } from "@c-rex/interfaces";
+import { toast } from "sonner"
+import { useTranslations } from "next-intl"
+import { useSearchSettingsStore } from "./stores/search-settings-store";
+
+interface Props {
+    availableVersions: AvailableVersionsInterface[]
+}
+
+export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
+    const t = useTranslations();
+    const { setAvailableVersions } = useAppConfig()
+    const searchLanguage = useSearchSettingsStore((state) => state.language);
+
+    useEffect(() => {
+        setAvailableVersions(availableVersions)
+    }, [availableVersions, setAvailableVersions])
+
+    useEffect(() => {
+        if (!searchLanguage) return;
+        const activeArticle = availableVersions.find((item) => item.active)
+
+        if (activeArticle == undefined || activeArticle.lang == searchLanguage) return
+
+        const articleAvailable = availableVersions.find((item) => item.lang === searchLanguage)
+        if (articleAvailable != undefined) {
+            articleAvailableInToast(articleAvailable.lang, articleAvailable.link)
+        }
+    }, [availableVersions, searchLanguage])
+
+    const articleAvailableInToast = (lang: string, link: string) => {
+        toast(t('toast.read', { lang }), {
+            description: t('toast.description', { lang }),
+            action: {
+                label: t('toast.label', { lang }),
+                onClick: () => window.location.href = link,
+            },
+            duration: 10000,
+        })
+    }
+
+    return null
+}

package/src/directoryNodes/directory-tree-context.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo, useState, type FC, type PropsWithChildren } from "react";
+import { useRouter } from "next/navigation";
+import type { TreeOfContent } from "@c-rex/interfaces";
+import {
+    Breadcrumb as BreadcrumbComponent,
+    BreadcrumbItem,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@c-rex/ui/breadcrumb";
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+} from "@c-rex/ui/sidebar";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { generateBreadcrumbItems } from "@c-rex/utils";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+type LoadTreeFn = (entryDirectoryNodeShortId: string, signal: AbortSignal) => Promise<TreeOfContent[]>;
+
+type DirectoryTreeState = {
+    tree: TreeOfContent[];
+    isLoading: boolean;
+    expandActivePathOnLoad: boolean;
+};
+
+const DirectoryTreeContext = createContext<DirectoryTreeState>({
+    tree: [],
+    isLoading: true,
+    expandActivePathOnLoad: false,
+});
+
+type DirectoryTreeShapeCacheEntry = {
+    tree: TreeOfContent[];
+    expiresAtEpochMs: number;
+};
+
+const customLoadTreeScopeIds = new WeakMap<LoadTreeFn, string>();
+let customLoadTreeScopeCounter = 0;
+
+const DIRECTORY_TREE_SHAPE_CACHE_MAX_ENTRIES = 8;
+const DIRECTORY_TREE_SHAPE_CACHE_TTL_MS = 5 * 60 * 1000;
+const directoryTreeShapeCache = new Map<string, DirectoryTreeShapeCacheEntry>();
+
+const cloneTree = (nodes: TreeOfContent[]): TreeOfContent[] =>
+    nodes.map((node) => ({
+        ...node,
+        active: false,
+        children: cloneTree(node.children || []),
+    }));
+
+const nodePathById = (nodes: TreeOfContent[], targetId: string): string[] | null => {
+    for (const node of nodes) {
+        if (node.id === targetId) {
+            return [node.id];
+        }
+        const childPath = nodePathById(node.children || [], targetId);
+        if (childPath) {
+            return [node.id, ...childPath];
+        }
+    }
+    return null;
+};
+
+const markActivePath = (nodes: TreeOfContent[], activePath: Set<string>): TreeOfContent[] =>
+    nodes.map((node) => ({
+        ...node,
+        active: activePath.has(node.id),
+        children: markActivePath(node.children || [], activePath),
+    }));
+
+const getTreeShapeFromCache = (scopeKey: string): TreeOfContent[] | null => {
+    const nowEpochMs = Date.now();
+    const entry = directoryTreeShapeCache.get(scopeKey);
+    if (!entry) return null;
+    if (entry.expiresAtEpochMs <= nowEpochMs) {
+        directoryTreeShapeCache.delete(scopeKey);
+        return null;
+    }
+
+    // LRU touch
+    directoryTreeShapeCache.delete(scopeKey);
+    directoryTreeShapeCache.set(scopeKey, entry);
+    return entry.tree;
+};
+
+const setTreeShapeInCache = (scopeKey: string, tree: TreeOfContent[]) => {
+    if (directoryTreeShapeCache.has(scopeKey)) {
+        directoryTreeShapeCache.delete(scopeKey);
+    }
+    directoryTreeShapeCache.set(scopeKey, {
+        tree: cloneTree(tree),
+        expiresAtEpochMs: Date.now() + DIRECTORY_TREE_SHAPE_CACHE_TTL_MS,
+    });
+
+    while (directoryTreeShapeCache.size > DIRECTORY_TREE_SHAPE_CACHE_MAX_ENTRIES) {
+        const oldestKey = directoryTreeShapeCache.keys().next().value as string | undefined;
+        if (!oldestKey) return;
+        directoryTreeShapeCache.delete(oldestKey);
+    }
+};
+
+const resolveCustomLoadTreeScopeKey = (loadTree: LoadTreeFn): string => {
+    const existingScopeId = customLoadTreeScopeIds.get(loadTree);
+    if (existingScopeId) return existingScopeId;
+
+    customLoadTreeScopeCounter += 1;
+    const nextScopeId = `custom-loader-${customLoadTreeScopeCounter}`;
+    customLoadTreeScopeIds.set(loadTree, nextScopeId);
+    return nextScopeId;
+};
+
+const buildTreeForEntryFromCache = (scopeKey: string, entryDirectoryNodeShortId: string): TreeOfContent[] | null => {
+    const cachedDirectoryTreeShape = getTreeShapeFromCache(scopeKey);
+    if (!cachedDirectoryTreeShape) return null;
+    const path = nodePathById(cachedDirectoryTreeShape, entryDirectoryNodeShortId);
+    if (!path) return null;
+    return markActivePath(cloneTree(cachedDirectoryTreeShape), new Set(path));
+};
+
+const buildDefaultTreeEndpointUrl = (treeEndpoint: string, shortId: string, includeLinkIds: boolean): string => {
+    const joiner = treeEndpoint.includes("?") ? "&" : "?";
+    return `${treeEndpoint}${joiner}shortId=${encodeURIComponent(shortId)}&includeLinkIds=${includeLinkIds ? "true" : "false"}`;
+};
+
+type DirectoryTreeProviderProps = PropsWithChildren<{
+    entryDirectoryNodeShortId?: string;
+    // Common default behavior: document entry false, topic entry true.
+    expandActivePathOnLoad?: boolean;
+    // Optional injection point to decouple tree loading from app-specific endpoints.
+    loadTree?: LoadTreeFn;
+    // Default endpoint fallback if no custom loadTree is provided.
+    treeEndpoint?: string;
+    includeLinkIds?: boolean;
+}>;
+
+export const DirectoryTreeProvider: FC<DirectoryTreeProviderProps> = ({
+    entryDirectoryNodeShortId,
+    expandActivePathOnLoad = false,
+    loadTree,
+    treeEndpoint = "/api/directory-nodes/tree",
+    includeLinkIds = true,
+    children,
+}) => {
+    const [tree, setTree] = useState<TreeOfContent[]>([]);
+    const [isLoading, setIsLoading] = useState(Boolean(entryDirectoryNodeShortId));
+
+    useEffect(() => {
+        if (!entryDirectoryNodeShortId) {
+            setTree([]);
+            setIsLoading(false);
+            return;
+        }
+
+        let cancelled = false;
+        const controller = new AbortController();
+
+        const loadTreeDefault: LoadTreeFn = async (shortId, signal) => {
+            const response = await fetch(
+                buildDefaultTreeEndpointUrl(treeEndpoint, shortId, includeLinkIds),
+                { signal, credentials: "include" }
+            );
+            if (!response.ok) {
+                throw new Error(`Failed to load tree: HTTP ${response.status}`);
+            }
+            const payload = (await response.json()) as { tree?: TreeOfContent[] };
+            return payload.tree || [];
+        };
+
+        const activeLoadTree = loadTree || loadTreeDefault;
+        const cacheScopeKey = loadTree
+            ? resolveCustomLoadTreeScopeKey(loadTree)
+            : `${treeEndpoint}|includeLinkIds=${includeLinkIds ? "1" : "0"}`;
+
+        const runLoad = async () => {
+            const treeFromCache = buildTreeForEntryFromCache(cacheScopeKey, entryDirectoryNodeShortId);
+            if (treeFromCache) {
+                setTree(treeFromCache);
+                setIsLoading(false);
+                return;
+            }
+
+            const isInitialLoad = tree.length === 0;
+            if (isInitialLoad) {
+                setIsLoading(true);
+            }
+
+            try {
+                const nextTree = await activeLoadTree(entryDirectoryNodeShortId, controller.signal);
+                if (!cancelled) {
+                    setTree(nextTree);
+                    setTreeShapeInCache(cacheScopeKey, nextTree);
+                }
+            } catch (error) {
+                if (!cancelled) {
+                    console.error("[DirectoryTreeProvider] Failed to load tree", error);
+                    setTree([]);
+                }
+            } finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        };
+
+        runLoad();
+
+        return () => {
+            cancelled = true;
+            controller.abort();
+        };
+    }, [entryDirectoryNodeShortId, treeEndpoint, includeLinkIds, loadTree]);
+
+    const value = useMemo(
+        () => ({ tree, isLoading, expandActivePathOnLoad }),
+        [tree, isLoading, expandActivePathOnLoad]
+    );
+
+    return <DirectoryTreeContext.Provider value={value}>{children}</DirectoryTreeContext.Provider>;
+};
+
+const useDirectoryTree = () => useContext(DirectoryTreeContext);
+
+type DirectoryTreeSidebarMenuProps = {
+    onNavigateNode?: (node: TreeOfContent) => void | Promise<void>;
+};
+
+export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
+    onNavigateNode,
+}) => {
+    const { tree, isLoading, expandActivePathOnLoad } = useDirectoryTree();
+    const [expandedNodeIds, setExpandedNodeIds] = useState<Set<string>>(new Set());
+
+    useEffect(() => {
+        if (!expandActivePathOnLoad) {
+            setExpandedNodeIds(new Set());
+            return;
+        }
+
+        const nextExpanded = new Set<string>();
+
+        const collectActiveParents = (nodes: TreeOfContent[]) => {
+            nodes.forEach((node) => {
+                if (node.active && node.children && node.children.length > 0) {
+                    nextExpanded.add(node.id);
+                }
+                if (node.children && node.children.length > 0) {
+                    collectActiveParents(node.children);
+                }
+            });
+        };
+
+        collectActiveParents(tree);
+        setExpandedNodeIds(nextExpanded);
+    }, [tree, expandActivePathOnLoad]);
+
+    if (isLoading && tree.length === 0) {
+        return (
+            <div className="pt-4">
+                <Skeleton className="w-auto h-10 mb-2" />
+                <Skeleton className="w-auto h-10 mb-2" />
+                <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                <Skeleton className="w-auto h-10 mb-2 ml-8" />
+            </div>
+        );
+    }
+
+    if (!tree.length) return null;
+
+    const toggleNode = (nodeId: string) => {
+        setExpandedNodeIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(nodeId)) {
+                next.delete(nodeId);
+            } else {
+                next.add(nodeId);
+            }
+            return next;
+        });
+    };
+
+    const renderNode = (node: TreeOfContent) => (
+        <SidebarMenuItem key={node.id}>
+            <div className="flex items-center gap-1">
+                <SidebarMenuButton asChild isActive={node.active} className="flex-1">
+                    <button
+                        type="button"
+                        onClick={() => onNavigateNode?.(node)}
+                        title={node.label}
+                        className="w-full text-left justify-start"
+                    >
+                        {node.label}
+                    </button>
+                </SidebarMenuButton>
+
+                {node.children?.length ? (
+                    <button
+                        type="button"
+                        aria-label={expandedNodeIds.has(node.id) ? "Collapse section" : "Expand section"}
+                        className="h-8 w-8 inline-flex items-center justify-center text-muted-foreground hover:text-foreground"
+                        onClick={() => toggleNode(node.id)}
+                    >
+                        {expandedNodeIds.has(node.id) ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                    </button>
+                ) : null}
+            </div>
+
+            {node.children?.length && expandedNodeIds.has(node.id) ? (
+                <SidebarMenuSub>
+                    {node.children.map((child) => renderNode(child))}
+                </SidebarMenuSub>
+            ) : null}
+        </SidebarMenuItem>
+    );
+
+    return (
+        <SidebarMenu className={isLoading ? "opacity-75 transition-opacity" : undefined}>
+            {tree.map((item) => renderNode(item))}
+        </SidebarMenu>
+    );
+};
+
+type DirectoryTreeBreadcrumbProps = {
+    lang: string;
+    homeLabel?: string;
+    onNavigateHome?: () => void | Promise<void>;
+    onNavigateNodeId?: (nodeId: string) => void | Promise<void>;
+};
+
+export const DirectoryTreeBreadcrumb: FC<DirectoryTreeBreadcrumbProps> = ({
+    lang,
+    homeLabel = "Home",
+    onNavigateHome,
+    onNavigateNodeId,
+}) => {
+    const { tree, isLoading } = useDirectoryTree();
+    const router = useRouter();
+    const items = generateBreadcrumbItems(tree);
+
+    const navigateHome = () => {
+        if (onNavigateHome) {
+            return onNavigateHome();
+        }
+        router.push("/");
+    };
+
+    if (isLoading && tree.length === 0) {
+        return <Skeleton className="h-4 w-48 hidden sm:block" />;
+    }
+
+    if (!tree.length || items.length === 0) return null;
+
+    const lastIndex = items.length - 1;
+    return (
+        <BreadcrumbComponent lang={lang} className={`hidden sm:block ${isLoading ? "opacity-75 transition-opacity" : ""}`}>
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <button type="button" onClick={navigateHome}>
+                        {homeLabel}
+                    </button>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+
+                {items.map((item, index) => {
+                    const isLast = index === lastIndex;
+                    return (
+                        <span key={`${item.id}-${index}`} className="contents">
+                            <BreadcrumbItem>
+                                {isLast ? (
+                                    <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                                ) : (
+                                    <button type="button" onClick={() => onNavigateNodeId?.(item.id)}>
+                                        {item.label}
+                                    </button>
+                                )}
+                            </BreadcrumbItem>
+                            {!isLast && <BreadcrumbSeparator />}
+                        </span>
+                    );
+                })}
+            </BreadcrumbList>
+        </BreadcrumbComponent>
+    );
+};

package/src/directoryNodes/tree-of-content.tsx

@@ -1,67 +1,68 @@
-import {
-    SidebarGroup,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    SidebarMenuSub,
-    SidebarMenuSubButton,
-    SidebarMenuSubItem,
-} from "@c-rex/ui/sidebar";
-import { DirectoryNodeModel } from "@c-rex/interfaces";
-import { generateTreeOfContent } from "@c-rex/utils/directoryNodes";
-import Link from "next/link";
-import { Suspense } from "react";
-import { Skeleton } from "@c-rex/ui/skeleton";
-
-interface SidebarProps {
-    directoryNodes: DirectoryNodeModel[];
-}
-
-export async function TreeOfContent({ directoryNodes }: SidebarProps) {
-    const tree = await generateTreeOfContent(directoryNodes);
-
-    return (
-        <Suspense
-            fallback={
-                <SidebarGroup className="pt-4">
-                    <Skeleton className="w-auto h-10 mb-2" />
-                    <Skeleton className="w-auto h-10 mb-2" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2" />
-                </SidebarGroup>
-            }
-        >
-            <SidebarMenu>
-                {tree.map((item) => (
-                    <SidebarMenuItem key={item.id}>
-                        <SidebarMenuButton asChild isActive={item.active}>
-                            <Link href={`/topics/${item.linkId}/pages`} title={item.label}>
-                                {item.label}
-                            </Link>
-                        </SidebarMenuButton>
-
-                        {item.children?.length ? (
-                            <SidebarMenuSub>
-                                {item.children.map((item) => (
-                                    <SidebarMenuSubItem key={item.label}>
-                                        <SidebarMenuSubButton
-                                            asChild
-                                            isActive={item.active}
-                                        >
-                                            <Link href={`/topics/${item.linkId}/pages`} title={item.label}>
-                                                {item.label}
-                                            </Link>
-                                        </SidebarMenuSubButton>
-                                    </SidebarMenuSubItem>
-                                ))}
-                            </SidebarMenuSub>
-                        ) : null}
-                    </SidebarMenuItem>
-                ))}
-            </SidebarMenu>
-        </Suspense>
-    );
-}
+import {
+    SidebarGroup,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+} from "@c-rex/ui/sidebar";
+import { DirectoryNodeModel, TreeOfContent as TreeOfContentModel } from "@c-rex/interfaces";
+import { generateTreeOfContent } from "@c-rex/utils/directoryNodes";
+import Link from "next/link";
+import { Suspense } from "react";
+import { Skeleton } from "@c-rex/ui/skeleton";
+
+interface SidebarProps {
+    directoryNodes?: DirectoryNodeModel[];
+    tree?: TreeOfContentModel[];
+}
+
+export async function TreeOfContent({ directoryNodes, tree: providedTree }: SidebarProps) {
+    const tree = providedTree ?? (directoryNodes ? await generateTreeOfContent(directoryNodes) : []);
+
+    return (
+        <Suspense
+            fallback={
+                <SidebarGroup className="pt-4">
+                    <Skeleton className="w-auto h-10 mb-2" />
+                    <Skeleton className="w-auto h-10 mb-2" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2" />
+                </SidebarGroup>
+            }
+        >
+            <SidebarMenu>
+                {tree.map((item) => (
+                    <SidebarMenuItem key={item.id}>
+                        <SidebarMenuButton asChild isActive={item.active}>
+                            <Link prefetch={false} href={`/topics/${item.linkId}/pages`} title={item.label}>
+                                {item.label}
+                            </Link>
+                        </SidebarMenuButton>
+
+                        {item.children?.length ? (
+                            <SidebarMenuSub>
+                                {item.children.map((item) => (
+                                    <SidebarMenuSubItem key={item.label}>
+                                        <SidebarMenuSubButton
+                                            asChild
+                                            isActive={item.active}
+                                        >
+                                            <Link prefetch={false} href={`/topics/${item.linkId}/pages`} title={item.label}>
+                                                {item.label}
+                                            </Link>
+                                        </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                ))}
+                            </SidebarMenuSub>
+                        ) : null}
+                    </SidebarMenuItem>
+                ))}
+            </SidebarMenu>
+        </Suspense>
+    );
+}