@c-rex/components 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "files": [
     "src"
   ],
@@ -25,6 +25,10 @@
       "types": "./src/breadcrumb.tsx",
       "import": "./src/breadcrumb.tsx"
     },
+    "./settings-menu": {
+      "types": "./src/navbar/settings.tsx",
+      "import": "./src/navbar/settings.tsx"
+    },
     "./flag": {
       "types": "./src/flag.tsx",
       "import": "./src/flag.tsx"
@@ -101,6 +105,10 @@
       "types": "./src/loading.tsx",
       "import": "./src/loading.tsx"
     },
+    "./favorite-button": {
+      "types": "./src/favorite-button.tsx",
+      "import": "./src/favorite-button.tsx"
+    },
     "./language-store": {
       "types": "./src/stores/language-store.ts",
       "import": "./src/stores/language-store.ts"
@@ -108,6 +116,10 @@
     "./highlight-store": {
       "types": "./src/stores/highlight-store.ts",
       "import": "./src/stores/highlight-store.ts"
+    },
+    "./favorites-store": {
+      "types": "./src/stores/favorites-store.ts",
+      "import": "./src/stores/favorites-store.ts"
     }
   },
   "scripts": {

package/src/autocomplete.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef, useState } from "react";
 import { Input } from "@c-rex/ui/input";
 import { call, generateQueryParams } from "@c-rex/utils";

package/src/bookmark-button.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { Button } from "@c-rex/ui/button";
+import { Trash } from "lucide-react";
+import { cn } from "@c-rex/utils";
+import Link from "next/link";
+import { Favorite } from "@c-rex/types";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+} from "@c-rex/ui/table"
+import { FaRegBookmark } from "react-icons/fa6";
+
+export const BookmarkButton: FC<{ markersList: Favorite[], trigger?: ReactNode }> = ({ markersList, trigger }) => {
+
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+
+                {trigger ? trigger : (
+
+                    <Button variant="outline" size="icon" className="relative">
+                        <FaRegBookmark className="text-primary" />
+                        <span
+                            className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
+                        >
+                            {markersList.length}
+                        </span>
+                    </Button>
+                )}
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Bookmarks</DialogTitle>
+                    <DialogDescription>
+                        Manage your bookmarks here
+                    </DialogDescription>
+                </DialogHeader>
+                <Table>
+                    <TableBody>
+                        {markersList.map((item) => (
+                            <TableRow key={item.id} className="min-h-12">
+                                <TableCell>
+                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
+                                </TableCell>
+                                <TableCell>
+                                    <Link href={`./${item.id}`}>
+                                        {item.label}
+                                    </Link>
+                                </TableCell>
+                                <TableCell>
+                                    <Button variant="destructive" size="icon">
+                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                    </Button>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/dialog-filter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import React, { FC, useEffect, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
     Dialog,
@@ -35,17 +35,18 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const t = useTranslations("filter");
     const { setLoading } = useSearchContext();
 
-    const savedLike = useSearchSettingsStore.getState().like;
-    const savedOperator = useSearchSettingsStore.getState().operator;
-    const savedWildcard = useSearchSettingsStore.getState().wildcard;
-    const savedLanguages = useLanguageStore.getState().contentLang;
-    const availableLanguagesAndCountries = useLanguageStore.getState().availableLanguages;
+    const savedLike = useSearchSettingsStore((state) => state.like)
+    const savedOperator = useSearchSettingsStore((state) => state.operator)
+    const savedWildcard = useSearchSettingsStore((state) => state.wildcard)
+    const savedLanguages = useLanguageStore(state => state.contentLang);
+    const availableLanguagesAndCountries = useLanguageStore(state => state.availableLanguages);
 
     const [like, setLike] = useState<boolean>(savedLike);
     const [operator, setOperator] = useState<string>(savedOperator);
     const [wildcard, setWildcard] = useState<string>(savedWildcard);
-    const [languages, setLanguages] = useState<Languages[]>(
-        availableLanguagesAndCountries?.map((item: LanguageAndCountries) => {
+
+    const generateLanguagesList = (): Languages[] => {
+        return availableLanguagesAndCountries?.map((item: LanguageAndCountries) => {
             const checked = savedLanguages.includes(item.value)
 
             return {
@@ -54,8 +55,9 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
                 checked,
             }
         })
-    );
+    }
 
+    const [languages, setLanguages] = useState<Languages[]>(generateLanguagesList());
     const [params, setParams] = useQueryStates({
         search: parseAsString,
         language: parseAsString,
@@ -100,6 +102,10 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
         });
     }
 
+    useEffect(() => {
+        setLanguages(generateLanguagesList())
+    }, [availableLanguagesAndCountries])
+
     return (
         <Dialog>
             <DialogTrigger asChild>

package/src/favorite-button.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import { Button } from "@c-rex/ui/button";
+import { FaStar, FaRegStar } from "react-icons/fa";
+import { useFavoritesStore } from "./stores/favorites-store";
+import { MARKER_COLORS, RESULT_TYPES } from "@c-rex/constants";
+import { ResultTypes } from "@c-rex/types";
+
+export const FavoriteButton: FC<{ id: string, 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 isFavorite = favoriteList.find((fav) => fav.id === id);
+    const [documentData, setDocumentData] = useState<{ id: string, label: string }>({ id, label });
+
+    useEffect(() => {
+        if (type === RESULT_TYPES.TOPIC) {
+            getTopicDocumentData(id);
+        }
+    }, []);
+
+    const addFavorite = async (id: string) => {
+        if (type === RESULT_TYPES.DOCUMENT) {
+            addFavoriteDocument(id, label);
+            return;
+        }
+
+        const length = favoriteDocumentList[documentData.id]?.topics.length || 0;
+        const color = MARKER_COLORS[length] || MARKER_COLORS[MARKER_COLORS.length - 1] as string;
+
+        addFavoriteTopic(documentData.id, id, label, color);
+    }
+
+    const removeFavorite = (id: string) => {
+        if (type === RESULT_TYPES.DOCUMENT) {
+            removeFavoriteDocument(id);
+            return;
+        }
+
+        removeFavoriteTopic(documentData.id, id);
+    }
+
+    const getTopicDocumentData = async (topicId: string): Promise<void> => {
+
+        const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
+            method: "GET"
+        });
+
+        if (!response.ok) throw new Error("Failed to fetch document by topic id")
+
+        const { documentId, label } = await response.json();
+
+        setDocumentData({ id: documentId, label });
+    }
+
+    if (isFavorite) {
+        return (
+            <Button variant="ghost" size="icon" onClick={() => removeFavorite(id)}>
+                <FaStar className="!h-5 !w-5 color-primary" />
+            </Button>
+        );
+    }
+
+    return (
+        <Button variant="ghost" size="icon" onClick={() => addFavorite(id)}>
+            <FaRegStar className="!h-5 !w-5" />
+        </Button>
+    )
+}

package/src/file-icon.tsx

@@ -0,0 +1,9 @@
+import { PiFilePdf } from "react-icons/pi";
+
+export const FileIcon = ({ extension }: { extension: string }) => {
+    const IconsToFileExtension: Record<string, React.ReactNode> = {
+        "application/pdf": <PiFilePdf className="!h-5 !w-5 text-primary" />,
+    };
+
+    return IconsToFileExtension[extension] || null;
+};

package/src/info/info-card.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import React, { FC } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
 import { useTranslations } from "next-intl";

package/src/info/info-table.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { articleInfoItemType, DocumentsType } from "@c-rex/types";
+import { articleInfoItemType, DocumentsType, Favorite } from "@c-rex/types";
 import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
 import {
     Table,
@@ -16,22 +16,20 @@ import {
     DropdownMenuTrigger,
 } from "@c-rex/ui/dropdown-menu";
 import { CloudDownload, Eye } from "lucide-react";
-
-import { FaFilePdf } from "react-icons/fa6";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
 import { Flag } from "../flag";
+import { Button } from "@c-rex/ui/button";
 import { useLanguageStore } from "../stores/language-store";
+import { FileIcon } from "../file-icon";
 
 type Props = {
     title: string;
     files?: DocumentsType
     items: articleInfoItemType[]
     availableVersions?: AvailableVersionsInterface[]
+    markersList?: Favorite[]
 }
 
-const IconsToFileExtension: Record<string, React.ReactNode> = {
-    "application/pdf": <FaFilePdf className="h-6 w-6" />,
-};
 
 export const InfoTable: FC<Props> = ({ title, items, files, availableVersions }) => {
     const t = useTranslations();
@@ -41,7 +39,9 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
     return (
         <Card className="p-0 !pt-4">
             <CardHeader>
-                <CardTitle className="text-lg">{title}</CardTitle>
+                <CardTitle className="text-lg flex justify-between">
+                    {title}
+                </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3 !p-0">
                 <Table>
@@ -63,6 +63,25 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
                             </TableRow>
                         ))}
 
+                        {availableVersions && (
+                            <TableRow className="min-h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    <h4 className="text-sm font-medium">{t("availableIn")}</h4>
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                                    {availableVersions.map((item) => {
+                                        return (
+                                            <span className="w-8 block border" key={item.shortId}>
+                                                <a href={item.link} title={item.lang}>
+                                                    <Flag countryCode={item.country} />
+                                                </a>
+                                            </span>
+                                        )
+                                    })}
+                                </TableCell>
+                            </TableRow>
+                        )}
+
                         {files && (
                             <TableRow className="min-h-12">
                                 <TableCell className="font-medium w-28 pl-4">
@@ -75,18 +94,20 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
 
                                         return (
                                             <DropdownMenu key={index}>
-                                                <DropdownMenuTrigger className="mx-2">
-                                                    {IconsToFileExtension[item]}
+                                                <DropdownMenuTrigger className="mr-2" asChild >
+                                                    <Button variant="outline" size="icon" >
+                                                        <FileIcon extension={item} />
+                                                    </Button>
                                                 </DropdownMenuTrigger>
                                                 <DropdownMenuContent>
                                                     <DropdownMenuItem>
                                                         <a href={files[item].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                            <Eye className="mr-2 " /> Open
+                                                            <Eye className="mr-2" /> Open
                                                         </a>
                                                     </DropdownMenuItem>
                                                     <DropdownMenuItem>
                                                         <a href={files[item].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                            <CloudDownload className="mr-2 " /> Download
+                                                            <CloudDownload className="mr-2" /> Download
                                                         </a>
                                                     </DropdownMenuItem>
 
@@ -98,29 +119,9 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
                                 </TableCell>
                             </TableRow>
                         )}
-
-                        {availableVersions && (
-                            <TableRow className="min-h-12">
-                                <TableCell className="font-medium w-28 pl-4">
-                                    <h4 className="text-sm font-medium">{t("availableIn")}</h4>
-                                </TableCell>
-                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
-                                    {availableVersions.map((item) => {
-                                        return (
-                                            <span className="w-8 block border" key={item.shortId}>
-                                                <a href={item.link} title={item.lang}>
-                                                    <Flag countryCode={item.country} />
-                                                </a>
-                                            </span>
-                                        )
-                                    })}
-                                </TableCell>
-                            </TableRow>
-                        )}
-
                     </TableBody>
                 </Table>
             </CardContent>
-        </Card>
+        </Card >
     );
 }

package/src/navbar/navbar.tsx

@@ -2,10 +2,10 @@ import { FC } from "react";
 import Link from "next/link";
 import { SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
-import { getClientConfigs, getServerConfigs } from "@c-rex/utils/next-cookies";
 import { SettingsMenu } from "./settings";
 import { UserMenu } from "./user-menu";
 import { SearchInput } from "./search-input";
+import { CrexSDK } from "@c-rex/core/sdk";
 
 interface NavBarProps {
     title: string;
@@ -14,9 +14,9 @@ interface NavBarProps {
 }
 
 export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter }) => {
-    const clientConfigs = await getClientConfigs();
-    const serverConfigs = await getServerConfigs();
-
+    const sdk = new CrexSDK();
+    const clientConfigs = sdk.getClientConfig();
+    const serverConfigs = sdk.getServerConfig();
 
     let session: any;
     if (clientConfigs.OIDC.userEnabled) {

package/src/navbar/search-input.tsx

@@ -23,7 +23,7 @@ export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "N
             placedOn === "NAVBAR" ? "hidden lg:flex" : "sm:flex-none sm:w-60 md:w-72 lg:w-full lg:hidden flex",
             "flex-1 items-center px-3 border rounded-full h-8 c-rex-search-bar"
         )}>
-            <Search className="h-4 w-4 shrink-0 opacity-50" />
+            <Search className="shrink-0 opacity-50" />
 
             <AutoComplete
                 initialValue=""

package/src/render-article.tsx

@@ -61,7 +61,7 @@ export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
     }, [highlightedContent, registerContainer]);
 
     return (
-        <main ref={containerRef} lang={contentLang} className="pb-4">
+        <main ref={containerRef} lang={contentLang} className="pb-4 pr-4 min-h-[70vh]">
             {highlightedContent}
         </main>
     );

package/src/result-list.tsx

@@ -1,10 +1,12 @@
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import { DefaultPageInfo, informationUnitsResponseItem, TopicsResponseItem, } from "@c-rex/interfaces";
 import { Empty } from "./empty";
 import BlogView from './result-view/blog';
 import TableView from './result-view/table';
 import { Pagination } from "./pagination";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { ResultViewStyles } from "@c-rex/types";
+import TableWithImageView from "./result-view/table-with-images";
 
 interface ResultListProps {
     items: informationUnitsResponseItem[] | TopicsResponseItem[];
@@ -14,32 +16,28 @@ interface ResultListProps {
 export const ResultList: FC<ResultListProps> = ({ items, pagination }: ResultListProps) => {
     const { configs } = useAppConfig()
 
-    const isTableView = configs.results.resultViewStyle === "table";
+    const listComponent: Record<ResultViewStyles, ReactNode> = {
+        "cards": <BlogView items={items as TopicsResponseItem[]} />,
+        "table": <TableView items={items as informationUnitsResponseItem[]} />,
+        "table-with-images": <TableWithImageView items={items as informationUnitsResponseItem[]} />,
+    }
+
+    if (!(configs.results.resultViewStyle in listComponent)) {
+        throw new Error(`Unsupported result view style: ${configs.results.resultViewStyle}`);
+    }
+
+    if (items.length === 0) {
+        return <Empty />;
+    }
 
     return (
         <>
-            {
-                items.length === 0 ? (
-                    <Empty />
-                ) : (
-                    <>
-                        {isTableView ? (
-                            <TableView
-                                items={items as informationUnitsResponseItem[]}
-                            />
-                        ) : (
-                            <BlogView
-                                items={items as TopicsResponseItem[]}
-                            />
-                        )}
+            {listComponent[configs.results.resultViewStyle as ResultViewStyles]}
 
-                        <Pagination
-                            totalPages={pagination.pageCount}
-                            currentPage={pagination.pageNumber}
-                        />
-                    </>
-                )
-            }
+            <Pagination
+                totalPages={pagination.pageCount}
+                currentPage={pagination.pageNumber}
+            />
         </>
     );
 };

package/src/result-view/blog.tsx

@@ -50,6 +50,7 @@ const BlogView: FC<BlogViewProps> = ({ items }) => {
                                 style={{
                                     width: "100%", height: index == 0 ? "auto" : "190px"
                                 }}
+                                loading={index == 0 ? "eager" : "lazy"}
                                 onLoad={() => setLoading(false)}
                                 onError={() => setLoading(false)}
                             />

package/src/result-view/table-with-images.tsx

@@ -0,0 +1,199 @@
+import { FC, useEffect, useState } from "react";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
+import { CloudDownload, Eye, FileStack, ImageOff } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@c-rex/ui/dropdown-menu";
+import { cn } from "@c-rex/utils";
+import { useQueryState } from "nuqs";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { FavoriteButton } from "../favorite-button";
+import { Button } from "@c-rex/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { Favorite, ResultTypes } from "@c-rex/types";
+import { FileIcon } from "../file-icon";
+import { useFavoritesStore } from "../stores/favorites-store";
+import { BookmarkButton } from "../bookmark-button";
+import { FaRegBookmark } from "react-icons/fa6";
+
+interface TableWithImageViewProps {
+    items: informationUnitsResponseItem[];
+}
+
+const Image: FC<{ id: string }> = ({ id }) => {
+    const [imageUrl, setImageUrl] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        let ignore = false;
+
+        async function fetchImage() {
+            try {
+                const res = await fetch(`https://picsum.photos/v2/list?limit=1`);
+
+                {/*
+                    TODO: talvez vamos receber mais de uma imagem, mas por enquanto pegamos apenas a primeira na lista
+                */}
+
+
+                const data = await res.json();
+                if (!ignore) {
+                    setImageUrl(data[0].download_url);
+                    setLoading(false);
+                }
+            } catch (err) {
+                setError(true);
+                console.error("Error loading image", err);
+            }
+        }
+
+        fetchImage();
+        return () => {
+            ignore = true
+        };
+    }, [id]);
+
+    if (error) {
+        return <ImageOff className="h-16 w-16 text-muted" />;
+    }
+
+    return (
+        <div className="h-16 w-16 flex items-center">
+            {loading ? (
+                <Skeleton className="h-16 w-16" />
+            ) : (
+                <img
+                    src={imageUrl}
+                    loading="lazy"
+                    onLoad={() => setLoading(false)}
+                />
+            )}
+        </div>
+    );
+}
+
+const TableWithImageView: FC<TableWithImageViewProps> = ({ items }) => {
+    const [query] = useQueryState("search");
+
+    const favoritesDocuments = useFavoritesStore((state) => state.documents);
+
+    return (
+        <div className="mb-6">
+            {items.map((item, index) => {
+                const isFavoriteDocument = Object.keys(favoritesDocuments).some((docId) => docId === item.shortId);
+                let topicList: Favorite[] = []
+
+                if (isFavoriteDocument && favoritesDocuments[item.shortId]) {
+                    topicList = favoritesDocuments[item.shortId]?.topics || []
+                }
+                return (
+                    <div
+                        key={index}
+                        className={cn(
+                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded mb-2",
+                            `c-rex-result-item c-rex-result-${item.type.toLowerCase()}`,
+                            item.disabled && "c-rex-result-item-disabled",
+                        )}
+                    >
+
+                        <div className="h-16 w-16 flex items-center">
+                            <Image id={item.shortId} />
+                        </div>
+
+                        <div className="flex-1 p-2 flex flex-col">
+                            <span className=" text-sm text-muted-foreground">
+                                {item.language.split("-")[0]?.toUpperCase()}
+                            </span>
+
+                            <span className="text-lg font-medium">
+                                {item.disabled ? (
+                                    item.title
+                                ) : (
+                                    <a className="hover:underline" href={`${item.link}?q=${query}`}>{item.title}</a>
+                                )}
+                            </span>
+
+                            <span className="text-sm">
+                                {item.type}
+                            </span>
+                            <span className="text-sm">
+                                short description here {/*
+                            TODO: get abstract if has the value key on it. Same behavior on class props
+
+                            abstract and description are not being returned by the API yet
+                            */}
+                            </span>
+                        </div>
+
+                        <div className="flex flex-col p-2 ml-auto justify-center">
+                            <span className="text-end text-sm text-muted-foreground mb-2">
+                                {item.revision}
+                            </span>
+                            <div className="flex gap-2">
+                                {Object.keys(item.files).map((fileKey, index) => {
+                                    if (!item.files[fileKey]) return null
+
+                                    return (
+                                        <DropdownMenu key={index}>
+                                            <DropdownMenuTrigger>
+                                                <Button variant="ghost" size="icon">
+                                                    <FileIcon extension={fileKey} />
+                                                </Button>
+                                            </DropdownMenuTrigger>
+                                            <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*/}
+                                                    </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*/}
+                                                    </a>
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    )
+                                })}
+
+                                {(topicList && topicList.length > 0) && (
+                                    <BookmarkButton
+                                        markersList={topicList.filter(item => item.label.length > 0)}
+                                        trigger={
+                                            <Button variant="ghost" size="icon" className="relative">
+                                                <FaRegBookmark className="!w-5 color-primary" />
+                                                <span
+                                                    className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
+                                                >
+                                                    {topicList.length}
+                                                </span>
+                                            </Button>
+                                        }
+                                    />
+                                )}
+
+                                <FavoriteButton id={item.shortId} type={item.type as ResultTypes} label={item.title} />
+
+                                {item.multipleVersions.length > 1 && (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button variant="ghost" size="icon">
+                                                <FileStack />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+
+                                            Available in: {item.multipleVersions.join(", ")}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )}
+                            </div>
+
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+    );
+};
+
+export default TableWithImageView;

package/src/result-view/table.tsx

@@ -79,12 +79,12 @@ const TableView: FC<TableViewProps> = ({ items }) => {
                                             <DropdownMenuContent>
                                                 <DropdownMenuItem>
                                                     <a href={item.files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <Eye className="mr-2 " /> Open
+                                                        <Eye className="mr-2" /> Open {/*TODO: use i18n functions*/}
                                                     </a>
                                                 </DropdownMenuItem>
                                                 <DropdownMenuItem>
                                                     <a href={item.files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <CloudDownload className="mr-2 " /> Download
+                                                        <CloudDownload className="mr-2" /> Download {/*TODO: use i18n functions*/}
                                                     </a>
                                                 </DropdownMenuItem>
                                             </DropdownMenuContent>

package/src/right-sidebar.tsx

@@ -6,9 +6,10 @@ import {
     SidebarContent,
 } from "@c-rex/ui/sidebar";
 import { useTranslations } from "next-intl";
-import { articleInfoItemType, DocumentsType } from "@c-rex/types";
+import { articleInfoItemType, DocumentsType, Favorite } from "@c-rex/types";
 import { InfoTable } from "./info/info-table";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
+import { useFavoritesStore } from "./stores/favorites-store";
 
 interface SidebarProps extends ComponentProps<typeof Sidebar> {
     articleInfo: articleInfoItemType[],
@@ -16,11 +17,26 @@ interface SidebarProps extends ComponentProps<typeof Sidebar> {
     files: DocumentsType,
     articleAvailableVersions: AvailableVersionsInterface[],
     documentAvailableVersions: AvailableVersionsInterface[]
-
+    documentId: string
 }
 
-export function RightSidebar({ articleInfo, documentInfo, files, articleAvailableVersions, documentAvailableVersions, ...props }: SidebarProps) {
+export function RightSidebar({
+    articleInfo,
+    documentInfo,
+    files,
+    articleAvailableVersions,
+    documentAvailableVersions,
+    documentId,
+    ...props
+}: SidebarProps) {
     const t = useTranslations();
+    const favoritesDocuments = useFavoritesStore((state) => state.documents);
+    const isFavoriteDocument = Object.keys(favoritesDocuments).some((docId) => docId === documentId);
+    let topicList: Favorite[] = []
+
+    if (isFavoriteDocument && favoritesDocuments[documentId]) {
+        topicList = favoritesDocuments[documentId].topics
+    }
 
     return (
         <Sidebar {...props}>
@@ -34,6 +50,7 @@ export function RightSidebar({ articleInfo, documentInfo, files, articleAvailabl
                                 items={documentInfo}
                                 files={files}
                                 availableVersions={documentAvailableVersions}
+                                markersList={isFavoriteDocument ? topicList : []}
                             />
                         )}
 

package/src/stores/favorites-store.ts

@@ -0,0 +1,82 @@
+import { Favorite } from "@c-rex/types";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+
+type FavoritesStore = {
+    favorites: Favorite[];
+    documents: Record<string, { topics: Favorite[], label?: string }>;
+    favoriteTopic: (documentId: string, id: string, label: string, color: string) => void;
+    unfavoriteTopic: (documentId: string, id: string) => void;
+    favoriteDocument: (id: string, label: string) => void;
+    unfavoriteDocument: (id: string) => void;
+};
+
+export const useFavoritesStore = create<FavoritesStore>()(
+    persist((set) => ({
+        documents: {},
+        favorites: [],
+        favoriteTopic: (documentId: string, id: string, label: string, color: string) =>
+            set((state) => ({
+                documents: favoriteTopic(state.documents, documentId, id, label, color),
+                favorites: [...state.favorites, { id, label, color }, { id: documentId, label: "", color: "" }],
+            })),
+        unfavoriteTopic: (documentId: string, id: string) =>
+            set((state) => ({
+                documents: unfavoriteTopic(state.documents, documentId, id),
+                favorites: state.favorites.filter((topic) => topic.id !== id),
+            })),
+        favoriteDocument: (id: string, label: string) =>
+            set((state) => {
+                const documentsCopy = { ...state.documents };
+                if (documentsCopy[id]) {
+                    return state;
+                }
+
+                return {
+                    documents: {
+                        ...state.documents,
+                        [id]: { topics: [], label },
+                    },
+                    favorites: [...state.favorites, { id, label, color: "" }],
+                }
+            }),
+        unfavoriteDocument: (id: string) =>
+            set((state) => {
+                const documentsCopy = { ...state.documents };
+                delete documentsCopy[id];
+                return { documents: documentsCopy };
+            }),
+    }), {
+        name: "c-rex-favorites",
+    })
+);
+
+
+const favoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string, label: string, color: string): Record<string, { topics: Favorite[] }> => {
+
+    const documentsCopy = { ...documents };
+    const notFound = documents[documentId] == undefined;
+
+    if (notFound) {
+        documentsCopy[documentId] = { topics: [] };
+    }
+
+    documentsCopy[documentId]!.topics.push({ id, label, color });
+
+    return documentsCopy
+};
+
+const unfavoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string): Record<string, { topics: Favorite[] }> => {
+
+    const documentsCopy = { ...documents };
+    const notFound = documents[documentId] == undefined;
+
+    if (notFound) {
+        return documentsCopy;
+    }
+
+    documentsCopy[documentId]!.topics = documentsCopy[documentId]!.topics.filter(topic => topic.id !== id);
+
+    return documentsCopy
+}

package/src/stores/language-store.ts

@@ -2,6 +2,7 @@ import { UI_LANG_KEY } from "@c-rex/constants";
 import { AVAILABLE_CONTENT_LANG_KEY } from "@c-rex/constants";
 import { CONTENT_LANG_KEY } from "@c-rex/constants";
 import { LanguageAndCountries } from "@c-rex/interfaces";
+import { getCookie, setCookie } from "@c-rex/utils";
 import { create } from "zustand";
 
 type LanguageStoreType = {
@@ -14,33 +15,21 @@ type LanguageStoreType = {
     hydrate: () => void;
 };
 
-function setCookie(name: string, value: string, days = 365) {
-    const expires = new Date(Date.now() + days * 864e5).toUTCString();
-    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
-}
-
-function getCookie(name: string): string {
-    return document.cookie
-        .split('; ')
-        .find(row => row.startsWith(name + '='))
-        ?.split('=')[1] || '';
-}
-
 export const useLanguageStore = create<LanguageStoreType>((set) => ({
     contentLang: "",
     uiLang: "",
     availableLanguages: [],
     setContentLang: (v) => {
         set({ contentLang: v });
-        setCookie(CONTENT_LANG_KEY, v);
+        setCookie(CONTENT_LANG_KEY, v, 7);
     },
     setUiLang: (v) => {
         set({ uiLang: v });
-        setCookie(UI_LANG_KEY, v);
+        setCookie(UI_LANG_KEY, v, 7);
     },
     setAvailableLanguages: (list) => {
         set({ availableLanguages: list });
-        setCookie(AVAILABLE_CONTENT_LANG_KEY, JSON.stringify(list));
+        setCookie(AVAILABLE_CONTENT_LANG_KEY, JSON.stringify(list), 7);
     },
     hydrate: () => {
         set({

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

@@ -12,7 +12,7 @@ type SearchSettingsStore = {
 
 export const useSearchSettingsStore = create<SearchSettingsStore>()(
     persist((set) => ({
-        language: [],
+        language: [] as string[],
         wildcard: "BOTH",
         operator: "OR",
         like: false,

package/src/result-view/dropdown-menu.tsx

@@ -1,39 +0,0 @@
-import React, { FC, JSX } from "react";
-import {
-    DropdownMenu as DropdownMenuComp,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@c-rex/ui/dropdown-menu";
-
-interface DropdownMenuProps {
-    items: {
-        format: string;
-        link: string;
-    }[];
-    icon: JSX.Element;
-}
-
-export const DropdownMenu: FC<DropdownMenuProps> = ({
-    items, icon
-}) => {
-
-    return (
-        <DropdownMenuComp>
-            <DropdownMenuTrigger className="mx-2">
-                {icon}
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-                {items.map((file, index) => {
-                    return (
-                        <DropdownMenuItem key={index}>
-                            <a href={file.link} target="_blank" rel="noreferrer">
-                                {file.format}
-                            </a>
-                        </DropdownMenuItem>
-                    )
-                })}
-            </DropdownMenuContent>
-        </DropdownMenuComp>
-    );
-};