@c-rex/components 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "files": [
     "src"
   ],
@@ -72,6 +72,14 @@
     "./page-wrapper": {
       "types": "./src/page-wrapper.tsx",
       "import": "./src/page-wrapper.tsx"
+    },
+    "./search-modal": {
+      "types": "./src/search-modal.tsx",
+      "import": "./src/search-modal.tsx"
+    },
+    "./loading": {
+      "types": "./src/loading.tsx",
+      "import": "./src/loading.tsx"
     }
   },
   "scripts": {

package/src/autocomplete.tsx

@@ -1,122 +1,138 @@
-import React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Input } from "@c-rex/ui/input";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandList
-} from "@c-rex/ui/command";
-import {
-    Popover,
-    PopoverAnchor,
-    PopoverContent
-} from "@c-rex/ui/popover";
+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";
 
 type Props = {
     initialValue: string;
-    onSelect: (value: string) => void;
-    onSearch: (value: string) => Promise<string[]>;
+    embedded: boolean
+    searchByPackage: boolean
 };
 
-export const AutoComplete = ({
-    initialValue,
-    onSearch,
-    onSelect,
-}: Props) => {
-    const [query, setQuery] = useState(initialValue);
-    const [suggestions, setSuggestions] = useState<string[]>([]);
+export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props) => {
+    const t = useTranslations();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { articleLang, contentLang, packageID } = useAppConfig()
+
     const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState(initialValue);
     const [loading, setLoading] = useState(false);
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+
+    const onSearch = (value: string): Promise<string[]> => {
+        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: articleLang || contentLang });
+    }
+
+    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" },
+        ]
+
+        if (searchByPackage && packageID !== null) {
+            params.push({ key: "packages", value: packageID })
+        }
+
+        const aux = generateQueryParams(params)
+
+        window.location.href = `${window.location.origin}/?${aux}`
+    };
+
 
     useEffect(() => {
         setQuery(initialValue);
     }, [initialValue]);
 
     useEffect(() => {
-        const debounceFetch = setTimeout(() => {
-            if (query) {
-                setLoading(true)
-                onSearch(query).then(suggestions => {
-                    setSuggestions(suggestions)
-                    setLoading(false)
-                });
-            } else {
-                setSuggestions([]);
+        const handleClickOutside = (e: MouseEvent) => {
+            if (!containerRef.current?.contains(e.target as Node)) {
+                setOpen(false);
             }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    useEffect(() => {
+        if (query.length < 2) {
+            setSuggestions([]);
+            return;
+        }
+
+        const debounceFetch = setTimeout(() => {
+            setLoading(true)
+            onSearch(query).then(suggestions => {
+                setSuggestions(suggestions)
+                setLoading(false)
+            }).catch(() => {
+                setLoading(false)
+                setSuggestions([])
+            });
         }, 300);
 
         return () => clearTimeout(debounceFetch);
-    }, [onSearch, query]);
+    }, [query]);
 
     return (
-        <div className="flex items-center">
-            <Popover open={open} onOpenChange={setOpen}>
-                <Command shouldFilter={!loading} >
-                    <PopoverAnchor asChild>
-                        <CommandPrimitive.Input
-                            asChild
-                            value={query}
-                            onValueChange={setQuery}
-                            onKeyDown={(e) => setOpen(e.key !== "Escape")}
-                            onMouseDown={() => setOpen(false)}
-                            onFocus={() => setOpen(true)}
-                        >
-                            <Input value={query} />
-                        </CommandPrimitive.Input>
-                    </PopoverAnchor>
-
-                    <PopoverContent
-                        asChild
-                        onOpenAutoFocus={(e) => e.preventDefault()}
-                        onInteractOutside={(e) => {
-                            if (
-                                e.target instanceof Element &&
-                                e.target.hasAttribute("cmdk-input")
-                            ) {
-                                e.preventDefault();
-                            }
-                        }}
-                        className="w-[--radix-popover-trigger-width] p-0"
-                    >
-                        <CommandList
-                            key={query}
-                        >
-                            {loading ? (
-                                <CommandPrimitive.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" />
-                                    </div>
-                                </CommandPrimitive.Loading>
-                            ) : (
+        <div className="relative" ref={containerRef}>
+            <Input
+                variant={embedded ? "embedded" : undefined}
+                type="text"
+                placeholder={t("search")}
+                value={query}
+                onChange={(e) => {
+                    setQuery(e.target.value);
+                    setOpen(true);
+                }}
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        onSelect(query);
+                        setOpen(false)
+                    }
+                }}
+            />
+
+            {open && (
+                <ul className="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">
+                                <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />
+                            </div>
+                        </li>
+                    ) : (
+                        <>
+                            {suggestions.length > 0 ? (
                                 <>
-                                    {suggestions.length > 0 ? (
-                                        <CommandGroup>
-                                            {suggestions.map((option) => (
-                                                <CommandItem
-                                                    key={option}
-                                                    value={option}
-                                                    onMouseDown={(e) => e.preventDefault()}
-                                                    onSelect={(inputValue) => {
-                                                        setOpen(false);
-                                                        onSelect(inputValue);
-                                                    }}
-                                                >
-                                                    {option}
-                                                </CommandItem>
-                                            ))}
-                                        </CommandGroup>
-                                    ) : (
-                                        <CommandEmpty>No suggestions.</CommandEmpty>
-                                    )}
+                                    {suggestions.map((option, index) => (
+                                        <li
+                                            key={index}
+                                            className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
+                                            onClick={() => {
+                                                setQuery(option);
+                                                setOpen(false);
+                                                onSelect(`"${option}"`);
+                                            }}
+                                        >
+                                            {option}
+                                        </li>
+                                    ))}
                                 </>
+                            ) : (
+                                <li className="px-4 py-2">No suggestions.</li>
                             )}
-                        </CommandList>
-                    </PopoverContent>
-                </Command>
-            </Popover>
-        </div>
+                        </>
+                    )}
+                </ul>
+            )}
+        </div >
     );
 }

package/src/dialog-filter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import React, { FC, use, useEffect, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
     Dialog,
@@ -9,34 +9,50 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@c-rex/ui/dialog"
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@c-rex/ui/select"
 import { Checkbox } from "@c-rex/ui/checkbox"
 import { Label } from "@c-rex/ui/label"
-import { parseAsInteger, parseAsString, useQueryStates } from "nuqs"
+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"
 
 interface DialogFilterProps {
     trigger: React.ReactNode;
-    startSelectedLanguages: string[];
-    availableLanguages: any;
+    setLoading: (loading: boolean) => void;
+}
+interface Languages {
+    lang: string;
+    value: string;
+    checked: boolean;
 }
 
-export const DialogFilter: FC<DialogFilterProps> = ({
-    trigger,
-    startSelectedLanguages,
-    availableLanguages,
-}) => {
-    const t = useTranslations();
-
+export const DialogFilter: FC<DialogFilterProps> = ({ trigger, setLoading }) => {
+    const t = useTranslations("filter");
+    const { availableLanguagesAndCountries } = useAppConfig()
     const [params, setParams] = useQueryStates({
         language: parseAsString,
         page: parseAsInteger,
+        wildcard: parseAsString,
+        operator: parseAsString,
+        filter: parseAsString,
+        like: parseAsBoolean,
     }, {
         history: 'push',
         shallow: false,
     });
 
-    const [languages, setLanguages] = useState(availableLanguages.map((item: any) => {
+    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,
@@ -44,22 +60,51 @@ export const DialogFilter: FC<DialogFilterProps> = ({
         }
     }));
 
-    const onChange = (item: any) => {
-        const newLang = languages.filter((lang: any) => lang.lang !== item.lang)
-        setLanguages([...newLang, item].sort((a, b) => {
+    const onChangeCheckbox = (item: Languages) => {
+        const newLangList = languages.filter((lang) => lang.lang !== item.lang)
+
+        setLanguages([...newLangList, item].sort((a, b) => {
             return a.value.localeCompare(b.value)
         }))
     }
 
     const apply = () => {
-        const selectedLanguages = languages.filter((item: any) => item.checked).map((item: any) => item.value).join(',')
+        setLoading(true);
+
+        const selectedLanguages = languages
+            .filter((item: any) => item.checked)
+            .map((item: any) => item.value)
+            .join(',')
 
         setParams({
             page: 1,
             language: selectedLanguages,
+            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>
@@ -69,7 +114,8 @@ export const DialogFilter: FC<DialogFilterProps> = ({
                 <DialogHeader>
                     <DialogTitle>{t("filters")}</DialogTitle>
                 </DialogHeader>
-                <div className="grid grid-cols-2 items-center  py-4">
+
+                <div className="grid grid-cols-2 items-center pt-2">
                     <Label className="text-right">
                         {t("languages")}:
                     </Label>
@@ -81,7 +127,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({
                                         id={`available-languages${item.lang}`}
                                         className="mr-2"
                                         {...({ checked: item.checked })}
-                                        onCheckedChange={(checked: boolean) => onChange({
+                                        onCheckedChange={(checked: boolean) => onChangeCheckbox({
                                             ...item,
                                             checked: checked,
                                         })}
@@ -96,14 +142,57 @@ export const DialogFilter: FC<DialogFilterProps> = ({
                             )
                         })}
                     </div>
+                </div>
 
+                <div className="grid grid-cols-2 items-center pt-2">
+                    <Label className="text-right">
+                        {t("wildcard")}:
+                    </Label>
+                    <div className="flex items-center">
+                        <Select onValueChange={setWildcard} defaultValue={wildcard}>
+                            <SelectTrigger className="w-[180px]">
+                                <SelectValue placeholder="" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    {Object.keys(WILD_CARD_OPTIONS).map((item: string) => {
+                                        return (
+                                            <SelectItem key={item} value={item}>
+                                                {item}
+                                            </SelectItem>
+                                        )
+                                    })}
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
+                    </div>
                 </div>
-                <DialogFooter>
+
+                <div className="grid grid-cols-2 items-center pt-2">
+                    <Label htmlFor="operator" className="text-right">
+                        {t("operator")}:
+                    </Label>
+
+                    <Switch
+                        id="operator"
+                        onCheckedChange={(value) => setOperator(value ? OPERATOR_OPTIONS.AND : OPERATOR_OPTIONS.OR)}
+                        checked={operator == OPERATOR_OPTIONS.AND}
+                    />
+                </div>
+
+                <div className="grid grid-cols-2 items-center pt-2">
+                    <Label htmlFor="like" className="text-right">
+                        {t("like")}:
+                    </Label>
+                    <Switch id="like" onCheckedChange={(value) => setLike(value)} checked={like} />
+                </div>
+
+                <DialogFooter className="pt-2">
                     <DialogClose asChild>
-                        <Button onClick={apply}>{t("applyFilters")}</Button>
+                        <Button onClick={apply} disabled={disabled}>{t("apply")}</Button>
                     </DialogClose>
                 </DialogFooter>
             </DialogContent>
-        </Dialog>
+        </Dialog >
     )
 }

package/src/loading.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from "react";
+
+type LoadingProps = {
+    opacity: boolean;
+}
+export const Loading: FC<LoadingProps> = ({ opacity }) => {
+    return (
+        <div className={`fixed inset-0 z-[100000] w-full h-full flex justify-center items-center bg-white ${opacity ? "opacity-50" : ""}`}>
+            <div className="animate-spin rounded-full h-12 w-12 border-2 border-gray-300 border-t-gray-950"></div>
+        </div>
+    );
+};

package/src/navbar/navbar.tsx

@@ -1,31 +1,20 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { SignOut, SignInBtn } from "./sign-in-out-btns";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuLabel,
-    DropdownMenuPortal,
-    DropdownMenuSeparator,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuTrigger,
-} from "@c-rex/ui/dropdown-menu"
-import { Settings } from "lucide-react";
-import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
-import { getTranslations } from "next-intl/server";
-import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
+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";
 
 interface NavBarProps {
     title: string;
+    showInput: boolean;
+    showPkgFilter: boolean;
 }
 
-export const NavBar: FC<NavBarProps> = async ({ title }) => {
-    const t = await getTranslations();
+export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter }) => {
     const configs = await getConfigs();
 
     let session: any;
@@ -54,20 +43,12 @@ export const NavBar: FC<NavBarProps> = async ({ title }) => {
                 </div>
 
                 <div className="flex items-center space-x-3">
-                    {/*
-                    <div className="flex items-center px-3 border rounded-full h-8">
-                        <Search className="h-4 w-4 shrink-0 opacity-50" />
-                        <Input variant="embedded" placeholder="Search" />
-                    </div>
-                        */}
+                    <SearchInput showInput={showInput} showPkgFilter={showPkgFilter} />
 
                     {configs.OIDC.user.enabled && (
                         <>
                             {session ? (
-                                <>
-                                    <span>{t("user.welcome", { userName: session.user?.name as string })}</span>
-                                    <SignOut />
-                                </>
+                                <UserMenu session={session} />
                             ) : (
                                 <SignInBtn />
                             )}
@@ -75,40 +56,7 @@ export const NavBar: FC<NavBarProps> = async ({ title }) => {
                     )}
 
                     {configs.languageSwitcher.enabled && (
-                        <DropdownMenu>
-                            <DropdownMenuTrigger>
-                                <Settings />
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="start" sideOffset={20} alignOffset={20}>
-                                <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>
-                                <DropdownMenuSeparator />
-
-                                <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger>
-                                        <span>{t("accountSettings.contentLanguage")}</span>
-                                    </DropdownMenuSubTrigger>
-
-                                    <DropdownMenuPortal>
-                                        <DropdownMenuSubContent>
-                                            <ContentLanguageSwitch />
-                                        </DropdownMenuSubContent>
-                                    </DropdownMenuPortal>
-                                </DropdownMenuSub>
-
-
-                                <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger>
-                                        <span>{t("accountSettings.uiLanguage")}</span>
-                                    </DropdownMenuSubTrigger>
-
-                                    <DropdownMenuPortal>
-                                        <DropdownMenuSubContent>
-                                            <UILanguageSwitch />
-                                        </DropdownMenuSubContent>
-                                    </DropdownMenuPortal>
-                                </DropdownMenuSub>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
+                        <SettingsMenu />
                     )}
                 </div>
             </div>

package/src/navbar/search-input.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import React, { FC, useState } from "react";
+import { FileCheck, FileX, Search } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { AutoComplete } from "../autocomplete";
+
+type Props = {
+    showInput: boolean
+    showPkgFilter: boolean
+}
+export const SearchInput: FC<Props> = ({ showInput, showPkgFilter }) => {
+    const [checked, setChecked] = useState<boolean>(true);
+
+    if (!showInput) {
+        return null;
+    }
+
+    return (
+        <div className="flex items-center px-3 border rounded-full h-8">
+            <Search className="h-4 w-4 shrink-0 opacity-50" />
+
+            <AutoComplete
+                initialValue=""
+                embedded={true}
+                searchByPackage={checked}
+            />
+
+            {showPkgFilter && <>
+                <TooltipProvider>
+                    <Tooltip delayDuration={100}>
+                        <TooltipTrigger onClick={() => setChecked(!checked)}>
+                            {checked ? <FileCheck className="opacity-50" /> : <FileX className="opacity-50" />}
+                        </TooltipTrigger>
+
+                        <TooltipContent>
+                            If checked will search only in this document
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+            </>}
+
+        </div>
+    );
+};

package/src/navbar/settings.tsx

@@ -0,0 +1,57 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from "@c-rex/ui/dropdown-menu"
+import { Settings } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { FC } from 'react';
+import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
+import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
+
+export const SettingsMenu: FC = () => {
+    const t = useTranslations();
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <Settings />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>
+                <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+
+                <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                        <span>{t("accountSettings.contentLanguage")}</span>
+                    </DropdownMenuSubTrigger>
+
+                    <DropdownMenuPortal>
+                        <DropdownMenuSubContent>
+                            <ContentLanguageSwitch />
+                        </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                </DropdownMenuSub>
+
+
+                <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                        <span>{t("accountSettings.uiLanguage")}</span>
+                    </DropdownMenuSubTrigger>
+
+                    <DropdownMenuPortal>
+                        <DropdownMenuSubContent>
+                            <UILanguageSwitch />
+                        </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                </DropdownMenuSub>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

package/src/navbar/user-menu.tsx

@@ -0,0 +1,59 @@
+"use client"
+import { FC } from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} 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
+}
+
+export const UserMenu: FC<Props> = ({ session }) => {
+    const t = useTranslations();
+    const { configs } = useAppConfig();
+
+    const endpoint = configs.OIDC.user.issuer.split("oidc/")[0];
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <CircleUser />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>
+                <DropdownMenuLabel>
+                    {t("user.welcome", { userName: session.user.name.split(" ")[0] })}
+                </DropdownMenuLabel>
+                <DropdownMenuLabel className='font-normal text-gray-600'>{session.user.email}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                        <a href={`${endpoint}oidc/Profile`} target="_blank" rel="noreferrer">
+                            Profile settings
+                        </a>
+                    </DropdownMenuItem>
+
+                    <DropdownMenuItem>
+                        <a href={`${endpoint}oidc/Profile/ChangePassword`} target="_blank" rel="noreferrer">
+                            Change password
+                        </a>
+                    </DropdownMenuItem>
+
+                    <DropdownMenuItem onClick={() => signOut()} className='text-red-500 focus:text-red-500'>
+                        {t("user.signOut")}
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

package/src/page-wrapper.tsx

@@ -4,12 +4,20 @@ import { NavBar } from './navbar/navbar';
 type Props = {
     children: React.ReactNode;
     title: string;
+    pageType: "BLOG" | "DOC" | "HOME"
 }
 
-export const PageWrapper = ({ children, title }: Props) => {
+export const PageWrapper = ({ children, title, pageType }: Props) => {
+    const showInput = pageType === "DOC" || pageType === "BLOG"
+    const showPkgFilter = pageType === "DOC"
+
     return (
         <>
-            <NavBar title={title} />
+            <NavBar
+                title={title}
+                showInput={showInput}
+                showPkgFilter={showPkgFilter}
+            />
             {children}
         </>
     );

package/src/search-modal.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import React, { FC, useEffect, useState } from "react"
+import { Button } from "@c-rex/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} 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 { 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"
+
+interface SearchModalProps {
+    trigger: React.ReactNode;
+}
+
+export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
+    const t = useTranslations("filter");
+    const { contentLang } = useAppConfig()
+
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+    const [value, setValue] = useState<string>("");
+    const [loading, setLoading] = useState<boolean>(false);
+    const [params, setParams] = useQueryStates({
+        language: parseAsString,
+        page: parseAsInteger,
+        wildcard: parseAsString,
+        operator: parseAsString,
+        search: parseAsString,
+        packages: parseAsString,
+        tags: parseAsBoolean,
+        like: parseAsBoolean,
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+
+    const onSearch = (value: string): Promise<string[]> => {
+        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
+    }
+
+
+    useEffect(() => {
+        const debounceFetch = setTimeout(() => {
+            if (value) {
+                setLoading(true)
+                onSearch(value).then(suggestions => {
+                    setSuggestions(suggestions)
+                    setLoading(false)
+                });
+            } else {
+                setSuggestions([]);
+            }
+        }, 300);
+
+        return () => clearTimeout(debounceFetch);
+    }, [value]);
+
+
+    const apply = () => {
+        const cookie = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
+
+        setParams({
+            search: value,
+            operator: "OR",
+            page: 1,
+            language: cookie,
+            wildcard: WILD_CARD_OPTIONS.BOTH,
+            tags: false,
+            like: false,
+        });
+    }
+
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                {trigger}
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Search</DialogTitle>
+                </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" />
+                    </div>
+                ) : (
+                    <div>
+                        {suggestions.map((option) => (
+                            <Toggle
+                                key={option}
+                                value={option}
+                                className="m-0"
+                                onClick={(inputValue) => {
+                                    setValue(`"${inputValue}"`);
+                                }}
+                            >
+                                {option}
+                            </Toggle>
+                        ))}
+                    </div>
+                )}
+
+                <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3">
+                    <Checkbox
+                        id="toggle-2"
+                        defaultChecked
+                        className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+                    />
+                    <div className="font-normal">
+                        <span className="text-sm leading-none font-medium">
+                            Search only on this document
+                        </span>
+                        <p className="text-muted-foreground text-sm">
+                            You can enable or disable notifications at any time.
+                        </p>
+                    </div>
+                </Label>
+
+                <DialogFooter className="pt-2">
+                    <DialogClose asChild>
+                        <Button onClick={apply}>{t("apply")}</Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog >
+    )
+}