@c-rex/components 0.3.0-build.31 → 0.3.0-build.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.31",
+    "version":  "0.3.0-build.33",
     "files":  [
                   "src"
               ],
@@ -73,6 +73,22 @@
                                                  "types":  "./src/article/article-action-bar.tsx",
                                                  "import":  "./src/article/article-action-bar.tsx"
                                              },
+                    "./toc-browse-controls":  {
+                                                  "types":  "./src/toc/toc-browse-controls.tsx",
+                                                  "import":  "./src/toc/toc-browse-controls.tsx"
+                                              },
+                    "./toc-tree-panel":  {
+                                             "types":  "./src/toc/toc-tree-panel.tsx",
+                                             "import":  "./src/toc/toc-tree-panel.tsx"
+                                         },
+                    "./toc-breadcrumb":  {
+                                             "types":  "./src/toc/toc-breadcrumb.tsx",
+                                             "import":  "./src/toc/toc-breadcrumb.tsx"
+                                         },
+                    "./toc-types":  {
+                                        "types":  "./src/toc/types.ts",
+                                        "import":  "./src/toc/types.ts"
+                                    },
                     "./html-rendition":  {
                                              "types":  "./src/renditions/html.tsx",
                                              "import":  "./src/renditions/html.tsx"

package/src/info/information-unit-metadata-grid-client.tsx

@@ -20,6 +20,7 @@ import {
     INFORMATION_UNIT_PROPERTY_PRESENTATION,
     type InformationUnitPropertyKey,
 } from "@c-rex/services/metadata-presentation-config";
+import type { AvailableLanguageVersion, MetadataFacetLabelOverrides } from "@c-rex/services/read-models";
 import { resolveMetadataDisplayProperties } from "@c-rex/services/metadata-view-profile";
 import {
     extractCountryCodeFromLanguage,
@@ -46,6 +47,8 @@ type Props = {
     showBookmarkButton?: boolean;
     showFileRenditions?: boolean;
     embedded?: boolean;
+    metadataLabelOverrides?: MetadataFacetLabelOverrides;
+    availableInVersions?: AvailableLanguageVersion[];
 };
 
 const resolveLiteralLabel = (labels?: LiteralModel[] | null, uiLanguage?: string): string | undefined => {
@@ -66,6 +69,13 @@ const resolveObjectRefLabel = (item: ObjectRefModel, uiLanguage: string): string
     return resolveLiteralLabel(item.labels || [], uiLanguage) || item.shortId || item.id || undefined;
 };
 
+const resolveObjectRefClassLabel = (item: ObjectRefModel, uiLanguage: string): string | undefined => {
+    return resolveLiteralLabel(item.class?.labels || [], uiLanguage)
+        || item.class?.shortId
+        || item.class?.id
+        || undefined;
+};
+
 const asObjectRefArray = (value: unknown): ObjectRefModel[] => {
     if (!Array.isArray(value)) return [];
     return value.filter((item): item is ObjectRefModel => Boolean(item && typeof item === "object"));
@@ -79,7 +89,8 @@ const asLiteralArray = (value: unknown): LiteralModel[] => {
 const buildMetadataDisplayRows = (
     data: CommonItemsModel,
     uiLanguage: string,
-    includeProperties: InformationUnitPropertyKey[]
+    includeProperties: InformationUnitPropertyKey[],
+    overrides?: MetadataFacetLabelOverrides
 ): MetadataDisplayRow[] => {
     const preferredTitle = resolveLiteralLabel(data.titles || [], uiLanguage) || resolveLiteralLabel(data.labels || [], uiLanguage);
     const rows: MetadataDisplayRow[] = [];
@@ -177,23 +188,37 @@ const buildMetadataDisplayRows = (
             const refs = asObjectRefArray(value);
             if (refs.length === 0) continue;
 
-            const values = Array.from(
-                new Set(
-                    refs
-                        .map((ref) => resolveObjectRefLabel(ref, uiLanguage))
-                        .filter((label): label is string => Boolean(label))
-                )
-            ).sort((a, b) => a.localeCompare(b));
+            const groupedValues = new Map<string, Set<string>>();
 
-            if (values.length === 0) continue;
+            refs.forEach((ref) => {
+                const shortId = ref.shortId || "";
+                const override = shortId ? overrides?.[key]?.[shortId] : undefined;
+                const valueLabel = override?.label || resolveObjectRefLabel(ref, uiLanguage);
+                if (!valueLabel) return;
 
-            rows.push({
-                key,
-                label: key,
-                labelSource: "translationKey",
-                values,
-                valueType: "text",
+                const sectionLabel = config.metadataDisplay.sectionStrategy === "none"
+                    ? key
+                    : override?.sectionLabel || resolveObjectRefClassLabel(ref, uiLanguage) || key;
+
+                const existing = groupedValues.get(sectionLabel) || new Set<string>();
+                existing.add(valueLabel);
+                groupedValues.set(sectionLabel, existing);
             });
+
+            Array.from(groupedValues.entries())
+                .sort(([left], [right]) => left.localeCompare(right))
+                .forEach(([sectionLabel, valueSet]) => {
+                    const values = Array.from(valueSet).sort((a, b) => a.localeCompare(b));
+                    if (values.length === 0) return;
+
+                    rows.push({
+                        key,
+                        label: sectionLabel,
+                        labelSource: sectionLabel === key ? "translationKey" : "direct",
+                        values,
+                        valueType: "text",
+                    });
+                });
             continue;
         }
 
@@ -244,6 +269,7 @@ const AvailableInRow = ({
     versionOfShortId?: string | null;
     currentShortId?: string | null;
     linkPattern: string;
+    availableInVersions?: AvailableLanguageVersion[];
 }) => {
     const t = useTranslations();
     const locale = useLocale();
@@ -299,6 +325,8 @@ export const InformationUnitMetadataGridClient = ({
     metadataExcludeProperties,
     showBookmarkButton = false,
     showFileRenditions = true,
+    metadataLabelOverrides,
+    availableInVersions,
 }: Props) => {
     const t = useTranslations();
     const locale = useLocale();
@@ -311,8 +339,8 @@ export const InformationUnitMetadataGridClient = ({
                 : [...(metadataExcludeProperties || []), "renditions"],
         });
 
-        return buildMetadataDisplayRows(data, locale, includeProperties);
-    }, [data, locale, metadataExcludeProperties, metadataIncludeProperties, showFileRenditions]);
+        return buildMetadataDisplayRows(data, locale, includeProperties, metadataLabelOverrides);
+    }, [data, locale, metadataExcludeProperties, metadataIncludeProperties, metadataLabelOverrides, showFileRenditions]);
 
     const cardContent = (
         <CardContent className="space-y-3 !p-0">
@@ -342,11 +370,37 @@ export const InformationUnitMetadataGridClient = ({
                         </TableRow>
                     ))}
 
-                    <AvailableInRow
-                        versionOfShortId={data.versionOf?.shortId}
-                        currentShortId={data.shortId}
-                        linkPattern={linkPattern}
-                    />
+                    {availableInVersions ? (
+                        availableInVersions
+                            .filter((item) => item.shortId !== data.shortId)
+                            .length > 0 ? (
+                                <TableRow className="min-h-12">
+                                    <TableCell className="font-medium w-28 pl-4">
+                                        <h4 className="text-sm font-medium">{t("availableIn")}</h4>
+                                    </TableCell>
+                                    <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                                        {availableInVersions
+                                            .filter((item) => item.shortId !== data.shortId)
+                                            .map((item) => (
+                                                <span className="w-8 block border" key={item.shortId}>
+                                                    <Link
+                                                        href={linkPattern.replace("{shortId}", item.shortId)}
+                                                        title={item.language}
+                                                    >
+                                                        <Flag countryCode={extractCountryCodeFromLanguage(item.language)} />
+                                                    </Link>
+                                                </span>
+                                            ))}
+                                    </TableCell>
+                                </TableRow>
+                            ) : null
+                    ) : (
+                        <AvailableInRow
+                            versionOfShortId={data.versionOf?.shortId}
+                            currentShortId={data.shortId}
+                            linkPattern={linkPattern}
+                        />
+                    )}
                 </TableBody>
             </Table>
         </CardContent>

package/src/toc/toc-breadcrumb.tsx

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import type { FC } from "react";
+import {
+    Breadcrumb as BreadcrumbComponent,
+    BreadcrumbItem,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@c-rex/ui/breadcrumb";
+import type { TocBreadcrumbItem } from "./types";
+
+type TocBreadcrumbProps = {
+    lang: string;
+    homeLabel: string;
+    homeHref?: string;
+    items: TocBreadcrumbItem[];
+    className?: string;
+};
+
+export const TocBreadcrumb: FC<TocBreadcrumbProps> = ({
+    lang,
+    homeLabel,
+    homeHref = "/",
+    items,
+    className = "hidden sm:block",
+}) => {
+    if (items.length === 0) {
+        return null;
+    }
+
+    return (
+        <BreadcrumbComponent lang={lang} className={className}>
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <Link href={homeHref}>{homeLabel}</Link>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+
+                {items.map((item, index) => {
+                    const isLast = item.isCurrent ?? index === items.length - 1;
+
+                    return (
+                        <span key={`${item.id}-${index}`} className="contents">
+                            <BreadcrumbItem>
+                                {isLast ? (
+                                    <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                                ) : item.href ? (
+                                    <Link href={item.href}>{item.label}</Link>
+                                ) : (
+                                    <span>{item.label}</span>
+                                )}
+                            </BreadcrumbItem>
+                            {!isLast && <BreadcrumbSeparator />}
+                        </span>
+                    );
+                })}
+            </BreadcrumbList>
+        </BreadcrumbComponent>
+    );
+};

package/src/toc/toc-browse-controls.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@c-rex/ui/button";
+import { cn } from "@c-rex/utils";
+
+export type TocBrowseLink = {
+    href: string;
+    label: string;
+};
+
+type TocBrowseControlsProps = {
+    previous?: TocBrowseLink;
+    next?: TocBrowseLink;
+    className?: string;
+    showLabels?: boolean;
+    justify?: "between" | "end";
+    buttonGapClassName?: string;
+    buttonClassName?: string;
+    hideContainerBorder?: boolean;
+};
+
+export const TocBrowseControls = ({
+    previous,
+    next,
+    className,
+    showLabels = true,
+    justify = "between",
+    buttonGapClassName = "gap-2",
+    buttonClassName,
+    hideContainerBorder = false,
+}: TocBrowseControlsProps) => {
+    if (!previous && !next) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                "flex items-center gap-2 rounded-md px-3 py-2",
+                hideContainerBorder ? "border-0 bg-transparent" : "border",
+                justify === "between" ? "justify-between" : "justify-end",
+                className
+            )}
+        >
+            <div className={cn("min-w-0", justify === "between" ? "flex-1" : "flex-none")}>
+                {previous ? (
+                    <Button asChild variant="ghost" className={cn("max-w-full justify-start px-0", buttonClassName)}>
+                        <Link href={previous.href} title={previous.label} className={cn("inline-flex min-w-0 items-center", buttonGapClassName)}>
+                            <ChevronLeft className="h-4 w-4 shrink-0" />
+                            {showLabels ? <span className="truncate">{previous.label}</span> : null}
+                        </Link>
+                    </Button>
+                ) : (
+                    justify === "between" ? <span className="text-sm text-muted-foreground">&nbsp;</span> : null
+                )}
+            </div>
+
+            <div className={cn("min-w-0 text-right", justify === "between" ? "flex-1" : "flex-none")}>
+                {next ? (
+                    <Button asChild variant="ghost" className={cn("max-w-full justify-end px-0", buttonClassName)}>
+                        <Link href={next.href} title={next.label} className={cn("inline-flex min-w-0 items-center", buttonGapClassName)}>
+                            {showLabels ? <span className="truncate">{next.label}</span> : null}
+                            <ChevronRight className="h-4 w-4 shrink-0" />
+                        </Link>
+                    </Button>
+                ) : (
+                    justify === "between" ? <span className="text-sm text-muted-foreground">&nbsp;</span> : null
+                )}
+            </div>
+        </div>
+    );
+};

package/src/toc/toc-tree-panel.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type FC, type ReactNode } from "react";
+import Link from "next/link";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarGroup,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+} from "@c-rex/ui/sidebar";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import type { TocNodeSummary } from "./types";
+
+type TocTreePanelProps = {
+    lang: string;
+    rootNodeId?: string;
+    activePathIds?: string[];
+    initialChildrenByParentId?: Record<string, TocNodeSummary[]>;
+    placeholder?: ReactNode;
+    headerContent?: ReactNode;
+    headerTitle?: ReactNode;
+    loadChildren: (parentDirectoryNodeShortId: string) => Promise<TocNodeSummary[]>;
+    buildNodeHref?: (node: TocNodeSummary) => string | undefined;
+    defaultWidthPx?: number;
+    minWidthPx?: number;
+    maxWidthPx?: number;
+};
+
+const DEFAULT_TOC_WIDTH_PX = 336;
+const MIN_TOC_WIDTH_PX = 260;
+const MAX_TOC_WIDTH_PX = 640;
+
+const loadingSkeleton = (
+    <div className="pt-4 space-y-2">
+        <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 className="px-2 pt-1 text-xs text-muted-foreground">Inhaltsverzeichnis wird geladen...</div>
+    </div>
+);
+
+export const TocTreePanel: FC<TocTreePanelProps> = ({
+    lang,
+    rootNodeId,
+    activePathIds = [],
+    initialChildrenByParentId = {},
+    placeholder,
+    headerContent,
+    headerTitle = "Inhaltsverzeichnis",
+    loadChildren,
+    buildNodeHref,
+    defaultWidthPx = DEFAULT_TOC_WIDTH_PX,
+    minWidthPx = MIN_TOC_WIDTH_PX,
+    maxWidthPx = MAX_TOC_WIDTH_PX,
+}) => {
+    const [childrenByParentId, setChildrenByParentId] = useState<Record<string, TocNodeSummary[]>>(initialChildrenByParentId);
+    const [loadingParentIds, setLoadingParentIds] = useState<Set<string>>(new Set());
+    const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(activePathIds));
+    const [tocWidthPx, setTocWidthPx] = useState(defaultWidthPx);
+    const resizeStartRef = useRef<{ startX: number; startWidth: number } | null>(null);
+    const pendingChildrenRequestsRef = useRef<Map<string, Promise<void>>>(new Map());
+
+    const activeIdSet = useMemo(() => new Set(activePathIds), [activePathIds]);
+
+    useEffect(() => {
+        setChildrenByParentId((prev) => ({
+            ...prev,
+            ...initialChildrenByParentId,
+        }));
+    }, [initialChildrenByParentId]);
+
+    useEffect(() => {
+        setExpandedIds(new Set(activePathIds));
+    }, [activePathIds]);
+
+    useEffect(() => {
+        const knownNodesById = new Map(
+            Object.values(childrenByParentId)
+                .flat()
+                .map((node) => [node.id, node] as const)
+        );
+
+        expandedIds.forEach((nodeId) => {
+            const node = knownNodesById.get(nodeId);
+            if (node?.hasChildren && !childrenByParentId[nodeId] && !loadingParentIds.has(nodeId)) {
+                void ensureChildrenLoaded(nodeId);
+            }
+        });
+    }, [childrenByParentId, expandedIds, loadingParentIds]);
+
+    useEffect(() => {
+        const handleMove = (event: MouseEvent) => {
+            if (!resizeStartRef.current) return;
+            const deltaX = event.clientX - resizeStartRef.current.startX;
+            const nextWidth = Math.max(
+                minWidthPx,
+                Math.min(maxWidthPx, resizeStartRef.current.startWidth + deltaX)
+            );
+            setTocWidthPx(nextWidth);
+        };
+
+        const handleUp = () => {
+            resizeStartRef.current = null;
+        };
+
+        window.addEventListener("mousemove", handleMove);
+        window.addEventListener("mouseup", handleUp);
+
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleUp);
+        };
+    }, [maxWidthPx, minWidthPx]);
+
+    const ensureChildrenLoaded = async (parentDirectoryNodeShortId: string) => {
+        if (!parentDirectoryNodeShortId || childrenByParentId[parentDirectoryNodeShortId] || loadingParentIds.has(parentDirectoryNodeShortId)) {
+            return;
+        }
+
+        const existingRequest = pendingChildrenRequestsRef.current.get(parentDirectoryNodeShortId);
+        if (existingRequest) {
+            return existingRequest;
+        }
+
+        const requestPromise = (async () => {
+            setLoadingParentIds((prev) => new Set(prev).add(parentDirectoryNodeShortId));
+            try {
+                const children = await loadChildren(parentDirectoryNodeShortId);
+                setChildrenByParentId((prev) => ({
+                    ...prev,
+                    [parentDirectoryNodeShortId]: children || [],
+                }));
+            } catch (error) {
+                console.error("[TocTreePanel] Failed to load children", error);
+                setChildrenByParentId((prev) => ({
+                    ...prev,
+                    [parentDirectoryNodeShortId]: [],
+                }));
+            } finally {
+                pendingChildrenRequestsRef.current.delete(parentDirectoryNodeShortId);
+                setLoadingParentIds((prev) => {
+                    const next = new Set(prev);
+                    next.delete(parentDirectoryNodeShortId);
+                    return next;
+                });
+            }
+        })();
+
+        pendingChildrenRequestsRef.current.set(parentDirectoryNodeShortId, requestPromise);
+        return requestPromise;
+    };
+
+    const toggleExpanded = (nodeId: string, hasChildren: boolean) => {
+        setExpandedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(nodeId)) {
+                next.delete(nodeId);
+                return next;
+            }
+            next.add(nodeId);
+            return next;
+        });
+
+        if (hasChildren) {
+            void ensureChildrenLoaded(nodeId);
+        }
+    };
+
+    const renderNode = (node: TocNodeSummary): ReactNode => {
+        const isExpanded = expandedIds.has(node.id);
+        const children = childrenByParentId[node.id] || [];
+        const isLoadingChildren = loadingParentIds.has(node.id);
+        const href = buildNodeHref?.(node);
+
+        return (
+            <SidebarMenuItem key={node.id}>
+                <div className="flex min-w-0 items-center gap-1">
+                    {node.hasChildren ? (
+                        <button
+                            type="button"
+                            aria-label={isExpanded ? "Collapse section" : "Expand section"}
+                            className="h-8 w-8 inline-flex items-center justify-center text-muted-foreground hover:text-foreground shrink-0"
+                            onClick={() => toggleExpanded(node.id, node.hasChildren)}
+                        >
+                            {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                        </button>
+                    ) : (
+                        <span className="h-8 w-8 shrink-0" aria-hidden="true" />
+                    )}
+
+                    {href ? (
+                        <SidebarMenuButton asChild isActive={activeIdSet.has(node.id)} className="flex-1 min-w-0 whitespace-nowrap">
+                            <Link href={href} title={node.label} className="w-full min-w-0 overflow-hidden text-left justify-start">
+                                <span className="truncate">{node.label}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    ) : (
+                        <SidebarMenuButton
+                            type="button"
+                            isActive={activeIdSet.has(node.id)}
+                            className="flex-1 min-w-0 whitespace-nowrap"
+                            onClick={() => node.hasChildren && toggleExpanded(node.id, node.hasChildren)}
+                            title={node.label}
+                        >
+                            <span className="truncate">{node.label}</span>
+                        </SidebarMenuButton>
+                    )}
+                </div>
+
+                {node.hasChildren && isExpanded ? (
+                    <SidebarMenuSub>
+                        {isLoadingChildren && children.length === 0 ? (
+                            <div className="space-y-2 py-2">
+                                <Skeleton className="h-8 w-full" />
+                                <Skeleton className="h-8 w-[85%]" />
+                            </div>
+                        ) : children.map((child) => renderNode(child))}
+                    </SidebarMenuSub>
+                ) : null}
+            </SidebarMenuItem>
+        );
+    };
+
+    const rootChildren = rootNodeId ? (childrenByParentId[rootNodeId] || []) : [];
+    const sidebarStyle = {
+        "--sidebar-width": `${tocWidthPx}px`,
+    } as CSSProperties;
+
+    return (
+        <div className="relative shrink-0" style={sidebarStyle}>
+            <Sidebar side="left">
+                <SidebarHeader className="border-b px-2 py-2">
+                    <div className="flex min-w-0 w-full items-center justify-between gap-2">
+                        <div className="min-w-0 overflow-hidden pl-9 text-sm font-medium text-foreground" title={typeof headerTitle === "string" ? headerTitle : undefined}>
+                            <span className="truncate">{headerTitle}</span>
+                        </div>
+                        <div className="ml-auto flex shrink-0 items-center">
+                            {headerContent}
+                        </div>
+                    </div>
+                </SidebarHeader>
+                <SidebarContent className="toc-scrollbar overflow-y-auto overflow-x-hidden">
+                    <SidebarGroup lang={lang} className="min-w-0">
+                        {!rootNodeId ? (
+                            placeholder || null
+                        ) : rootChildren.length === 0 && loadingParentIds.size === 0 ? (
+                            placeholder || loadingSkeleton
+                        ) : (
+                            <div className="min-w-0">
+                                <SidebarMenu className="min-w-0">
+                                    {rootChildren.map((item) => renderNode(item))}
+                                </SidebarMenu>
+                            </div>
+                        )}
+                    </SidebarGroup>
+                </SidebarContent>
+            </Sidebar>
+            <button
+                type="button"
+                aria-label="Resize table of contents"
+                title="Resize table of contents"
+                className="absolute inset-y-0 -right-2 z-20 hidden w-4 cursor-ew-resize lg:block"
+                onMouseDown={(event) => {
+                    resizeStartRef.current = { startX: event.clientX, startWidth: tocWidthPx };
+                }}
+                onDoubleClick={() => setTocWidthPx(defaultWidthPx)}
+            >
+                <span className="pointer-events-none absolute inset-y-4 left-1/2 w-px -translate-x-1/2 rounded-full bg-border" />
+            </button>
+        </div>
+    );
+};

package/src/toc/types.ts

@@ -0,0 +1,27 @@
+export type TocNodeSummary = {
+    id: string;
+    label: string;
+    topicId?: string;
+    hasChildren: boolean;
+    isNavigable: boolean;
+};
+
+export type TocPathEntry = {
+    id: string;
+    label: string;
+    topicId?: string;
+    isNavigable: boolean;
+};
+
+export type TocBrowseTarget = {
+    directoryNodeShortId: string;
+    topicId: string;
+    label: string;
+};
+
+export type TocBreadcrumbItem = {
+    id: string;
+    label: string;
+    href?: string;
+    isCurrent?: boolean;
+};