@c-rex/components 0.3.0-build.35 → 0.3.0-build.36

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

@@ -1,13 +1,13 @@
 "use client";
 
 import { FC, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
 import { CommonItemsModel } from "@c-rex/interfaces";
 import { FileStack } from "lucide-react";
 import { cn, findRelatedFragmentShortId, generateQueryParams } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { Badge } from "@c-rex/ui/badge";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { RESULT_TYPES } from "@c-rex/constants";
 import { FileDownloadDropdown } from "@c-rex/components/file-download";
 import { FavoriteButton } from "@c-rex/components/favorite-button";
 import { ImageRenditionContainer } from "../renditions/image/container";
@@ -34,10 +34,8 @@ type RowContentProps = {
     item: CommonItemsModel;
     itemLink: string;
     title: string;
-    language: string;
     itemType: ResultTypes;
     multipleVersions: string[];
-    isDocument: boolean;
     isLast: boolean;
     previewFragmentShortId?: string;
     descriptionFragmentShortId?: string;
@@ -48,15 +46,15 @@ const DocumentResultListRowContent: FC<RowContentProps> = ({
     item,
     itemLink,
     title,
-    language,
     itemType,
     multipleVersions,
-    isDocument,
     isLast,
     previewFragmentShortId,
     descriptionFragmentShortId,
     isLoadingDetails = false,
 }) => {
+    const t = useTranslations();
+
     return (
         <div
             className={cn(
@@ -65,14 +63,14 @@ const DocumentResultListRowContent: FC<RowContentProps> = ({
                 `c-rex-result-item c-rex-result-${itemType}`
             )}
         >
-            <div className="w-20 sm:w-24 flex shrink-0 items-start justify-center pt-1">
+            <div className="w-20 sm:w-24 flex shrink-0 justify-center pt-1">
                 {isLoadingDetails ? (
                     <Skeleton className="w-20 sm:w-24 aspect-[210/297]" />
                 ) : (
-                    <Link href={itemLink} className="block w-20 sm:w-24">
+                    <Link href={itemLink} className="w-full h-full block">
                         <ImageRenditionContainer
                             fragmentShortId={previewFragmentShortId}
-                            emptyImageStyle="w-20 sm:w-24 aspect-[210/297]"
+                            emptyImageStyle="w-full h-full"
                             imageStyle="block w-full h-auto max-w-full object-contain object-top mx-auto"
                         />
                     </Link>
@@ -81,11 +79,11 @@ const DocumentResultListRowContent: FC<RowContentProps> = ({
 
             <div className="flex-1 p-2 flex flex-col justify-start">
                 <span className="text-sm text-muted-foreground">
-                    {item.revision} - {language}
+                    {item.revision}
                 </span>
 
                 <span className="text-lg font-medium">
-                    <a className="hover:underline" href={itemLink}>{title}</a>
+                    <a className="hover:underline [overflow-wrap:anywhere] hyphens-auto" href={itemLink}>{title}</a>
                 </span>
 
                 <div>
@@ -109,36 +107,32 @@ const DocumentResultListRowContent: FC<RowContentProps> = ({
                 </span>
             </div>
 
-            <div className="flex flex-col p-2 ml-auto justify-start self-start">
-                <div className="flex gap-2">
-                    <FileDownloadDropdown renditions={item.renditions} />
-
-                    <FavoriteButton
-                        id={item.shortId!}
-                        type={itemType}
-                        label={title}
-                    />
-
-                    {multipleVersions.length > 1 && (
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button variant="ghost" size="icon">
-                                    <FileStack />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                Available in: {multipleVersions.join(", ")}
-                            </TooltipContent>
-                        </Tooltip>
-                    )}
+            <div className="flex flex-row p-2 ml-auto justify-between self-start gap-2 w-full sm:justify-start sm:w-auto">
+                <FileDownloadDropdown renditions={item.renditions} />
+
+                <FavoriteButton
+                    id={item.shortId!}
+                    type={itemType}
+                    label={title}
+                />
+
+                {multipleVersions.length > 1 && (
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                                <FileStack />
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            {t("availableIn")}: {multipleVersions.join(", ")}
+                        </TooltipContent>
+                    </Tooltip>
+                )}
 
-                    {isDocument && (
-                        <BookmarkButton
-                            shortId={item.shortId!}
-                            triggerVariant="ghost"
-                        />
-                    )}
-                </div>
+                <BookmarkButton
+                    shortId={item.shortId!}
+                    triggerVariant="ghost"
+                />
             </div>
         </div>
     );
@@ -152,8 +146,7 @@ export const DocumentsResultListItem: FC<Props> = ({
     isLast,
     eager = false,
 }) => {
-    const { title, language, itemType, multipleVersions, packageId } = getResultItemSummary(item);
-    const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+    const { title, itemType, multipleVersions, packageId } = getResultItemSummary(item);
     const [canLoadDetails, setCanLoadDetails] = useState(eager);
     const rowRef = useRef<HTMLDivElement | null>(null);
     const queryParams: QueryParams[] = [];
@@ -199,14 +192,12 @@ export const DocumentsResultListItem: FC<Props> = ({
             item={item}
             itemLink={itemLink}
             title={title}
-            language={language}
             itemType={itemType}
             multipleVersions={multipleVersions}
-            isDocument={isDocument}
             isLast={isLast}
             isLoadingDetails={!canLoadDetails}
         />
-    ), [canLoadDetails, isDocument, isLast, item, itemLink, itemType, language, multipleVersions, title]);
+    ), [canLoadDetails, isLast, item, itemLink, itemType, multipleVersions, title]);
 
     return (
         <div ref={rowRef}>
@@ -238,10 +229,8 @@ export const DocumentsResultListItem: FC<Props> = ({
                                 item={item}
                                 itemLink={itemLink}
                                 title={title}
-                                language={language}
                                 itemType={itemType}
                                 multipleVersions={multipleVersions}
-                                isDocument={isDocument}
                                 isLast={isLast}
                                 previewFragmentShortId={previewFragmentShortId}
                                 descriptionFragmentShortId={descriptionFragmentShortId}

package/src/favorites/__tests__/favorites-hydration.test.tsx

@@ -0,0 +1,245 @@
+/** @jest-environment jsdom */
+
+import React, { useEffect } from "react";
+import { TextDecoder, TextEncoder } from "util";
+import { act } from "react";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { FavoriteButton } from "../favorite-button";
+import { BookmarkButton } from "../bookmark-button";
+import {
+    FAVORITES_STORAGE_KEY,
+    FavoritesProvider,
+    type FavoritesState,
+    useFavorites,
+} from "../favorites-context";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as typeof global.TextDecoder;
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const { renderToString } = require("react-dom/server");
+
+jest.mock("next-intl", () => ({
+    useTranslations: () => (key: string) => {
+        const messages: Record<string, string> = {
+            title: "Bookmarks",
+            description: "Manage your bookmarks here",
+            empty: "No bookmarks yet.",
+        };
+
+        return messages[key] ?? key;
+    },
+}));
+
+jest.mock("@c-rex/utils", () => ({
+    getLocalStorageJson: (key: string) => {
+        const value = window.localStorage.getItem(key);
+        return value ? JSON.parse(value) : null;
+    },
+    setLocalStorageJson: (key: string, value: unknown) => {
+        window.localStorage.setItem(key, JSON.stringify(value));
+    },
+    removeLocalStorageItem: (key: string) => {
+        window.localStorage.removeItem(key);
+    },
+}));
+
+jest.mock("next/link", () => ({
+    __esModule: true,
+    default: ({ children, href, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+        <a href={href} {...props}>{children}</a>
+    ),
+}));
+
+jest.mock("@c-rex/ui/button", () => ({
+    Button: ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+        <button {...props}>{children}</button>
+    ),
+}));
+
+jest.mock("@c-rex/ui/dialog", () => ({
+    Dialog: ({ children }: { children: React.ReactNode }) => <div data-testid="dialog">{children}</div>,
+    DialogTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DialogDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+jest.mock("@c-rex/ui/table", () => ({
+    Table: ({ children }: { children: React.ReactNode }) => <table>{children}</table>,
+    TableBody: ({ children }: { children: React.ReactNode }) => <tbody>{children}</tbody>,
+    TableRow: ({ children, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => <tr {...props}>{children}</tr>,
+    TableCell: ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => <td {...props}>{children}</td>,
+}));
+
+jest.mock("sonner", () => ({
+    toast: {
+        error: jest.fn(),
+    },
+}));
+
+const persistedState: FavoritesState = {
+    favorites: [
+        { id: "doc-1", label: "Document 1", color: "" },
+        { id: "topic-1", label: "Topic 1", color: "red-500" },
+    ],
+    documents: {
+        "doc-1": {
+            label: "Document 1",
+            topics: [{ id: "topic-1", label: "Topic 1", color: "red-500" }],
+        },
+    },
+};
+
+const ProviderProbe = () => {
+    const isHydrated = useFavorites((state) => state.isHydrated);
+    const favoritesCount = useFavorites((state) => state.favorites.length);
+
+    return (
+        <div
+            data-hydrated={String(isHydrated)}
+            data-favorites-count={String(favoritesCount)}
+        />
+    );
+};
+
+const EffectProbe = ({ onHydrated }: { onHydrated: (payload: { hydrated: boolean; count: number }) => void }) => {
+    const isHydrated = useFavorites((state) => state.isHydrated);
+    const favoritesCount = useFavorites((state) => state.favorites.length);
+
+    useEffect(() => {
+        onHydrated({ hydrated: isHydrated, count: favoritesCount });
+    }, [favoritesCount, isHydrated, onHydrated]);
+
+    return null;
+};
+
+describe("favorites hydration", () => {
+    beforeEach(() => {
+        window.localStorage.clear();
+        jest.clearAllMocks();
+    });
+
+    it("keeps server markup stable before hydration and loads persisted state after mount", async () => {
+        window.localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify(persistedState));
+
+        const serverMarkup = renderToString(
+            <FavoritesProvider>
+                <ProviderProbe />
+            </FavoritesProvider>
+        );
+
+        expect(serverMarkup).toContain('data-hydrated="false"');
+        expect(serverMarkup).toContain('data-favorites-count="0"');
+
+        const container = document.createElement("div");
+        container.innerHTML = serverMarkup;
+
+        await act(async () => {
+            hydrateRoot(
+                container,
+                <FavoritesProvider>
+                    <ProviderProbe />
+                </FavoritesProvider>
+            );
+        });
+
+        const probe = container.querySelector("div[data-hydrated]");
+
+        expect(probe?.getAttribute("data-hydrated")).toBe("true");
+        expect(probe?.getAttribute("data-favorites-count")).toBe("2");
+    });
+
+    it("renders favorite button as loading on the server and shows persisted favorite after hydration", async () => {
+        window.localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify(persistedState));
+
+        const serverMarkup = renderToString(
+            <FavoritesProvider>
+                <FavoriteButton id="doc-1" type="DOCUMENT" label="Document 1" />
+            </FavoritesProvider>
+        );
+
+        expect(serverMarkup).toContain("Loading favorites");
+        expect(serverMarkup).not.toContain("Remove favorite");
+
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <FavoritesProvider>
+                    <FavoriteButton id="doc-1" type="DOCUMENT" label="Document 1" />
+                </FavoritesProvider>
+            );
+        });
+
+        const button = container.querySelector("button");
+
+        expect(button?.getAttribute("aria-label")).toBe("Remove favorite");
+        expect(button?.hasAttribute("disabled")).toBe(false);
+
+        await act(async () => {
+            root.unmount();
+        });
+    });
+
+    it("hides bookmark count on the server and reveals persisted bookmarks after hydration", async () => {
+        window.localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify(persistedState));
+
+        const serverMarkup = renderToString(
+            <FavoritesProvider>
+                <BookmarkButton shortId="doc-1" />
+            </FavoritesProvider>
+        );
+
+        expect(serverMarkup).not.toContain(">1<");
+        expect(serverMarkup).toContain("Loading...");
+
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <FavoritesProvider>
+                    <BookmarkButton shortId="doc-1" />
+                </FavoritesProvider>
+            );
+        });
+
+        expect(container.textContent).toContain("1");
+        expect(container.textContent).toContain("Topic 1");
+        expect(container.textContent).not.toContain("Loading...");
+
+        await act(async () => {
+            root.unmount();
+        });
+    });
+
+    it("marks the provider as hydrated and exposes persisted favorites to consumers after mount", async () => {
+        window.localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify(persistedState));
+        const onHydrated = jest.fn();
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <FavoritesProvider>
+                    <EffectProbe onHydrated={onHydrated} />
+                </FavoritesProvider>
+            );
+        });
+
+        expect(onHydrated).toHaveBeenLastCalledWith({
+            hydrated: true,
+            count: 2,
+        });
+
+        await act(async () => {
+            root.unmount();
+        });
+    });
+});

package/src/favorites/bookmark-button.tsx

@@ -2,27 +2,31 @@
 
 import { ComponentProps, FC } from "react";
 import { Button } from "@c-rex/ui/button";
-import { Trash } from "lucide-react";
-import { cn } from "@c-rex/utils";
+import { Loader2, Trash } from "lucide-react";
 import Link from "next/link";
-import { useFavoritesStore } from "../stores/favorites-store";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger
+} from "@c-rex/ui/dialog";
 import { useTranslations } from "next-intl";
 import {
     Table,
     TableBody,
     TableCell,
     TableRow,
-} from "@c-rex/ui/table"
+} from "@c-rex/ui/table";
 import { FaRegBookmark } from "react-icons/fa6";
-
-const EMPTY_TOPICS: { id: string; label: string; color: string }[] = [];
+import { useFavorites } from "./favorites-context";
 
 type BookmarkProps = {
     shortId: string;
     linkPattern?: string;
     triggerVariant?: ComponentProps<typeof Button>["variant"];
-}
+};
 
 export const BookmarkButton: FC<BookmarkProps> = ({
     shortId,
@@ -30,35 +34,49 @@ export const BookmarkButton: FC<BookmarkProps> = ({
     triggerVariant = "outline"
 }) => {
     const t = useTranslations("bookmarks");
-    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
-    const documentLabel = useFavoritesStore((state) => state.documents[shortId]?.label);
-    const markersList = useFavoritesStore((state) => state.documents[shortId]?.topics) ?? EMPTY_TOPICS;
+    const tRoot = useTranslations();
+    const removeFavoriteTopic = useFavorites((state) => state.unfavoriteTopic);
+    const documentLabel = useFavorites((state) => state.documents[shortId]?.label);
+    const markersList = useFavorites((state) => state.documents[shortId]?.topics) ?? [];
+    const isHydrated = useFavorites((state) => state.isHydrated);
+    const visibleMarkersCount = isHydrated ? markersList.length : 0;
+
     return (
         <Dialog>
             <DialogTrigger asChild>
-                <Button variant={triggerVariant} size="icon" className="relative">
+                <Button variant={triggerVariant} size="icon" className="relative" aria-label={t("title")}>
                     <FaRegBookmark className="text-primary !size-4" />
 
-                    {markersList.length > 0 && (
+                    {isHydrated && visibleMarkersCount > 0 && (
                         <span
                             className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
                         >
-                            {markersList.length}
+                            {visibleMarkersCount}
                         </span>
                     )}
                 </Button>
-
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
                     <DialogTitle>{t("title")}</DialogTitle>
                     <DialogDescription>
-                        {documentLabel || t("description")}
+                        {isHydrated ? (documentLabel || t("description")) : t("description")}
                     </DialogDescription>
                 </DialogHeader>
                 <Table>
                     <TableBody>
-                        {markersList.length === 0 && (
+                        {!isHydrated && (
+                            <TableRow>
+                                <TableCell colSpan={3} className="text-center">
+                                    <span className="inline-flex items-center gap-2">
+                                        <Loader2 className="size-4 animate-spin" />
+                                        {tRoot("loading")}
+                                    </span>
+                                </TableCell>
+                            </TableRow>
+                        )}
+
+                        {isHydrated && visibleMarkersCount === 0 && (
                             <TableRow>
                                 <TableCell colSpan={3} className="text-center">
                                     {t("empty")}
@@ -66,7 +84,7 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                             </TableRow>
                         )}
 
-                        {markersList.map((item) => (
+                        {isHydrated && markersList.map((item) => (
                             <TableRow key={item.id} className="min-h-12">
                                 <TableCell>
                                     <FaRegBookmark className={`text-${item.color}`} />
@@ -95,5 +113,5 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                 </Table>
             </DialogContent>
         </Dialog>
-    )
-}
+    );
+};

package/src/favorites/favorite-button.tsx

@@ -3,7 +3,7 @@
 import { FC, useState } from "react";
 import { Button } from "@c-rex/ui/button";
 import { FaStar, FaRegStar } from "react-icons/fa";
-import { useFavoritesStore } from "../stores/favorites-store";
+import { useFavorites } from "./favorites-context";
 import { MARKER_COLORS, RESULT_TYPES } from "@c-rex/constants";
 import { ResultTypes } from "@c-rex/types";
 import { Loader2 } from "lucide-react";
@@ -14,14 +14,16 @@ export const FavoriteButton: FC<{
     type: ResultTypes;
     label: string;
 }> = ({ id, type, label }) => {
-    const addFavoriteTopic = useFavoritesStore((state) => state.favoriteTopic);
-    const addFavoriteDocument = useFavoritesStore((state) => state.favoriteDocument);
-    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
-    const removeFavoriteDocument = useFavoritesStore((state) => state.unfavoriteDocument);
-
-    const favoriteDocumentList = useFavoritesStore((state) => state.documents);
-    const favoriteList = useFavoritesStore((state) => state.favorites);
+    const addFavoriteTopic = useFavorites((state) => state.favoriteTopic);
+    const addFavoriteDocument = useFavorites((state) => state.favoriteDocument);
+    const removeFavoriteTopic = useFavorites((state) => state.unfavoriteTopic);
+    const removeFavoriteDocument = useFavorites((state) => state.unfavoriteDocument);
+
+    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 [documentData, setDocumentData] = useState<{ id: string, label: string } | null>(null);
     const [topicData, setTopicData] = useState<{ id: string, label: string } | null>(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -109,7 +111,7 @@ export const FavoriteButton: FC<{
     };
 
     const handleToggle = async () => {
-        if (isLoading) return;
+        if (!isHydrated || isLoading) return;
         setIsLoading(true);
 
         try {
@@ -125,25 +127,22 @@ export const FavoriteButton: FC<{
         }
     };
 
-    if (isFavorite) {
-        return (
-            <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
-                {isLoading ? (
-                    <Loader2 className="animate-spin" />
-                ) : (
-                    <FaStar className="color-primary" />
-                )}
-            </Button>
-        );
-    }
+    const showLoading = !isHydrated || isLoading;
 
     return (
-        <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
-            {isLoading ? (
+        <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleToggle}
+            disabled={showLoading}
+        >
+            {showLoading ? (
                 <Loader2 className="animate-spin" />
+            ) : isFavorite ? (
+                <FaStar className="color-primary" />
             ) : (
                 <FaRegStar />
             )}
         </Button>
-    )
-}
+    );
+};