@c-rex/components 0.3.0-build.18 → 0.3.0-build.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.18",
+    "version":  "0.3.0-build.19",
     "files":  [
                   "src"
               ],
@@ -65,6 +65,10 @@
                                              "types":  "./src/render-article.tsx",
                                              "import":  "./src/render-article.tsx"
                                          },
+                    "./article-action-bar":  {
+                                                 "types":  "./src/article/article-action-bar.tsx",
+                                                 "import":  "./src/article/article-action-bar.tsx"
+                                             },
                     "./html-rendition":  {
                                              "types":  "./src/renditions/html.tsx",
                                              "import":  "./src/renditions/html.tsx"

package/src/article/article-action-bar.tsx

@@ -2,21 +2,26 @@
 import { FC, useEffect, useRef, useState } from "react";
 import { useHighlightStore } from "../stores/highlight-store";
 import { Button } from "@c-rex/ui/button";
-import { ArrowBigLeft, ArrowBigRight, FileSearchIcon, PanelRight, Search, X } from "lucide-react";
+import { ArrowBigDown, FileSearchIcon, Search, X } from "lucide-react";
 import { useQueryState } from "nuqs";
 import { useHighlight } from "@c-rex/contexts/highlight-provider";
-import { useMultiSidebar } from "@c-rex/ui/sidebar";
+import { SidebarTrigger } from "@c-rex/ui/sidebar";
 import { cn } from "@c-rex/utils";
 import { useTranslations } from "next-intl";
-
-export const ArticleActionBar: FC = () => {
+import { FavoriteButton } from "../favorites/favorite-button";
+import { ResultTypes } from "@c-rex/types";
+type Props = {
+    id: string;
+    articleType: ResultTypes;
+    favoriteLabel: string;
+}
+export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel }) => {
     const t = useTranslations();
     const inputRef = useRef<HTMLInputElement>(null);
-    const { next, prev } = useHighlight();
+    const { next } = useHighlight();
     const [open, setOpen] = useState(false);
     const enableHighlight = useHighlightStore((state) => state.enable);
     const toggleHighlight = useHighlightStore((state) => state.toggleHighlight);
-    const { rightSidebar } = useMultiSidebar()
     const [query, setQuery] = useQueryState("q");
 
     useEffect(() => {
@@ -26,86 +31,73 @@ export const ArticleActionBar: FC = () => {
     }, [open]);
 
     return (
-        <>
-            <div className="w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex bottom-4 p-2 float-right gap-2 transition-all duration-300 absolute right-4">
-                {enableHighlight && (
+        <div className="w-9 flex gap-2 transition-all duration-300 flex-row z-20 items-end md:flex-col md:rounded-2xl md:sticky md:top-24 md:self-start">
 
-                    <>
-                        <div className="flex items-center">
-                            <input
-                                type="text"
-                                value={query as string || ""}
-                                ref={inputRef}
-                                onKeyDown={(e) => {
-                                    if (e.key === "Enter") {
-                                        next();
-                                    }
-                                    if (e.key === "Escape") {
-                                        setOpen(false);
-                                    }
-                                }}
-                                onChange={(e) => setQuery(e.target.value || null)}
-                                placeholder={t("search")}
-                                className={cn(
-                                    "border border-gray-300 left-12 transition-all duration-300 rounded-full h-9 bg-secondary text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-blue-500",
-                                    open ? "flex flex-1  opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
-                                )}
-                            />
+            <SidebarTrigger side="right" />
 
-                            <Button variant="ghost" size="icon" rounded="full" onClick={() => setOpen(!open)}>
-                                {open ? <X className="w-5 h-5" /> : <Search className="w-5 h-5" />}
-                            </Button>
+            <FavoriteButton
+                id={id}
+                type={articleType}
+                label={favoriteLabel}
+            />
 
-                        </div>
+            <Button
+                variant="ghost"
+                size="icon"
 
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            rounded="full"
-                            onClick={prev}
-                            className={cn(open && "hidden sm:inline-flex")}
-                        >
-                            <ArrowBigLeft />
-                        </Button>
+                onClick={() => toggleHighlight(!enableHighlight)}
+                className={cn("group", open && "hidden sm:inline-flex")}
+            >
+                {enableHighlight ?
+                    <FileSearchIcon /> :
+                    <div className="relative inline-block">
+                        <FileSearchIcon />
+                        <span className="absolute inset-0 w-[2px] rotate-45 translate-x-2 bg-accent-foreground" />
+                    </div>
+                }
+            </Button>
+
+            {enableHighlight && (
+                <>
+                    <div className="flex items-center gap-2 transition-all duration-300">
+                        <input
+                            type="text"
+                            value={query as string || ""}
+                            ref={inputRef}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    next();
+                                }
+                                if (e.key === "Escape") {
+                                    setOpen(false);
+                                }
+                            }}
+                            onChange={(e) => setQuery(e.target.value || null)}
+                            placeholder={t("search")}
+                            className={cn(
+                                "border border-gray-300 left-12 transition-all duration-300 rounded-full h-9 bg-secondary text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-lg",
+                                open ? "flex flex-1  opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
+                            )}
+                        />
 
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            rounded="full"
-                            onClick={next}
-                            className={cn(open && "hidden sm:inline-flex")}
-                        >
-                            <ArrowBigRight />
+                        <Button variant="ghost" size="icon" onClick={() => setOpen(!open)} className={cn(open && "bg-accent")}>
+                            {open ? <X /> : <Search />}
                         </Button>
-                    </>
-                )}
 
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    rounded="full"
-                    onClick={() => toggleHighlight(!enableHighlight)}
-                    className={cn("group", open && "hidden sm:inline-flex")}
-                >
-                    {enableHighlight ?
-                        <FileSearchIcon /> :
-                        <div className="relative inline-block">
-                            <FileSearchIcon />
-                            <span className="absolute inset-0 w-[2px] bg-primary-foreground rotate-45 translate-x-2 group-hover:bg-accent-foreground" />
-                        </div>
-                    }
-                </Button>
+                    </div>
+
+                    <Button
+                        variant="ghost"
+                        size="icon"
+
+                        onClick={next}
+                        className={cn(open && "hidden sm:inline-flex")}
+                    >
+                        <ArrowBigDown />
+                    </Button>
 
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    rounded="full"
-                    onClick={rightSidebar.toggleSidebar}
-                    className={cn(open && "hidden sm:inline-flex")}
-                >
-                    <PanelRight />
-                </Button>
-            </div>
-        </>
+                </>
+            )}
+        </div>
     )
-}
+}

package/src/article/article-content.tsx

@@ -1,6 +1,5 @@
 import { FC } from "react";
 import { RenderArticle } from "../render-article";
-import { ArticleActionBar } from "./article-action-bar";
 
 interface Props {
     articleHtml: string;
@@ -8,11 +7,13 @@ interface Props {
 
 export const ArticleContent: FC<Props> = async ({ articleHtml }) => {
     return (
-        <>
-            <div className="pr-4 relative">
+        <div className="relative flex flex-col gap-4 md:flex-row md:items-start">
+            <div className="relative min-w-0 flex-1 md:pr-8">
                 <RenderArticle htmlContent={articleHtml} contentLang="" />
             </div>
-            <ArticleActionBar />
-        </>
+
+
+
+        </div>
     )
 }

package/src/favorites/bookmark-button.tsx

@@ -31,12 +31,13 @@ export const BookmarkButton: FC<BookmarkProps> = ({
 }) => {
     const t = useTranslations("bookmarks");
     const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
+    const documentLabel = useFavoritesStore((state) => state.documents[shortId]?.label);
     const markersList = useFavoritesStore((state) => state.documents[shortId]?.topics) ?? EMPTY_TOPICS;
     return (
         <Dialog>
             <DialogTrigger asChild>
                 <Button variant={triggerVariant} size="icon" className="relative">
-                    <FaRegBookmark className="text-primary" />
+                    <FaRegBookmark className="text-primary !size-4" />
 
                     {markersList.length > 0 && (
                         <span
@@ -52,7 +53,7 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                 <DialogHeader>
                     <DialogTitle>{t("title")}</DialogTitle>
                     <DialogDescription>
-                        {t("description")}
+                        {documentLabel || t("description")}
                     </DialogDescription>
                 </DialogHeader>
                 <Table>
@@ -68,7 +69,7 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                         {markersList.map((item) => (
                             <TableRow key={item.id} className="min-h-12">
                                 <TableCell>
-                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
+                                    <FaRegBookmark className={`text-${item.color}`} />
                                 </TableCell>
                                 <TableCell>
                                     <Link
@@ -80,11 +81,12 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                                 </TableCell>
                                 <TableCell>
                                     <Button
-                                        variant="destructive"
-                                        size="icon"
+                                        variant="ghost"
+                                        size="sm"
+                                        className="!text-red-600 float-right"
                                         onClick={() => removeFavoriteTopic(shortId, item.id)}
                                     >
-                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                        <Trash className="hover:text-red-600 cursor-pointer !size-4" />
                                     </Button>
                                 </TableCell>
                             </TableRow>

package/src/favorites/favorite-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useEffect, useState } from "react";
+import { FC, useState } from "react";
 import { Button } from "@c-rex/ui/button";
 import { FaStar, FaRegStar } from "react-icons/fa";
 import { useFavoritesStore } from "../stores/favorites-store";
@@ -13,9 +13,7 @@ export const FavoriteButton: FC<{
     id: string;
     type: ResultTypes;
     label: string;
-    topicDocumentId?: string;
-    topicDocumentLabel?: string;
-}> = ({ id, type, label, topicDocumentId, topicDocumentLabel }) => {
+}> = ({ id, type, label }) => {
     const addFavoriteTopic = useFavoritesStore((state) => state.favoriteTopic);
     const addFavoriteDocument = useFavoritesStore((state) => state.favoriteDocument);
     const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
@@ -24,43 +22,42 @@ export const FavoriteButton: FC<{
     const favoriteDocumentList = useFavoritesStore((state) => state.documents);
     const favoriteList = useFavoritesStore((state) => state.favorites);
     const isFavorite = favoriteList.find((fav) => fav.id === id);
-    const [documentData, setDocumentData] = useState<{ id: string, label: string }>({
-        id: topicDocumentId || id,
-        label: topicDocumentLabel || label,
-    });
+    const [documentData, setDocumentData] = useState<{ id: string, label: string } | null>(null);
+    const [topicData, setTopicData] = useState<{ id: string, label: string } | null>(null);
     const [isLoading, setIsLoading] = useState(false);
 
-    useEffect(() => {
-        if (type !== RESULT_TYPES.TOPIC || !topicDocumentId) return;
-        setDocumentData({
-            id: topicDocumentId,
-            label: topicDocumentLabel || label,
-        });
-    }, [type, topicDocumentId, topicDocumentLabel, label]);
-
-    useEffect(() => {
-        if (type === RESULT_TYPES.TOPIC && !topicDocumentId) {
-            void getTopicDocumentData(id).catch(() => {
-                // Lazy retry on user action.
-            });
-        }
-    }, [id, type, topicDocumentId]);
-
     const ensureDocumentData = async (topicId: string): Promise<{ id: string, label: string }> => {
         if (type !== RESULT_TYPES.TOPIC) {
             return { id, label };
         }
 
-        if (documentData.id !== topicId) {
+        if (documentData && documentData.id !== topicId) {
             return documentData;
         }
 
         return await getTopicDocumentData(topicId);
     };
 
+    const ensureTopicData = async (documentId: string): Promise<{ id: string, label: string }> => {
+        if (type !== RESULT_TYPES.DOCUMENT) {
+            return { id, label };
+        }
+
+        if (topicData && documentId === id) {
+            return topicData;
+        }
+
+        return await getDocumentFirstTopicData(documentId);
+    };
+
     const addFavorite = async (targetId: string) => {
         if (type === RESULT_TYPES.DOCUMENT) {
+            const topic = await ensureTopicData(targetId);
+            const length = favoriteDocumentList[targetId]?.topics.length || 0;
+            const color = MARKER_COLORS[length] || MARKER_COLORS[MARKER_COLORS.length - 1] as string;
+
             addFavoriteDocument(targetId, label);
+            addFavoriteTopic(targetId, topic.id, topic.label, color);
             return;
         }
 
@@ -96,6 +93,21 @@ export const FavoriteButton: FC<{
         return data;
     };
 
+    const getDocumentFirstTopicData = async (documentId: string): Promise<{ id: string, label: string }> => {
+        const response = await fetch(`/api/information-units/first-topic-by-document-id?shortId=${encodeURIComponent(documentId)}`, {
+            method: "GET",
+        });
+
+        if (!response.ok) {
+            throw new Error("Failed to fetch first topic by document id");
+        }
+
+        const { topicId, label } = await response.json();
+        const data = { id: topicId, label };
+        setTopicData(data);
+        return data;
+    };
+
     const handleToggle = async () => {
         if (isLoading) return;
         setIsLoading(true);
@@ -117,9 +129,9 @@ export const FavoriteButton: FC<{
         return (
             <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
                 {isLoading ? (
-                    <Loader2 className="!h-5 !w-5 animate-spin" />
+                    <Loader2 className="animate-spin" />
                 ) : (
-                    <FaStar className="!h-5 !w-5 color-primary" />
+                    <FaStar className="color-primary" />
                 )}
             </Button>
         );
@@ -128,9 +140,9 @@ export const FavoriteButton: FC<{
     return (
         <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
             {isLoading ? (
-                <Loader2 className="!h-5 !w-5 animate-spin" />
+                <Loader2 className="animate-spin" />
             ) : (
-                <FaRegStar className="!h-5 !w-5" />
+                <FaRegStar />
             )}
         </Button>
     )

package/src/icons/file-icon.tsx

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

package/src/info/information-unit-metadata-grid.tsx

@@ -38,11 +38,13 @@ type Props = {
     metadataExcludeProperties?: Array<keyof InformationUnitModel>;
     showBookmarkButton?: boolean;
     showFileRenditions?: boolean;
+    embedded?: boolean;
 }
 
 export const InformationUnitMetadataGrid: FC<Props> = async ({
     title,
     data,
+    embedded = false,
     linkPattern,
     metadataIncludeProperties,
     metadataExcludeProperties,
@@ -67,91 +69,110 @@ export const InformationUnitMetadataGrid: FC<Props> = async ({
     const resolveDetailsPath = (shortId: string): string =>
         linkPattern.replace("{shortId}", shortId);
 
+    const cardContent = (
+        <CardContent className="space-y-3 !p-0">
+            <Table>
+                <TableBody>
+
+                    {showBookmarkButton && (
+                        <TableRow className="min-h-12">
+                            <TableCell className="font-medium w-28 pl-4">
+                                <h4 className="text-sm font-medium">{t("favorites")}</h4>
+                            </TableCell>
+                            <TableCell className="text-xs text-muted-foreground flex flex-col min-h-12 pt-3">
+                                <BookmarkButton shortId={data.shortId!} />
+                            </TableCell>
+                        </TableRow>
+                    )}
+
+                    {metadataRows.map((row) => (
+                        <TableRow key={`${row.key}:${row.label}`} className="min-h-12">
+                            <TableCell className="font-medium w-28 pl-4">
+                                <h4 className="text-sm font-medium capitalize">
+                                    {row.labelSource === "translationKey" ? t(row.label) : row.label}
+                                </h4>
+                            </TableCell>
+                            <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                                {renderMetadataDisplayValues(row, locale)}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+
+                    {displayVersions.length > 0 && (
+                        <TableRow className="min-h-12">
+                            <TableCell className="font-medium w-28 pl-4">
+                                <h4 className="text-sm font-medium">{t("availableIn")}</h4>
+                            </TableCell>
+                            <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                                {displayVersions.map((item) => {
+                                    const country = extractCountryCodeFromLanguage(item.language);
+                                    return (
+                                        <span className="w-8 block border" key={item.shortId}>
+                                            <Link href={resolveDetailsPath(item.shortId)} title={item.language}>
+                                                <Flag countryCode={country} />
+                                            </Link>
+                                        </span>
+                                    );
+                                })}
+                            </TableCell>
+                        </TableRow>
+                    )}
+
+                    {Object.keys(files).length > 0 && (
+                        <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 flex-col gap-2 min-h-12">
+
+                                {Object.keys(files).map((fileKey) => {
+                                    if (!files[fileKey]) return null
+
+                                    return (
+                                        <DropdownMenu key={fileKey}>
+                                            <DropdownMenuTrigger className="mr-2" asChild >
+                                                <Button variant="outline" size="icon" >
+                                                    <FileIcon extension={fileKey} />
+                                                </Button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem>
+                                                    <a href={files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <Eye className="mr-2" /> Open
+                                                    </a>
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem>
+                                                    <a href={files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <CloudDownload className="mr-2" /> Download
+                                                    </a>
+                                                </DropdownMenuItem>
+
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    )
+                                })}
+
+                            </TableCell>
+                        </TableRow>
+                    )}
+
+                </TableBody>
+            </Table>
+        </CardContent>
+    )
+
+    if (embedded) return cardContent;
+
     return (
-        <Card className="p-0 !pt-4">
-            <CardHeader>
+        <Card className="!p-0 !gap-0">
+            <CardHeader className="">
                 <CardTitle className="text-lg flex justify-between items-end">
                     {title}
 
                     {showBookmarkButton && <BookmarkButton shortId={data.shortId!} />}
                 </CardTitle>
             </CardHeader>
-            <CardContent className="space-y-3 !p-0">
-                <Table>
-                    <TableBody>
-                        {metadataRows.map((row) => (
-                            <TableRow key={`${row.key}:${row.label}`} className="min-h-12">
-                                <TableCell className="font-medium w-28 pl-4">
-                                    <h4 className="text-sm font-medium capitalize">
-                                        {row.labelSource === "translationKey" ? t(row.label) : row.label}
-                                    </h4>
-                                </TableCell>
-                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
-                                    {renderMetadataDisplayValues(row, locale)}
-                                </TableCell>
-                            </TableRow>
-                        ))}
-
-                        {displayVersions.length > 0 && (
-                            <TableRow className="min-h-12">
-                                <TableCell className="font-medium w-28 pl-4">
-                                    <h4 className="text-sm font-medium">{t("availableIn")}</h4>
-                                </TableCell>
-                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
-                                    {displayVersions.map((item) => {
-                                        const country = extractCountryCodeFromLanguage(item.language);
-                                        return (
-                                            <span className="w-8 block border" key={item.shortId}>
-                                                <Link href={resolveDetailsPath(item.shortId)} title={item.language}>
-                                                    <Flag countryCode={country} />
-                                                </Link>
-                                            </span>
-                                        );
-                                    })}
-                                </TableCell>
-                            </TableRow>
-                        )}
-
-                        {Object.keys(files).length > 0 && (
-                            <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 min-h-12">
-
-                                    {Object.keys(files).map((fileKey) => {
-                                        if (!files[fileKey]) return null
-
-                                        return (
-                                            <DropdownMenu key={fileKey}>
-                                                <DropdownMenuTrigger className="mr-2" asChild >
-                                                    <Button variant="outline" size="icon" >
-                                                        <FileIcon extension={fileKey} />
-                                                    </Button>
-                                                </DropdownMenuTrigger>
-                                                <DropdownMenuContent>
-                                                    <DropdownMenuItem>
-                                                        <a href={files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                            <Eye className="mr-2" /> Open
-                                                        </a>
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuItem>
-                                                        <a href={files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                            <CloudDownload className="mr-2" /> Download
-                                                        </a>
-                                                    </DropdownMenuItem>
-
-                                                </DropdownMenuContent>
-                                            </DropdownMenu>
-                                        )
-                                    })}
-
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </CardContent>
-        </Card >
+            {cardContent}
+        </Card>
     );
 }

package/src/navbar/navbar.tsx

@@ -61,22 +61,11 @@ export const NavBar: FC<NavBarProps> = async ({
                         title && "lg:w-[calc(16rem-16px)]"
                     )}
                 >
-
-                    {showOrganizationLogo && organizationBranding && (
-                        <Link href="/">
-                            <img
-                                src={organizationBranding.logoSrc}
-                                alt={`${organizationBranding.organizationName} logo`}
-                                className="h-14"
-                            />
-                        </Link>
-                    )}
-
                     {showMenu && (
                         <DropdownHoverItem
                             label={
-                                <Button variant="outline" rounded="full" size="icon">
-                                    <Menu className="size-4" />
+                                <Button variant="link" >
+                                    <Menu className="!size-8" />
                                 </Button>
                             }
                         >
@@ -112,6 +101,16 @@ export const NavBar: FC<NavBarProps> = async ({
                             </Button>
                         </DropdownHoverItem>
                     )}
+
+                    {showOrganizationLogo && organizationBranding && (
+                        <Link href="/">
+                            <img
+                                src={organizationBranding.logoSrc}
+                                alt={`${organizationBranding.organizationName} logo`}
+                                className="h-14"
+                            />
+                        </Link>
+                    )}
                 </div>
 
                 {title && (

package/src/navbar/settings.tsx

@@ -15,6 +15,7 @@ import { FC } from 'react';
 import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
 import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
 import { CrexSDK } from "@c-rex/core/sdk";
+import { Button } from "@c-rex/ui/button";
 
 export const SettingsMenu: FC = () => {
     const t = useTranslations();
@@ -23,8 +24,11 @@ export const SettingsMenu: FC = () => {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger className="block">
-                <Settings />
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" rounded="full" size="icon">
+                    <Settings className="!size-5" />
+                </Button>
+
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>
                 <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>

package/src/render-article.tsx

@@ -67,7 +67,7 @@ export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
             id="ids-content"
             data-content-scope="dita"
             lang={contentLang}
-            className={`ids-content ids-content--dita-ot pb-4 pr-4 ${styles.idsContent}`}
+            className={`ids-content ids-content--dita-ot ${styles.idsContent}`}
         >
             {highlightedContent}
         </main>

package/src/stores/__tests__/favorites-store.test.ts

@@ -0,0 +1,54 @@
+import { useFavoritesStore } from "../favorites-store";
+
+describe("favorites-store", () => {
+    beforeEach(() => {
+        useFavoritesStore.setState({
+            favorites: [],
+            documents: {},
+        });
+    });
+
+    it("adds a document and its first topic without duplicating favorites", () => {
+        const { favoriteDocument, favoriteTopic } = useFavoritesStore.getState();
+
+        favoriteDocument("DOC-1", "Document 1");
+        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
+
+        const state = useFavoritesStore.getState();
+
+        expect(state.favorites).toHaveLength(2);
+        expect(state.favorites.map((item) => item.id).sort()).toEqual(["DOC-1", "TOPIC-1"]);
+        expect(state.documents["DOC-1"]).toEqual({
+            label: "Document 1",
+            topics: [{ id: "TOPIC-1", label: "Topic 1", color: "red" }],
+        });
+    });
+
+    it("does not duplicate a document or topic when favorited multiple times", () => {
+        const { favoriteDocument, favoriteTopic } = useFavoritesStore.getState();
+
+        favoriteDocument("DOC-1", "Document 1");
+        favoriteDocument("DOC-1", "Document 1");
+        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
+        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
+
+        const state = useFavoritesStore.getState();
+
+        expect(state.favorites).toHaveLength(2);
+        expect(state.documents["DOC-1"]?.topics).toHaveLength(1);
+    });
+
+    it("does not duplicate the document marker when a topic is favorited after the document", () => {
+        const { favoriteDocument, favoriteTopic } = useFavoritesStore.getState();
+
+        favoriteDocument("DOC-1", "Document 1");
+        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
+        favoriteTopic("DOC-1", "TOPIC-2", "Topic 2", "blue");
+
+        const state = useFavoritesStore.getState();
+        const documentEntries = state.favorites.filter((item) => item.id === "DOC-1");
+
+        expect(documentEntries).toHaveLength(1);
+        expect(state.documents["DOC-1"]?.topics).toHaveLength(2);
+    });
+});

package/src/stores/favorites-store.ts

@@ -2,10 +2,12 @@ import { Favorite } from "@c-rex/types";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+type FavoriteDocumentState = { topics: Favorite[], label?: string };
+type FavoriteDocumentsMap = Record<string, FavoriteDocumentState>;
 
 type FavoritesStore = {
     favorites: Favorite[];
-    documents: Record<string, { topics: Favorite[], label?: string }>;
+    documents: FavoriteDocumentsMap;
     favoriteTopic: (documentId: string, id: string, label: string, color: string) => void;
     unfavoriteTopic: (documentId: string, id: string) => void;
     favoriteDocument: (id: string, label: string) => void;
@@ -17,10 +19,19 @@ export const useFavoritesStore = create<FavoritesStore>()(
         documents: {},
         favorites: [],
         favoriteTopic: (documentId: string, id: string, label: string, color: string) =>
-            set((state) => ({
-                documents: favoriteTopic(state.documents, documentId, id, label, color),
-                favorites: [...state.favorites, { id, label, color }, { id: documentId, label: "", color: "" }],
-            })),
+            set((state) => {
+                const documents = favoriteTopic(state.documents, documentId, id, label, color);
+                const favorites = upsertFavorites(state.favorites, [
+                    { id, label, color },
+                    { id: documentId, label: state.documents[documentId]?.label || "", color: "" },
+                ]);
+
+                if (documents === state.documents && favorites === state.favorites) {
+                    return state;
+                }
+
+                return { documents, favorites };
+            }),
         unfavoriteTopic: (documentId: string, id: string) =>
             set((state) => ({
                 documents: unfavoriteTopic(state.documents, documentId, id),
@@ -28,18 +39,17 @@ export const useFavoritesStore = create<FavoritesStore>()(
             })),
         favoriteDocument: (id: string, label: string) =>
             set((state) => {
-                const documentsCopy = { ...state.documents };
-                if (documentsCopy[id]) {
+                const documents = upsertDocument(state.documents, id, label);
+                const favorites = upsertFavorites(state.favorites, [{ id, label, color: "" }]);
+
+                if (documents === state.documents && favorites === state.favorites) {
                     return state;
                 }
 
                 return {
-                    documents: {
-                        ...state.documents,
-                        [id]: { topics: [], label },
-                    },
-                    favorites: [...state.favorites, { id, label, color: "" }],
-                }
+                    documents,
+                    favorites,
+                };
             }),
         unfavoriteDocument: (id: string) =>
             set((state) => {
@@ -59,9 +69,12 @@ export const useFavoritesStore = create<FavoritesStore>()(
 );
 
 
-const favoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string, label: string, color: string): Record<string, { topics: Favorite[] }> => {
+const favoriteTopic = (documents: FavoriteDocumentsMap, documentId: string, id: string, label: string, color: string): FavoriteDocumentsMap => {
     const currentDocument = documents[documentId];
     const currentTopics = currentDocument?.topics ?? [];
+    if (currentTopics.some((topic) => topic.id === id)) {
+        return documents;
+    }
 
     return {
         ...documents,
@@ -72,7 +85,7 @@ const favoriteTopic = (documents: Record<string, { topics: Favorite[] }>, docume
     };
 };
 
-const unfavoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string): Record<string, { topics: Favorite[] }> => {
+const unfavoriteTopic = (documents: FavoriteDocumentsMap, documentId: string, id: string): FavoriteDocumentsMap => {
     const currentDocument = documents[documentId];
     if (!currentDocument) {
         return documents;
@@ -85,4 +98,62 @@ const unfavoriteTopic = (documents: Record<string, { topics: Favorite[] }>, docu
             topics: currentDocument.topics.filter(topic => topic.id !== id),
         },
     };
-}
+};
+
+const upsertDocument = (documents: FavoriteDocumentsMap, documentId: string, label: string): FavoriteDocumentsMap => {
+    const currentDocument = documents[documentId];
+
+    if (!currentDocument) {
+        return {
+            ...documents,
+            [documentId]: { topics: [], label },
+        };
+    }
+
+    if (currentDocument.label === label) {
+        return documents;
+    }
+
+    return {
+        ...documents,
+        [documentId]: {
+            ...currentDocument,
+            label,
+        },
+    };
+};
+
+const upsertFavorites = (favorites: Favorite[], entries: Favorite[]): Favorite[] => {
+    let nextFavorites = favorites;
+
+    for (const entry of entries) {
+        nextFavorites = upsertFavorite(nextFavorites, entry);
+    }
+
+    return nextFavorites;
+};
+
+const upsertFavorite = (favorites: Favorite[], entry: Favorite): Favorite[] => {
+    const index = favorites.findIndex((favorite) => favorite.id === entry.id);
+    if (index === -1) {
+        return [...favorites, entry];
+    }
+
+    const current = favorites[index];
+    const next = {
+        ...current,
+        label: current.label || entry.label,
+        color: current.color || entry.color,
+    };
+
+    if (
+        current.label === next.label &&
+        current.color === next.color
+    ) {
+        return favorites;
+    }
+
+    const copy = [...favorites];
+    copy[index] = next;
+    return copy;
+};