@c-rex/components 0.1.33 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.33",
+  "version": "0.1.37",
   "files": [
     "src"
   ],

package/src/article/article-content.tsx

@@ -3,53 +3,44 @@ import { RenditionModel } from "@c-rex/interfaces";
 import { RenderArticle } from "../render-article";
 import { ArticleActionBar } from "./article-action-bar";
 import * as cheerio from "cheerio"
+import { HtmlRendition } from "../renditions/html";
 
 interface Props {
     renditions: RenditionModel[] | null | undefined;
 }
 
 export const ArticleContent: FC<Props> = async ({ renditions }) => {
-    const empty = (
-        <div>No HTML Rendition Available</div>
-    )
-
-    if (renditions == null || renditions.length == 0) return empty;
-
-    const filteredRenditions = renditions.filter((item) => item.format == "application/xhtml+xml");
-
-    if (filteredRenditions.length == 0 || filteredRenditions[0] == undefined || filteredRenditions[0].links == undefined) return empty;
-
-    const filteredLinks = filteredRenditions[0].links.filter((item) => item.rel == "view");
 
-    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+    const articleRender = (html: string) => {
 
-    const url = filteredLinks[0].href;
-    const html = await fetch(url, {
-        method: "GET",
-        headers: {
-            Accept: "application/xhtml+xml",
-        },
-    }).then(res => res.text());
+        const $ = cheerio.load(html)
 
-    const $ = cheerio.load(html)
+        const metaTags = $("meta").map((_, el) => {
+            const name = $(el).attr("name")
+            const content = $(el).attr("content")
+            return name && content ? { name, content } : null
+        }).get().filter(Boolean)
 
-    const metaTags = $("meta").map((_, el) => {
-        const name = $(el).attr("name")
-        const content = $(el).attr("content")
-        return name && content ? { name, content } : null
-    }).get().filter(Boolean)
+        const articleHtml = $("main").html() || ""
 
-    const articleHtml = $("main").html() || ""
+        return (
+            <>
+                {metaTags.map((tag) => (
+                    <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
+                ))}
+                <div className="pr-4 relative">
+                    <RenderArticle htmlContent={articleHtml} contentLang="" />
+                </div>
+                <ArticleActionBar />
+            </>
+        )
+    }
 
     return (
-        <>
-            {metaTags.map((tag) => (
-                <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
-            ))}
-            <div className="pr-4 relative">
-                <RenderArticle htmlContent={articleHtml} contentLang="" />
-            </div>
-            <ArticleActionBar />
-        </>
+        <HtmlRendition
+            renditions={renditions}
+            render={articleRender}
+            shortId=""
+        />
     )
 }

package/src/autocomplete.tsx

@@ -1,14 +1,14 @@
 "use client"
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Input } from "@c-rex/ui/input";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@c-rex/ui/input-group";
 import { useTranslations } from "next-intl";
 import { SuggestionQueryParams } from "@c-rex/interfaces";
-
-import { useSearchSettingsStore } from "./stores/search-settings-store";
-import { useRouter } from 'next/navigation';
+import { X } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { suggestionRequest } from "./generated/create-suggestions-request";
 import { useQueryState } from "nuqs";
+import { useSearchSettingsStore } from "./stores/search-settings-store";
 
 export type AutoCompleteProps = {
     initialValue?: string;
@@ -18,11 +18,13 @@ export type AutoCompleteProps = {
     onSelectParams?: { key: string, value: string }[];
     onSelectPath: string
     inputClass?: string
+    keepParams?: boolean;
 };
 
 export const AutoComplete = ({
     initialValue = "",
     embedded = true,
+    keepParams = false,
     endpoint,
     queryParams,
     onSelectParams,
@@ -33,7 +35,9 @@ export const AutoComplete = ({
     const [pkg] = useQueryState("package");
 
     const containerRef = useRef<HTMLDivElement>(null);
+    const searchParams = useSearchParams();
     const router = useRouter();
+
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
     const [loading, setLoading] = useState(false);
@@ -41,40 +45,62 @@ export const AutoComplete = ({
 
     const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
         const params = { ...queryParams };
+        const contentLang = useSearchSettingsStore.getState().language;
+        const restrictions = searchParams.get("restrict")
+
+        if (restrictions) {
+            if (restrictions.includes("informationSubjects")) {
+
+                const informationSubject = restrictions.split("informationSubjects=")[1]?.split(',') || [];
+                if (informationSubject.length > 0) {
+                    params.scopes = informationSubject.map(subject => `informationSubjects=${subject}`);
+                }
+            }
+        }
+
+        if (contentLang) params.lang = contentLang;
         if (pkg != null) params.scopes = pkg as unknown as string[];
 
         const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
 
         return results.data;
-    }, [endpoint, queryParams]);
+    }, [endpoint, pkg, queryParams, searchParams]);
 
     const handleSelect = (value: string) => {
         setQuery(value);
         setOpen(false);
-        onSelect(value);
-    };
 
-    const onSelect = (value: string) => {
-        const params = new URLSearchParams();
-        const searchSettings = useSearchSettingsStore.getState();
+        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
+        nextParams.set("page", "1");
 
-        params.set('search', value);
-        params.set("page", "1")
-        params.set("operator", searchSettings.operator)
-        if (searchSettings.language) params.set("language", searchSettings.language)
-        params.set("wildcard", searchSettings.wildcard)
-        params.set("like", searchSettings.like.toString())
+        if (value.length > 0) {
+            nextParams.set("search", value);
+        } else {
+            nextParams.delete("search");
+        };
 
         onSelectParams?.forEach(param => {
-            params.set(param.key, param.value);
+            nextParams.set(param.key, param.value);
         });
 
-        router.push(`${onSelectPath}?${params.toString()}`);
+        router.push(`${onSelectPath}?${nextParams.toString()}`);
     };
 
-    useEffect(() => {
-        setQuery(initialValue);
-    }, [initialValue]);
+    const clearSearch = () => {
+        setQuery("");
+        setOpen(false);
+        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
+        nextParams.set("page", "1");
+        nextParams.delete("search");
+        const queryString = nextParams.toString();
+
+        onSelectParams?.forEach(param => {
+            nextParams.set(param.key, param.value);
+        });
+        router.push(queryString ? `${onSelectPath}?${queryString}` : onSelectPath);
+    };
+
+    useEffect(() => setQuery(initialValue), [initialValue]);
 
     useEffect(() => {
         const handleClickOutside = (e: MouseEvent) => {
@@ -105,23 +131,37 @@ export const AutoComplete = ({
 
     return (
         <div className="relative flex-1" ref={containerRef}>
-            <Input
-                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);
-                    }
-                }}
-            />
+            <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>
 
             {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">
@@ -139,7 +179,11 @@ export const AutoComplete = ({
                                         <li
                                             key={option}
                                             className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
-                                            onClick={() => handleSelect(`"${option}"`)}
+                                            onClick={() => {
+                                                //handleSelect(`"${option}"`)
+                                                // TODO: check if the quotes are necessary
+                                                handleSelect(option)
+                                            }}
                                         >
                                             {option}
                                         </li>

package/src/carousel/carousel.tsx

@@ -22,14 +22,33 @@ 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 Link from "next/link";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
-// Types
-
-type ResponsiveSetting = {
-    maxWidth: number;
-    slidesToShow: number;
+type PageInfo = {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    pageCount: number;
+};
+type Props = {
+    className?: string;
+    arrows?: boolean;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number,
+        [DEVICE_OPTIONS.TABLET]: number,
+        [DEVICE_OPTIONS.DESKTOP]: number,
+    };
+    indicators?: boolean;
+    showImages?: boolean;
+    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean; linkPattern: string }>;
+    serviceType: keyof typeof ServiceOptions;
+    queryParams?: Record<string, any>;
+    loadByPages?: boolean;
+    linkPattern: string;
 };
-
 type CarouselContextProps = {
     next: () => void;
     prev: () => void;
@@ -54,30 +73,15 @@ export function useCarousel() {
     return context;
 }
 
-type PageInfo = {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    pageCount: number;
-};
-type Props = {
-    className?: string;
-    arrows?: boolean;
-    autoplay?: boolean;
-    autoplaySpeed?: number;
-    responsive?: ResponsiveSetting[];
-    indicators?: boolean;
-    showImages?: boolean;
-    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean }>;
-    serviceType: keyof typeof ServiceOptions;
-    queryParams?: Record<string, any>;
-    loadByPages?: boolean;
-};
-
 export const Carousel: FC<Props> = ({
     className,
     arrows = false,
     autoplay = false,
-    responsive = [{ maxWidth: 99999, slidesToShow: 1 }],
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 1,
+        [DEVICE_OPTIONS.TABLET]: 3,
+        [DEVICE_OPTIONS.DESKTOP]: 4,
+    },
     indicators = false,
     autoplaySpeed = 3000,
     showImages = false,
@@ -85,29 +89,18 @@ export const Carousel: FC<Props> = ({
     serviceType,
     queryParams = {},
     loadByPages = false,
+    linkPattern
 }) => {
     const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
     const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
 
-    // Responsive
-    const [slidesToShow, setSlidesToShow] = useState(responsive[0]?.slidesToShow || 1);
-    const updateSlidesToShow = useCallback(() => {
-        const width = window.innerWidth;
-        const sorted = [...responsive].sort((a, b) => a.maxWidth - b.maxWidth);
-        let found = sorted[sorted.length - 1]?.slidesToShow || 1;
-        for (const r of sorted) {
-            if (width <= r.maxWidth) {
-                found = r.slidesToShow;
-                break;
-            }
-        }
-        setSlidesToShow(found);
-    }, [responsive]);
+    const device = useBreakpoint();
+    const [slidesToShow, setSlidesToShow] = useState(1);
+
     useEffect(() => {
-        updateSlidesToShow();
-        window.addEventListener("resize", updateSlidesToShow);
-        return () => window.removeEventListener("resize", updateSlidesToShow);
-    }, [updateSlidesToShow]);
+        if (device == null) return;
+        setSlidesToShow(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
+    }, [device, itemsByRow]);
 
     // State
     const [current, setCurrent] = useState(0);
@@ -240,7 +233,7 @@ export const Carousel: FC<Props> = ({
                                         className={`flex-shrink-0 flex-grow-0 flex justify-center`}
                                         style={{ width: `${100 / slidesToShow}%` }}
                                     >
-                                        <RenderComponent item={item} showImages={showImages} />
+                                        <RenderComponent item={item} showImages={showImages} linkPattern={linkPattern} />
                                     </div>
                                 ))
                             ) : null}
@@ -258,7 +251,7 @@ const CarouselNext: FC = () => {
     const { next, current, slidesToShow, slidesLength, hasNextPage } = useCarousel();
     const disabled = hasNextPage === undefined ? current >= slidesLength - slidesToShow : !hasNextPage;
     return (
-        <Button className="size-8" rounded="full" onClick={next} variant="ghost" disabled={disabled}>
+        <Button className="w-9" rounded="full" onClick={next} variant="default" disabled={disabled}>
             <ArrowRight />
         </Button>
     );
@@ -267,8 +260,9 @@ const CarouselNext: FC = () => {
 const CarouselPrev: FC = () => {
     const { prev, current, hasPrevPage } = useCarousel();
     const disabled = hasPrevPage === undefined ? current === 0 : !hasPrevPage;
+
     return (
-        <Button className="size-8" rounded="full" onClick={prev} variant="ghost" disabled={disabled}>
+        <Button className="w-9" rounded="full" onClick={prev} variant="default" disabled={disabled}>
             <ArrowLeft />
         </Button>
     );
@@ -315,7 +309,11 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
     );
 };
 
-const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolean }> = ({ item, showImages }) => {
+const DefaultRenderCarouselItem: FC<{
+    item: CommonItemsModel;
+    showImages: boolean;
+    linkPattern: string
+}> = ({ item, showImages, linkPattern }) => {
     const locale = useLocale();
     const t = useTranslations("itemTypes");
 
@@ -338,7 +336,9 @@ const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolea
                     />
                 )}
 
-                <span className="text-lg font-semibold">{title}</span>
+                <Link href={linkPattern.replace("{id}", item.shortId!)} className="hover:underline text-lg font-semibold flex-1">
+                    {title}
+                </Link>
 
                 <div className="flex justify-between w-full">
                     <span className="w-8 block border">

package/src/favorites/bookmark-button.analysis.md

@@ -2,14 +2,16 @@
 
 - Component: packages/components/src/favorites/bookmark-button.tsx
 - Type: Client component
-- Detected signals: useQueryStates=no, stores=yes, window/document=no, effects=no, fetch/call=no
+- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=yes, fetch/call=no
 
 ## Possible re-render causes
-- Store updates for the selected document topics will re-render this component (expected and desired for live badge updates).
+- Effects that update state can add extra renders on mount and dependency changes.
 
 ## Possible bugs/risks
-- Dynamic Tailwind class name interpolation (`text-${item.color}`) may be purged depending on Tailwind safelist config.
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+- markersList is loaded only on mount/shortId change; later store updates may not refresh the badge.
 
 ## Recommended improvements
-- Keep the direct Zustand selector approach (`documents[shortId]?.topics`) to preserve reactive UI behavior.
-- If marker colors are dynamic, safelist all expected `text-*` classes or map colors to explicit class names.
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+- Read documents[shortId]?.topics directly through a Zustand selector to keep UI reactive.
+

package/src/favorites/bookmark-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ComponentProps, FC, useState } from "react";
-import { Button } from "@c-rex/ui/button";
+import { ComponentProps, FC, ReactNode, useEffect, useState } from "react";
+import { Button, ButtonProps } from "@c-rex/ui/button";
 import { Trash } from "lucide-react";
 import { cn } from "@c-rex/utils";
 import Link from "next/link";
@@ -20,18 +20,17 @@ type BookmarkProps = {
     triggerVariant?: ComponentProps<typeof Button>["variant"];
 }
 
-const EMPTY_TOPICS: Array<{ id: string; label: string; color: string }> = [];
-
 export const BookmarkButton: FC<BookmarkProps> = ({
     shortId,
     triggerVariant = "outline"
 }) => {
-    const [open, setOpen] = useState(false);
-    const document = useFavoritesStore((state) => state.documents[shortId]);
-    const markersList = document?.topics ?? EMPTY_TOPICS;
+    const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
 
+    useEffect(() => {
+        setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
+    }, [shortId]);
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog>
             <DialogTrigger asChild>
                 <Button variant={triggerVariant} size="icon" className="relative">
                     <FaRegBookmark className="text-primary" />
@@ -44,38 +43,37 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                         </span>
                     )}
                 </Button>
+
             </DialogTrigger>
-            {open && (
-                <DialogContent>
-                    <DialogHeader>
-                        <DialogTitle>Bookmarks</DialogTitle>
-                        <DialogDescription>
-                            Manage your bookmarks here
-                        </DialogDescription>
-                    </DialogHeader>
-                    <Table>
-                        <TableBody>
-                            {markersList.map((item) => (
-                                <TableRow key={item.id} className="min-h-12">
-                                    <TableCell>
-                                        <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
-                                    </TableCell>
-                                    <TableCell>
-                                        <Link href={`/topics/${item.id}`}>
-                                            {item.label}
-                                        </Link>
-                                    </TableCell>
-                                    <TableCell>
-                                        <Button variant="destructive" size="icon">
-                                            <Trash className="w-5 hover:text-red-600 cursor-pointer" />
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
-                </DialogContent>
-            )}
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Bookmarks</DialogTitle>
+                    <DialogDescription>
+                        Manage your bookmarks here
+                    </DialogDescription>
+                </DialogHeader>
+                <Table>
+                    <TableBody>
+                        {markersList.map((item) => (
+                            <TableRow key={item.id} className="min-h-12">
+                                <TableCell>
+                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
+                                </TableCell>
+                                <TableCell>
+                                    <Link href={`${window.location.origin}/topics/${item.id}`}>
+                                        {item.label}
+                                    </Link>
+                                </TableCell>
+                                <TableCell>
+                                    <Button variant="destructive" size="icon">
+                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                    </Button>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </DialogContent>
         </Dialog>
     )
 }

package/src/favorites/favorite-button.analysis.md

@@ -10,8 +10,9 @@
 
 ## Possible bugs/risks
 - Async flows can hit race conditions during fast param/route changes.
-- Residual risk: fetch errors are silently ignored (except abort), which can hide API issues.
+- useEffect with empty deps calls getTopicDocumentData(id) and does not react if id/type changes.
 
 ## Recommended improvements
-- Keep cancellation guards (AbortController + unmount guard) in place as currently implemented.
-- Consider surfacing non-abort fetch failures through logging or telemetry.
+- Consider cancellation guards (isMounted or AbortController) and standardized error handling.
+- Include id and type in effect dependencies and handle fetch cancellation on unmount.
+

package/src/favorites/favorite-button.tsx

@@ -19,32 +19,10 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
     const [documentData, setDocumentData] = useState<{ id: string, label: string }>({ id, label });
 
     useEffect(() => {
-        if (type !== RESULT_TYPES.TOPIC) {
-            setDocumentData({ id, label });
-            return;
+        if (type === RESULT_TYPES.TOPIC) {
+            getTopicDocumentData(id);
         }
-
-        let isCancelled = false;
-        const controller = new AbortController();
-
-        const loadTopicDocumentData = async () => {
-            try {
-                const data = await getTopicDocumentData(id, controller.signal);
-                if (!isCancelled) {
-                    setDocumentData(data);
-                }
-            } catch (error) {
-                if ((error as Error).name === "AbortError") return;
-            }
-        };
-
-        loadTopicDocumentData();
-
-        return () => {
-            isCancelled = true;
-            controller.abort();
-        };
-    }, [id, label, type]);
+    }, []);
 
     const addFavorite = async (id: string) => {
         if (type === RESULT_TYPES.DOCUMENT) {
@@ -67,18 +45,17 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
         removeFavoriteTopic(documentData.id, id);
     }
 
-    const getTopicDocumentData = async (topicId: string, signal?: AbortSignal): Promise<{ id: string, label: string }> => {
+    const getTopicDocumentData = async (topicId: string): Promise<void> => {
 
         const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
-            method: "GET",
-            signal,
+            method: "GET"
         });
 
         if (!response.ok) throw new Error("Failed to fetch document by topic id")
 
-        const { documentId, label: documentLabel } = await response.json();
+        const { documentId, label } = await response.json();
 
-        return { id: documentId, label: documentLabel };
+        setDocumentData({ id: documentId, label });
     }
 
     if (isFavorite) {

package/src/navbar/navbar.tsx

@@ -30,7 +30,7 @@ export const NavBar: FC<NavBarProps> = async ({
     showInput,
     autocompleteType,
     onSelectPath,
-    showMenu = false,
+    showMenu = true,
     ...props
 }) => {
     const t = await getTranslations();
@@ -75,27 +75,32 @@ export const NavBar: FC<NavBarProps> = async ({
                                 </Button>
                             }
                         >
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
+                                <Link href="/">
+                                    {t('navigation.home')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/documents">
                                     {t('navigation.documents')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/topics">
                                     {t('navigation.topics')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/fragments">
                                     {t('navigation.fragments')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/packages">
                                     {t('navigation.packages')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/information-units">
                                     {t('navigation.informationUnits')}
                                 </Link>

package/src/renditions/html.tsx

@@ -1,11 +1,14 @@
 import { FC, JSX } from "react";
 import * as cheerio from "cheerio"
-import { FragmentsGetAll } from "../generated/server-components";
+import { RenditionModel } from "@c-rex/interfaces";
+import { fragmentsGetAllServer } from "@c-rex/services/server-requests";
+import { call } from "@c-rex/utils";
 
 interface HtmlRenditionProps {
     htmlFormats?: string[]
     shortId: string,
-    render?: (html: string) => JSX.Element
+    render?: (html: string) => JSX.Element,
+    renditions?: RenditionModel[] | null
 }
 
 const defaultRender = (html: string) => {
@@ -14,45 +17,49 @@ const defaultRender = (html: string) => {
     return <div dangerouslySetInnerHTML={{ __html: articleHtml }} />;
 }
 
-export const HtmlRendition: FC<HtmlRenditionProps> = ({
+export const HtmlRendition: FC<HtmlRenditionProps> = async ({
     shortId,
     htmlFormats = ["application/xhtml+xml", "application/html", "text/html"],
-    render
+    render = defaultRender,
+    renditions
 }) => {
     const empty = <div>No rendition available</div>;
 
-    return (
-        <FragmentsGetAll
-            queryParams={{
-                Fields: ["titles", "renditions"],
-                Embed: ["renditions"],
-                PageSize: 1,
-                Links: true,
-                Restrict: [
-                    `informationUnits=${shortId}`,
-                    ...htmlFormats.map(format => `renditions.format=${format}`)
-                ],
+    if (renditions == undefined) {
+        const result = await fragmentsGetAllServer({
+            Fields: ["titles", "renditions"],
+            Embed: ["renditions"],
+            PageSize: 1,
+            Links: true,
+            Restrict: [
+                `informationUnits=${shortId}`,
+                ...htmlFormats.map(format => `renditions.format=${format}`)
+            ],
+        })
 
-            }}
-            render={async (data, error) => {
-                if (error) {
-                    return <div>Error loading content</div>;
-                }
+        renditions = result.items?.[0]?.renditions;
+    }
 
-                const renditions = data?.items?.[0]?.renditions;
+    if (renditions == null || renditions.length == 0) return empty;
+    renditions = renditions.filter(rendition => htmlFormats.includes(rendition.format!));
 
-                if (renditions == null || renditions.length == 0) return empty;
-                if (renditions.length == 0 || renditions[0] == undefined || renditions[0].links == undefined) return empty;
+    if (renditions.length == 0 || renditions[0] == undefined || renditions[0].links == undefined) return empty;
 
-                const filteredLinks = renditions[0].links.filter((item) => item.rel == "view");
+    const filteredLinks = renditions[0].links.filter((item) => item.rel == "view");
 
-                if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
 
-                const url = filteredLinks[0].href;
-                const html = await fetch(url).then(res => res.text());
+    const url = filteredLinks[0].href;
+    try {
 
-                return render ? render(html) : defaultRender(html);
-            }}
-        />
-    )
+        const html = await fetch(url).then(res => res.text());
+        return render(html);
+    } catch (error) {
+        call("CrexLogger.log", {
+            level: "error",
+            message: `HtmlRendition error: ${error}`
+        });
+
+        return empty;
+    }
 }

package/src/restriction-menu/restriction-menu-item.tsx

@@ -77,23 +77,26 @@ export const RestrictionDropdownItem: FC<Props> = ({
     shortId,
     label,
     restrictField,
+    selected = false,
 }) => {
     const [restrict, setRestrict] = useQueryState("restrict", {
         shallow: false,
         history: "push",
     });
 
-    const { restrictionValue } = getRestrictionValue({
+    const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
         shortId,
         restrictField,
+        selected,
         currentRestrict: restrict,
     });
 
     return (
         <Button
-            variant="ghost"
-            onClick={() => setRestrict(restrictionValue)}
-            className="text-left text-wrap !h-auto w-full !justify-start cursor-pointer"
+            variant={selected ? "default" : "ghost"}
+            onClick={() => shouldRemoveRestrictParam ? setRestrict(null) : setRestrict(restrictionValue)}
+            rounded="full"
+            className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
         >
             {label}
         </Button>
@@ -141,4 +144,4 @@ function getRestrictionValue({
     const restrictionValue = shouldRemoveRestrictParam ? null : restrictParam
 
     return { restrictionValue, shouldRemoveRestrictParam };
-}
+}

package/src/restriction-menu/restriction-menu.tsx

@@ -5,10 +5,9 @@ import {
     NavigationMenu,
     NavigationMenuList,
     NavigationMenuItem,
+    NavigationMenuTrigger,
+    NavigationMenuContent,
 } from "@c-rex/ui/navigation-menu";
-import { Button } from "@c-rex/ui/button";
-import { ChevronDown } from "lucide-react";
-import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
 import { RestrictionDropdownItem, RestrictionNavigationItem } from "./restriction-menu-item";
 import { parseAsString, useQueryStates } from "nuqs";
 import { InformationSubjectModel } from "@c-rex/interfaces";
@@ -110,13 +109,13 @@ export const RestrictionMenu: FC<Props> = ({
     }, [sortedItems, visibleCount]);
 
     return (
-        <NavigationMenu className="max-w-full w-full c-rex-restriction-menu">
+        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu">
             <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
 
 
                 <RestrictionNavigationItem
                     removeRestrictParam
-                    label="All"
+                    label={t('all')}
                     selected={restrictionValues.length === 0}
                 />
 
@@ -131,23 +130,26 @@ export const RestrictionMenu: FC<Props> = ({
                 ))}
 
                 <NavigationMenuItem>
-                    <DropdownHoverItem
-                        label={
-                            <Button variant="outline" rounded="full">
-                                More <ChevronDown className="size-4" />
-                            </Button>
-                        }
-                    >
-                        {hiddenItems.map((item) => (
-                            <RestrictionDropdownItem
-                                key={item.shortId}
-                                shortId={item.shortId!}
-                                restrictField={restrictField as string}
-                                label={getLabelByLang(item.labels, lang)}
-                                selected={restrictionValues.includes(item.shortId!)}
-                            />
-                        ))}
-                    </DropdownHoverItem>
+                    <NavigationMenuTrigger>
+                        {t('more')}
+                    </NavigationMenuTrigger>
+                    <NavigationMenuContent className="w-96 sm:w-[] md:w-[700px] lg:w-[65rem]">
+                        <ul className="grid gap-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
+                            {hiddenItems.map((item) => (
+                                <li
+                                    key={item.shortId}
+                                    className="flex items-center"
+                                >
+                                    <RestrictionDropdownItem
+                                        shortId={item.shortId!}
+                                        restrictField={restrictField as string}
+                                        label={getLabelByLang(item.labels, lang)}
+                                        selected={restrictionValues.includes(item.shortId!)}
+                                    />
+                                </li>
+                            ))}
+                        </ul>
+                    </NavigationMenuContent>
                 </NavigationMenuItem>
             </NavigationMenuList>
         </NavigationMenu>

package/src/results/pagination.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC } from "react";
+import { FC, MouseEvent } from "react";
 import {
     Pagination as PaginationUI,
     PaginationContent,
@@ -19,15 +19,25 @@ interface PaginationProps {
 export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
     const disabledClass = "opacity-50 pointer-events-none";
 
-    const [_, setPage] = useQueryState('page',
+    const [, setPage] = useQueryState('page',
         parseAsInteger.withOptions({
             history: 'push',
             shallow: false,
         })
     )
 
-    const onChangePage = (pageNumber: number) => {
-        setPage(pageNumber);
+    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);
     }
 
     return (
@@ -37,7 +47,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
                     <PaginationPrevious
                         href="#"
                         className={pageInfo.pageNumber === 1 ? disabledClass : ""}
-                        onClick={() => onChangePage(pageInfo.pageNumber! - 1)}
+                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! - 1)}
                     />
                 </PaginationItem>
 
@@ -46,7 +56,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
                         <PaginationLink
                             href="#"
                             isActive={page === pageInfo.pageNumber}
-                            onClick={() => onChangePage(page)}
+                            onClick={(event) => onChangePage(event, page)}
                         >
                             {page}
                         </PaginationLink>
@@ -61,11 +71,11 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
                 <PaginationItem>
                     <PaginationNext
                         href="#"
-                        onClick={() => onChangePage(pageInfo.pageNumber! + 1)}
+                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! + 1)}
                         className={pageInfo.pageNumber === pageInfo.pageCount ? disabledClass : ""}
                     />
                 </PaginationItem>
             </PaginationContent>
         </PaginationUI>
     )
-}
+}

package/src/search-input.tsx

@@ -44,7 +44,7 @@ export const SearchInput: FC<Props> = ({
         <>
             <Search className="shrink-0 opacity-50" />
 
-            {/* Add scope=pkgID if checked is true */}
+
             <AutocompleteComponent
                 onSelectParams={
                     (pkg && checked && showPkgFilter) ? [{ key: "packages", value: pkg }] : []

package/src/stores/favorites-store.ts

@@ -60,29 +60,29 @@ export const useFavoritesStore = create<FavoritesStore>()(
 
 
 const favoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string, label: string, color: string): Record<string, { topics: Favorite[] }> => {
-    const currentDocument = documents[documentId];
-    const topics = currentDocument?.topics || [];
-
-    return {
-        ...documents,
-        [documentId]: {
-            ...(currentDocument?.label ? { label: currentDocument.label } : {}),
-            topics: [...topics, { id, label, color }],
-        },
-    };
+
+    const documentsCopy = { ...documents };
+    const notFound = documents[documentId] == undefined;
+
+    if (notFound) {
+        documentsCopy[documentId] = { topics: [] };
+    }
+
+    documentsCopy[documentId]!.topics.push({ id, label, color });
+
+    return documentsCopy
 };
 
 const unfavoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string): Record<string, { topics: Favorite[] }> => {
-    const currentDocument = documents[documentId];
-    if (!currentDocument) {
-        return documents;
+
+    const documentsCopy = { ...documents };
+    const notFound = documents[documentId] == undefined;
+
+    if (notFound) {
+        return documentsCopy;
     }
 
-    return {
-        ...documents,
-        [documentId]: {
-            ...(currentDocument.label ? { label: currentDocument.label } : {}),
-            topics: currentDocument.topics.filter((topic) => topic.id !== id),
-        },
-    };
-}
+    documentsCopy[documentId]!.topics = documentsCopy[documentId]!.topics.filter(topic => topic.id !== id);
+
+    return documentsCopy
+}