@c-rex/components 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "files": [
     "src"
   ],

package/src/bookmark-button.tsx

@@ -48,7 +48,7 @@ export const BookmarkButton: FC<{ markersList: Favorite[], trigger?: ReactNode }
                                     <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
                                 </TableCell>
                                 <TableCell>
-                                    <Link href={`./${item.id}`}>
+                                    <Link href={`${window.location.origin}/topics/${item.id}`}>
                                         {item.label}
                                     </Link>
                                 </TableCell>

package/src/breadcrumb.tsx

@@ -26,7 +26,7 @@ interface BreadcrumbProps {
 export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
     const t = useTranslations("breadcrumbs");
     const device = useBreakpoint();
-    const isMobile = (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
+    const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
 
     if (!items) return null
 

package/src/info/info-table.tsx

@@ -21,6 +21,8 @@ import { Flag } from "../flag";
 import { Button } from "@c-rex/ui/button";
 import { useLanguageStore } from "../stores/language-store";
 import { FileIcon } from "../file-icon";
+import { BookmarkButton } from "../bookmark-button";
+import { FaRegBookmark } from "react-icons/fa6";
 
 type Props = {
     title: string;
@@ -31,7 +33,7 @@ type Props = {
 }
 
 
-export const InfoTable: FC<Props> = ({ title, items, files, availableVersions }) => {
+export const InfoTable: FC<Props> = ({ title, items, files, availableVersions, markersList }) => {
     const t = useTranslations();
     const uiLang = useLanguageStore(state => state.uiLang);
     const newItems = filteredItems(items)
@@ -39,8 +41,24 @@ export const InfoTable: FC<Props> = ({ title, items, files, availableVersions })
     return (
         <Card className="p-0 !pt-4">
             <CardHeader>
-                <CardTitle className="text-lg flex justify-between">
+                <CardTitle className="text-lg flex justify-between items-end">
                     {title}
+
+                    {(markersList && markersList.length > 0) && (
+                        <BookmarkButton
+                            markersList={markersList.filter(item => item.label.length > 0)}
+                            trigger={
+                                <Button variant="outline" size="icon" className="relative">
+                                    <FaRegBookmark className="!w-5 color-primary" />
+                                    <span
+                                        className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
+                                    >
+                                        {markersList.length}
+                                    </span>
+                                </Button>
+                            }
+                        />
+                    )}
                 </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3 !p-0">

package/src/left-sidebar.tsx

@@ -14,7 +14,6 @@ import {
 } from "@c-rex/ui/sidebar";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { TreeOfContent } from "@c-rex/interfaces";
-import { useTranslations } from "next-intl";
 import { cn } from "@c-rex/utils";
 
 interface SidebarProps extends ComponentProps<typeof Sidebar> {
@@ -23,7 +22,6 @@ interface SidebarProps extends ComponentProps<typeof Sidebar> {
 }
 
 export function LeftSidebar({ data, loading, className, lang, ...props }: SidebarProps) {
-    const t = useTranslations();
 
     const tableOfContentGroup = (): JSX.Element | null => {
         if (loading) {

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

@@ -2,13 +2,14 @@
 
 import { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { BLOG_TYPE_AND_LINK, DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { BLOG_TYPE_AND_LINK, CONTENT_LANG_KEY, DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner"
 import { useLanguageStore } from "../../stores/language-store";
 import { useSearchSettingsStore } from "../../stores/search-settings-store";
+import { setCookie } from "@c-rex/utils/cookies";
 
 export const ContentLanguageSwitch = () => {
     const t = useTranslations();
@@ -41,6 +42,7 @@ export const ContentLanguageSwitch = () => {
     const changeContentLanguage = (locale: string) => {
         startTransition(() => {
             setContentLang(locale)
+            setCookie(CONTENT_LANG_KEY, locale);
             updatePreferences({ language: [locale] })
 
             if (queryLanguage != null) {

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

@@ -2,8 +2,9 @@
 
 import React, { FC, startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { UI_LANG_OPTIONS } from "@c-rex/constants";
-import { getCountryCodeByLang } from "@c-rex/utils";
+import { UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
+import { getCountryCodeByLang, } from "@c-rex/utils";
+import { setCookie } from "@c-rex/utils/cookies";
 import { useLanguageStore } from "../../stores/language-store";
 
 export const UILanguageSwitch: FC = () => {
@@ -21,6 +22,7 @@ export const UILanguageSwitch: FC = () => {
     const setUILanguage = (locale: string) => {
         startTransition(() => {
             setUiLang(locale)
+            setCookie(UI_LANG_KEY, locale);
 
             window.location.reload()
         });

package/src/right-sidebar.tsx

@@ -32,10 +32,10 @@ export function RightSidebar({
     const t = useTranslations();
     const favoritesDocuments = useFavoritesStore((state) => state.documents);
     const isFavoriteDocument = Object.keys(favoritesDocuments).some((docId) => docId === documentId);
-    let topicList: Favorite[] = []
+    let favoritesList: Favorite[] = []
 
-    if (isFavoriteDocument && favoritesDocuments[documentId]) {
-        topicList = favoritesDocuments[documentId].topics
+    if (Object.keys(favoritesDocuments).some(docId => docId === documentId)) {
+        favoritesList = favoritesDocuments[documentId]?.topics || []
     }
 
     return (
@@ -50,7 +50,7 @@ export function RightSidebar({
                                 items={documentInfo}
                                 files={files}
                                 availableVersions={documentAvailableVersions}
-                                markersList={isFavoriteDocument ? topicList : []}
+                                markersList={isFavoriteDocument ? favoritesList : []}
                             />
                         )}
 

package/src/stores/favorites-store.ts

@@ -44,8 +44,14 @@ export const useFavoritesStore = create<FavoritesStore>()(
         unfavoriteDocument: (id: string) =>
             set((state) => {
                 const documentsCopy = { ...state.documents };
+                if (!documentsCopy[id]) {
+                    return state;
+                }
+
+                const favoritesToRemove = documentsCopy[id]?.topics.map(topic => topic.id) || [];
+                const newFavorites = state.favorites.filter(fav => fav.id !== id && !favoritesToRemove.includes(fav.id));
                 delete documentsCopy[id];
-                return { documents: documentsCopy };
+                return { documents: documentsCopy, favorites: newFavorites };
             }),
     }), {
         name: "c-rex-favorites",

package/src/stores/language-store.ts

@@ -1,8 +1,4 @@
-import { UI_LANG_KEY } from "@c-rex/constants";
-import { AVAILABLE_CONTENT_LANG_KEY } from "@c-rex/constants";
-import { CONTENT_LANG_KEY } from "@c-rex/constants";
 import { LanguageAndCountries } from "@c-rex/interfaces";
-import { getCookieFromDocument, setCookie } from "@c-rex/utils";
 import { create } from "zustand";
 
 type LanguageStoreType = {
@@ -12,7 +8,6 @@ type LanguageStoreType = {
     setContentLang: (v: string) => void;
     setUiLang: (v: string) => void;
     setAvailableLanguages: (list: LanguageAndCountries[]) => void;
-    hydrate: () => void;
 };
 
 export const useLanguageStore = create<LanguageStoreType>((set) => ({
@@ -21,28 +16,11 @@ export const useLanguageStore = create<LanguageStoreType>((set) => ({
     availableLanguages: [],
     setContentLang: (v) => {
         set({ contentLang: v });
-        setCookie(CONTENT_LANG_KEY, v, 7);
     },
     setUiLang: (v) => {
         set({ uiLang: v });
-        setCookie(UI_LANG_KEY, v, 7);
     },
     setAvailableLanguages: (list) => {
         set({ availableLanguages: list });
-        setCookie(AVAILABLE_CONTENT_LANG_KEY, JSON.stringify(list), 7);
-    },
-    hydrate: () => {
-        set({
-            uiLang: getCookieFromDocument(UI_LANG_KEY),
-            contentLang: getCookieFromDocument(CONTENT_LANG_KEY),
-            availableLanguages: (() => {
-                const raw = getCookieFromDocument(AVAILABLE_CONTENT_LANG_KEY);
-                try {
-                    return raw ? JSON.parse(raw) : [];
-                } catch {
-                    return [];
-                }
-            })(),
-        });
     },
 }));