@c-rex/components 0.3.0-build.35 → 0.3.0-build.38

package/src/results/information-unit-search-results-card-list.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { useTranslations } from "next-intl";
 import { CommonItemsModel } from "@c-rex/interfaces";
 import { FileStack } from "lucide-react";
 import { FileDownloadDropdown } from "../renditions/file-download";
@@ -32,6 +33,8 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
     imageFragmentSubjectIds = [],
     descriptionFragmentSubjectIds = [],
 }) => {
+    const t = useTranslations();
+
     return (
         <div className="flex-1">
             {items.map((item, index) => {
@@ -115,7 +118,7 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
                                             </Button>
                                         </TooltipTrigger>
                                         <TooltipContent>
-                                            Available in: {multipleVersions.join(", ")}
+                                            {t("availableIn")}: {multipleVersions.join(", ")}
                                         </TooltipContent>
                                     </Tooltip>
                                 )}

package/src/results/information-unit-search-results-cards.tsx

@@ -1,96 +1,196 @@
 "use client"
 
-import { FC, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 
 import Link from "next/link";
-import { cn } from "@c-rex/utils";
+import { cn, formatDateToLocale } from "@c-rex/utils";
 import { Badge } from "@c-rex/ui/badge";
-import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
 import { TopicsResponseItem } from "@c-rex/interfaces";
 import { Card } from "@c-rex/ui/card";
 import { useQueryState } from "nuqs";
+import { User } from "lucide-react";
 
 interface InformationUnitSearchResultsCardsProps {
     items: TopicsResponseItem[];
 }
 
-const InformationUnitSearchResultsCards: FC<InformationUnitSearchResultsCardsProps> = ({ items }) => {
-    const t = useTranslations("results")
-    const [isLoading, setLoading] = useState(true);
-    const [query] = useQueryState("search");
+type CardData = {
+    image: string | null;
+    description: string | null;
+    authors: { name: string; photo: string | null }[];
+    loaded: boolean;
+};
 
-    return (
-        <div className="grid gap-6 grid-cols-2">
 
-            {items.map((item, index) => (
-                <Card
-                    key={item.shortId}
-                    className={cn(
-                        `c-rex-result-item information-unit-search-results-card relative p-0 c-rex-result-${item.type.toLowerCase()}`,
-                        index == 0
-                            ? "col-span-2 grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
-                            : "flex flex-col space-y-2",
-                        item.disabled ? "c-rex-result-item-disabled" : ""
+const InformationUnitSearchResultCard: FC<{
+    item: TopicsResponseItem;
+    index: number;
+    query: string | null;
+}> = ({ item, index, query }) => {
+    const locale = useLocale();
+    const date = formatDateToLocale(item.created!, locale);
+    const cardRef = useRef<HTMLDivElement>(null);
+    const [cardData, setCardData] = useState<CardData>({ image: null, description: null, authors: [], loaded: false });
+
+    useEffect(() => {
+        const el = cardRef.current;
+        if (!el) return;
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (!entry.isIntersecting) return;
+                observer.disconnect();
+
+                const fetches: Promise<void>[] = [];
+
+                if (item.renditionUrl) {
+                    fetches.push(
+                        fetch(item.renditionUrl)
+                            .then(r => r.text())
+                            .then(html => {
+                                const doc = new DOMParser().parseFromString(html, "text/html");
+                                setCardData(prev => ({
+                                    ...prev,
+                                    image: doc.querySelector(".teaserfig img")?.getAttribute("src") || null,
+                                    description: doc.querySelector(".teaser-p")?.textContent || null,
+                                }));
+                            })
+                            .catch(() => { })
+                    );
+                }
+
+                if (item.vcardUrls?.length) {
+                    fetches.push(
+                        Promise.all(
+                            item.vcardUrls.map(url =>
+                                fetch(url)
+                                    .then(r => r.json())
+                                    .then(vcard => ({ name: vcard.fullName || "", photo: vcard.photos?.[0]?.source || null }))
+                                    .catch(() => null)
+                            )
+                        ).then(results => {
+                            setCardData(prev => ({
+                                ...prev,
+                                authors: results.filter(Boolean) as { name: string; photo: string | null }[],
+                            }));
+                        })
+                    );
+                }
+
+                Promise.all(fetches).then(() => {
+                    setCardData(prev => ({ ...prev, loaded: true }));
+                });
+            },
+            { rootMargin: "200px" }
+        );
+
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [item.renditionUrl, item.vcardUrls]);
+
+    return (
+        <div ref={cardRef} className={cn(index == 0 ? "md:col-span-2" : "")}>
+            <Card
+                className={cn(
+                    "c-rex-result-item information-unit-search-results-card relative p-0 gap-0",
+                    `c-rex-result-${item.type.toLowerCase()}`,
+                    index == 0
+                        ? "grid grid-cols-1 md:grid-cols-2"
+                        : "h-full flex flex-col space-y-2",
+                    item.disabled ? "c-rex-result-item-disabled" : ""
+                )}
+            >
+                <div className={cn(
+                    "w-full overflow-hidden",
+                    index == 0 ? "rounded-t-xl md:rounded-t-none md:rounded-tl-xl md:rounded-bl-xl" : "rounded-t-xl"
+                )}>
+                    {cardData.image ? (
+                        <img
+                            src={cardData.image}
+                            alt={item.title}
+                            className="size-full object-cover object-center"
+                            style={{ width: "100%", height: index == 0 ? "100%" : "190px" }}
+                            loading={index == 0 ? "eager" : "lazy"}
+                        />
+                    ) : (
+                        <div
+                            style={{ height: "190px" }}
+                            className={cn(
+                                "w-full bg-gray-100 animate-pulse",
+                                index == 0 ? "" : "rounded-t-xl"
+                            )}
+                        />
                     )}
-                >
-
-                    <div className={
-                        cn(
-                            "w-full overflow-hidden",
-                            index == 0 ? "rounded-tl-xl rounded-bl-xl" : "rounded-t-xl"
-                        )}>
-                        {item.image && (
-                            <img
-                                src={item.image}
-                                alt={item.title}
-                                className={cn(
-                                    "size-full object-cover object-center",
-                                    isLoading ? "bg-gray-300 animate-pulse" : "",
-                                )}
-                                style={{
-                                    width: "100%", height: index == 0 ? "auto" : "190px"
-                                }}
-                                loading={index == 0 ? "eager" : "lazy"}
-                                onLoad={() => setLoading(false)}
-                                onError={() => setLoading(false)}
-                            />
-                        )}
+                </div>
 
+                <div className="flex flex-1 flex-col p-4 gap-4 justify-between">
+                    <div className="w-full flex flex-col items-start gap-4">
+                        <h2 className="line-clamp-2 font-heading text-2xl">
+                            {item.title}
+                        </h2>
+                        <Badge variant="secondary"> {date} </Badge>
                     </div>
 
-                    <div
-                        className={cn(
-                            "flex flex-1 flex-col p-4",
-                            index == 0 ? "justify-around" : "justify-between",
+                    <div className="flex items-end flex-row">
+                        {cardData.description ? (
+                            <p className="m-0 flex-1 text-sm text-muted-foreground">
+                                {cardData.description}
+                            </p>
+                        ) : (
+                            <div className="flex-1 space-y-2">
+                                <div className="h-3 w-full rounded bg-gray-100 animate-pulse" />
+                                <div className="h-3 w-4/5 rounded bg-gray-100 animate-pulse" />
+                            </div>
                         )}
-                    >
-                        <div className="w-full">
-                            <h2 className="my-1.5 line-clamp-2 font-heading text-2xl">
-                                {item.title}
-                            </h2>
-
-                            {item.type && (
-                                <Badge variant="secondary">
-                                    {item.type}
-                                </Badge>
-                            )}
-                        </div>
-                        <div className="mt-4 flex items-end flex-row gap-2">
-                            <p className="m-0 flex-1 text-sm text-muted-foreground">{item.description?.substring(0, 100)}...</p>
+                    </div>
 
-                            {item.created && (
-                                <p className="m-0 text-sm text-muted-foreground">{item.created}</p>
-                            )}
+                    {cardData.authors.length > 0 && (
+                        <div className="flex flex-wrap gap-4">
+                            {cardData.authors.map((author, i) => (
+                                <div key={i} className="flex items-center gap-2">
 
-                        </div>
-                    </div>
 
-                    {!item.disabled && (
-                        <Link href={`${item.link}?q=${query}`} className="absolute inset-0">
-                            <span className="sr-only">{t("viewArticle")}</span>
-                        </Link>
+                                    {author.photo ? (
+                                        <img
+                                            src={author.photo}
+                                            alt={author.name}
+                                            className="size-6 rounded-full object-cover"
+                                        />
+                                    ) : (
+                                        <div className="size-6 rounded-full bg-muted flex items-center justify-center" >
+                                            <User className="size-4" />
+                                        </div>
+                                    )}
+                                    <span className="text-xs text-muted-foreground">{author.name}</span>
+                                </div>
+                            ))}
+                        </div>
                     )}
-                </Card>
+                </div>
+
+                {!item.disabled && (
+                    <Link href={item.link} className="absolute inset-0">
+                        <span className="sr-only">View article</span>
+                    </Link>
+                )}
+            </Card>
+        </div>
+    );
+};
+
+const InformationUnitSearchResultsCards: FC<InformationUnitSearchResultsCardsProps> = ({ items }) => {
+    const [query] = useQueryState("search");
+
+    return (
+        <div className="grid gap-6 md:grid-cols-2">
+            {items.map((item, index) => (
+                <InformationUnitSearchResultCard
+                    key={item.shortId}
+                    item={item}
+                    index={index}
+                    query={query}
+                />
             ))}
         </div>
     );

package/src/results/pagination.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC, MouseEvent } from "react";
+import { FC } from "react";
 import {
     Pagination as PaginationUI,
     PaginationContent,
@@ -10,7 +10,7 @@ import {
     PaginationNext,
     PaginationPrevious,
 } from "@c-rex/ui/pagination"
-import { parseAsInteger, useQueryState } from "nuqs";
+import { usePathname, useSearchParams } from "next/navigation";
 import { ResultContainerPageInfoModel } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
 import { cn } from "@c-rex/utils";
@@ -22,6 +22,30 @@ interface PaginationProps {
 
 type PaginationToken = number | "ellipsis-left" | "ellipsis-right";
 
+const isValidPageNumber = (pageNumber: number, currentPage: number, pageCount: number) => (
+    pageNumber >= 1
+    && pageNumber <= pageCount
+    && pageNumber !== currentPage
+);
+
+export const buildPageHref = (
+    pathname: string,
+    currentSearch: string,
+    pageNumber: number,
+    currentPage: number,
+    pageCount: number,
+) => {
+    if (!isValidPageNumber(pageNumber, currentPage, pageCount)) {
+        return `${pathname}${currentSearch}`;
+    }
+
+    const searchParams = new URLSearchParams(currentSearch);
+    searchParams.set("page", String(pageNumber));
+
+    const queryString = searchParams.toString();
+    return queryString.length > 0 ? `${pathname}?${queryString}` : pathname;
+};
+
 const buildPaginationTokens = (currentPage: number, pageCount: number): PaginationToken[] => {
     if (pageCount <= 7) {
         return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -41,27 +65,8 @@ const buildPaginationTokens = (currentPage: number, pageCount: number): Paginati
 export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const disabledClass = "opacity-50 pointer-events-none";
     const t = useTranslations("results");
-
-    const [, setPage] = useQueryState('page',
-        parseAsInteger.withOptions({
-            history: 'push',
-            shallow: false,
-        })
-    )
-
-    const onChangePage = (event: MouseEvent<HTMLAnchorElement>, pageNumber: number) => {
-        event.preventDefault();
-
-        if (
-            pageNumber < 1
-            || (pageInfo.pageCount !== undefined && pageNumber > pageInfo.pageCount)
-            || pageNumber === pageInfo.pageNumber
-        ) {
-            return;
-        }
-
-        void setPage(pageNumber);
-    }
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
 
     const pageNumber = pageInfo.pageNumber || 1;
     const pageCount = pageInfo.pageCount || 1;
@@ -69,32 +74,25 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const firstItemOnPage = pageInfo.firstItemOnPage || 0;
     const lastItemOnPage = pageInfo.lastItemOnPage || 0;
     const tokens = buildPaginationTokens(pageNumber, pageCount);
+    const currentSearch = searchParams.toString();
+    const search = currentSearch.length > 0 ? `?${currentSearch}` : "";
 
     return (
         <div className={cn("flex flex-col gap-3 py-4", className)}>
-            <div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
-                <span>
+            <PaginationUI className="py-4 items-center justify-center sm:justify-between">
+                <span className="hidden sm:block text-sm text-muted-foreground">
                     {t("paginationResults", {
                         first: firstItemOnPage,
                         last: lastItemOnPage,
                         total: totalItemCount,
                     })}
                 </span>
-                <span>
-                    {t("paginationPage", {
-                        page: pageNumber,
-                        pageCount,
-                    })}
-                </span>
-            </div>
 
-            <PaginationUI className="py-0">
-                <PaginationContent className="justify-start">
+                <PaginationContent className="justify-between sm:justify-start w-full sm:w-auto">
                     <PaginationItem>
                         <PaginationPrevious
-                            href="#"
+                            href={buildPageHref(pathname, search, pageNumber - 1, pageNumber, pageCount)}
                             className={pageNumber === 1 ? disabledClass : ""}
-                            onClick={(event) => onChangePage(event, pageNumber - 1)}
                         />
                     </PaginationItem>
 
@@ -102,9 +100,8 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
                         typeof token === "number" ? (
                             <PaginationItem key={token}>
                                 <PaginationLink
-                                    href="#"
+                                    href={buildPageHref(pathname, search, token, pageNumber, pageCount)}
                                     isActive={token === pageNumber}
-                                    onClick={(event) => onChangePage(event, token)}
                                 >
                                     {token}
                                 </PaginationLink>
@@ -118,12 +115,18 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
 
                     <PaginationItem>
                         <PaginationNext
-                            href="#"
-                            onClick={(event) => onChangePage(event, pageNumber + 1)}
+                            href={buildPageHref(pathname, search, pageNumber + 1, pageNumber, pageCount)}
                             className={pageNumber === pageCount ? disabledClass : ""}
                         />
                     </PaginationItem>
                 </PaginationContent>
+
+                <span className="hidden sm:block text-sm text-muted-foreground">
+                    {t("paginationPage", {
+                        page: pageNumber,
+                        pageCount,
+                    })}
+                </span>
             </PaginationUI>
         </div>
     )

package/src/search-input.tsx

@@ -5,6 +5,7 @@ import { FileCheck, FileX, Search } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
 import * as AutocompleteOptions from "./generated/suggestions";
 import { useQueryState } from "nuqs";
+import { useTranslations } from "next-intl";
 
 type PlacedOn = "NAVBAR" | "BODY"
 type Props = {
@@ -24,6 +25,7 @@ export const SearchInput: FC<Props> = ({
     alternativeAutocompleteType,
     alternativeOnSelectPath
 }) => {
+    const t = useTranslations();
     const [pkg] = useQueryState("package");
     const [checked, setChecked] = useState<boolean>(true);
     const [autocompleteComponentName, setAutocompleteComponentName] = useState<keyof typeof AutocompleteOptions>(autocompleteType);
@@ -61,11 +63,11 @@ export const SearchInput: FC<Props> = ({
                         </TooltipTrigger>
 
                         <TooltipContent>
-                            If checked will search only in this document
+                            {t("searchInDocument")}
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>
             </>}
         </>
     );
-};
+};

package/src/toc/toc-breadcrumb.tsx

@@ -9,7 +9,7 @@ import {
 } from "@c-rex/ui/breadcrumb";
 import type { TocBreadcrumbItem } from "./types";
 
-type TocBreadcrumbProps = {
+export type TocBreadcrumbProps = {
     lang: string;
     homeLabel: string;
     homeHref?: string;

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

@@ -46,7 +46,7 @@ export const TocBrowseControls = ({
         >
             <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)}>
+                    <Button asChild variant="ghost" size="icon" className={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}
@@ -59,7 +59,7 @@ export const TocBrowseControls = ({
 
             <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)}>
+                    <Button asChild variant="ghost" size="icon" className={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" />

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type FC, type ReactNode } from "react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import {
     Sidebar,
@@ -35,16 +36,6 @@ 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,
@@ -52,13 +43,25 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
     initialChildrenByParentId = {},
     placeholder,
     headerContent,
-    headerTitle = "Inhaltsverzeichnis",
+    headerTitle,
     loadChildren,
     buildNodeHref,
     defaultWidthPx = DEFAULT_TOC_WIDTH_PX,
     minWidthPx = MIN_TOC_WIDTH_PX,
     maxWidthPx = MAX_TOC_WIDTH_PX,
 }) => {
+    const t = useTranslations();
+    const resolvedHeaderTitle = headerTitle ?? t("tableOfContent");
+    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">{t("loadingTableOfContents")}</div>
+        </div>
+    );
+
     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));
@@ -184,7 +187,7 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
                     {node.hasChildren ? (
                         <button
                             type="button"
-                            aria-label={isExpanded ? "Collapse section" : "Expand section"}
+                            aria-label={isExpanded ? t("collapseSection") : t("expandSection")}
                             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)}
                         >
@@ -237,8 +240,8 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
             <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 className="min-w-0 overflow-hidden pl-9 text-sm font-medium text-foreground" title={typeof resolvedHeaderTitle === "string" ? resolvedHeaderTitle : undefined}>
+                            <span className="truncate">{resolvedHeaderTitle}</span>
                         </div>
                         <div className="ml-auto flex shrink-0 items-center">
                             {headerContent}
@@ -263,8 +266,8 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
             </Sidebar>
             <button
                 type="button"
-                aria-label="Resize table of contents"
-                title="Resize table of contents"
+                aria-label={t("resizeTableOfContents")}
+                title={t("resizeTableOfContents")}
                 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 };

package/src/article/article-content.tsx

@@ -1,19 +0,0 @@
-import { FC } from "react";
-import { RenderArticle } from "../render-article";
-
-interface Props {
-    articleHtml: string;
-}
-
-export const ArticleContent: FC<Props> = async ({ articleHtml }) => {
-    return (
-        <div className="relative flex flex-col gap-4 md:flex-row md:items-start">
-            <div className="relative min-w-0 flex-1 md:pr-8">
-                <RenderArticle htmlContent={articleHtml} contentLang="" />
-            </div>
-
-
-
-        </div>
-    )
-}