@c-rex/components 0.1.25 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "files": [
     "src"
   ],
@@ -46,8 +46,8 @@
       "import": "./src/icons/flag-icon.tsx"
     },
     "./loading": {
-      "types": "./src/loading.tsx",
-      "import": "./src/loading.tsx"
+      "types": "./src/icons/loading.tsx",
+      "import": "./src/icons/loading.tsx"
     },
     "./info-table": {
       "types": "./src/info/info-table.tsx",
@@ -81,14 +81,6 @@
       "types": "./src/result-container.tsx",
       "import": "./src/result-container.tsx"
     },
-    "./table": {
-      "types": "./src/results/table.tsx",
-      "import": "./src/results/table.tsx"
-    },
-    "./table-with-images": {
-      "types": "./src/results/table-with-images.tsx",
-      "import": "./src/results/table-with-images.tsx"
-    },
     "./dialog-filter": {
       "types": "./src/results/dialog-filter.tsx",
       "import": "./src/results/dialog-filter.tsx"
@@ -144,6 +136,26 @@
     "./image-container": {
       "types": "./src/renditions/image/container.tsx",
       "import": "./src/renditions/image/container.tsx"
+    },
+    "./image-rendition": {
+      "types": "./src/renditions/image/rendition.tsx",
+      "import": "./src/renditions/image/rendition.tsx"
+    },
+    "./server-image-rendition": {
+      "types": "./src/renditions/image/server-image-rendition.tsx",
+      "import": "./src/renditions/image/server-image-rendition.tsx"
+    },
+    "./article-skeleton": {
+      "types": "./src/article/article-skeleton.tsx",
+      "import": "./src/article/article-skeleton.tsx"
+    },
+    "./documents-result-list": {
+      "types": "./src/documents/result-list.tsx",
+      "import": "./src/documents/result-list.tsx"
+    },
+    "./generic-table-result-list": {
+      "types": "./src/results/generic/table-result-list.tsx",
+      "import": "./src/results/generic/table-result-list.tsx"
     }
   },
   "scripts": {

package/src/autocomplete.tsx

@@ -16,6 +16,7 @@ export type AutoCompleteProps = {
     endpoint: string;
     queryParams?: SuggestionQueryParams
     onSelectParams?: { key: string, value: string }[];
+    onSelectPath: string
 };
 
 export const AutoComplete = ({
@@ -24,6 +25,7 @@ export const AutoComplete = ({
     endpoint,
     queryParams,
     onSelectParams,
+    onSelectPath = "/"
 }: AutoCompleteProps) => {
     const t = useTranslations();
     const containerRef = useRef<HTMLDivElement>(null);
@@ -62,7 +64,7 @@ export const AutoComplete = ({
             params.set(param.key, param.value);
         });
 
-        router.push(`/?${params.toString()}`);
+        router.push(`${onSelectPath}?${params.toString()}`);
     };
 
     useEffect(() => {

package/src/breadcrumb.tsx

@@ -12,21 +12,21 @@ import {
 } from "@c-rex/ui/breadcrumb";
 import { Button } from "@c-rex/ui/button";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@c-rex/ui/drawer";
-import { Skeleton } from "@c-rex/ui/skeleton";
 import { TreeOfContent } from "@c-rex/interfaces";
 import { useTranslations } from 'next-intl';
 import Link from "next/link"
 import { useBreakpoint } from "@c-rex/ui/hooks"
 import { DEVICE_OPTIONS } from "@c-rex/constants";
+import { generateBreadcrumbItems } from "@c-rex/utils";
 
 interface BreadcrumbProps {
-    items: TreeOfContent[];
+    tree: TreeOfContent[];
     lang: string;
-    loading?: boolean;
 }
 
-export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
+export const Breadcrumb: FC<BreadcrumbProps> = ({ tree, lang }) => {
     const t = useTranslations("breadcrumbs");
+    const items = generateBreadcrumbItems(tree);
     const device = useBreakpoint();
     const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
 
@@ -34,26 +34,6 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
 
     const lastItem = items[items.length - 1] as TreeOfContent;
 
-    if (loading) {
-        return (
-            <BreadcrumbComponent>
-                <BreadcrumbList>
-                    <BreadcrumbItem>
-                        <BreadcrumbPage>{t("home")}</BreadcrumbPage>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                        <Skeleton className="w-40 h-6" />
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                        <Skeleton className="w-40 h-6" />
-                    </BreadcrumbItem>
-                </BreadcrumbList>
-            </BreadcrumbComponent>
-        );
-    }
-
     const renderDrawer = () => {
         if (items.length < 2) return null
 
@@ -76,7 +56,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
                                 {items.slice(0, -1).map((item, index) => (
                                     <Link
                                         key={index}
-                                        href={item.link!}
+                                        href={`/topics/${item.linkId}/content`}
                                         className="py-1 text-sm"
                                     >
                                         {item.label}
@@ -100,7 +80,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
 
     const renderLink = (showLink: boolean, item: TreeOfContent): ReactNode => {
         if (showLink) {
-            return <BreadcrumbLink href={item.link}>{item.label}</BreadcrumbLink>;
+            return <BreadcrumbLink href={`/topics/${item.linkId}/content`}>{item.label}</BreadcrumbLink>;
         }
 
         return <BreadcrumbPage>{item.label}</BreadcrumbPage>;

package/src/directoryNodes/tree-of-content.tsx

@@ -1,4 +1,5 @@
 import {
+    SidebarGroup,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
@@ -8,6 +9,9 @@ import {
 } from "@c-rex/ui/sidebar";
 import { DirectoryNodeModel } from "@c-rex/interfaces";
 import { generateTreeOfContent } from "@c-rex/utils/directoryNodes";
+import Link from "next/link";
+import { Suspense } from "react";
+import { Skeleton } from "@c-rex/ui/skeleton";
 
 interface SidebarProps {
     directoryNodes: DirectoryNodeModel[];
@@ -17,33 +21,47 @@ export async function TreeOfContent({ directoryNodes }: SidebarProps) {
     const tree = await generateTreeOfContent(directoryNodes);
 
     return (
-        <SidebarMenu>
-            {tree.map((item) => (
-                <SidebarMenuItem key={item.id}>
-                    <SidebarMenuButton asChild isActive={item.active}>
-                        <a href={item.link} title={item.label}>
-                            {item.label}
-                        </a>
-                    </SidebarMenuButton>
+        <Suspense
+            fallback={
+                <SidebarGroup className="pt-4">
+                    <Skeleton className="w-auto h-10 mb-2" />
+                    <Skeleton className="w-auto h-10 mb-2" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2" />
+                </SidebarGroup>
+            }
+        >
+            <SidebarMenu>
+                {tree.map((item) => (
+                    <SidebarMenuItem key={item.id}>
+                        <SidebarMenuButton asChild isActive={item.active}>
+                            <Link href={`/topics/${item.linkId}/content`} title={item.label}>
+                                {item.label}
+                            </Link>
+                        </SidebarMenuButton>
 
-                    {item.children?.length ? (
-                        <SidebarMenuSub>
-                            {item.children.map((item) => (
-                                <SidebarMenuSubItem key={item.label}>
-                                    <SidebarMenuSubButton
-                                        asChild
-                                        isActive={item.active}
-                                    >
-                                        <a href={item.link} title={item.label}>
-                                            {item.label}
-                                        </a>
-                                    </SidebarMenuSubButton>
-                                </SidebarMenuSubItem>
-                            ))}
-                        </SidebarMenuSub>
-                    ) : null}
-                </SidebarMenuItem>
-            ))}
-        </SidebarMenu>
+                        {item.children?.length ? (
+                            <SidebarMenuSub>
+                                {item.children.map((item) => (
+                                    <SidebarMenuSubItem key={item.label}>
+                                        <SidebarMenuSubButton
+                                            asChild
+                                            isActive={item.active}
+                                        >
+                                            <Link href={`/topics/${item.linkId}/content`} title={item.label}>
+                                                {item.label}
+                                            </Link>
+                                        </SidebarMenuSubButton>
+                                    </SidebarMenuSubItem>
+                                ))}
+                            </SidebarMenuSub>
+                        ) : null}
+                    </SidebarMenuItem>
+                ))}
+            </SidebarMenu>
+        </Suspense>
     );
 }

package/src/documents/result-list.tsx

@@ -0,0 +1,137 @@
+import { FC } from "react";
+import {
+    DocumentModel,
+    ExternalProductGraphicModel,
+    FragmentModel,
+    InformationUnitModel,
+    PackageModel,
+    TopicModel
+} from "@c-rex/interfaces";
+import { FileStack } from "lucide-react";
+import { cn, getType, getTitle, getVersions } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { ResultTypes } from "@c-rex/types";
+import { RESULT_TYPES } from "@c-rex/constants";
+import { FileDownloadDropdown } from "@c-rex/components/file-download";
+import { FavoriteButton } from "@c-rex/components/favorite-button";
+
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { HtmlRendition } from "../renditions/html";
+
+interface Props {
+    items: (
+        DocumentModel |
+        ExternalProductGraphicModel |
+        FragmentModel |
+        InformationUnitModel |
+        PackageModel |
+        TopicModel
+    )[];
+    query?: string;
+    disabledResults?: ResultTypes[];
+    imageRestrictions?: string[];
+    showActions?: boolean;
+}
+
+
+export const DocumentsResultList: FC<Props> = ({
+    items,
+    query = "",
+    disabledResults = [],
+    imageRestrictions = [],
+    showActions = true,
+}) => {
+    return (
+        <div className="flex-1">
+            {items.map((item, index) => {
+                const title = getTitle(item.titles, item.labels);
+                const itemType = getType(item.class);
+                const disabled = disabledResults.includes(itemType);
+                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+                const multipleVersions = getVersions(item.versionOf);
+                const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
+
+                let itemLink = `/documents/${item.shortId}?q=${query}`
+
+                if (packageId) {
+                    itemLink += `&package=${packageId}`
+                }
+
+                return (
+                    <div
+                        key={index}
+                        className={cn(
+                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
+                            index == items.length - 1 ? "" : "mb-4",
+                            `c-rex-result-item c-rex-result-${itemType}`,
+                            disabled && "c-rex-result-item-disabled",
+                        )}
+                    >
+                        <div className="h-16 w-16 flex items-start">
+                            <ImageRenditionContainer
+                                itemShortId={item.shortId!}
+                                imageRestrictions={imageRestrictions}
+                                emptyImageStyle="h-16 w-16"
+                            />
+                        </div>
+
+                        <div className="flex-1 p-2 flex flex-col">
+                            <span className="text-sm text-muted-foreground">
+                                {item.revision}
+                            </span>
+
+                            <span className="text-lg font-medium">
+                                {disabled ? (
+                                    title
+                                ) : (
+                                    <a className="hover:underline" href={itemLink}>{title}</a>
+                                )}
+                            </span>
+
+                            <span className="text-sm">
+                                {itemType}
+                            </span>
+                            <span className="text-sm">
+                                <HtmlRendition shortId={item.shortId!} />
+                            </span>
+                        </div>
+
+                        <div className="flex flex-col p-2 ml-auto justify-center">
+                            <div className="flex gap-2">
+                                <FileDownloadDropdown renditions={item.renditions} />
+
+                                <FavoriteButton
+                                    id={item.shortId!}
+                                    type={itemType}
+                                    label={title}
+                                />
+
+                                {multipleVersions.length > 1 && (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button variant="ghost" size="icon">
+                                                <FileStack />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            Available in: {multipleVersions.join(", ")}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )}
+
+                                {isDocument && (
+                                    <BookmarkButton
+                                        shortId={item.shortId!}
+                                        triggerVariant="ghost"
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/src/favorites/bookmark-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { FC, ReactNode, useEffect, useState } from "react";
-import { Button } from "@c-rex/ui/button";
+import { ComponentProps, FC, ReactNode, useEffect, useState } from "react";
+import { Button, ButtonProps } from "@c-rex/ui/button";
 import { Trash } from "lucide-react";
 import { cn } from "@c-rex/utils";
 import Link from "next/link";
@@ -15,32 +15,35 @@ import {
 } from "@c-rex/ui/table"
 import { FaRegBookmark } from "react-icons/fa6";
 
-export const BookmarkButton: FC<{ shortId: string, trigger?: ReactNode }> = ({ shortId, trigger }) => {
+type BookmarkProps = {
+    shortId: string;
+    triggerVariant?: ComponentProps<typeof Button>["variant"];
+}
+
+export const BookmarkButton: FC<BookmarkProps> = ({
+    shortId,
+    triggerVariant = "outline"
+}) => {
     const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
 
     useEffect(() => {
         setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
     }, [shortId]);
-
-    useEffect(() => {
-        console.log(shortId, markersList);
-    }, [markersList]);
-
     return (
         <Dialog>
             <DialogTrigger asChild>
+                <Button variant={triggerVariant} size="icon" className="relative">
+                    <FaRegBookmark className="text-primary" />
 
-                {trigger ? trigger : (
-
-                    <Button variant="outline" size="icon" className="relative">
-                        <FaRegBookmark className="text-primary" />
+                    {markersList.length > 0 && (
                         <span
                             className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
                         >
                             {markersList.length}
                         </span>
-                    </Button>
-                )}
+                    )}
+                </Button>
+
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>

package/src/generated/create-client-request.tsx

@@ -37,13 +37,12 @@ export function createClientDataRequest<T, PathParams, QueryParams>(
         const [state, setState] = useState<DataRequestRenderProps<T>>({
             data: null,
             error: null,
-            isLoading: false,
+            isLoading: true,
         });
 
         const fetchData = useCallback(async () => {
             setState({
                 ...state,
-                isLoading: !state.data,
                 error: null,
             });
 

package/src/generated/create-server-request.tsx

@@ -14,7 +14,7 @@ export type DataRequestRenderProps<T> = {
 type DataRequestProps<T, PathParams, QueryParams> = {
     pathParams?: PathParams;
     queryParams?: QueryParams;
-    render: (data: T, error?: SerializedError) => React.ReactNode;
+    render: (data: T, error?: SerializedError) => any; // any because it can return JSX, async functions, etc.
 };
 
 
@@ -25,7 +25,7 @@ export function createDataRequestWithParams<T, PathParams, QueryParams>(
         pathParams,
         queryParams = {} as QueryParams,
         render,
-    }: DataRequestProps<T, PathParams, QueryParams>) {
+    }: DataRequestProps<T, PathParams, QueryParams>): Promise<any> {
         let endpoint = endpointTemplate;
         if (pathParams) {
             endpoint = Object.entries(pathParams as Record<string, string>).reduce(

package/src/icons/loading.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from "react";
 
 type LoadingProps = {
-    opacity: boolean;
+    opacity?: boolean;
 }
-export const Loading: FC<LoadingProps> = ({ opacity }) => {
+export const Loading: FC<LoadingProps> = ({ opacity = false }) => {
     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>

package/src/info/info-table.tsx

@@ -24,6 +24,7 @@ import { InformationUnitsGetAll } from "../generated/server-components";
 import { getTranslations } from "next-intl/server";
 import { EN_LANG } from "@c-rex/constants";
 import { getFileRenditions } from "../results/utils";
+import Link from "next/link";
 
 type Props = {
     title: string;
@@ -155,9 +156,9 @@ export const InfoTable: FC<Props> = async ({
                                                 const country = language.split("-")[1]!;
                                                 return (
                                                     <span className="w-8 block border" key={item.shortId}>
-                                                        <a href={`/${linkPath}/${item.shortId}`} title={language}>
+                                                        <Link href={`/${linkPath}/${item.shortId}/content`} title={language}>
                                                             <Flag countryCode={country} />
-                                                        </a>
+                                                        </Link>
                                                     </span>
                                                 )
                                             })}

package/src/results/generic/table-result-list.tsx

@@ -0,0 +1,96 @@
+import { FC } from "react";
+import {
+    DocumentModel,
+    ExternalProductGraphicModel,
+    FragmentModel,
+    InformationUnitModel,
+    PackageModel,
+    TopicModel
+} from "@c-rex/interfaces";
+import { cn, getLanguage, getTitle, getType, getVersions } from "@c-rex/utils";
+import { Flag } from "@c-rex/components/flag";
+import { Badge } from "@c-rex/ui/badge";
+import { RESULT_TYPES } from "@c-rex/constants";
+import Link from "next/link";
+import { FileDownloadDropdown } from "@c-rex/components/file-download";
+import { getTranslations } from "next-intl/server";
+
+interface Props {
+    items: (
+        DocumentModel |
+        ExternalProductGraphicModel |
+        FragmentModel |
+        InformationUnitModel |
+        PackageModel |
+        TopicModel
+    )[];
+    query: string;
+    linkPath: string;
+    showFilesColumn?: boolean;
+}
+
+export const GenericTableResultList: FC<Props> = async ({ items, query, linkPath, showFilesColumn = true }) => {
+    const t = await getTranslations("results");
+
+    return (
+        <div className="rounded-md border mb-6 last:border-b-0">
+            <div className="font-bold text-sm p-2 border-b items-center flex-wrap hidden md:flex">
+                <div className="flex-1 p-2">{t("title")}</div>
+                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("language")}</div>
+                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("type")}</div>
+                {showFilesColumn &&
+                    <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("files")}</div>
+                }
+            </div>
+
+            {items.map((item, index) => {
+                const title = getTitle(item.titles, item.labels);
+                const itemType = getType(item.class);
+                const language = getLanguage(item.languages);
+                const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
+
+                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+                const multipleVersions = getVersions(item.versionOf);
+
+                let itemLink = `${linkPath}/${item.shortId}?q=${query}`
+
+                if (packageId) {
+                    itemLink += `&package=${packageId}`
+                }
+                return (
+                    <div
+                        className={cn(
+                            "min-h-12 c-rex-result-item flex flex-wrap items-center border-b",
+                            `c-rex-result-${itemType.toLowerCase()}`,
+                        )}
+                        key={index}
+                    >
+                        <div className="flex-1 p-2">
+                            <Link href={itemLink} className="hover:underline">{title}</Link>
+                        </div>
+
+                        <div className="w-1/5 md:w-1/5 flex justify-center p-2">
+                            <span className="w-8 inline-block">
+                                {language.split("-").length > 1 && (
+                                    <Flag countryCode={language.split("-")[1] as string} />
+                                )}
+                            </span>
+                        </div>
+
+                        <div className="w-4/5 md:w-1/5 p-2 flex justify-center">
+                            <Badge variant="secondary">
+                                {itemType}
+                            </Badge>
+                        </div>
+
+                        {showFilesColumn &&
+                            <div className="w-1/5 flex justify-center p-2">
+                                <FileDownloadDropdown renditions={item.renditions} />
+                            </div>
+                        }
+                    </div>
+                )
+            })}
+        </div>
+    );
+};

package/src/results/table-with-images.tsx

@@ -9,11 +9,10 @@ import {
 } from "@c-rex/interfaces";
 import { FileStack } from "lucide-react";
 import { FileDownloadDropdown } from "../renditions/file-download";
-import { cn, getType, getTitle, getLanguage } from "@c-rex/utils";
+import { cn, getType, getTitle, getVersions } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
 import { Favorite, ResultTypes } from "@c-rex/types";
-import { getVersions } from "./utils";
 import { RESULT_TYPES } from "@c-rex/constants";
 import { FavoriteButton } from "../favorites/favorite-button";
 import { ImageRenditionContainer } from "../renditions/image/container";
@@ -33,15 +32,21 @@ interface TableWithImageProps {
     markersList?: Favorite[];
     disabledResults?: ResultTypes[];
     imageRestrictions?: string[];
+    showActions?: boolean;
 }
 
 
-export const TableWithImage: FC<TableWithImageProps> = ({ items, query = "", disabledResults = [], imageRestrictions = [] }) => {
+export const TableWithImage: FC<TableWithImageProps> = ({
+    items,
+    query = "",
+    disabledResults = [],
+    imageRestrictions = [],
+    showActions = true,
+}) => {
     return (
         <div className="flex-1">
             {items.map((item, index) => {
                 const title = getTitle(item.titles, item.labels);
-                const language = getLanguage(item.languages);
                 const itemType = getType(item.class);
                 const disabled = disabledResults.includes(itemType);
                 const isDocument = itemType === RESULT_TYPES.DOCUMENT;
@@ -58,7 +63,6 @@ export const TableWithImage: FC<TableWithImageProps> = ({ items, query = "", dis
                     itemLink += `&package=${packageId}`
                 }
 
-
                 return (
                     <div
                         key={index}
@@ -79,7 +83,7 @@ export const TableWithImage: FC<TableWithImageProps> = ({ items, query = "", dis
 
                         <div className="flex-1 p-2 flex flex-col">
                             <span className="text-sm text-muted-foreground">
-                                {language} - {item.shortId}
+                                {item.revision}
                             </span>
 
                             <span className="text-lg font-medium">
@@ -99,19 +103,9 @@ export const TableWithImage: FC<TableWithImageProps> = ({ items, query = "", dis
                         </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">
                                 <FileDownloadDropdown renditions={item.renditions} />
 
-                                {isDocument && (
-                                    <BookmarkButton
-                                        shortId={item.shortId!}
-
-                                    />
-                                )}
-
                                 <FavoriteButton
                                     id={item.shortId!}
                                     type={itemType}
@@ -130,6 +124,13 @@ export const TableWithImage: FC<TableWithImageProps> = ({ items, query = "", dis
                                         </TooltipContent>
                                     </Tooltip>
                                 )}
+
+                                {isDocument && (
+                                    <BookmarkButton
+                                        shortId={item.shortId!}
+                                        triggerVariant="ghost"
+                                    />
+                                )}
                             </div>
                         </div>
                     </div>

package/src/search-input.tsx

@@ -29,10 +29,15 @@ export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "N
 
             {/*
                 Add scope=pkgID if checked is true
-            */}
-            <InformationUnitsSuggestions embedded onSelectParams={
-                (pkg && checked) ? [{ key: "packages", value: pkg }] : []
-            } />
+                */}
+            <InformationUnitsSuggestions
+                onSelectParams={
+                    (pkg && checked) ? [{ key: "packages", value: pkg }] : []
+
+                }
+                onSelectPath="/information-units"
+                embedded
+            />
 
             {showPkgFilter && <>
                 <TooltipProvider>