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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.40",
+    "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/favorites/favorites-context.tsx

@@ -264,6 +264,10 @@ const upsertFavorite = (favorites: Favorite[], entry: Favorite): Favorite[] => {
     }
 
     const current = favorites[index];
+    if (!current) {
+        return [...favorites, entry];
+    }
+
     const next = {
         ...current,
         label: current.label || entry.label,

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-hierarchy.ts

@@ -1,4 +1,4 @@
-export type RestrictionHierarchyNode = {
+export type RestrictionHierarchyNode = object & {
     isStructural?: boolean;
 };