@c-rex/components 0.3.0-build.24 → 0.3.0-build.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.24",
+    "version":  "0.3.0-build.26",
     "files":  [
                   "src"
               ],
@@ -177,6 +177,10 @@
                                                "types":  "./src/restriction-menu/restriction-menu.tsx",
                                                "import":  "./src/restriction-menu/restriction-menu.tsx"
                                            },
+                    "./restriction-menu-container":  {
+                                                         "types":  "./src/restriction-menu/restriction-menu-container.tsx",
+                                                         "import":  "./src/restriction-menu/restriction-menu-container.tsx"
+                                                     },
                     "./restriction-menu-item":  {
                                                     "types":  "./src/restriction-menu/restriction-menu-item.tsx",
                                                     "import":  "./src/restriction-menu/restriction-menu-item.tsx"

package/src/autocomplete.tsx

@@ -1,14 +1,15 @@
 "use client"
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, useTransition } from "react";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@c-rex/ui/input-group";
 import { useTranslations } from "next-intl";
 import { SuggestionQueryParams } from "@c-rex/interfaces";
-import { X } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { Loader2, X } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { suggestionRequest } from "./generated/create-suggestions-request";
 import { useQueryState } from "nuqs";
 import { useSearchSettingsStore } from "./stores/search-settings-store";
+import { useSearchNavigationStore } from "./stores/search-navigation-store";
 
 export type AutoCompleteProps = {
     initialValue?: string;
@@ -35,6 +36,9 @@ export const AutoComplete = ({
     const [pkg] = useQueryState("package");
 
     const containerRef = useRef<HTMLDivElement>(null);
+    const suggestionRequestIdRef = useRef(0);
+    const suggestionAbortControllerRef = useRef<AbortController | null>(null);
+    const pathname = usePathname();
     const searchParams = useSearchParams();
     const router = useRouter();
 
@@ -42,8 +46,12 @@ export const AutoComplete = ({
     const [query, setQuery] = useState(initialValue);
     const [loading, setLoading] = useState(false);
     const [suggestions, setSuggestions] = useState<string[]>([]);
+    const [isNavigating, startNavigation] = useTransition();
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
+    const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const stopSearchNavigation = useSearchNavigationStore((state) => state.stop);
 
-    const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
+    const fetchSuggestions = useCallback(async (prefix: string, signal?: AbortSignal): Promise<string[]> => {
         const params = { ...queryParams };
         const contentLang = useSearchSettingsStore.getState().language;
         const restrictions = searchParams.get("restrict")
@@ -61,7 +69,7 @@ export const AutoComplete = ({
         if (contentLang) params.lang = contentLang;
         if (pkg != null) params.scopes = pkg as unknown as string[];
 
-        const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
+        const results = await suggestionRequest({ endpoint, prefix, queryParams: params, signal });
 
         return results.data;
     }, [endpoint, pkg, queryParams, searchParams]);
@@ -83,7 +91,14 @@ export const AutoComplete = ({
             nextParams.set(param.key, param.value);
         });
 
-        router.push(`${onSelectPath}?${nextParams.toString()}`);
+        const targetUrl = `${onSelectPath}?${nextParams.toString()}`;
+        const currentUrl = `${pathname}${searchParams.toString().length > 0 ? `?${searchParams.toString()}` : ""}`;
+        if (targetUrl === currentUrl) return;
+
+        startSearchNavigation();
+        startNavigation(() => {
+            router.push(targetUrl);
+        });
     };
 
     const clearSearch = () => {
@@ -97,10 +112,20 @@ export const AutoComplete = ({
         onSelectParams?.forEach(param => {
             nextParams.set(param.key, param.value);
         });
-        router.push(queryString ? `${onSelectPath}?${queryString}` : onSelectPath);
+        const targetUrl = queryString ? `${onSelectPath}?${queryString}` : onSelectPath;
+        const currentUrl = `${pathname}${searchParams.toString().length > 0 ? `?${searchParams.toString()}` : ""}`;
+        if (targetUrl === currentUrl) return;
+
+        startSearchNavigation();
+        startNavigation(() => {
+            router.push(targetUrl);
+        });
     };
 
     useEffect(() => setQuery(initialValue), [initialValue]);
+    useEffect(() => {
+        stopSearchNavigation();
+    }, [pathname, searchParams, stopSearchNavigation]);
 
     useEffect(() => {
         const handleClickOutside = (e: MouseEvent) => {
@@ -114,54 +139,85 @@ export const AutoComplete = ({
 
     useEffect(() => {
         if (query.length < 2) {
+            suggestionRequestIdRef.current += 1;
+            suggestionAbortControllerRef.current?.abort();
+            suggestionAbortControllerRef.current = null;
+            setLoading(false);
             setSuggestions([]);
             return;
         }
 
         const debounceFetch = setTimeout(() => {
+            const requestId = ++suggestionRequestIdRef.current;
+            suggestionAbortControllerRef.current?.abort();
+            const controller = new AbortController();
+            suggestionAbortControllerRef.current = controller;
             setLoading(true);
-            fetchSuggestions(query)
-                .then(setSuggestions)
-                .catch(() => setSuggestions([]))
-                .finally(() => setLoading(false));
-        }, 300);
+            fetchSuggestions(query, controller.signal)
+                .then((results) => {
+                    if (requestId !== suggestionRequestIdRef.current) return;
+                    setSuggestions(results);
+                })
+                .catch(() => {
+                    if (requestId !== suggestionRequestIdRef.current) return;
+                    setSuggestions([]);
+                })
+                .finally(() => {
+                    if (requestId !== suggestionRequestIdRef.current) return;
+                    setLoading(false);
+                });
+        }, 250);
 
-        return () => clearTimeout(debounceFetch);
+        return () => {
+            clearTimeout(debounceFetch);
+        };
     }, [query, fetchSuggestions]);
 
+    useEffect(() => {
+        return () => {
+            suggestionAbortControllerRef.current?.abort();
+        };
+    }, []);
+
     return (
         <div className="relative flex-1" ref={containerRef}>
-            <InputGroup variant={embedded ? "embedded" : "default"}>
-                <InputGroupInput
-                    variant={embedded ? "embedded" : undefined}
-                    className={inputClass}
-                    type="text"
-                    placeholder={t("search")}
-                    value={query}
-                    onChange={(e) => {
-                        setQuery(e.target.value);
-                        setOpen(true);
-                    }}
-                    onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                            e.preventDefault();
-                            handleSelect(query);
-                        }
-                    }}
-                />
-                {query.length > 0 && (
-                    <InputGroupAddon align="inline-end">
-                        <InputGroupButton
-                            size="icon-xs"
-                            variant="ghost"
-                            aria-label="Clear search"
-                            onClick={clearSearch}
-                        >
-                            <X className="size-3" />
-                        </InputGroupButton>
-                    </InputGroupAddon>
-                )}
-            </InputGroup>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    handleSelect(query);
+                }}
+            >
+                <InputGroup variant={embedded ? "embedded" : "default"}>
+                    <InputGroupInput
+                        variant={embedded ? "embedded" : undefined}
+                        className={inputClass}
+                        type="text"
+                        placeholder={t("search")}
+                        value={query}
+                        disabled={isNavigating || searchNavigationPending}
+                        onChange={(e) => {
+                            setQuery(e.target.value);
+                            setOpen(true);
+                        }}
+                    />
+                    {isNavigating || searchNavigationPending ? (
+                        <InputGroupAddon align="inline-end">
+                            <Loader2 className="size-4 animate-spin" />
+                        </InputGroupAddon>
+                    ) : query.length > 0 && (
+                        <InputGroupAddon align="inline-end">
+                            <InputGroupButton
+                                size="icon-xs"
+                                variant="ghost"
+                                aria-label="Clear search"
+                                onClick={clearSearch}
+                            >
+                                <X className="size-3" />
+                            </InputGroupButton>
+                        </InputGroupAddon>
+                    )}
+                </InputGroup>
+            </form>
 
             {open && (
                 <ul className="suggestions-list absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">

package/src/carousel/carousel.tsx

@@ -9,9 +9,9 @@ import {
     createContext,
     useContext,
 } from "react";
-import { cn, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
+import { cn, findRelatedFragmentShortId, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
-import { ArrowLeft, ArrowRight } from "lucide-react";
+import { ArrowLeft, ArrowRight, LoaderCircle } from "lucide-react";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import * as ServiceOptions from "@c-rex/services/client-requests";
 import { documentsGetAllClientService } from "@c-rex/services/client-requests";
@@ -21,10 +21,13 @@ import { Card } from "@c-rex/ui/card";
 import { Badge } from "@c-rex/ui/badge";
 import { Flag } from "../icons/flag-icon"
 import { Empty } from "../results/empty";
-import { useLocale, useTranslations } from "next-intl";
+import { useLocale, useMessages, useTranslations } from "next-intl";
 import Link from "next/link";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
+import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { toast } from "sonner";
 
 type PageInfo = {
     hasNextPage: boolean;
@@ -43,11 +46,18 @@ type Props = {
     };
     indicators?: boolean;
     showImages?: boolean;
-    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean; linkPattern: string }>;
+    carouselItemComponent?: FC<{
+        item: CommonItemsModel;
+        showImages: boolean;
+        loadImage: boolean;
+        linkPattern: string;
+        imageFragmentSubjectIds?: string[];
+    }>;
     serviceType: keyof typeof ServiceOptions;
     queryParams?: Record<string, any>;
     loadByPages?: boolean;
     linkPattern: string;
+    imageFragmentSubjectIds?: string[];
 };
 type CarouselContextProps = {
     next: () => void;
@@ -61,6 +71,8 @@ type CarouselContextProps = {
     setPage?: (page: number) => void;
     hasNextPage?: boolean;
     hasPrevPage?: boolean;
+    loading: boolean;
+    pagedMode: boolean;
 };
 
 const CarouselContext = createContext<CarouselContextProps | null>(null);
@@ -89,12 +101,14 @@ export const Carousel: FC<Props> = ({
     serviceType,
     queryParams = {},
     loadByPages = false,
-    linkPattern
+    linkPattern,
+    imageFragmentSubjectIds = [],
 }) => {
     const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
     const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
 
     const device = useBreakpoint();
+    const t = useTranslations("results");
     const [slidesToShow, setSlidesToShow] = useState(1);
 
     useEffect(() => {
@@ -120,39 +134,47 @@ export const Carousel: FC<Props> = ({
     // Data loading
     useEffect(() => {
         let isMounted = true;
+        const controller = new AbortController();
         setIsLoading(true);
         setError(null);
-        setData(null);
+        if (!loadByPages || data == null) {
+            setData(null);
+        }
         if (loadByPages) {
             (async () => {
                 try {
-                    const result = await service({ ...queryParams, PageNumber: page });
+                    const result = await service({ ...queryParams, PageNumber: page }, { signal: controller.signal });
                     if (!isMounted) return;
                     setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
                     setPageInfo((result && 'pageInfo' in result) ? result.pageInfo as PageInfo : null);
                 } catch (err) {
+                    if (controller.signal.aborted) return;
                     if (!isMounted) return;
                     setError(err);
                 } finally {
-                    if (isMounted) setIsLoading(false);
+                    if (isMounted && !controller.signal.aborted) setIsLoading(false);
                 }
             })();
         } else {
             (async () => {
                 try {
-                    const result = await service(queryParams);
+                    const result = await service(queryParams, { signal: controller.signal });
                     if (!isMounted) return;
                     setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
                 } catch (err) {
+                    if (controller.signal.aborted) return;
                     if (!isMounted) return;
                     setError(err);
                 } finally {
-                    if (isMounted) setIsLoading(false);
+                    if (isMounted && !controller.signal.aborted) setIsLoading(false);
                 }
             })();
         }
-        return () => { isMounted = false; };
-    }, [queryParams, page, loadByPages, service]);
+        return () => {
+            isMounted = false;
+            controller.abort();
+        };
+    }, [loadByPages, page, queryParams, service]);
 
     // Page info
     useEffect(() => {
@@ -162,6 +184,14 @@ export const Carousel: FC<Props> = ({
         }
     }, [pageInfo, loadByPages]);
 
+    useEffect(() => {
+        if (!error) return;
+
+        toast.error(t("requestFailedTitle"), {
+            description: error instanceof Error ? error.message : t("requestFailedDescription"),
+        });
+    }, [error, t]);
+
     // Autoplay logic (static mode only)
     useEffect(() => {
         if (!autoplay || loading || !data || data.length === 0 || loadByPages) return;
@@ -206,6 +236,8 @@ export const Carousel: FC<Props> = ({
         setPage: loadByPages ? setPage : undefined,
         hasNextPage: loadByPages ? hasNextPage : undefined,
         hasPrevPage: loadByPages ? hasPrevPage : undefined,
+        loading,
+        pagedMode: loadByPages,
     };
 
     return (
@@ -214,26 +246,42 @@ export const Carousel: FC<Props> = ({
                 <div className={cn("w-full flex items-center")}>
                     {(arrows && data && data.length > 0) && <CarouselPrev />}
                     <div className={cn("flex-1 overflow-hidden relative flex items-center")}>
+                        {loadByPages && loading && data && data.length > 0 && (
+                            <div className="absolute right-3 top-3 z-20 rounded-full bg-background/95 p-2 text-muted-foreground shadow-sm">
+                                <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
+                            </div>
+                        )}
                         <div
                             className="flex will-change-transform transition-all duration-600 ease-[cubic-bezier(0.4,0,0.2,1)] w-full"
                             style={{ transform: `translateX(-${(current * 100) / slidesToShow}%)` }}
                         >
-                            {loading ? (
+                            {loading && (!data || data.length === 0) ? (
                                 <Skeleton className="w-full h-80" />
                             ) : error ? (
-                                <div className="w-full h-80 flex items-center justify-center text-red-500">
-                                    {JSON.stringify(error)}
+                                <div className="w-full min-h-80 flex items-center">
+                                    <Alert variant="destructive" className="my-2">
+                                        <AlertTitle>{t("requestFailedTitle")}</AlertTitle>
+                                        <AlertDescription>
+                                            {t("requestFailedDescription")}
+                                        </AlertDescription>
+                                    </Alert>
                                 </div>
                             ) : data && data.length == 0 ? (
                                 <Empty />
                             ) : data && data.length > 0 ? (
-                                data.map((item: CommonItemsModel) => (
+                                data.map((item: CommonItemsModel, index: number) => (
                                     <div
                                         key={item.shortId}
                                         className={`flex-shrink-0 flex-grow-0 flex justify-center`}
                                         style={{ width: `${100 / slidesToShow}%` }}
                                     >
-                                        <RenderComponent item={item} showImages={showImages} linkPattern={linkPattern} />
+                                        <RenderComponent
+                                            item={item}
+                                            showImages={showImages}
+                                            loadImage={showImages && index >= current && index < current + slidesToShow}
+                                            linkPattern={linkPattern}
+                                            imageFragmentSubjectIds={imageFragmentSubjectIds}
+                                        />
                                     </div>
                                 ))
                             ) : null}
@@ -248,8 +296,10 @@ export const Carousel: FC<Props> = ({
 };
 
 const CarouselNext: FC = () => {
-    const { next, current, slidesToShow, slidesLength, hasNextPage } = useCarousel();
-    const disabled = hasNextPage === undefined ? current >= slidesLength - slidesToShow : !hasNextPage;
+    const { next, current, slidesToShow, slidesLength, hasNextPage, loading, pagedMode } = useCarousel();
+    const disabled = pagedMode
+        ? loading || !hasNextPage
+        : current >= slidesLength - slidesToShow;
     return (
         <Button className="w-9" rounded="full" onClick={next} variant="default" disabled={disabled}>
             <ArrowRight />
@@ -258,8 +308,8 @@ const CarouselNext: FC = () => {
 };
 
 const CarouselPrev: FC = () => {
-    const { prev, current, hasPrevPage } = useCarousel();
-    const disabled = hasPrevPage === undefined ? current === 0 : !hasPrevPage;
+    const { prev, current, hasPrevPage, loading, pagedMode } = useCarousel();
+    const disabled = pagedMode ? loading || !hasPrevPage : current === 0;
 
     return (
         <Button className="w-9" rounded="full" onClick={prev} variant="default" disabled={disabled}>
@@ -269,11 +319,18 @@ const CarouselPrev: FC = () => {
 };
 
 const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
-    const { current, setCurrent, slidesToShow, slidesLength, page, setPage, pageCount } = useCarousel();
+    const { current, setCurrent, slidesToShow, slidesLength, page, setPage, pageCount, loading, pagedMode } = useCarousel();
     // Static mode
     if (!setPage) {
         const totalOfIndicators = Math.max(slidesLength - slidesToShow + 1, 1);
         if (totalOfIndicators === 1) return null;
+        if (totalOfIndicators > 8) {
+            return (
+                <div className={cn("mt-3 flex items-center gap-2 text-sm text-muted-foreground", className)}>
+                    <span className="rounded-full border px-3 py-1">{current + 1} / {totalOfIndicators}</span>
+                </div>
+            );
+        }
         return (
             <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
                 {Array.from({ length: totalOfIndicators }).map((_, index) => (
@@ -291,55 +348,108 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
     // Paginated mode
     const totalOfIndicators = pageCount || 1;
     if (totalOfIndicators === 1) return null;
+    const currentPage = page || 1;
+    const maxVisibleIndicators = 7;
+    const visibleIndicators = Math.min(totalOfIndicators, maxVisibleIndicators);
+    const halfWindow = Math.floor(visibleIndicators / 2);
+    let startPage = Math.max(1, currentPage - halfWindow);
+    let endPage = startPage + visibleIndicators - 1;
+
+    if (endPage > totalOfIndicators) {
+        endPage = totalOfIndicators;
+        startPage = Math.max(1, endPage - visibleIndicators + 1);
+    }
+
+    const pages = Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index);
+    const hasHiddenBefore = startPage > 1;
+    const hasHiddenAfter = endPage < totalOfIndicators;
+
     return (
-        <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
-            {Array.from({ length: totalOfIndicators }).map((_, index) => {
-                const pageNumber = index + 1;
-                return (
-                    <li key={pageNumber}>
-                        <Button
-                            className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${pageNumber === page ? "bg-gray-800" : "bg-gray-300"}`}
-                            size="xs"
-                            onClick={() => setPage(pageNumber)}
-                        />
-                    </li>
-                );
-            })}
-        </ol>
+        <div className={cn("mt-3 flex items-center gap-3", className)}>
+            <ol className="flex items-center gap-2 z-20 list-none p-0 m-0">
+                {pages.map((pageNumber, index) => {
+                    const isActive = pageNumber === currentPage;
+                    const isEdgeHint =
+                        (index === 0 && hasHiddenBefore) ||
+                        (index === pages.length - 1 && hasHiddenAfter);
+
+                    return (
+                        <li key={pageNumber}>
+                            <Button
+                                className={cn(
+                                    "rounded-full border-0 cursor-pointer transition-all",
+                                    isActive ? "w-3 h-3 bg-gray-800" : "bg-gray-300",
+                                    !isActive && isEdgeHint ? "w-2 h-2 opacity-60" : !isActive ? "w-3 h-3" : ""
+                                )}
+                                size="xs"
+                                disabled={loading}
+                                onClick={() => setPage(pageNumber)}
+                                aria-label={`Go to page ${pageNumber}`}
+                            />
+                        </li>
+                    );
+                })}
+            </ol>
+            {pagedMode && loading && <LoaderCircle className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+        </div>
     );
 };
 
 const DefaultRenderCarouselItem: FC<{
     item: CommonItemsModel;
     showImages: boolean;
-    linkPattern: string
-}> = ({ item, showImages, linkPattern }) => {
+    loadImage: boolean;
+    linkPattern: string;
+    imageFragmentSubjectIds?: string[];
+}> = ({ item, showImages, loadImage, linkPattern, imageFragmentSubjectIds = [] }) => {
     const locale = useLocale();
+    const messages = useMessages() as Record<string, unknown>;
     const t = useTranslations("itemTypes");
 
     const date = formatDateToLocale(item.created!, locale);
     const title = getTitle(item.titles, item.labels);
-    const itemType = getType(item.class);
+    const itemType = getType(item.class, locale);
+    const itemTypeKey = itemType?.toLowerCase();
+    const itemTypeMessages = (messages.itemTypes || {}) as Record<string, string>;
+    const itemTypeLabel = itemTypeKey && itemTypeMessages[itemTypeKey]
+        ? t(itemTypeKey)
+        : itemType;
     const language = getLanguage(item.languages)
     const countryCode = language.split("-")[1] || "";
     const link = linkPattern.replace("{shortId}", item.shortId!);
+    const previewFragmentShortId = findRelatedFragmentShortId({
+        item,
+        informationSubjectIds: imageFragmentSubjectIds,
+    });
 
     return (
         <Link href={link} className="group p-2 flex flex-1">
-            <Card className="p-4 flex-1 justify-between relative">
-                <Badge className="absolute -top-2 -right-2">{t(itemType.toLowerCase())}</Badge>
-
-                {showImages && (
-                    <ImageRenditionContainer
-                        itemShortId={item.shortId!}
-                        emptyImageStyle="h-48 w-full"
-                        imageStyle="object-cover h-48 w-full"
-                    />
+            <Card className={cn("p-4 flex-1 justify-between relative", !showImages && "min-h-0")}>
+                {itemType && (
+                    <Badge className="absolute -top-2 -right-2">{itemTypeLabel}</Badge>
                 )}
 
-                <span className="group-hover:underline text-lg font-semibold flex-1">
-                    {title}
-                </span>
+                {showImages ? (
+                    <div className="h-48 w-full overflow-hidden">
+                        <ImageRenditionContainer
+                            fragmentShortId={loadImage ? previewFragmentShortId : undefined}
+                            emptyImageStyle="h-48 w-full"
+                            skeletonStyle="h-48 w-full"
+                            imageStyle="object-contain object-top h-48 !w-auto max-w-full mx-auto"
+                        />
+                    </div>
+                ) : null}
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <div className="h-44 overflow-hidden">
+                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline">
+                                {title}
+                            </span>
+                        </div>
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-sm break-words">{title}</TooltipContent>
+                </Tooltip>
 
                 <div className="flex justify-between w-full">
                     <span className="w-8 block">

package/src/documents/expandable-summary.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { FC, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@c-rex/ui/button";
+
+type Props = {
+    text: string;
+};
+
+const collapsedStyle: React.CSSProperties = {
+    display: "-webkit-box",
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+};
+
+export const ExpandableSummary: FC<Props> = ({ text }) => {
+    const t = useTranslations();
+    const [expanded, setExpanded] = useState(false);
+
+    if (!text.trim()) {
+        return null;
+    }
+
+    return (
+        <div className="flex flex-col gap-1">
+            <span
+                className="block text-sm"
+                style={expanded ? undefined : collapsedStyle}
+                title={text}
+            >
+                {text}
+            </span>
+            {text.length > 180 && (
+                <div>
+                    <Button
+                        variant="link"
+                        className="h-auto p-0 text-sm"
+                        onClick={() => setExpanded((value) => !value)}
+                    >
+                        {expanded ? t("less") : t("more")}
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+};