@c-rex/components 0.1.30 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "files": [
     "src"
   ],
@@ -164,6 +164,18 @@
     "./carousel": {
       "types": "./src/carousel/carousel.tsx",
       "import": "./src/carousel/carousel.tsx"
+    },
+    "./restriction-menu": {
+      "types": "./src/restriction-menu/restriction-menu.tsx",
+      "import": "./src/restriction-menu/restriction-menu.tsx"
+    },
+    "./restriction-menu-item": {
+      "types": "./src/restriction-menu/restriction-menu-item.tsx",
+      "import": "./src/restriction-menu/restriction-menu-item.tsx"
+    },
+    "./search-input": {
+      "types": "./src/search-input.tsx",
+      "import": "./src/search-input.tsx"
     }
   },
   "scripts": {

package/src/article/article-action-bar.tsx

@@ -27,7 +27,7 @@ export const ArticleActionBar: FC = () => {
 
     return (
         <>
-            <div className="w-full sm:w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex sticky bottom-4 p-2 float-right gap-2 transition-all duration-300">
+            <div className="w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex sticky bottom-4 p-2 float-right gap-2 transition-all duration-300">
                 {enableHighlight && (
 
                     <>
@@ -48,29 +48,45 @@ export const ArticleActionBar: FC = () => {
                                 placeholder={t("search")}
                                 className={cn(
                                     "border border-gray-300 left-12 transition-all duration-300 rounded-full h-9 bg-secondary text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-blue-500",
-                                    open ? "w-48 opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
+                                    open ? "flex flex-1  opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
                                 )}
                             />
 
-                            <Button
-                                variant="ghost" size="icon" rounded="full" onClick={() => setOpen(!open)}
-                            >
+                            <Button variant="ghost" size="icon" rounded="full" onClick={() => setOpen(!open)}>
                                 {open ? <X className="w-5 h-5" /> : <Search className="w-5 h-5" />}
                             </Button>
 
                         </div>
 
-                        <Button variant="ghost" size="icon" rounded="full" onClick={prev}>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            rounded="full"
+                            onClick={prev}
+                            className={cn(open && "hidden sm:inline-flex")}
+                        >
                             <ArrowBigLeft />
                         </Button>
-                        <Button variant="ghost" size="icon" rounded="full" onClick={next}>
 
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            rounded="full"
+                            onClick={next}
+                            className={cn(open && "hidden sm:inline-flex")}
+                        >
                             <ArrowBigRight />
                         </Button>
                     </>
                 )}
 
-                <Button variant="ghost" size="icon" rounded="full" onClick={() => toggleHighlight(!enableHighlight)} className="group">
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    rounded="full"
+                    onClick={() => toggleHighlight(!enableHighlight)}
+                    className={cn("group", open && "hidden sm:inline-flex")}
+                >
                     {enableHighlight ?
                         <FileSearchIcon /> :
                         <div className="relative inline-block">
@@ -80,7 +96,13 @@ export const ArticleActionBar: FC = () => {
                     }
                 </Button>
 
-                <Button variant="ghost" size="icon" rounded="full" onClick={rightSidebar.toggleSidebar}>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    rounded="full"
+                    onClick={rightSidebar.toggleSidebar}
+                    className={cn(open && "hidden sm:inline-flex")}
+                >
                     <PanelRight />
                 </Button>
             </div>

package/src/autocomplete.tsx

@@ -17,6 +17,7 @@ export type AutoCompleteProps = {
     queryParams?: SuggestionQueryParams
     onSelectParams?: { key: string, value: string }[];
     onSelectPath: string
+    inputClass?: string
 };
 
 export const AutoComplete = ({
@@ -25,7 +26,8 @@ export const AutoComplete = ({
     endpoint,
     queryParams,
     onSelectParams,
-    onSelectPath = "/"
+    onSelectPath = "/",
+    inputClass = "",
 }: AutoCompleteProps) => {
     const t = useTranslations();
     const [pkg] = useQueryState("package");
@@ -59,7 +61,7 @@ export const AutoComplete = ({
         params.set('search', value);
         params.set("page", "1")
         params.set("operator", searchSettings.operator)
-        params.set("language", searchSettings.language)
+        if (searchSettings.language) params.set("language", searchSettings.language)
         params.set("wildcard", searchSettings.wildcard)
         params.set("like", searchSettings.like.toString())
 
@@ -105,6 +107,7 @@ export const AutoComplete = ({
         <div className="relative flex-1" ref={containerRef}>
             <Input
                 variant={embedded ? "embedded" : undefined}
+                className={inputClass}
                 type="text"
                 placeholder={t("search")}
                 value={query}

package/src/carousel/carousel.tsx

@@ -9,7 +9,7 @@ import {
     createContext,
     useContext,
 } from "react";
-import { cn, getLanguage, getTitle, getType } from "@c-rex/utils";
+import { cn, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import { Skeleton } from "@c-rex/ui/skeleton";
@@ -21,6 +21,7 @@ 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";
 
 // Types
 
@@ -66,7 +67,7 @@ type Props = {
     responsive?: ResponsiveSetting[];
     indicators?: boolean;
     showImages?: boolean;
-    renderItem?: (item: CommonItemsModel, showImages: boolean) => React.ReactNode;
+    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean }>;
     serviceType: keyof typeof ServiceOptions;
     queryParams?: Record<string, any>;
     loadByPages?: boolean;
@@ -80,13 +81,13 @@ export const Carousel: FC<Props> = ({
     indicators = false,
     autoplaySpeed = 3000,
     showImages = false,
-    renderItem,
+    carouselItemComponent,
     serviceType,
     queryParams = {},
     loadByPages = false,
 }) => {
     const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
-    const renderFunc = renderItem ? renderItem : defaultRenderCarouselItem;
+    const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
 
     // Responsive
     const [slidesToShow, setSlidesToShow] = useState(responsive[0]?.slidesToShow || 1);
@@ -239,7 +240,7 @@ export const Carousel: FC<Props> = ({
                                         className={`flex-shrink-0 flex-grow-0 flex justify-center`}
                                         style={{ width: `${100 / slidesToShow}%` }}
                                     >
-                                        {renderFunc(item, showImages)}
+                                        <RenderComponent item={item} showImages={showImages} />
                                     </div>
                                 ))
                             ) : null}
@@ -314,14 +315,21 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
     );
 };
 
-const defaultRenderCarouselItem = (item: CommonItemsModel, showImages: boolean) => {
+const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolean }> = ({ item, showImages }) => {
+    const locale = useLocale();
+    const t = useTranslations("itemTypes");
+
+    const date = formatDateToLocale(item.created!, locale);
     const title = getTitle(item.titles, item.labels);
     const itemType = getType(item.class);
     const language = getLanguage(item.languages)
     const countryCode = language.split("-")[1] || "";
+
     return (
         <div className="p-2 flex flex-1">
-            <Card className="p-4 flex-1 justify-between">
+            <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!}
@@ -333,12 +341,12 @@ const defaultRenderCarouselItem = (item: CommonItemsModel, showImages: boolean)
                 <span className="text-lg font-semibold">{title}</span>
 
                 <div className="flex justify-between w-full">
-                    <Badge>{itemType}</Badge>
                     <span className="w-8 block border">
                         <Flag countryCode={countryCode} />
                     </span>
+                    <span className="text-gray-400">{date || item.revision}</span>
                 </div>
             </Card>
         </div>
     );
-}
+};

package/src/info/info-table.tsx

@@ -59,7 +59,7 @@ export const InfoTable: FC<Props> = async ({
                         {processDataToLabelValuePairs(data).map((item, index) => (
                             <TableRow key={index} className="min-h-12">
                                 <TableCell className="font-medium w-28 pl-4">
-                                    <h4 className="text-sm font-medium">{t(item.label)}</h4>
+                                    <h4 className="text-sm font-medium capitalize">{t(item.label)}</h4>
                                 </TableCell>
                                 <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
                                     {renderValue(item, EN_LANG)}

package/src/info/shared.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { articleInfoItemType } from "@c-rex/types";
 import { formatDateToLocale, isDate, isLanguage } from "@c-rex/utils";
 import { Flag } from "../icons/flag-icon";
@@ -13,7 +13,6 @@ export const renderValue = (item: articleInfoItemType, uiLang: string): ReactNod
             <span className="w-8 block">
                 <Flag countryCode={countryCode} />
             </span>
-
         );
     }
 

package/src/navbar/language-switcher/content-language-switch.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
@@ -10,9 +10,13 @@ import { toast } from "sonner"
 import { useLanguageStore } from "../../stores/language-store";
 import { useSearchSettingsStore } from "../../stores/search-settings-store";
 
-export const ContentLanguageSwitch = () => {
+type Props = {
+    contentLangDefault: string;
+};
+
+export const ContentLanguageSwitch = ({ contentLangDefault }: Props) => {
     const t = useTranslations();
-    const contentLang = useSearchSettingsStore.getState().language;
+    const contentLang = useSearchSettingsStore.getState().language || contentLangDefault;
     const updatePreferences = useSearchSettingsStore.getState().updatePreferences;
 
     const { availableVersions } = useAppConfig()
@@ -45,6 +49,8 @@ export const ContentLanguageSwitch = () => {
                 setContentLanguage(locale)
             }
 
+            //TODO en: needs to be fixed as it's not working
+
             const currentPath = window.location.pathname;
             const isTopicOrBlogOrDocument = (
                 currentPath.includes(TOPICS_TYPE_AND_LINK) ||

package/src/navbar/language-switcher/ui-language-switch.tsx

@@ -24,7 +24,7 @@ export const UILanguageSwitch: FC = () => {
             setUiLang(locale)
             setCookie(UI_LANG_KEY, locale, { httpOnly: false });
 
-            window.location.reload()
+            //window.location.reload()
         });
     }
 

package/src/navbar/navbar.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { ComponentProps, FC } from "react";
 import Link from "next/link";
 import { SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
@@ -7,21 +7,22 @@ import { UserMenu } from "./user-menu";
 import { SearchInput } from "../search-input";
 import { CrexSDK } from "@c-rex/core/sdk";
 import * as AutocompleteOptions from "../generated/suggestions";
-import { RestrictionMenu } from "../restriction-menu/restriction-menu";
-import * as ComponentOptions from "../generated/client-components";
+import { cn } from "@c-rex/utils";
+import { getTranslations } from "next-intl/server";
+import { Button } from "@c-rex/ui/button";
+import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
+import { Menu } from "lucide-react";
 
-interface NavBarProps {
+type NavBarProps = {
     title?: string;
     showInput: boolean;
     showPkgFilter: boolean;
     onSelectPath?: string;
-    showMenu?: boolean
-    showRestrictMenu?: boolean
-    restrictionType?: keyof typeof ComponentOptions;
     autocompleteType?: keyof typeof AutocompleteOptions;
     //these two props are only used when showPkgFilter is false and has some values to override the default behavior
     alternativeAutocompleteType?: keyof typeof AutocompleteOptions;
     alternativeOnSelectPath?: string;
+    showMenu?: boolean;
 }
 
 export const NavBar: FC<NavBarProps> = async ({
@@ -29,11 +30,10 @@ export const NavBar: FC<NavBarProps> = async ({
     showInput,
     autocompleteType,
     onSelectPath,
-    restrictionType,
     showMenu = false,
-    showRestrictMenu = false,
     ...props
 }) => {
+    const t = await getTranslations();
     const sdk = new CrexSDK();
     const clientConfigs = sdk.getClientConfig();
     const serverConfigs = sdk.getServerConfig();
@@ -49,62 +49,95 @@ export const NavBar: FC<NavBarProps> = async ({
     }
 
     return (
-        <header className="sticky flex flex-col sm:items-center top-0 z-40 w-full px-4 pt-4 pb-2 backdrop-blur-xl transition-all bg-transparent border-b gap-4">
-            <div
-                className="flex flex-wrap sm:flex-nowrap justify-between w-full sm:items-center"
-            >
+        <header className="sticky flex flex-col top-0 z-40 w-full p-4 backdrop-blur-xl transition-all bg-transparent border-b gap-2">
+            <div className="w-full flex items-center justify-between gap-2">
+                <div
+                    className={cn(
+                        "flex items-center gap-4",
+                        title && "lg:w-[calc(16rem-16px)]"
+                    )}
+                >
 
-                <div className="flex gap-2">
-                    <Link href="/" className="flex items-center w-24 lg:w-60">
+                    <Link href="/"
+                    >
                         <img
                             src="/img/logo.png"
                             alt="C-rex Logo"
-                            className="max-h-14"
+                            className="h-14"
                         />
                     </Link>
 
-                    {title && (
-                        <div className="hidden sm:flex items-center">
-                            <h1 className="mt-4 sm:mt-0 sm:px-4 lg:px-0 text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-balance">{title}</h1>
-                        </div>
+                    {showMenu && (
+                        <DropdownHoverItem
+                            label={
+                                <Button variant="outline" rounded="full" size="icon">
+                                    <Menu className="size-4" />
+                                </Button>
+                            }
+                        >
+                            <Button asChild variant="link">
+                                <Link href="/documents">
+                                    {t('navigation.documents')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/topics">
+                                    {t('navigation.topics')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/fragments">
+                                    {t('navigation.fragments')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/packages">
+                                    {t('navigation.packages')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/information-units">
+                                    {t('navigation.informationUnits')}
+                                </Link>
+                            </Button>
+                        </DropdownHoverItem>
                     )}
                 </div>
 
-                <div className="flex-1 relative flex items-center justify-between">
-                    {(showRestrictMenu || showMenu) && (
-                        <RestrictionMenu showMenu={showMenu} showRestrictMenu={showRestrictMenu} requestType={restrictionType} />
-                    )}
-
-                    <div className="flex items-center gap-2 absolute sm:static top-4 h-14 sm:h-min right-4">
+                {title && (
+                    <div className="flex-1 hidden md:flex md:justify-center lg:justify-start">
+                        <h1 className="md:text-2xl lg:text-3xl font-bold tracking-tight text-balance">{title}</h1>
+                    </div>
+                )}
 
-                        {willShowInput &&
-                            <SearchInput placedOn="NAVBAR" autocompleteType={autocompleteType} onSelectPath={onSelectPath} {...props} />
-                        }
+                <div className="flex gap-2">
+                    {willShowInput &&
+                        <div className="hidden sm:flex flex-1 items-center px-3 border rounded-full h-8 c-rex-search-bar">
+                            <SearchInput autocompleteType={autocompleteType} onSelectPath={onSelectPath} {...props} />
+                        </div>
+                    }
 
-                        {clientConfigs.OIDC.userEnabled && (
-                            <>
-                                {session ? (
-                                    <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
-                                ) : (
-                                    <SignInBtn />
-                                )}
-                            </>
-                        )}
+                    {clientConfigs.OIDC.userEnabled && (
+                        <>
+                            {session ? (
+                                <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
+                            ) : (
+                                <SignInBtn />
+                            )}
+                        </>
+                    )}
 
-                        {clientConfigs.languageSwitcher.enabled && (
-                            <SettingsMenu />
-                        )}
-                    </div>
+                    {clientConfigs.languageSwitcher.enabled && (
+                        <SettingsMenu />
+                    )}
                 </div>
-
-                {title && (
-                    <div className="flex w-full sm:hidden items-center">
-                        <h1 className="mt-4 sm:mt-0 sm:px-4 text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-balance">
-                            {title}
-                        </h1>
-                    </div>
-                )}
             </div>
+
+            {title && (
+                <div className="flex-1 flex justify-center md:hidden">
+                    <h1 className="text-2xl font-bold tracking-tight text-balance">{title}</h1>
+                </div>
+            )}
         </header>
     );
 };

package/src/navbar/settings.tsx

@@ -14,9 +14,12 @@ import { useTranslations } from "next-intl";
 import { FC } from 'react';
 import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
 import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
+import { CrexSDK } from "@c-rex/core/sdk";
 
 export const SettingsMenu: FC = () => {
     const t = useTranslations();
+    const sdk = new CrexSDK();
+    const clientConfigs = sdk.getClientConfig();
 
     return (
         <DropdownMenu>
@@ -34,7 +37,9 @@ export const SettingsMenu: FC = () => {
 
                     <DropdownMenuPortal>
                         <DropdownMenuSubContent>
-                            <ContentLanguageSwitch />
+                            <ContentLanguageSwitch
+                                contentLangDefault={clientConfigs.languageSwitcher.default}
+                            />
                         </DropdownMenuSubContent>
                     </DropdownMenuPortal>
                 </DropdownMenuSub>

package/src/page-wrapper.tsx

@@ -1,20 +1,30 @@
 import { ComponentProps, ReactNode } from "react";
 import { NavBar } from './navbar/navbar';
 import { MultiSidebarProvider } from "@c-rex/ui/sidebar";
+import { RestrictionMenuContainer } from "./restriction-menu/restriction-menu-container";
 
 type Props = {
     children: ReactNode;
-} & Partial<ComponentProps<typeof NavBar>>
+    showRestrictMenu?: boolean
+} & Partial<ComponentProps<typeof NavBar>> & Partial<ComponentProps<typeof RestrictionMenuContainer>>;
 
 export const PageWrapper = ({
     children,
     showInput = false,
     showPkgFilter = false,
+    showRestrictMenu = false,
     ...props
 }: Props) => {
     return (
         <MultiSidebarProvider>
             <NavBar showInput={showInput} showPkgFilter={showPkgFilter} {...props} />
+
+            {showRestrictMenu && (
+                <div className="flex-1 container pt-6">
+                    <RestrictionMenuContainer  {...props} />
+                </div>
+            )}
+
             {children}
         </MultiSidebarProvider>
     );

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { ComponentProps, FC } from "react"
+import * as ComponentOptions from "../generated/client-components";
+import { InformationSubjectsGetAllClient } from "../generated/client-components";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { RestrictionMenu } from "./restriction-menu";
+
+type Props = {
+    restrictField?: string
+    navigationMenuListClassName?: string
+    itemsToRender?: number
+    requestType?: keyof typeof ComponentOptions
+} & Partial<Omit<ComponentProps<typeof InformationSubjectsGetAllClient>, ("render" | "children" | "pathParams")>>;
+
+export const RestrictionMenuContainer: FC<Props> = ({
+    queryParams,
+    restrictField = "informationSubjects",
+    itemsToRender = 7,
+    requestType = "InformationSubjectsGetAllClient",
+    navigationMenuListClassName = "items-center justify-between flex-row",
+}) => {
+    const RequestComponent = ComponentOptions[requestType] as unknown as FC<ComponentProps<typeof InformationSubjectsGetAllClient>>;
+
+    return (
+        <RequestComponent
+            queryParams={{
+                Fields: ["labels"],
+                PageSize: 100,
+                Links: true,
+                Sort: ["labels.value"],
+                ...queryParams
+            }}
+        >
+            {({ data, isLoading }) => {
+
+                if (isLoading) return (
+                    <div className="flex justify-between">
+                        <Skeleton className="w-12 h-9 rounded-full" />
+                        {Array(itemsToRender).fill(0).map((_, index) => (
+                            <Skeleton key={index} className="w-28 h-9 rounded-full" />
+                        ))}
+                        <Skeleton className="w-20 h-9 rounded-full" />
+                    </div>
+                )
+
+                if (!data) return null;
+
+                return <RestrictionMenu restrictField={restrictField} items={data.items} navigationMenuListClassName={navigationMenuListClassName} />
+            }}
+        </RequestComponent>
+    );
+};

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

@@ -1,10 +1,10 @@
 "use client";
 
 import { FC } from "react";
-import Link from "next/link";
 import { Button } from "@c-rex/ui/button";
-import { usePathname, useSearchParams } from "next/navigation";
-import { NavigationMenuItem, NavigationMenuLink } from "@c-rex/ui/navigation-menu";
+import { NavigationMenuItem } from "@c-rex/ui/navigation-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { useQueryState } from "nuqs";
 
 
 type Props = {
@@ -22,51 +22,52 @@ export const RestrictionNavigationItem: FC<Props> = ({
     removeRestrictParam = false,
     selected = false,
 }) => {
+    const [restrict, setRestrict] = useQueryState("restrict", {
+        shallow: false,
+        history: "push",
+    });
 
-    const path = usePathname();
-    const searchParams = useSearchParams();
-    //its a list of restricts separated by comma, e.g. "informationSubjects=123,processes=456"
-    const currentRestrict = searchParams.get("restrict");
+    const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
+        shortId,
+        restrictField,
+        removeRestrictParam,
+        selected,
+        currentRestrict: restrict,
+    });
 
-    let restrictParam = ""
+    const labelStyle = {
+        display: 'inline-block',
+        maxWidth: 100,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle',
+    } as React.CSSProperties;
 
-    if (currentRestrict) {
-        if (selected) {
-            const restrictionsLength = currentRestrict.split(",").length;
-            //if there is only one restriction, we can remove the whole restrict param
-            if (restrictionsLength === 1) {
-                removeRestrictParam = true;
-            } else {
-                restrictParam = currentRestrict.replace(`${shortId}`, "").replace(",,", ",").replace(/(^,)|(,$)/g, "");
-            }
-
-        } else {
-            restrictParam = `${currentRestrict},${shortId}`;
-        }
-    } else {
-        restrictParam = `${restrictField}=${shortId}`;
-    }
+    const needsTooltip = label.length > 12;
 
-    const href = `${path}?restrict=${encodeURIComponent(restrictParam)}`;
-
-    if (removeRestrictParam) {
-        return (
-            <NavigationMenuItem key={shortId} asChild>
-                <Button variant={selected ? "default" : "outline"} rounded="full" asChild>
-                    <a href={path}>
-                        {label}
-                    </a>
-                </Button>
-            </NavigationMenuItem>
-        )
-    }
+    const labelNode = needsTooltip ? (
+        <TooltipProvider delayDuration={300}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <span style={labelStyle}>{label}</span>
+                </TooltipTrigger>
+                <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    ) : (
+        <span style={labelStyle}>{label}</span>
+    );
 
     return (
         <NavigationMenuItem key={shortId} asChild>
-            <Button variant={selected ? "default" : "outline"} rounded="full" asChild>
-                <a href={href}>
-                    {label}
-                </a>
+            <Button
+                variant={selected ? "default" : "outline"}
+                rounded="full"
+                onClick={() => shouldRemoveRestrictParam ? setRestrict(null) : setRestrict(restrictionValue)}
+                className="cursor-pointer"
+            >
+                {labelNode}
             </Button>
         </NavigationMenuItem>
     );
@@ -77,13 +78,67 @@ export const RestrictionDropdownItem: FC<Props> = ({
     label,
     restrictField,
 }) => {
-    const path = usePathname();
-    const href = `${path}?restrict=${encodeURIComponent(`${restrictField}=${shortId}`)}`;
+    const [restrict, setRestrict] = useQueryState("restrict", {
+        shallow: false,
+        history: "push",
+    });
+
+    const { restrictionValue } = getRestrictionValue({
+        shortId,
+        restrictField,
+        currentRestrict: restrict,
+    });
+
     return (
-        <NavigationMenuLink asChild>
-            <a href={href}>
-                {label}
-            </a>
-        </NavigationMenuLink>
+        <Button
+            variant="ghost"
+            onClick={() => setRestrict(restrictionValue)}
+            className="text-left text-wrap !h-auto w-full !justify-start cursor-pointer"
+        >
+            {label}
+        </Button>
     );
 };
+
+function getRestrictionValue({
+    shortId,
+    restrictField,
+    removeRestrictParam = false,
+    selected = false,
+
+    currentRestrict,
+}: {
+    shortId?: string;
+    restrictField?: string;
+    removeRestrictParam?: boolean;
+    selected?: boolean;
+    currentRestrict: string | null;
+}): { restrictionValue: string | null; shouldRemoveRestrictParam: boolean } {
+    let restrictParam = "";
+    let shouldRemoveRestrictParam = removeRestrictParam;
+
+    if (currentRestrict) {
+        if (selected) {
+            const restrictionsLength = currentRestrict.split(",").length;
+            //if there is only one restriction, we can remove the whole restrict param
+            if (restrictionsLength === 1) {
+                shouldRemoveRestrictParam = true;
+            } else {
+                restrictParam = currentRestrict.replace(`${shortId}`, "").replace(",,", ",").replace(/(^,)|(,$)/g, "");
+
+                // Remove the restrict param if nothing remains after '='
+                if (/^[^=]+=$/.test(restrictParam)) {
+                    shouldRemoveRestrictParam = true;
+                }
+            }
+        } else {
+            restrictParam = `${currentRestrict},${shortId}`;
+        }
+    } else {
+        restrictParam = `${restrictField}=${shortId}`;
+    }
+
+    const restrictionValue = shouldRemoveRestrictParam ? null : restrictParam
+
+    return { restrictionValue, shouldRemoveRestrictParam };
+}

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

@@ -1,7 +1,6 @@
 "use client";
 
-import { ComponentProps, FC } from "react";
-import * as ComponentOptions from "../generated/client-components";
+import { FC, use, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import {
     NavigationMenu,
     NavigationMenuList,
@@ -13,145 +12,146 @@ import { Button } from "@c-rex/ui/button";
 import { ChevronDown, Menu } from "lucide-react";
 import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
 import { RestrictionDropdownItem, RestrictionNavigationItem } from "./restriction-menu-item";
-import { InformationSubjectsGetAllClient } from "../generated/client-components";
 import { parseAsString, useQueryStates } from "nuqs";
-import { Skeleton } from "@c-rex/ui/skeleton";
+import { InformationSubjectModel } from "@c-rex/interfaces";
+import { useTranslations } from 'next-intl'
+import { cn, getLabelByLang } from "@c-rex/utils";
+import { useRestrictionStore } from "../stores/restriction-store";
+import { useLanguageStore } from "../stores/language-store";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
 
 type Props = {
-    showMenu: boolean
-    showRestrictMenu: boolean
-    restrictField?: string
-    itemsToRender?: number
-    requestType?: keyof typeof ComponentOptions
-} & Partial<Omit<ComponentProps<typeof InformationSubjectsGetAllClient>, "render">>;
+    restrictField: string
+    navigationMenuListClassName?: string
+    items: InformationSubjectModel[],
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number,
+        [DEVICE_OPTIONS.TABLET]: number,
+        [DEVICE_OPTIONS.DESKTOP]: number,
+    }
+}
 
 export const RestrictionMenu: FC<Props> = ({
-    queryParams,
-    showMenu,
-    showRestrictMenu,
-    restrictField = "informationSubjects",
-    itemsToRender = 7,
-    requestType = "InformationSubjectsGetAllClient",
+    items,
+    restrictField,
+    navigationMenuListClassName = "items-center justify-between flex-row",
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 2,
+        [DEVICE_OPTIONS.TABLET]: 5,
+        [DEVICE_OPTIONS.DESKTOP]: 7,
+    }
 }) => {
+    const t = useTranslations();
+    const setRestrictionList = useRestrictionStore((state) => state.setRestrictionList);
 
-    const RequestComponent = ComponentOptions[requestType] as unknown as FC<ComponentProps<typeof InformationSubjectsGetAllClient>>;
-
-    const [params, setParams] = useQueryStates({
+    const [params] = useQueryStates({
         restrict: parseAsString,
     }, {
         history: 'push',
         shallow: false,
     });
 
-    const currentRestrict = params.restrict;
-    const restrictionValues = currentRestrict?.split(`${restrictField}=`)[1]?.split(",") || [];
+    const restrictionValues = useMemo(() => params.restrict?.split(`${restrictField}=`)[1]?.split(",") || [], [params.restrict, restrictField]);
+
+    const uiLang = useLanguageStore.getState().uiLang;
+    const lang = uiLang?.split("-")[0] ?? "";
+
+    useMemo(() => {
+        const map = new Map<string, string>();
+        items.forEach((item) => {
+            const label = getLabelByLang(item.labels, lang);
+            if (item.shortId && label) {
+                map.set(item.shortId, label);
+            }
+        });
+        setRestrictionList(map);
+    }, [items, lang, setRestrictionList]);
+
+    const sortedItems = useMemo(() => {
+        //if shortId it is on the restrictionValues, it should be on top of the list, otherwise keep the original order
+
+        const sorted = [...items].sort((a, b) => {
+            const aShortId = a.shortId || "";
+            const bShortId = b.shortId || "";
+
+            const aIndex = restrictionValues.indexOf(aShortId);
+            const bIndex = restrictionValues.indexOf(bShortId);
+
+            if (aIndex === -1 && bIndex === -1) {
+                return 0; // keep original order if neither is in restrictionValues
+            }
+            if (aIndex === -1) {
+                return 1; // a goes after b
+            }
+            if (bIndex === -1) {
+                return -1; // a goes before b
+            }
+            return aIndex - bIndex; // sort by index in restrictionValues
+        });
+        return sorted;
+    }, [items, restrictionValues]);
+
+    const device = useBreakpoint();
+    const [visibleCount, setVisibleCount] = useState(0);
+    const [visibleItems, setVisibleItems] = useState(sortedItems.slice(0, visibleCount));
+    const [hiddenItems, setHiddenItems] = useState(sortedItems.slice(visibleCount));
+
+    useEffect(() => {
+        if (device == null) return
+        setVisibleCount(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
+
+    }, [device, itemsByRow]);
+
+    useEffect(() => {
+        if (visibleCount == 0) return;
+
+        setVisibleItems(sortedItems.slice(0, visibleCount));
+        setHiddenItems(sortedItems.slice(visibleCount));
+    }, [sortedItems, visibleCount]);
 
     return (
-        <div className="flex-1 h-10 container">
-            <NavigationMenu className="max-w-full w-full c-rex-restriction-menu">
-                <NavigationMenuList className="w-full flex justify-between">
-
-                    {showMenu && (
-                        <DropdownHoverItem
-                            label={
-                                <Button variant="outline" rounded="full" size="icon">
-                                    <Menu className="size-4" />
-                                </Button>
-                            }
-                        >
-                            <NavigationMenuLink asChild>
-                                <Link href="/documents">Documents</Link>
-                            </NavigationMenuLink>
-                            <NavigationMenuLink asChild>
-                                <Link href="/topics">Topics</Link>
-                            </NavigationMenuLink>
-                            <NavigationMenuLink asChild>
-                                <Link href="/fragments">Fragments</Link>
-                            </NavigationMenuLink>
-                            <NavigationMenuLink asChild>
-                                <Link href="/packages">Packages</Link>
-                            </NavigationMenuLink>
-                            <NavigationMenuLink asChild>
-                                <Link href="/information-units">Information Units</Link>
-                            </NavigationMenuLink>
-                        </DropdownHoverItem>
-                    )}
-
-                    {showRestrictMenu && (
-                        <RequestComponent
-                            queryParams={{
-                                Fields: ["labels"],
-                                PageSize: 100,
-                                Links: true,
-                                Sort: ["labels.value"],
-                                ...queryParams
-                            }}
-                        >
-                            {({ data, isLoading }) => {
-
-                                if (isLoading) return (
-                                    <>
-                                        <Skeleton className="w-12 h-9 rounded-full" />
-                                        {Array(itemsToRender).fill(0).map((_, index) => (
-                                            <Skeleton key={index} className="w-28 h-9 rounded-full" />
-                                        ))}
-                                        <Skeleton className="w-20 h-9 rounded-full" />
-                                    </>
-                                )
-
-                                if (!data) return null;
-
-                                const slicedItems = data.items.slice(0, itemsToRender);
-                                const restItems = data.items.slice(itemsToRender);
-
-                                return (
-                                    <>
-                                        <RestrictionNavigationItem
-                                            removeRestrictParam
-                                            label="All"
-                                            selected={restrictionValues.length === 0}
-                                        />
-
-                                        {slicedItems.map((subject: any) => (
-                                            <RestrictionNavigationItem
-                                                key={subject.shortId}
-                                                shortId={subject.shortId!}
-                                                restrictField={restrictField as string}
-                                                label={subject.labels?.[0]?.value as string}
-                                                selected={restrictionValues.includes(subject.shortId!)}
-                                            />
-                                        ))}
-
-                                        <NavigationMenuItem>
-                                            <DropdownHoverItem
-                                                label={
-                                                    <Button variant="outline" rounded="full">
-                                                        More <ChevronDown className="size-4" />
-                                                    </Button>
-                                                }
-                                            >
-                                                {restItems.map((subject: any) => (
-                                                    <RestrictionDropdownItem
-                                                        key={subject.shortId}
-                                                        shortId={subject.shortId!}
-                                                        restrictField={restrictField as string}
-                                                        label={subject.labels?.[0]?.value as string}
-                                                        selected={restrictionValues.includes(subject.shortId!)}
-                                                    />
-                                                ))}
-
-                                            </DropdownHoverItem>
-                                        </NavigationMenuItem>
-
-                                    </>
-                                );
-                            }}
-                        </RequestComponent>
-                    )}
-
-                </NavigationMenuList>
-            </NavigationMenu>
-        </div>
+        <NavigationMenu className="max-w-full w-full c-rex-restriction-menu">
+            <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
+
+
+                <RestrictionNavigationItem
+                    removeRestrictParam
+                    label="All"
+                    selected={restrictionValues.length === 0}
+                />
+
+                {visibleItems.map((item) => (
+                    <RestrictionNavigationItem
+                        key={item.shortId}
+                        shortId={item.shortId!}
+                        restrictField={restrictField as string}
+                        label={getLabelByLang(item.labels, lang)}
+                        selected={restrictionValues.includes(item.shortId!)}
+                    />
+                ))}
+
+                <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>
+                </NavigationMenuItem>
+            </NavigationMenuList>
+        </NavigationMenu>
     );
 };

package/src/results/dialog-filter.tsx

@@ -34,7 +34,7 @@ export const DialogFilter: FC<Props> = ({ trigger }) => {
     const [like, setLike] = useState<boolean>(useSearchSettingsStore.getState().like);
     const [operator, setOperator] = useState<string>(useSearchSettingsStore.getState().operator);
     const [wildcard, setWildcard] = useState<string>(useSearchSettingsStore.getState().wildcard);
-    const [language, setLanguage] = useState<string>(searchLanguage);
+    const [language, setLanguage] = useState<string>(searchLanguage || '');
 
     const [params, setParams] = useQueryStates({
         search: parseAsString,
@@ -66,7 +66,8 @@ export const DialogFilter: FC<Props> = ({ trigger }) => {
     }
 
     const reload = () => {
-        setLanguage(useSearchSettingsStore.getState().language);
+        const language = useSearchSettingsStore.getState().language || '';
+        if (language) setLanguage(language);
         setWildcard(useSearchSettingsStore.getState().wildcard);
         setOperator(useSearchSettingsStore.getState().operator);
         setLike(useSearchSettingsStore.getState().like);

package/src/results/filter-navbar.tsx

@@ -10,6 +10,7 @@ import { OPERATOR_OPTIONS } from "@c-rex/constants";
 import { Tags } from "@c-rex/interfaces";
 import { memoizeFilteredTags } from "./filter-sidebar/utils";
 import { useSearchSettingsStore } from "../stores/search-settings-store";
+import { useRestrictionStore } from "../stores/restriction-store";
 
 type filterModel = {
     key: string
@@ -25,8 +26,9 @@ type FilterNavbarProps = {
 
 export const FilterNavbar: FC<FilterNavbarProps> = ({ tags }) => {
     const t = useTranslations()
+    const restrictionList = useRestrictionStore((state) => state.restrictionList);
     const [params, setParams] = useQueryStates({
-        language: parseAsString.withDefault(useSearchSettingsStore.getState().language),
+        language: parseAsString.withDefault(useSearchSettingsStore.getState().language || ''),
         page: parseAsInteger.withDefault(1),
         wildcard: parseAsString.withDefault(useSearchSettingsStore.getState().wildcard),
         operator: parseAsString.withDefault(useSearchSettingsStore.getState().operator),
@@ -106,6 +108,27 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({ tags }) => {
             })
         }
 
+        if (params.restrict !== null) {
+            const splittedParam = params.restrict.split("=")
+            const key = splittedParam[0]
+            const shortIdList = splittedParam[1]?.split(",") || []
+
+            shortIdList.forEach((item, index) => {
+                const defaultValue = [...shortIdList]
+                defaultValue.splice(index, 1)
+
+                const value = defaultValue.length == 0 ? null : `${key}=${defaultValue.join(",")}`
+
+                filters.push({
+                    key: "restrict",
+                    name: t(`filter.tags.${key}`),
+                    value: restrictionList.get(item) || item,
+                    removable: true,
+                    default: value
+                })
+            })
+        }
+
         if (params.packages !== null) {
             let label = params.packages
 
@@ -127,7 +150,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({ tags }) => {
         }
 
         Object.keys(params)
-            .filter(item => !["page", "search", "language", "operator", "like", "wildcard", "filter", "packages"].includes(item))
+            .filter(item => !["page", "search", "language", "operator", "like", "wildcard", "filter", "restrict", "packages"].includes(item))
             .forEach(item => {
                 if (params[item as keyof typeof params] === null || params[item as keyof typeof params] === undefined) return;
                 const value = params[item as keyof typeof params] as string

package/src/results/filter-sidebar/index.tsx

@@ -110,6 +110,7 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({ tags, totalItemCount })
     )
     }
     */
+    if (Object.entries(filteredTags).length === 0) return null;
 
     return (
         <div className="w-60 lg:w-80 bg-sidebar rounded-md border pb-4">

package/src/results/utils.ts

@@ -1,4 +1,4 @@
-import { LiteralModel, ObjectRefModel, RenditionModel } from "@c-rex/interfaces";
+import { RenditionModel } from "@c-rex/interfaces";
 import { DocumentsType } from "@c-rex/types";
 
 export const getFileRenditions = ({ renditions }: { renditions: RenditionModel[] }): DocumentsType => {
@@ -45,23 +45,3 @@ export const getFileRenditions = ({ renditions }: { renditions: RenditionModel[]
     return result
 }
 
-
-export const getDescription = (descriptions?: LiteralModel[] | null, abstracts?: LiteralModel[] | null): string => {
-    const desc = descriptions?.[0]?.value || abstracts?.[0]?.value;
-    return desc || "";
-};
-
-export const getClassLabel = (classObj?: { labels?: LiteralModel[] | null }): string => {
-    return classObj?.labels?.[0]?.value || "Document";
-};
-
-export const getVersions = (versionOf?: ObjectRefModel) => {
-    let versionList: string[] = []
-    if (versionOf && versionOf.labels) {
-        const aux = versionOf.labels.map(item => item.language!)
-        versionList = aux.filter((value) => value !== undefined);
-    }
-    return versionList;
-};
-
-

package/src/search-input.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { FileCheck, FileX, Search } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { cn } from "@c-rex/utils";
 import * as AutocompleteOptions from "./generated/suggestions";
 import { useQueryState } from "nuqs";
 
@@ -18,17 +17,14 @@ type Props = {
     alternativeOnSelectPath?: string;
 }
 
-
-
 export const SearchInput: FC<Props> = ({
     showPkgFilter,
     autocompleteType,
     onSelectPath,
-    placedOn = "NAVBAR",
     alternativeAutocompleteType,
     alternativeOnSelectPath
 }) => {
-    const [pkg, setPkg] = useQueryState("package");
+    const [pkg] = useQueryState("package");
     const [checked, setChecked] = useState<boolean>(true);
     const [autocompleteComponentName, setAutocompleteComponentName] = useState<keyof typeof AutocompleteOptions>(autocompleteType);
 
@@ -45,10 +41,7 @@ export const SearchInput: FC<Props> = ({
 
 
     return (
-        <div className={cn(
-            placedOn === "NAVBAR" ? "hidden lg:flex" : "sm:flex-none sm:w-60 md:w-72 lg:w-full lg:hidden flex",
-            "flex-1 items-center px-3 border rounded-full h-8 c-rex-search-bar"
-        )}>
+        <>
             <Search className="shrink-0 opacity-50" />
 
             {/* Add scope=pkgID if checked is true */}
@@ -73,7 +66,6 @@ export const SearchInput: FC<Props> = ({
                     </Tooltip>
                 </TooltipProvider>
             </>}
-
-        </div>
+        </>
     );
 };

package/src/stores/restriction-store.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+type RestrictionStore = {
+    restrictionList: Map<string, string>;
+    setRestrictionList: (restrictionList: Map<string, string>) => void;
+};
+
+export const useRestrictionStore = create<RestrictionStore>((set) => ({
+    restrictionList: new Map(),
+    setRestrictionList: (restrictionList) => set({ restrictionList }),
+}));

package/src/stores/search-settings-store.ts

@@ -1,4 +1,4 @@
-import { EN_LANG, OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
+import { OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
 import { OperatorType, WildCardType } from "@c-rex/types";
 import { create } from "zustand";
 import { persist, createJSONStorage, StateStorage } from "zustand/middleware";
@@ -21,7 +21,7 @@ const cookieStorage: StateStorage = {
 };
 
 export type SearchSettingsState = {
-    language: string,
+    language?: string,
     wildcard: WildCardType,
     operator: OperatorType,
     like: boolean,
@@ -32,7 +32,7 @@ export type SearchSettingsStore = SearchSettingsState & {
 }
 
 export const defaultSearchSettings: SearchSettingsState = {
-    language: EN_LANG,
+    //language: DEFAULT_LANG,
     wildcard: WILD_CARD_OPTIONS.BOTH,
     operator: OPERATOR_OPTIONS.OR,
     like: false,