@c-rex/components 0.3.0-build.41 → 0.3.0-build.42

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.41",
+    "version":  "0.3.0-build.42",
     "files":  [
                   "src"
               ],
@@ -53,6 +53,10 @@
                                                                     "types":  "./src/info/information-unit-metadata-grid-client.tsx",
                                                                     "import":  "./src/info/information-unit-metadata-grid-client.tsx"
                                                                 },
+                    "./information-unit-authors-grid-client":  {
+                                                                   "types":  "./src/info/information-unit-authors-grid-client.tsx",
+                                                                   "import":  "./src/info/information-unit-authors-grid-client.tsx"
+                                                               },
                     "./info-card":  {
                                         "types":  "./src/info/info-card.tsx",
                                         "import":  "./src/info/info-card.tsx"
@@ -145,6 +149,10 @@
                                                     "types":  "./src/stores/search-settings-store.ts",
                                                     "import":  "./src/stores/search-settings-store.ts"
                                                 },
+                    "./ui-preferences-store":  {
+                                                   "types":  "./src/stores/ui-preferences-store.ts",
+                                                   "import":  "./src/stores/ui-preferences-store.ts"
+                                               },
                     "./article-content":  {
                                               "types":  "./src/article/article-content.tsx",
                                               "import":  "./src/article/article-content.tsx"

package/src/autocomplete.tsx

@@ -36,6 +36,7 @@ export const AutoComplete = ({
     const [pkg] = useQueryState("package");
 
     const containerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
     const suggestionRequestIdRef = useRef(0);
     const suggestionAbortControllerRef = useRef<AbortController | null>(null);
     const pathname = usePathname();
@@ -56,18 +57,22 @@ export const AutoComplete = ({
         const contentLang = useSearchSettingsStore.getState().language;
         const restrictions = searchParams.get("restrict")
 
-        if (restrictions) {
-            if (restrictions.includes("informationSubjects")) {
+        const mergedScopes: string[] = [];
 
-                const informationSubject = restrictions.split("informationSubjects=")[1]?.split(',') || [];
-                if (informationSubject.length > 0) {
-                    params.scopes = informationSubject.map(subject => `informationSubjects=${subject}`);
-                }
-            }
+        if (restrictions?.includes("informationSubjects")) {
+            const informationSubject = restrictions.split("informationSubjects=")[1]?.split(",") || [];
+            mergedScopes.push(...informationSubject.map((subject) => `informationSubjects=${subject}`));
+        }
+
+        if (pkg != null) {
+            mergedScopes.push(pkg);
+        }
+
+        if (mergedScopes.length > 0) {
+            params.scopes = mergedScopes as unknown as string[];
         }
 
         if (contentLang) params.lang = contentLang;
-        if (pkg != null) params.scopes = pkg as unknown as string[];
 
         const results = await suggestionRequest({ endpoint, prefix, queryParams: params, signal });
 
@@ -168,6 +173,7 @@ export const AutoComplete = ({
             >
                 <InputGroup variant={embedded ? "embedded" : "default"}>
                     <InputGroupInput
+                        ref={inputRef}
                         variant={embedded ? "embedded" : undefined}
                         className={inputClass}
                         type="text"
@@ -190,7 +196,11 @@ export const AutoComplete = ({
                                 size="icon-xs"
                                 variant="ghost"
                                 aria-label={t("clearSearch")}
-                                onClick={() => setQuery("")}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    setQuery("")
+                                    inputRef.current?.focus();
+                                }}
                             >
                                 <X className="size-3" />
                             </InputGroupButton>
@@ -217,11 +227,7 @@ export const AutoComplete = ({
                                         <li
                                             key={option}
                                             className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
-                                            onClick={() => {
-                                                //handleSelect(`"${option}"`)
-                                                // TODO: check if the quotes are necessary
-                                                handleSelect(option)
-                                            }}
+                                            onClick={() => handleSelect(option)}
                                         >
                                             {option}
                                         </li>

package/src/documents/result-list-item.tsx

@@ -54,6 +54,7 @@ const DocumentResultListRowContent: FC<RowContentProps> = ({
     isLoadingDetails = false,
 }) => {
     const t = useTranslations();
+    const tTypes = useTranslations("itemTypes");
 
     return (
         <div
@@ -92,7 +93,7 @@ const DocumentResultListRowContent: FC<RowContentProps> = ({
                 </span>
 
                 <div>
-                    <Badge>{itemType}</Badge>
+                    <Badge>{tTypes(itemType.toLowerCase() as any) ?? itemType}</Badge>
                 </div>
 
                 <span className="text-sm block">

package/src/favorites/bookmark-button.tsx

@@ -20,17 +20,20 @@ import {
     TableRow,
 } from "@c-rex/ui/table";
 import { FaRegBookmark } from "react-icons/fa6";
+import { FaFile } from "react-icons/fa6";
 import { useFavorites } from "./favorites-context";
 
 type BookmarkProps = {
     shortId: string;
     linkPattern?: string;
+    documentLinkPattern?: string;
     triggerVariant?: ComponentProps<typeof Button>["variant"];
 };
 
 export const BookmarkButton: FC<BookmarkProps> = ({
     shortId,
     linkPattern = `/topics/{shortId}/pages`,
+    documentLinkPattern,
     triggerVariant = "outline"
 }) => {
     const t = useTranslations("bookmarks");
@@ -76,7 +79,23 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                             </TableRow>
                         )}
 
-                        {isHydrated && visibleMarkersCount === 0 && (
+                        {isHydrated && documentLinkPattern && documentLabel && (
+                            <TableRow className="min-h-12">
+                                <TableCell>
+                                    <FaFile className="text-primary" />
+                                </TableCell>
+                                <TableCell colSpan={2}>
+                                    <Link
+                                        href={documentLinkPattern.replace("{shortId}", shortId).replace("{id}", shortId)}
+                                        className="hover:underline font-medium"
+                                    >
+                                        {documentLabel}
+                                    </Link>
+                                </TableCell>
+                            </TableRow>
+                        )}
+
+                        {isHydrated && visibleMarkersCount === 0 && !documentLinkPattern && (
                             <TableRow>
                                 <TableCell colSpan={3} className="text-center">
                                     {t("empty")}

package/src/favorites/favorite-button.tsx

@@ -8,12 +8,14 @@ import { MARKER_COLORS, RESULT_TYPES } from "@c-rex/constants";
 import { ResultTypes } from "@c-rex/types";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
+import { useTranslations } from "next-intl";
 
 export const FavoriteButton: FC<{
     id: string;
     type: ResultTypes;
     label: string;
 }> = ({ id, type, label }) => {
+    const t = useTranslations();
     const addFavoriteTopic = useFavorites((state) => state.favoriteTopic);
     const addFavoriteDocument = useFavorites((state) => state.favoriteDocument);
     const removeFavoriteTopic = useFavorites((state) => state.unfavoriteTopic);
@@ -22,7 +24,12 @@ export const FavoriteButton: FC<{
     const favoriteDocumentList = useFavorites((state) => state.documents);
     const favoriteList = useFavorites((state) => state.favorites);
     const isHydrated = useFavorites((state) => state.isHydrated);
-    const isFavorite = favoriteList.find((fav) => fav.id === id);
+
+    const isFavoriteInList = Boolean(favoriteList.find((fav) => fav.id === id));
+    const isFavoriteViaDocument = type === RESULT_TYPES.TOPIC
+        ? Object.values(favoriteDocumentList).some((doc) => doc.topics.some((t) => t.id === id))
+        : false;
+    const isFavorite = isFavoriteInList || isFavoriteViaDocument;
 
     const [documentData, setDocumentData] = useState<{ id: string, label: string } | null>(null);
     const [topicData, setTopicData] = useState<{ id: string, label: string } | null>(null);
@@ -121,7 +128,7 @@ export const FavoriteButton: FC<{
                 await addFavorite(id);
             }
         } catch {
-            toast.error("Não foi possível atualizar os favoritos.");
+            toast.error(t("favoritesUpdateError"));
         } finally {
             setIsLoading(false);
         }
@@ -135,6 +142,8 @@ export const FavoriteButton: FC<{
             size="icon"
             onClick={handleToggle}
             disabled={showLoading}
+            aria-label={isFavorite ? t("favorites") : t("favorites")}
+            aria-pressed={!showLoading && isFavorite}
         >
             {showLoading ? (
                 <Loader2 className="animate-spin" />

package/src/footer/social-links-block.tsx

@@ -25,6 +25,7 @@ export const SocialLinksBlock = ({ links, className, ariaLabel }: SocialLinksBlo
                                 target="_blank"
                                 rel="noreferrer"
                                 title={link.label}
+                                aria-label={link.label}
                                 className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                             >
                                 <SocialIcon label={link.label} className="size-7" />

package/src/generated/create-client-request.tsx

@@ -1,10 +1,3 @@
-/**
- * Auto-generated from OpenAPI spec (Client-Side)
- * Source: https://staging.c-rex.net/ids/api/swagger/v1/swagger.json
- * Generated: 2025-12-11T16:23:03.635Z
- * Do not edit manually
- */
-
 "use client";
 
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';

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

@@ -0,0 +1,183 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+import { User, Mail, Link as LinkIcon } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@c-rex/utils";
+
+type Author = {
+    name: string;
+    photo: string | null;
+    title?: string | null;
+    role?: string | null;
+    emails?: string[];
+    urls?: string[];
+};
+
+type Props = {
+    title: string;
+    vcardUrls: string[];
+    vcardFields?: string[];
+    embedded?: boolean;
+    className?: string;
+};
+
+const AuthorAvatar = ({ author }: { author: Author }) => (
+    author.photo ? (
+        <img
+            src={author.photo}
+            alt={author.name}
+            className="size-10 rounded-full object-cover shrink-0 border border-border"
+        />
+    ) : (
+        <div className="size-10 rounded-full bg-muted shrink-0 flex items-center justify-center border border-border">
+            <User className="size-5 text-muted-foreground" />
+        </div>
+    )
+);
+
+const AuthorEntry = ({ author, fields }: { author: Author, fields: string[] }) => {
+    const showPhoto = fields.includes("photo");
+    const showName = fields.includes("name");
+    const showTitle = fields.includes("title");
+    const showRole = fields.includes("role");
+    const showEmails = fields.includes("emails");
+    const showUrls = fields.includes("urls");
+
+    return (
+        <div className="flex items-start gap-3 w-full overflow-hidden">
+            {showPhoto && <AuthorAvatar author={author} />}
+            <div className="flex flex-col gap-1 min-w-0 flex-1">
+                {showName && (
+                    <span className="text-sm font-semibold text-foreground leading-tight truncate">
+                        {author.name}
+                    </span>
+                )}
+
+                {(showTitle && author.title) || (showRole && author.role) ? (
+                    <span className="text-xs text-muted-foreground leading-tight truncate">
+                        {(showTitle && author.title) || (showRole && author.role)}
+                    </span>
+                ) : null}
+
+                <div className="flex flex-col gap-1 mt-1">
+                    {showEmails && author.emails?.map((email) => (
+                        <Link
+                            key={email}
+                            href={`mailto:${email}`}
+                            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-primary transition-colors min-w-0"
+                            title={email}
+                        >
+                            <Mail className="size-3.5 shrink-0" />
+                            <span className="truncate">{email}</span>
+                        </Link>
+                    ))}
+
+                    {showUrls && author.urls?.map((url) => (
+                        <Link
+                            key={url}
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-primary transition-colors min-w-0"
+                            title={url}
+                        >
+                            <LinkIcon className="size-3.5 shrink-0" />
+                            <span className="truncate">{url.replace(/^https?:\/\//, "")}</span>
+                        </Link>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const InformationUnitAuthorsGridClient = ({
+    title,
+    vcardUrls,
+    vcardFields = ["name"],
+    embedded = false,
+    className,
+}: Props) => {
+    const [authors, setAuthors] = useState<Author[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (!vcardUrls?.length) {
+            setLoading(false);
+            return;
+        }
+
+        const controller = new AbortController();
+
+        Promise.all(
+            vcardUrls.map((url) =>
+                fetch(url, { signal: controller.signal })
+                    .then((r) => r.json())
+                    .then((vcard) => ({
+                        name: vcard.fullName || "",
+                        photo: vcard.photos?.[0]?.source || null,
+                        title: vcard.titles?.[0] || null,
+                        role: vcard.roles?.[0] || null,
+                        emails: vcard.emails?.map((e: any) => e.value) || [],
+                        urls: vcard.urls?.map((u: any) => u.value) || [],
+                    }))
+                    .catch((): null => null)
+            )
+        ).then((results) => {
+            setAuthors(results.filter(Boolean) as Author[]);
+            setLoading(false);
+        });
+
+        return () => controller.abort();
+    }, [vcardUrls]);
+
+    if (loading) {
+        return (
+            <Card className={cn("!gap-0", className)}>
+                <CardHeader className="pb-3">
+                    <div className="h-6 w-24 bg-muted animate-pulse rounded" />
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    {[1, 2].map((i) => (
+                        <div key={i} className="flex items-center gap-3 animate-pulse">
+                            <div className="size-10 rounded-full bg-muted shrink-0" />
+                            <div className="space-y-2 flex-1">
+                                <div className="h-4 w-3/4 bg-muted rounded" />
+                                <div className="h-3 w-1/2 bg-muted rounded" />
+                            </div>
+                        </div>
+                    ))}
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (authors.length === 0) return null;
+
+    const content = (
+        <div className="flex flex-col gap-5">
+            {authors.map((author, i) => (
+                <AuthorEntry key={i} author={author} fields={vcardFields} />
+            ))}
+        </div>
+    );
+
+    if (embedded) {
+        return <div className={cn("p-4", className)}>{content}</div>;
+    }
+
+    return (
+        <Card className={cn("!gap-0", className)}>
+            <CardHeader className="pb-3">
+                <CardTitle className="text-lg font-heading tracking-tight">
+                    {title}
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="pb-5">
+                {content}
+            </CardContent>
+        </Card>
+    );
+};

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

@@ -27,6 +27,7 @@ import {
 type Props = {
     title: string;
     linkPattern: string;
+    bookmarkDocumentLinkPattern?: string;
     data: CommonItemsModel;
     metadataIncludeProperties?: Array<keyof InformationUnitModel>;
     metadataExcludeProperties?: Array<keyof InformationUnitModel>;
@@ -115,6 +116,7 @@ export const InformationUnitMetadataGridClient = ({
     data,
     embedded = false,
     linkPattern,
+    bookmarkDocumentLinkPattern,
     metadataIncludeProperties,
     metadataExcludeProperties,
     showBookmarkButton = false,
@@ -150,7 +152,10 @@ export const InformationUnitMetadataGridClient = ({
                                 <h4 className="text-sm font-medium">{t("favorites")}</h4>
                             </TableCell>
                             <TableCell className="min-h-12 pt-3 text-xs text-muted-foreground align-top break-words whitespace-normal">
-                                <BookmarkButton shortId={data.shortId!} />
+                                <BookmarkButton
+                                    shortId={data.shortId!}
+                                    documentLinkPattern={bookmarkDocumentLinkPattern}
+                                />
                             </TableCell>
                         </TableRow>
                     )}
@@ -211,7 +216,12 @@ export const InformationUnitMetadataGridClient = ({
             <CardHeader>
                 <CardTitle className="text-lg flex justify-between items-end">
                     {title}
-                    {showBookmarkButton && <BookmarkButton shortId={data.shortId!} />}
+                    {showBookmarkButton && (
+                        <BookmarkButton
+                            shortId={data.shortId!}
+                            documentLinkPattern={bookmarkDocumentLinkPattern}
+                        />
+                    )}
                 </CardTitle>
             </CardHeader>
             {cardContent}

package/src/navbar/navbar.tsx

@@ -4,10 +4,8 @@ import { SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
 import { SettingsMenu } from "./settings";
 import { UserMenu } from "./user-menu";
-import { SearchInput } from "../search-input";
 import { CrexSDK } from "@c-rex/core/sdk";
 import * as AutocompleteOptions from "../generated/suggestions";
-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";

package/src/restriction-menu/__tests__/restriction-menu-logic.test.ts

@@ -0,0 +1,148 @@
+import { resolveMenuState } from "../restriction-menu-logic";
+
+const BASE = { maxItemsByRow: 7, itemCount: 0 };
+
+describe("resolveMenuState – restrict construction", () => {
+    it("hierarchy mode (components): prepends hasInformationUnits=true when onlyUsedEntries=true", () => {
+        const { restrict } = resolveMenuState({ ...BASE, queryRestrict: [], onlyUsedEntries: true });
+        expect(restrict).toEqual(["hasInformationUnits=true"]);
+    });
+
+    it("flat mode (informationSubjects): prepends hasInformationUnits=true when onlyUsedEntries=true", () => {
+        const { restrict } = resolveMenuState({
+            ...BASE,
+            queryRestrict: ["someOtherFilter=x"],
+            onlyUsedEntries: true,
+        });
+        expect(restrict[0]).toBe("hasInformationUnits=true");
+        expect(restrict).toContain("someOtherFilter=x");
+    });
+
+    it("omits hasInformationUnits filter when onlyUsedEntries=false", () => {
+        const { restrict } = resolveMenuState({ ...BASE, queryRestrict: [], onlyUsedEntries: false });
+        expect(restrict).not.toContain("hasInformationUnits=true");
+    });
+
+    it("passes through existing queryRestrict entries when onlyUsedEntries=false", () => {
+        const { restrict } = resolveMenuState({
+            ...BASE,
+            queryRestrict: ["category=foo"],
+            onlyUsedEntries: false,
+        });
+        expect(restrict).toEqual(["category=foo"]);
+    });
+});
+
+describe("resolveMenuState – resolvedPageSize", () => {
+    it("deferred mode, not loaded: uses maxItemsByRow as page size", () => {
+        const { resolvedPageSize } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: false,
+        });
+        expect(resolvedPageSize).toBe(7);
+    });
+
+    it("deferred mode, loadAll=true: uses 100", () => {
+        const { resolvedPageSize } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: true,
+        });
+        expect(resolvedPageSize).toBe(100);
+    });
+
+    it("all mode: uses 100 regardless of loadAll", () => {
+        const { resolvedPageSize } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "all",
+            loadAll: false,
+        });
+        expect(resolvedPageSize).toBe(100);
+    });
+
+    it("explicit pageSize overrides deferred mode", () => {
+        const { resolvedPageSize } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: false,
+            explicitPageSize: 25,
+        });
+        expect(resolvedPageSize).toBe(25);
+    });
+});
+
+describe("resolveMenuState – hasMoreItems", () => {
+    it("deferred mode: hasMoreItems=true when itemCount equals resolvedPageSize and not loaded", () => {
+        const { hasMoreItems } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: false,
+            itemCount: 7,
+        });
+        expect(hasMoreItems).toBe(true);
+    });
+
+    it("deferred mode: hasMoreItems=false after loadAll=true", () => {
+        const { hasMoreItems } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: true,
+            itemCount: 7,
+        });
+        expect(hasMoreItems).toBe(false);
+    });
+
+    it("server-side pagination: hasMoreItems=true when totalItemCount > itemCount", () => {
+        const { hasMoreItems } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: false,
+            itemCount: 7,
+            totalItemCount: 20,
+        });
+        expect(hasMoreItems).toBe(true);
+    });
+
+    it("server-side pagination: hasMoreItems=false when all items loaded", () => {
+        const { hasMoreItems } = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: false,
+            itemCount: 7,
+            totalItemCount: 7,
+        });
+        expect(hasMoreItems).toBe(false);
+    });
+
+    it("explicit pageSize: hasMoreItems driven only by server totalItemCount", () => {
+        const noPagination = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: false,
+            explicitPageSize: 25,
+            itemCount: 25,
+        });
+        expect(noPagination.hasMoreItems).toBe(false);
+
+        const withMore = resolveMenuState({
+            ...BASE,
+            maxItemsByRow: 7,
+            fetchMode: "deferred",
+            loadAll: false,
+            explicitPageSize: 25,
+            itemCount: 25,
+            totalItemCount: 50,
+        });
+        expect(withMore.hasMoreItems).toBe(true);
+    });
+});

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

@@ -31,6 +31,7 @@ export const RestrictionNavigationItem: FC<Props> = ({
         history: "push",
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
 
     const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
         shortId,
@@ -49,6 +50,8 @@ export const RestrictionNavigationItem: FC<Props> = ({
                         <Button
                             variant={selected ? "default" : "outline"}
                             rounded="full"
+                            aria-pressed={selected}
+                            disabled={searchNavigationPending}
                             onClick={() => {
                                 startSearchNavigation();
                                 if (shouldRemoveRestrictParam) {
@@ -82,6 +85,7 @@ export const RestrictionDropdownItem: FC<Props> = ({
         history: "push",
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
 
     const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
         shortId,
@@ -97,6 +101,8 @@ export const RestrictionDropdownItem: FC<Props> = ({
                 <TooltipTrigger asChild>
                     <Button
                         variant={selected ? "default" : "ghost"}
+                        aria-pressed={selected}
+                        disabled={searchNavigationPending}
                         onClick={() => {
                             if (onClick) {
                                 onClick();
@@ -141,16 +147,16 @@ function getRestrictionValue({
 
     if (currentRestrict && multipleSelection) {
         if (selected) {
-            const restrictionsLength = currentRestrict.split(",").length;
-            //if there is only one restriction, we can remove the whole restrict param
-            if (restrictionsLength === 1) {
+            const eqIndex = currentRestrict.indexOf("=");
+            if (eqIndex === -1) {
                 shouldRemoveRestrictParam = true;
             } else {
-                restrictParam = currentRestrict.replace(`${shortId}`, "").replace(",,", ",").replace(/(^,)|(,$)/g, "");
-
-                // Remove the restrict param if nothing remains after '='
-                if (/^[^=]+=$/.test(restrictParam)) {
+                const fieldPrefix = currentRestrict.slice(0, eqIndex + 1);
+                const ids = currentRestrict.slice(eqIndex + 1).split(",").filter((id) => id !== shortId);
+                if (ids.length === 0) {
                     shouldRemoveRestrictParam = true;
+                } else {
+                    restrictParam = fieldPrefix + ids.join(",");
                 }
             }
         } else {

package/src/restriction-menu/restriction-menu-logic.ts

@@ -0,0 +1,51 @@
+type FetchMode = "all" | "deferred";
+
+export type ResolvedMenuState = {
+    restrict: string[];
+    resolvedPageSize: number;
+    hasMoreItems: boolean;
+};
+
+export function resolveMenuState({
+    queryRestrict = [],
+    onlyUsedEntries = true,
+    fetchMode = "deferred",
+    loadAll = false,
+    maxItemsByRow,
+    explicitPageSize,
+    itemCount,
+    totalItemCount,
+}: {
+    queryRestrict?: string[];
+    onlyUsedEntries?: boolean;
+    fetchMode?: FetchMode;
+    loadAll?: boolean;
+    maxItemsByRow: number;
+    explicitPageSize?: number;
+    itemCount: number;
+    totalItemCount?: number;
+}): ResolvedMenuState {
+    const restrict = onlyUsedEntries
+        ? ["hasInformationUnits=true", ...queryRestrict]
+        : queryRestrict;
+
+    const resolvedPageSize = explicitPageSize
+        ? explicitPageSize
+        : fetchMode === "deferred" && !loadAll
+        ? Math.max(maxItemsByRow, 1)
+        : 100;
+
+    const hasMoreFromServer =
+        typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
+    const allItemsLoaded =
+        typeof totalItemCount === "number" && itemCount >= totalItemCount;
+    const hasMoreItems =
+        hasMoreFromServer ||
+        (!explicitPageSize &&
+            !allItemsLoaded &&
+            fetchMode === "deferred" &&
+            !loadAll &&
+            itemCount >= resolvedPageSize);
+
+    return { restrict, resolvedPageSize, hasMoreItems };
+}

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

@@ -6,6 +6,7 @@ import { FC, ReactNode, useMemo, useState } from "react";
 import * as ComponentOptions from "../generated/client-components";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { RestrictionSelectionMenu } from "./restriction-selection-menu";
+import { resolveMenuState } from "./restriction-menu-logic";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
 
 type GenericRequestData = {
@@ -62,18 +63,21 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
 }) => {
     const [loadAll, setLoadAll] = useState(false);
     const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
-    const queryRestrict = queryParams?.Restrict || [];
-    const restrict = onlyUsedEntries ? ["hasInformationUnits=true", ...queryRestrict] : queryRestrict;
+    const queryRestrict = useMemo(() => queryParams?.Restrict || [], [queryParams?.Restrict]);
     const explicitPageSize =
         Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
             ? Number(queryParams?.PageSize)
             : undefined;
     const maxItemsByRow = useMemo(() => Math.max(...Object.values(itemsByRow)), [itemsByRow]);
-    const resolvedPageSize = useMemo(() => {
-        if (explicitPageSize) return explicitPageSize;
-        if (fetchMode === "deferred" && !loadAll) return Math.max(maxItemsByRow, 1);
-        return 100;
-    }, [explicitPageSize, fetchMode, maxItemsByRow, loadAll]);
+    const { restrict, resolvedPageSize } = useMemo(() => resolveMenuState({
+        queryRestrict,
+        onlyUsedEntries,
+        fetchMode,
+        loadAll,
+        maxItemsByRow,
+        explicitPageSize,
+        itemCount: 0,
+    }), [queryRestrict, onlyUsedEntries, fetchMode, loadAll, maxItemsByRow, explicitPageSize]);
     const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
     const resolvedFields = useMemo(() => {
         const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
@@ -102,9 +106,16 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
                 if (!data) return null;
 
                 const itemCount = data.items?.length || 0;
-                const totalItemCount = data.pageInfo?.totalItemCount;
-                const hasMoreFromServer = typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
-                const hasMoreItems = hasMoreFromServer || (explicitPageSize ? false : (fetchMode === "deferred" && !loadAll && itemCount >= resolvedPageSize));
+                const { hasMoreItems } = resolveMenuState({
+                    queryRestrict,
+                    onlyUsedEntries,
+                    fetchMode,
+                    loadAll,
+                    maxItemsByRow,
+                    explicitPageSize,
+                    itemCount,
+                    totalItemCount: data.pageInfo?.totalItemCount,
+                });
 
                 return (
                     <RestrictionSelectionMenu

package/src/results/filter-navbar.tsx

@@ -47,6 +47,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
     const { setIsMobileFiltersOpen } = useFilterSidebarState();
     const restrictionList = useRestrictionStore((state) => state.restrictionList);
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
     const effectiveFacetPresentation = facetPresentation || facetLabelOverrides;
     const [params, setParams] = useQueryStates({
         language: parseAsString.withDefault(useSearchSettingsStore.getState().language || ''),
@@ -207,7 +208,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
     }
 
     return (
-        <div className="pb-4 flex flex-wrap gap-1">
+        <div className={`pb-4 flex flex-wrap gap-1 transition-opacity duration-150${searchNavigationPending ? " opacity-60 pointer-events-none" : ""}`}>
             {hasMobileFilters && (
                 <Button
                     size="sm"

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { FC, useEffect, useMemo, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { useLocale, useTranslations } from 'next-intl'
-import { Check, ChevronDown, ChevronRight } from "lucide-react"
+import { Check, ChevronDown, ChevronRight, Loader2 } from "lucide-react"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@c-rex/ui/collapsible";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@c-rex/ui/sheet";
@@ -76,6 +76,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
         shallow: false,
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
     const effectiveFacetPresentation = facetPresentation || facetLabelOverrides;
 
     const filteredTags = useMemo(() => {
@@ -105,6 +106,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
     };
 
     const onClickHandler = (key: string, item: FilterItem) => {
+        if (!item.active && item.hits === 0) return;
         startSearchNavigation();
         if (item.active) {
             setParams(removeFilterItem(key, item, params.filter))
@@ -171,20 +173,24 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
 
         return (
             <>
-                {visibleItems.map((item) => (
-                    <SidebarMenuSubItem key={item.shortId}>
-                        <SidebarMenuSubButton
-                            className="cursor-pointer !py-1.5"
-                            data-taxonomy-id={item.taxonomyId}
-                            data-taxonomy-short-id={item.shortId}
-                            isActive={item.active}
-                            onClick={() => onClickHandler(key, item)}
-                        >
-                            {item.label} ({item.hits}/{item.total})
-                            {item.active && <Check className="ml-2" />}
-                        </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                ))}
+                {visibleItems.map((item) => {
+                    const isDisabled = !item.active && item.hits === 0;
+                    return (
+                        <SidebarMenuSubItem key={item.shortId}>
+                            <SidebarMenuSubButton
+                                className={isDisabled ? "!py-1 opacity-40 cursor-not-allowed" : "cursor-pointer !py-1"}
+                                data-taxonomy-id={item.taxonomyId}
+                                data-taxonomy-short-id={item.shortId}
+                                isActive={item.active}
+                                aria-disabled={isDisabled}
+                                onClick={() => onClickHandler(key, item)}
+                            >
+                                {item.label} ({item.hits}/{item.total})
+                                {item.active && <Check className="ml-2" />}
+                            </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                    );
+                })}
                 {(hasMoreItems || canShowLess) && (
                     <SidebarMenuSubItem>
                         <div className="flex items-center gap-3 px-2">
@@ -222,20 +228,24 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
 
         return (
             <>
-                {visibleItems.map((item) => (
-                    <SidebarMenuSubItem key={item.shortId}>
-                        <SidebarMenuSubButton
-                            className="cursor-pointer !py-1.5"
-                            data-taxonomy-id={item.taxonomyId}
-                            data-taxonomy-short-id={item.shortId}
-                            isActive={item.active}
-                            onClick={() => onClickHandler(facetKey, item)}
-                        >
-                            {item.label} ({item.hits}/{item.total})
-                            {item.active && <Check className="ml-2" />}
-                        </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                ))}
+                {visibleItems.map((item) => {
+                    const isDisabled = !item.active && item.hits === 0;
+                    return (
+                        <SidebarMenuSubItem key={item.shortId}>
+                            <SidebarMenuSubButton
+                                className={isDisabled ? "!py-1 opacity-40 cursor-not-allowed" : "cursor-pointer !py-1"}
+                                data-taxonomy-id={item.taxonomyId}
+                                data-taxonomy-short-id={item.shortId}
+                                isActive={item.active}
+                                aria-disabled={isDisabled}
+                                onClick={() => onClickHandler(facetKey, item)}
+                            >
+                                {item.label} ({item.hits}/{item.total})
+                                {item.active && <Check className="ml-2" />}
+                            </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                    );
+                })}
                 {(hasMoreItems || canShowLess) && (
                     <SidebarMenuSubItem>
                         <div className="flex items-center gap-3 px-2">
@@ -298,7 +308,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                             <span className={toggleSlotClass} aria-hidden="true" />
                         )}
                         <SidebarMenuSubButton
-                            className={item.isStructural ? "!py-1.5 cursor-default text-muted-foreground" : "cursor-pointer !py-1.5"}
+                            className={item.isStructural ? "!py-1 cursor-default text-muted-foreground" : "cursor-pointer !py-1"}
                             data-taxonomy-id={item.taxonomyId}
                             data-taxonomy-short-id={item.shortId}
                             isActive={item.active}
@@ -320,7 +330,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
     };
 
     const content = (
-        <SidebarContent className="!gap-0 capitalize" suppressHydrationWarning>
+        <SidebarContent className={`!gap-1.5 p-1.5 capitalize${searchNavigationPending ? " opacity-60 pointer-events-none" : ""}`} suppressHydrationWarning>
             {Object.entries(filteredTags).map(([key, value]) => {
                 const items = value as ResolvedFilterItem[];
                 const hasTaxonomy = Boolean(resolveFacetTaxonomy(key, facetTaxonomies));
@@ -337,21 +347,21 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                     <div
                         key={key}
                         data-filter-group-key={key}
-                        className="border-b border-border/40 pb-1 mb-1 last:border-b-0 last:mb-0"
+                        className="rounded-md border border-border/40 overflow-hidden bg-background/50"
                     >
                         {!hasSectionLabels && (
                             <Collapsible defaultOpen className="py-0 group/collapsible">
-                                <SidebarGroup className="!p-1">
-                                    <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold">
-                                        <CollapsibleTrigger className="!h-8 capitalize">
+                                <SidebarGroup className="!p-0">
+                                    <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-xs font-bold bg-muted/30">
+                                        <CollapsibleTrigger className="!h-7 capitalize rounded-none px-2">
                                             {propertyLabel}
                                             <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                         </CollapsibleTrigger>
                                     </SidebarGroupLabel>
                                     <CollapsibleContent>
-                                        <SidebarGroupContent>
-                                            <SidebarMenu className="!gap-0.5">
-                                                <SidebarMenuSub className="!ml-2 !pl-1.5 !py-0 !gap-0.5">
+                                        <SidebarGroupContent className="pb-1">
+                                            <SidebarMenu className="!gap-0">
+                                                <SidebarMenuSub className="!ml-1.5 !pl-1 !py-0.5 !gap-0">
                                                     {!hierarchicalFacet && renderFacetItems(key, items)}
                                                     {hierarchicalFacet && visibleRoots.map((item) => renderHierarchyNode(key, item, hierarchy!.children, 0))}
                                                     {hierarchicalFacet && (hasMoreRoots || canShowLessRoots) && (
@@ -411,22 +421,22 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                                             <Collapsible
                                                 defaultOpen
                                                 key={`${key}:${sectionLabel}`}
-                                                className="py-0 group/collapsible"
+                                                className="py-0 group/collapsible border-t border-border/30 first:border-t-0"
                                             >
-                                                <SidebarGroup className="!p-1">
+                                                <SidebarGroup className="!p-0">
                                                     <SidebarGroupLabel
                                                         asChild
-                                                        className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold"
+                                                        className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-xs font-bold bg-muted/30"
                                                     >
-                                                        <CollapsibleTrigger className="!h-8">
+                                                        <CollapsibleTrigger className="!h-7 rounded-none px-2">
                                                             {sectionLabel}
                                                             <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                                         </CollapsibleTrigger>
                                                     </SidebarGroupLabel>
                                                     <CollapsibleContent>
-                                                        <SidebarGroupContent>
-                                                            <SidebarMenu className="!gap-0.5">
-                                                                <SidebarMenuSub className="!ml-2 !pl-1.5 !py-0 !gap-0.5">
+                                                        <SidebarGroupContent className="pb-1">
+                                                            <SidebarMenu className="!gap-0">
+                                                                <SidebarMenuSub className="!ml-1.5 !pl-1 !py-0.5 !gap-0">
                                                                     {shouldRenderSectionHierarchy && !hasNestedGroups &&
                                                                         visibleSectionRoots.map((item) => renderHierarchyNode(key, item, sectionHierarchy!.children, 0))}
                                                                     {shouldRenderSectionHierarchy && !hasNestedGroups && (hasMoreSectionRoots || canShowLessSectionRoots) && (
@@ -500,7 +510,10 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                     className="w-[calc(100vw-2rem)] max-w-sm overflow-y-auto !px-2 !pt-6 lg:hidden"
                 >
                     <SheetHeader className="justify-center items-end font-bold">
-                        <SheetTitle>{t("filter.filters")}</SheetTitle>
+                        <SheetTitle className="flex items-center gap-2">
+                            {t("filter.filters")}
+                            {searchNavigationPending && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+                        </SheetTitle>
                         <span className="text-xs text-muted-foreground leading-5">
                             {totalItemCount} {t("results.results")}
                         </span>
@@ -509,9 +522,12 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                 </SheetContent>
             </Sheet>
 
-            <div className="hidden w-60 rounded-md border bg-sidebar pb-4 lg:block lg:w-80">
+            <div className="hidden w-56 rounded-md border bg-sidebar pb-2 lg:block lg:w-72">
                 <SidebarHeader className="justify-center items-end font-bold">
-                    {t("filter.filters")}
+                    <span className="flex items-center gap-2">
+                        {t("filter.filters")}
+                        {searchNavigationPending && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+                    </span>
                     <span className="text-xs text-muted-foreground leading-5">
                         {totalItemCount} {t("results.results")}
                     </span>

package/src/results/generic/search-results-client.tsx

@@ -184,7 +184,7 @@ const SearchResultsBody = <TItem extends CommonItemsModel>({
                     excludeProperties={facetExcludeProperties}
                 />
 
-                <div className="flex-1 flex flex-col gap-4">
+                <div className={`flex-1 flex flex-col gap-4 transition-opacity duration-150${isLoading ? " opacity-60 pointer-events-none" : ""}`}>
                     {Number(data.pageInfo.pageCount) > 1 && (
                         <Pagination pageInfo={data.pageInfo} className="pt-0" />
                     )}

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

@@ -34,6 +34,7 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
     descriptionFragmentSubjectIds = [],
 }) => {
     const t = useTranslations();
+    const tTypes = useTranslations("itemTypes");
 
     return (
         <div className="flex-1">
@@ -91,7 +92,7 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
                             </span>
 
                             <div>
-                                <Badge>{itemType}</Badge>
+                                <Badge>{tTypes(itemType.toLowerCase() as any) ?? itemType}</Badge>
                             </div>
                             <span className="text-sm">
                                 <HtmlRendition

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

@@ -5,7 +5,7 @@ import { FC, useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { cn, formatDateToLocale } from "@c-rex/utils";
 import { Badge } from "@c-rex/ui/badge";
-import { useLocale } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { TopicsResponseItem } from "@c-rex/interfaces";
 import { Card } from "@c-rex/ui/card";
 import { useQueryState } from "nuqs";
@@ -28,6 +28,7 @@ const InformationUnitSearchResultCard: FC<{
     index: number;
     query: string | null;
 }> = ({ item, index, query }) => {
+    const t = useTranslations();
     const locale = useLocale();
     const date = formatDateToLocale(item.created!, locale);
     const cardRef = useRef<HTMLDivElement>(null);
@@ -170,8 +171,8 @@ const InformationUnitSearchResultCard: FC<{
                 </div>
 
                 {!item.disabled && (
-                    <Link href={item.link} className="absolute inset-0">
-                        <span className="sr-only">View article</span>
+                    <Link href={item.link} className="absolute inset-0" aria-label={t("results.viewArticle")}>
+                        <span className="sr-only">{t("results.viewArticle")}</span>
                     </Link>
                 )}
             </Card>

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

@@ -18,7 +18,9 @@ const IconsToFileExtension: Record<string, React.ReactNode> = {
 };
 
 const InformationUnitSearchResultsTable: FC<InformationUnitSearchResultsTableProps> = ({ items }) => {
-    const t = useTranslations("results")
+    const t = useTranslations("results");
+    const tRoot = useTranslations();
+    const tTypes = useTranslations("itemTypes");
     const [query] = useQueryState("search");
 
 
@@ -55,7 +57,7 @@ const InformationUnitSearchResultsTable: FC<InformationUnitSearchResultsTablePro
 
                     <div className="w-4/5 md:w-1/5 p-2">
                         <Badge variant="secondary">
-                            {item.type}
+                            {tTypes(item.type.toLowerCase() as any) ?? item.type}
                         </Badge>
                     </div>
 
@@ -78,12 +80,12 @@ const InformationUnitSearchResultsTable: FC<InformationUnitSearchResultsTablePro
                                             <DropdownMenuContent>
                                                 <DropdownMenuItem>
                                                     <a href={item.files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <Eye className="mr-2" /> Open {/*TODO: use i18n functions*/}
+                                                        <Eye className="mr-2" /> {tRoot("open")}
                                                     </a>
                                                 </DropdownMenuItem>
                                                 <DropdownMenuItem>
                                                     <a href={item.files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <CloudDownload className="mr-2" /> Download {/*TODO: use i18n functions*/}
+                                                        <CloudDownload className="mr-2" /> {tRoot("download")}
                                                     </a>
                                                 </DropdownMenuItem>
                                             </DropdownMenuContent>

package/src/results/pagination.tsx

@@ -14,6 +14,7 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { ResultContainerPageInfoModel } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
 import { cn } from "@c-rex/utils";
+import { useSearchNavigationStore } from "../stores/search-navigation-store";
 
 interface PaginationProps {
     pageInfo: ResultContainerPageInfoModel;
@@ -67,6 +68,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const t = useTranslations("results");
     const pathname = usePathname();
     const searchParams = useSearchParams();
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
 
     const pageNumber = pageInfo.pageNumber || 1;
     const pageCount = pageInfo.pageCount || 1;
@@ -78,7 +80,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const search = currentSearch.length > 0 ? `?${currentSearch}` : "";
 
     return (
-        <div className={cn("flex flex-col gap-3 py-4", className)}>
+        <div className={cn("flex flex-col gap-3 py-4 transition-opacity duration-150", searchNavigationPending ? "opacity-60 pointer-events-none" : "", className)}>
             <PaginationUI className="py-4 items-center justify-center sm:justify-between">
                 <span className="hidden sm:block text-sm text-muted-foreground">
                     {t("paginationResults", {

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

@@ -25,8 +25,6 @@ export type SearchSettingsState = {
     wildcard: WildCardType,
     operator: OperatorType,
     like: boolean,
-    facetExcludeProperties?: string[],
-    metadataExcludeProperties?: string[],
 }
 
 export type SearchSettingsStore = SearchSettingsState & {
@@ -38,8 +36,6 @@ export const defaultSearchSettings: SearchSettingsState = {
     wildcard: WILD_CARD_OPTIONS.BOTH,
     operator: OPERATOR_OPTIONS.OR,
     like: false,
-    facetExcludeProperties: [],
-    metadataExcludeProperties: [],
 }
 
 /**

package/src/stores/ui-preferences-store.ts

@@ -0,0 +1,128 @@
+import { create } from "zustand";
+import { persist, createJSONStorage, StateStorage } from "zustand/middleware";
+
+const cookieStorage: StateStorage = {
+    getItem: (name: string): string | null => {
+        if (typeof document === "undefined") return null;
+        const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+        return match ? decodeURIComponent(match[2] as string) : null;
+    },
+    setItem: (name: string, value: string): void => {
+        if (typeof document === "undefined") return;
+        const maxAge = 60 * 60 * 24 * 365;
+        document.cookie = `${name}=${encodeURIComponent(value)};path=/;max-age=${maxAge};SameSite=Lax`;
+    },
+    removeItem: (name: string): void => {
+        if (typeof document === "undefined") return;
+        document.cookie = `${name}=;path=/;max-age=0`;
+    },
+};
+
+export type UiPreferencesState = {
+    facetExcludeProperties: string[];
+    metadataExcludeProperties: string[];
+};
+
+export type UiPreferencesStore = UiPreferencesState & {
+    updatePreferences: (prefs: Partial<UiPreferencesState>) => void;
+};
+
+export const defaultUiPreferences: UiPreferencesState = {
+    facetExcludeProperties: [],
+    metadataExcludeProperties: [],
+};
+
+function readLegacyValues(): Partial<UiPreferencesState> {
+    if (typeof document === "undefined") return {};
+    try {
+        const match = document.cookie.match(new RegExp(`(^| )c-rex-search-settings=([^;]+)`));
+        if (!match) return {};
+        const parsed = JSON.parse(decodeURIComponent(match[2] as string));
+        const state = parsed?.state || {};
+        const result: Partial<UiPreferencesState> = {};
+        if (Array.isArray(state.facetExcludeProperties)) {
+            result.facetExcludeProperties = state.facetExcludeProperties;
+        }
+        if (Array.isArray(state.metadataExcludeProperties)) {
+            result.metadataExcludeProperties = state.metadataExcludeProperties;
+        }
+        return result;
+    } catch {
+        return {};
+    }
+}
+
+export const useUiPreferencesStore = create<UiPreferencesStore>()(
+    persist(
+        (set, get) => ({
+            ...defaultUiPreferences,
+            updatePreferences: (prefs) => set((state) => ({ ...state, ...prefs })),
+        }),
+        {
+            name: "c-rex-ui-preferences",
+            storage: createJSONStorage(() => cookieStorage),
+            onRehydrateStorage: () => (state) => {
+                if (!state) return;
+                const isNew =
+                    state.facetExcludeProperties.length === 0 &&
+                    state.metadataExcludeProperties.length === 0;
+                if (isNew) {
+                    const legacy = readLegacyValues();
+                    if (Object.keys(legacy).length > 0) {
+                        state.updatePreferences(legacy);
+                    }
+                }
+            },
+        }
+    )
+);
+
+/**
+ * Read UI preferences from cookie on the server.
+ * Falls back to legacy `c-rex-search-settings` cookie for migration.
+ */
+export function getUiPreferencesFromCookie(
+    newCookieValue: string | undefined,
+    legacyCookieValue?: string | undefined
+): UiPreferencesState {
+    if (newCookieValue) {
+        try {
+            const parsed = JSON.parse(newCookieValue);
+            const state = parsed?.state || {};
+            const result: UiPreferencesState = { ...defaultUiPreferences };
+            if (Array.isArray(state.facetExcludeProperties)) {
+                result.facetExcludeProperties = state.facetExcludeProperties;
+            }
+            if (Array.isArray(state.metadataExcludeProperties)) {
+                result.metadataExcludeProperties = state.metadataExcludeProperties;
+            }
+            if (
+                result.facetExcludeProperties.length === 0 &&
+                result.metadataExcludeProperties.length === 0 &&
+                legacyCookieValue
+            ) {
+                return migrateFromLegacy(legacyCookieValue);
+            }
+            return result;
+        } catch {
+            // fall through to legacy
+        }
+    }
+    if (legacyCookieValue) {
+        return migrateFromLegacy(legacyCookieValue);
+    }
+    return { ...defaultUiPreferences };
+}
+
+function migrateFromLegacy(cookieValue: string): UiPreferencesState {
+    try {
+        const parsed = JSON.parse(cookieValue);
+        const state = parsed?.state || {};
+        return {
+            facetExcludeProperties: Array.isArray(state.facetExcludeProperties) ? state.facetExcludeProperties : [],
+            metadataExcludeProperties: Array.isArray(state.metadataExcludeProperties) ? state.metadataExcludeProperties : [],
+        };
+    } catch {
+        return { ...defaultUiPreferences };
+    }
+}