@c-rex/components 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "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"

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/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/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,
@@ -15,25 +15,23 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from "@c-rex/ui/dropdown-menu";
-import { CloudDownload, Eye } from "lucide-react";
+import { Bookmark, 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 }) => {
+export const InfoTable: FC<Props> = ({ title, items, files, availableVersions, markersList }) => {
     const t = useTranslations();
     const uiLang = useLanguageStore(state => state.uiLang);
     const newItems = filteredItems(items)
@@ -75,18 +73,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>
 
@@ -118,9 +118,43 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
                             </TableRow>
                         )}
 
+                        {markersList && markersList.length > 0 && (
+                            <TableRow className="min-h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    <h4 className="text-sm font-medium">Bookmarks</h4>
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger className="mr-2" asChild>
+                                            <Button variant="outline" size="icon" className="relative">
+                                                <Bookmark 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>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent>
+
+                                            {markersList.map((marker) => (
+                                                <DropdownMenuItem key={marker.id}>
+                                                    <a href={`./${marker.id}`} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        {marker.label}
+                                                    </a>
+                                                </DropdownMenuItem>
+                                            ))}
+
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+
+                                </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 { getConfigs } from "@c-rex/utils/next-cookies";
 import { SettingsMenu } from "./settings";
 import { UserMenu } from "./user-menu";
 import { SearchInput } from "./search-input";
+import { getClientConfig, getServerConfig } from "@c-rex/core";
 
 interface NavBarProps {
     title: string;
@@ -14,10 +14,11 @@ interface NavBarProps {
 }
 
 export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter }) => {
-    const configs = await getConfigs();
+    const clientConfigs = getClientConfig();
+    const serverConfigs = getServerConfig();
 
     let session: any;
-    if (configs.OIDC.user.enabled) {
+    if (clientConfigs.OIDC.userEnabled) {
         session = await getServerSession();
     }
 
@@ -42,17 +43,17 @@ export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter
             <div className="flex items-center gap-2 absolute sm:static top-4 h-14 sm:h-min right-4">
                 <SearchInput showInput={showInput} showPkgFilter={showPkgFilter} placedOn="NAVBAR" />
 
-                {configs.OIDC.user.enabled && (
+                {clientConfigs.OIDC.userEnabled && (
                     <>
                         {session ? (
-                            <UserMenu session={session} />
+                            <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
                         ) : (
                             <SignInBtn />
                         )}
                     </>
                 )}
 
-                {configs.languageSwitcher.enabled && (
+                {clientConfigs.languageSwitcher.enabled && (
                     <SettingsMenu />
                 )}
             </div>

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/navbar/sign-in-out-btns.tsx

@@ -1,21 +1,35 @@
 "use client"
 
-import React from "react";
+import React, { useState } from "react";
 import { signIn } from "next-auth/react";
 import { Button } from "@c-rex/ui/button";
 import { useTranslations } from "next-intl";
 
 export const SignInBtn = () => {
     const t = useTranslations("user")
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+
+    const handleSignIn = () => {
+        setIsLoading(true);
+        signIn("crex", { prompt: "login", callbackUrl: "/" });
+    }
+
     return (
         <Button
             className="gap-2 px-5 md:flex"
             variant="default"
             size="sm"
             rounded="full"
-            onClick={() => signIn("crex", { callbackUrl: "/" })}
+            disabled={isLoading}
+            onClick={handleSignIn}
         >
-            <span>{t("signIn")}</span>
+            {isLoading ? (
+                <div className="flex items-center justify-center py-4">
+                    <div className="animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-t-gray-950" />
+                </div>
+            ) : (
+                <span>{t("signIn")}</span>
+            )}
         </Button>
     );
 }

package/src/navbar/user-menu.tsx

@@ -11,19 +11,17 @@ import {
 } from "@c-rex/ui/dropdown-menu"
 import { CircleUser } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { signOut } from "next-auth/react";
 
 
 interface Props {
     session: any
+    OIDCEndPoint: string
 }
 
-export const UserMenu: FC<Props> = ({ session }) => {
-    const t = useTranslations();
-    const { configs } = useAppConfig();
 
-    const endpoint = configs.OIDC.user.issuer.split("oidc/")[0];
+export const UserMenu: FC<Props> = ({ session, OIDCEndPoint }) => {
+    const t = useTranslations();
 
     return (
         <DropdownMenu>
@@ -38,18 +36,21 @@ export const UserMenu: FC<Props> = ({ session }) => {
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
                     <DropdownMenuItem>
-                        <a href={`${endpoint}oidc/Profile`} target="_blank" rel="noreferrer">
+                        <a href={`${OIDCEndPoint}oidc/Profile`} target="_blank" rel="noreferrer">
                             Profile settings
                         </a>
                     </DropdownMenuItem>
 
                     <DropdownMenuItem>
-                        <a href={`${endpoint}oidc/Profile/ChangePassword`} target="_blank" rel="noreferrer">
+                        <a href={`${OIDCEndPoint}oidc/Profile/ChangePassword`} target="_blank" rel="noreferrer">
                             Change password
                         </a>
                     </DropdownMenuItem>
 
-                    <DropdownMenuItem onClick={() => signOut()} className='text-red-500 focus:text-red-500'>
+                    <DropdownMenuItem
+                        onClick={() => signOut({ callbackUrl: "/api/auth/logout" })}
+                        className='text-red-500 focus:text-red-500'
+                    >
                         {t("user.signOut")}
                     </DropdownMenuItem>
                 </DropdownMenuGroup>

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 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]}
 
-                        <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,174 @@
+import { FC, useEffect, useState } from "react";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
+import { CloudDownload, Eye, FileStack, ImageOff } from "lucide-react";
+import { FaFilePdf } from "react-icons/fa6";
+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 { ResultTypes } from "@c-rex/types";
+
+interface TableWithImageViewProps {
+    items: informationUnitsResponseItem[];
+}
+
+const IconsToFileExtension: Record<string, React.ReactNode> = {
+    "application/pdf": <FaFilePdf className="h-5 w-5" />,
+};
+
+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, params }) => {
+    const [query] = useQueryState("search");
+
+    return (
+        <div className="mb-6">
+            {items.map((item, index) => (
+                <div
+                    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",
+                    )}
+                    key={index}
+                >
+
+                    <div className="h-16 w-16 flex items-center">
+                        <Image id={item.shortId} {...params} />
+                    </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" rounded="full">
+                                                {IconsToFileExtension[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>
+                                )
+                            })}
+
+                            <FavoriteButton id={item.shortId} type={item.type as ResultTypes} label={item.title} />
+
+                            {item.multipleVersions.length > 1 && (
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button variant="ghost" size="icon" rounded="full">
+                                            <FileStack /> {JSON.stringify(item.multipleVersions)}
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+
+                                        Available in: {item.multipleVersions}
+                                    </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/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>
-    );
-};