@c-rex/components 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "files": [
     "src"
   ],
@@ -100,6 +100,14 @@
     "./loading": {
       "types": "./src/loading.tsx",
       "import": "./src/loading.tsx"
+    },
+    "./language-store": {
+      "types": "./src/stores/language-store.ts",
+      "import": "./src/stores/language-store.ts"
+    },
+    "./highlight-store": {
+      "types": "./src/stores/highlight-store.ts",
+      "import": "./src/stores/highlight-store.ts"
     }
   },
   "scripts": {
@@ -140,6 +148,7 @@
     "@c-rex/ui": "*",
     "@c-rex/utils": "*",
     "country-flag-icons": "^1.5.19",
+    "html-react-parser": "^5.2.6",
     "lucide-react": "^0.511.0",
     "next": "^14",
     "next-intl": "^4.1.0",
@@ -147,7 +156,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.8"
   },
   "eslintConfig": {
     "extends": [

package/src/autocomplete.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { Input } from "@c-rex/ui/input";
 import { call, generateQueryParams } from "@c-rex/utils";
-import { WILD_CARD_OPTIONS } from "@c-rex/constants";
 import { useTranslations } from "next-intl";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { QueryParams } from "@c-rex/types";
+import { useSearchSettingsStore } from "./stores/search-settings-store";
+import { useLanguageStore } from "./stores/language-store";
 
 type Props = {
     initialValue: string;
@@ -15,7 +16,9 @@ type Props = {
 export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props) => {
     const t = useTranslations();
     const containerRef = useRef<HTMLDivElement>(null);
-    const { articleLang, contentLang, packageID } = useAppConfig()
+    const contentLang = useLanguageStore.getState().contentLang;
+
+    const { articleLang, packageID } = useAppConfig()
 
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
@@ -29,11 +32,13 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
     const onSelect = (value: string) => {
         const params: QueryParams[] = [
             { key: "search", value: value },
-            { key: "operator", value: "OR" },
             { key: "page", value: "1" },
-            { key: "language", value: articleLang || contentLang as string },
-            { key: "wildcard", value: WILD_CARD_OPTIONS.BOTH },
-            { key: "like", value: "false" },
+            { key: "operator", value: useSearchSettingsStore.getState().operator },
+
+            { key: "language", value: useLanguageStore.getState().contentLang },
+
+            { key: "wildcard", value: useSearchSettingsStore.getState().wildcard },
+            { key: "like", value: useSearchSettingsStore.getState().like.toString() },
         ]
 
         if (searchByPackage && packageID !== null) {
@@ -45,7 +50,6 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
         window.location.href = `${window.location.origin}/?${aux}`
     };
 
-
     useEffect(() => {
         setQuery(initialValue);
     }, [initialValue]);
@@ -101,7 +105,7 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
             />
 
             {open && (
-                <ul className="absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                <ul className="suggestions-list absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                     {loading ? (
                         <li>
                             <div className="flex items-center justify-center py-4">

package/src/check-article-lang.tsx

@@ -5,6 +5,7 @@ import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
 import { toast } from "sonner"
 import { useTranslations } from "next-intl"
+import { useLanguageStore } from "./stores/language-store";
 
 interface Props {
     availableVersions: AvailableVersionsInterface[]
@@ -12,10 +13,11 @@ interface Props {
 
 export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
     const t = useTranslations();
-    const { contentLang, setAvailableVersions } = useAppConfig()
+    const { setAvailableVersions } = useAppConfig()
 
     useEffect(() => {
         setAvailableVersions(availableVersions)
+        const contentLang = useLanguageStore.getState().contentLang;
 
         const activeArticle = availableVersions.filter((item) => item.active)[0]
         if (activeArticle == undefined || activeArticle.lang == contentLang) return

package/src/dialog-filter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react"
+import React, { FC, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
     Dialog,
@@ -14,11 +14,13 @@ import { Checkbox } from "@c-rex/ui/checkbox"
 import { Label } from "@c-rex/ui/label"
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs"
 import { useTranslations } from "next-intl"
-import { useAppConfig } from "@c-rex/contexts/config-provider"
 import { LanguageAndCountries } from "@c-rex/interfaces"
 import { WILD_CARD_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants"
 import { Switch } from "@c-rex/ui/switch"
 import { useSearchContext } from "@c-rex/contexts/search"
+import { useSearchSettingsStore } from "./stores/search-settings-store"
+import { OperatorType, WildCardType } from "@c-rex/types"
+import { useLanguageStore } from "./stores/language-store"
 
 interface DialogFilterProps {
     trigger: React.ReactNode;
@@ -32,35 +34,40 @@ interface Languages {
 export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const t = useTranslations("filter");
     const { setLoading } = useSearchContext();
-    const { availableLanguagesAndCountries } = useAppConfig()
+
+    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 [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 checked = savedLanguages.includes(item.value)
+
+            return {
+                lang: item.lang,
+                value: item.value,
+                checked,
+            }
+        })
+    );
+
     const [params, setParams] = useQueryStates({
+        search: parseAsString,
         language: parseAsString,
         page: parseAsInteger,
         wildcard: parseAsString,
         operator: parseAsString,
-        filter: parseAsString,
         like: parseAsBoolean,
     }, {
         history: 'push',
         shallow: false,
     });
 
-    const startSelectedLanguages = params.language?.split(',') || []
-
-    const [operator, setOperator] = useState<string>(params.operator || OPERATOR_OPTIONS.OR);
-    const [like, setLike] = useState<boolean>(params.like || false);
-    const [wildcard, setWildcard] = useState<string>(params.wildcard || "");
-    const [disabled, setDisabled] = useState<boolean>(false)
-    const [languages, setLanguages] = useState<Languages[]>(availableLanguagesAndCountries.map((item: LanguageAndCountries) => {
-        const checked = startSelectedLanguages.includes(item.value)
-
-        return {
-            lang: item.lang,
-            value: item.value,
-            checked,
-        }
-    }));
-
     const onChangeCheckbox = (item: Languages) => {
         const newLangList = languages.filter((lang) => lang.lang !== item.lang)
 
@@ -70,42 +77,29 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     }
 
     const apply = () => {
-        setLoading(true);
+        const selectedLanguages = languages.filter((item) => item.checked).map((item) => item.value)
 
-        const selectedLanguages = languages
-            .filter((item: any) => item.checked)
-            .map((item: any) => item.value)
-            .join(',')
+        useSearchSettingsStore.getState().updatePreferences({
+            like,
+            operator: operator as OperatorType,
+            wildcard: wildcard as WildCardType,
+            language: selectedLanguages,
+        });
+
+        if (params.search == null) {
+            return
+        }
 
+        setLoading(true);
         setParams({
             page: 1,
-            language: selectedLanguages,
+            language: selectedLanguages.join(','),
             operator: operator,
             wildcard: wildcard,
             like: like,
-            filter: null,
         });
     }
 
-    useEffect(() => {
-        setOperator(params.operator || OPERATOR_OPTIONS.OR);
-        setLike(params.like || false);
-        setWildcard(params.wildcard || "");
-        setLanguages(availableLanguagesAndCountries.map((item: LanguageAndCountries) => {
-            const checked = startSelectedLanguages.includes(item.value)
-
-            return {
-                lang: item.lang,
-                value: item.value,
-                checked,
-            }
-        }));
-    }, [params])
-
-    useEffect(() => {
-        setDisabled(languages.every((item) => !item.checked));
-    }, [languages])
-
     return (
         <Dialog>
             <DialogTrigger asChild>
@@ -190,7 +184,9 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
 
                 <DialogFooter className="pt-2">
                     <DialogClose asChild>
-                        <Button onClick={apply} disabled={disabled}>{t("apply")}</Button>
+                        <Button onClick={apply}>
+                            {params.search && params.search.length > 0 ? t("applyAndSearch") : t("apply")}
+                        </Button>
                     </DialogClose>
                 </DialogFooter>
             </DialogContent>

package/src/info/info-card.tsx

@@ -1,9 +1,8 @@
+import React, { FC } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
-import { getFromCookieString } from "@c-rex/utils";
 import { useTranslations } from "next-intl";
-import React, { FC } from "react";
 import { filteredItems, renderValue } from "./shared";
-import { UI_LANG_KEY } from "@c-rex/constants";
+import { useLanguageStore } from "../stores/language-store";
 
 type Props = {
     title: string;
@@ -15,7 +14,7 @@ type Props = {
 }
 export const InfoCard: FC<Props> = ({ title, items }) => {
     const t = useTranslations();
-    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY)
+    const uiLang = useLanguageStore(state => state.uiLang);
     const newItems = filteredItems(items)
 
     return (

package/src/info/info-table.tsx

@@ -8,8 +8,6 @@ import {
     TableRow,
 } from "@c-rex/ui/table"
 import { useTranslations } from "next-intl";
-import { getFromCookieString } from "@c-rex/utils";
-import { UI_LANG_KEY } from "@c-rex/constants";
 import { filteredItems, renderValue } from "./shared";
 import {
     DropdownMenu,
@@ -22,6 +20,7 @@ import { CloudDownload, Eye } from "lucide-react";
 import { FaFilePdf } from "react-icons/fa6";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
 import { Flag } from "../flag";
+import { useLanguageStore } from "../stores/language-store";
 
 type Props = {
     title: string;
@@ -36,7 +35,7 @@ const IconsToFileExtension: Record<string, React.ReactNode> = {
 
 export const InfoTable: FC<Props> = ({ title, items, files, availableVersions }) => {
     const t = useTranslations();
-    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY)
+    const uiLang = useLanguageStore(state => state.uiLang);
     const newItems = filteredItems(items)
 
     return (
@@ -48,7 +47,7 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
                 <Table>
                     <TableBody>
                         {newItems.map((item, index) => (
-                            <TableRow key={index} className="h-12">
+                            <TableRow key={index} className="min-h-12">
                                 <TableCell className="font-medium w-28 pl-4">
                                     {item.link ? (
                                         <a href={item.link} className="underline">
@@ -58,18 +57,18 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
                                         <h4 className="text-sm font-medium">{t(item.label)}</h4>
                                     )}
                                 </TableCell>
-                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 h-12">
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
                                     {renderValue(item, uiLang)}
                                 </TableCell>
                             </TableRow>
                         ))}
 
                         {files && (
-                            <TableRow className="h-12">
+                            <TableRow className="min-h-12">
                                 <TableCell className="font-medium w-28 pl-4">
                                     <h4 className="text-sm font-medium">{t("files")}</h4>
                                 </TableCell>
-                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 h-12">
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
 
                                     {Object.keys(files).map((item, index) => {
                                         if (!files[item]) return null
@@ -101,11 +100,11 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
                         )}
 
                         {availableVersions && (
-                            <TableRow className="h-12">
+                            <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 h-12">
+                                <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}>

package/src/navbar/language-switcher/content-language-switch.tsx

@@ -2,19 +2,24 @@
 
 import { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { getFromCookieString, setCookie } from "@c-rex/utils";
-import { BLOG_TYPE_AND_LINK, CONTENT_LANG_KEY, DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { BLOG_TYPE_AND_LINK, DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner"
+import { useLanguageStore } from "../../stores/language-store";
+import { useSearchSettingsStore } from "../../stores/search-settings-store";
 
 export const ContentLanguageSwitch = () => {
     const t = useTranslations();
-    const contentLang = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
-    const { availableLanguagesAndCountries: aux, setContentLang, availableVersions } = useAppConfig()
+    const contentLang = useLanguageStore.getState().contentLang;
+    const setContentLang = useLanguageStore.getState().setContentLang;
+    const updatePreferences = useSearchSettingsStore.getState().updatePreferences;
+
+    const { availableVersions } = useAppConfig()
 
     const availableLanguagesAndCountries = () => {
+        const aux = useLanguageStore.getState().availableLanguages;
         let result = aux.map(item => ({ ...item, link: "#" }))
         if (availableVersions == null) return result
 
@@ -35,18 +40,22 @@ export const ContentLanguageSwitch = () => {
 
     const changeContentLanguage = (locale: string) => {
         startTransition(() => {
-            setCookie(CONTENT_LANG_KEY, locale)
             setContentLang(locale)
+            updatePreferences({ language: [locale] })
 
             if (queryLanguage != null) {
                 setContentLanguage(locale)
             }
 
             const currentPath = window.location.pathname;
-            const isTopicOrBlogOrDocument = currentPath.includes(TOPICS_TYPE_AND_LINK) || currentPath.includes(BLOG_TYPE_AND_LINK) || currentPath.includes(DOCUMENTS_TYPE_AND_LINK)
+            const isTopicOrBlogOrDocument = (
+                currentPath.includes(TOPICS_TYPE_AND_LINK) ||
+                currentPath.includes(BLOG_TYPE_AND_LINK) ||
+                currentPath.includes(DOCUMENTS_TYPE_AND_LINK)
+            )
 
             if (!isTopicOrBlogOrDocument) {
-                window.location.reload();
+                setTimeout(() => window.location.reload(), 5);
                 return;
             }
 

package/src/navbar/language-switcher/ui-language-switch.tsx

@@ -2,13 +2,13 @@
 
 import React, { FC, startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
-import { getCountryCodeByLang, getFromCookieString, setCookie } from "@c-rex/utils";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { UI_LANG_OPTIONS } from "@c-rex/constants";
+import { getCountryCodeByLang } from "@c-rex/utils";
+import { useLanguageStore } from "../../stores/language-store";
 
 export const UILanguageSwitch: FC = () => {
-    const { setUiLang } = useAppConfig()
-    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY).toLowerCase()
+    const uiLang = useLanguageStore.getState().uiLang.toLowerCase();
+    const setUiLang = useLanguageStore.getState().setUiLang;
     const UILanguages = UI_LANG_OPTIONS.map((lang) => {
         const langCode = lang.split("-")[0] as string;
         return {
@@ -20,7 +20,6 @@ export const UILanguageSwitch: FC = () => {
 
     const setUILanguage = (locale: string) => {
         startTransition(() => {
-            setCookie(UI_LANG_KEY, locale)
             setUiLang(locale)
 
             window.location.reload()

package/src/navbar/search-input.tsx

@@ -21,7 +21,7 @@ export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "N
     return (
         <div className={cn(
             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"
+            "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" />
 

package/src/render-article.tsx

@@ -1,16 +1,68 @@
-import React from "react";
+"use client";
+
+import { useMemo, useRef, useEffect } from "react";
+import parse from "html-react-parser";
+import { useQueryState } from "nuqs";
+import { useHighlight } from "@c-rex/contexts/highlight-provider";
+import { useHighlightStore } from "./stores/highlight-store";
 
 type Props = {
-    htmlContent: string,
-    contentLang: string
-}
+    htmlContent: string;
+    contentLang?: string;
+};
 
 export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
+    const [query] = useQueryState("q");
+    const containerRef = useRef<HTMLElement | null>(null);
+    const enableHighlight = useHighlightStore((state) => state.enable);
+    const { registerContainer } = useHighlight();
+
+    const highlightedContent = useMemo(() => {
+        if (!enableHighlight) return parse(htmlContent);
+        if (!query) return parse(htmlContent);
+
+        const terms = query
+            .split(/[+ ]/)
+            .map((t) => t.trim())
+            .filter(Boolean);
+
+        if (terms.length === 0) return parse(htmlContent);
+
+        const escaped = terms.map((t) =>
+            t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+        );
+        const regex = new RegExp(`(${escaped.join("|")})`, "gi");
+
+        return parse(htmlContent, {
+            replace: (domNode: any) => {
+                if (domNode.type === "text") {
+                    const parts = domNode.data.split(regex);
+                    if (parts.length === 1) return;
+                    return (
+                        <>
+                            {parts.map((part: any, i: any) =>
+                                regex.test(part) ? (
+                                    <mark key={i} className="bg-yellow-200">
+                                        {part}
+                                    </mark>
+                                ) : (
+                                    part
+                                )
+                            )}
+                        </>
+                    );
+                }
+            },
+        });
+    }, [htmlContent, query, enableHighlight]);
+
+    useEffect(() => {
+        registerContainer(containerRef.current);
+    }, [highlightedContent, registerContainer]);
+
     return (
-        <main
-            lang={contentLang}
-            className="pb-4"
-            dangerouslySetInnerHTML={{ __html: htmlContent }}
-        />
+        <main ref={containerRef} lang={contentLang} className="pb-4">
+            {highlightedContent}
+        </main>
     );
-}
+};

package/src/result-view/blog.tsx

@@ -8,6 +8,7 @@ import { Badge } from "@c-rex/ui/badge";
 import { useTranslations } from "next-intl";
 import { TopicsResponseItem } from "@c-rex/interfaces";
 import { Card } from "@c-rex/ui/card";
+import { useQueryState } from "nuqs";
 
 interface BlogViewProps {
     items: TopicsResponseItem[];
@@ -16,18 +17,20 @@ interface BlogViewProps {
 const BlogView: FC<BlogViewProps> = ({ items }) => {
     const t = useTranslations("results")
     const [isLoading, setLoading] = useState(true);
+    const [query] = useQueryState("search");
+
     return (
-        <div className="grid gap-6 grid-cols-2 ">
-            {items.map((item, index) => (
+        <div className="grid gap-6 grid-cols-2">
 
+            {items.map((item, index) => (
                 <Card
                     key={item.shortId}
                     className={cn(
-                        `blog-card relative p-0 c-rex_result_${item.type.toLowerCase()}`,
+                        `c-rex-result-item blog-card relative p-0 c-rex-result-${item.type.toLowerCase()}`,
                         index == 0
                             ? "col-span-2 grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
                             : "flex flex-col space-y-2",
-                        item.disabled ? "c-rex_result_item_disabled" : ""
+                        item.disabled ? "c-rex-result-item-disabled" : ""
                     )}
                 >
 
@@ -82,7 +85,7 @@ const BlogView: FC<BlogViewProps> = ({ items }) => {
                     </div>
 
                     {!item.disabled && (
-                        <Link href={item.link} className="absolute inset-0">
+                        <Link href={`${item.link}?q=${query}`} className="absolute inset-0">
                             <span className="sr-only">{t("viewArticle")}</span>
                         </Link>
                     )}

package/src/result-view/table.tsx

@@ -1,12 +1,13 @@
 import { FC } from "react";
 import { informationUnitsResponseItem } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
-import { Ban, CloudDownload, Eye } from "lucide-react";
+import { CloudDownload, Eye } 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 { Flag } from "../flag";
 import { Badge } from "@c-rex/ui/badge";
+import { useQueryState } from "nuqs";
 
 interface TableViewProps {
     items: informationUnitsResponseItem[];
@@ -19,6 +20,8 @@ const IconsToFileExtension: Record<string, React.ReactNode> = {
 
 const TableView: FC<TableViewProps> = ({ items }) => {
     const t = useTranslations("results")
+    const [query] = useQueryState("search");
+
 
     return (
         <div className="rounded-md border mb-6 last:border-b-0">
@@ -32,15 +35,15 @@ const TableView: FC<TableViewProps> = ({ items }) => {
             {items.map((item, index) => (
                 <div
                     className={cn(
-                        "min-h-12 c-rex_result_row flex flex-wrap items-center",
-                        `c-rex_result_${item.type.toLowerCase()}`,
-                        item.disabled && "c-rex_result_item_disabled",
+                        "min-h-12 c-rex-result-item flex flex-wrap items-center",
+                        `c-rex-result-${item.type.toLowerCase()}`,
+                        item.disabled && "c-rex-result-item-disabled",
                         "border-b"
                     )}
                     key={index}
                 >
                     <div className="w-4/5 md:w-2/5 p-2">
-                        {item.disabled ? (item.title) : (<a href={item.link}>{item.title}</a>)}
+                        {item.disabled ? (item.title) : (<a href={`${item.link}?q=${query}`}>{item.title}</a>)}
                     </div>
 
                     <div className="w-1/5 md:w-1/5 flex justify-center p-2">
@@ -59,7 +62,7 @@ const TableView: FC<TableViewProps> = ({ items }) => {
 
                     <div className="w-1/5 flex justify-center p-2">
                         {(item.disabled || (Object.keys(item.files).length === 0)) ? (
-                            <Ban />
+                            null // remove null rendering
                         ) : (
                             <>
                                 {Object.keys(item.files).map((fileKey, index) => {

package/src/right-sidebar.tsx

@@ -6,7 +6,6 @@ import {
     SidebarContent,
 } from "@c-rex/ui/sidebar";
 import { useTranslations } from "next-intl";
-import { cn } from "@c-rex/utils";
 import { articleInfoItemType, DocumentsType } from "@c-rex/types";
 import { InfoTable } from "./info/info-table";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
@@ -15,24 +14,26 @@ interface SidebarProps extends ComponentProps<typeof Sidebar> {
     articleInfo: articleInfoItemType[],
     documentInfo: articleInfoItemType[],
     files: DocumentsType,
-    availableVersions?: AvailableVersionsInterface[]
+    articleAvailableVersions: AvailableVersionsInterface[],
+    documentAvailableVersions: AvailableVersionsInterface[]
 
 }
 
-export function RightSidebar({ articleInfo, documentInfo, className, files, availableVersions, ...props }: SidebarProps) {
+export function RightSidebar({ articleInfo, documentInfo, files, articleAvailableVersions, documentAvailableVersions, ...props }: SidebarProps) {
     const t = useTranslations();
 
     return (
-        <Sidebar className={cn(className)} {...props} side="right">
-            <SidebarContent className="p-2">
+        <Sidebar {...props}>
+            <SidebarContent className="pt-4 pr-4 pb-10">
                 {(articleInfo.length > 0 || documentInfo.length > 0) && (
-                    <div className=" gap-4 flex flex-col">
+                    <>
 
                         {documentInfo.length > 0 && (
                             <InfoTable
                                 title={t("aboutDocument")}
                                 items={documentInfo}
                                 files={files}
+                                availableVersions={documentAvailableVersions}
                             />
                         )}
 
@@ -40,11 +41,11 @@ export function RightSidebar({ articleInfo, documentInfo, className, files, avai
                             <InfoTable
                                 title={t("aboutArticle")}
                                 items={articleInfo}
-                                availableVersions={availableVersions}
+                                availableVersions={articleAvailableVersions}
                             />
                         )}
 
-                    </div>
+                    </>
                 )}
             </SidebarContent>
         </Sidebar>

package/src/search-modal.tsx

@@ -13,13 +13,13 @@ import {
 } from "@c-rex/ui/dialog"
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs"
 import { useTranslations } from "next-intl"
-import { CONTENT_LANG_KEY, WILD_CARD_OPTIONS } from "@c-rex/constants"
-import { call, getFromCookieString } from "@c-rex/utils"
+import { WILD_CARD_OPTIONS } from "@c-rex/constants"
+import { call } from "@c-rex/utils"
 import { Input } from "@c-rex/ui/input"
-import { useAppConfig } from "@c-rex/contexts/config-provider"
 import { Label } from "@c-rex/ui/label"
 import { Checkbox } from "@c-rex/ui/checkbox"
 import { Toggle } from "@c-rex/ui/toggle"
+import { useLanguageStore } from "./stores/language-store"
 
 interface SearchModalProps {
     trigger: React.ReactNode;
@@ -27,11 +27,11 @@ interface SearchModalProps {
 
 export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
     const t = useTranslations("filter");
-    const { contentLang } = useAppConfig()
-
-    const [suggestions, setSuggestions] = useState<string[]>([]);
+    const contentLang = useLanguageStore(state => state.contentLang);
     const [value, setValue] = useState<string>("");
     const [loading, setLoading] = useState<boolean>(false);
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+
     const [params, setParams] = useQueryStates({
         language: parseAsString,
         page: parseAsInteger,
@@ -70,13 +70,11 @@ export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
 
 
     const apply = () => {
-        const cookie = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
-
         setParams({
             search: value,
             operator: "OR",
             page: 1,
-            language: cookie,
+            language: contentLang,
             wildcard: WILD_CARD_OPTIONS.BOTH,
             tags: false,
             like: false,
@@ -94,8 +92,6 @@ export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
                 </DialogHeader>
                 <Input value={value} autoFocus onChange={(e) => setValue(e.target.value)} />
 
-
-
                 {loading ? (
                     <div className="flex items-center justify-center py-4">
                         <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />

package/src/stores/highlight-store.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+type HighlightStoreType = {
+    enable: boolean;
+    toggleHighlight: (v: boolean) => void;
+};
+
+export const useHighlightStore = create<HighlightStoreType>()(
+    persist((set) => ({
+        enable: false,
+        toggleHighlight: (v) => set({ enable: v }),
+    }), {
+        name: "c-rex-highlight-settings",
+    })
+);

package/src/stores/language-store.ts

@@ -0,0 +1,59 @@
+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 { create } from "zustand";
+
+type LanguageStoreType = {
+    contentLang: string;
+    uiLang: string;
+    availableLanguages: LanguageAndCountries[];
+    setContentLang: (v: string) => void;
+    setUiLang: (v: string) => void;
+    setAvailableLanguages: (list: LanguageAndCountries[]) => void;
+    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);
+    },
+    setUiLang: (v) => {
+        set({ uiLang: v });
+        setCookie(UI_LANG_KEY, v);
+    },
+    setAvailableLanguages: (list) => {
+        set({ availableLanguages: list });
+        setCookie(AVAILABLE_CONTENT_LANG_KEY, JSON.stringify(list));
+    },
+    hydrate: () => {
+        set({
+            uiLang: getCookie(UI_LANG_KEY),
+            contentLang: getCookie(CONTENT_LANG_KEY),
+            availableLanguages: (() => {
+                const raw = getCookie(AVAILABLE_CONTENT_LANG_KEY);
+                try {
+                    return raw ? JSON.parse(raw) : [];
+                } catch {
+                    return [];
+                }
+            })(),
+        });
+    },
+}));

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

@@ -0,0 +1,23 @@
+import { OperatorType, WildCardType } from "@c-rex/types";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+type SearchSettingsStore = {
+    language: string[],
+    wildcard: WildCardType,
+    operator: OperatorType,
+    like: boolean,
+    updatePreferences: (settings: Partial<Omit<SearchSettingsStore, "updatePreferences">>) => void,
+}
+
+export const useSearchSettingsStore = create<SearchSettingsStore>()(
+    persist((set) => ({
+        language: [],
+        wildcard: "BOTH",
+        operator: "OR",
+        like: false,
+        updatePreferences: (settings) => set((state) => ({ ...state, ...settings })),
+    }), {
+        name: "c-rex-search-settings",
+    })
+);