@c-rex/components 0.3.0-build.35 → 0.3.0-build.36

package/src/favorites/favorites-context.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { Favorite } from "@c-rex/types";
+import { getLocalStorageJson, removeLocalStorageItem, setLocalStorageJson } from "@c-rex/utils";
+import { ReactNode, createContext, useContext, useEffect, useState } from "react";
+
+type FavoriteDocumentState = { topics: Favorite[]; label?: string };
+type FavoriteDocumentsMap = Record<string, FavoriteDocumentState>;
+
+export type FavoritesState = {
+    favorites: Favorite[];
+    documents: FavoriteDocumentsMap;
+};
+
+export type FavoritesActions = {
+    favoriteTopic: (documentId: string, id: string, label: string, color: string) => void;
+    unfavoriteTopic: (documentId: string, id: string) => void;
+    favoriteDocument: (id: string, label: string) => void;
+    unfavoriteDocument: (id: string) => void;
+};
+
+export type FavoritesContextValue = FavoritesState & FavoritesActions & {
+    isHydrated: boolean;
+};
+
+type PersistedFavoritesState = FavoritesState | {
+    state?: FavoritesState;
+    version?: number;
+};
+
+export const FAVORITES_STORAGE_KEY = "c-rex-favorites";
+
+export const defaultFavoritesState: FavoritesState = {
+    documents: {},
+    favorites: [],
+};
+
+export const loadFavoritesState = (fallbackState: FavoritesState = defaultFavoritesState): FavoritesState => {
+    const persisted = getLocalStorageJson<PersistedFavoritesState>(FAVORITES_STORAGE_KEY);
+
+    if (!persisted) {
+        return fallbackState;
+    }
+
+    if (!isFavoritesState(persisted)) {
+        return persisted.state ?? fallbackState;
+    }
+
+    return persisted;
+};
+
+export const persistFavoritesState = (state: FavoritesState): void => {
+    setLocalStorageJson(FAVORITES_STORAGE_KEY, state);
+};
+
+export const clearFavoritesState = (): void => {
+    removeLocalStorageItem(FAVORITES_STORAGE_KEY);
+};
+
+export const applyFavoriteTopic = (state: FavoritesState, documentId: string, id: string, label: string, color: string): FavoritesState => {
+    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 { ...state, documents, favorites };
+};
+
+export const applyUnfavoriteTopic = (state: FavoritesState, documentId: string, id: string): FavoritesState => ({
+    ...state,
+    documents: unfavoriteTopic(state.documents, documentId, id),
+    favorites: state.favorites.filter((topic) => topic.id !== id),
+});
+
+export const applyFavoriteDocument = (state: FavoritesState, id: string, label: string): FavoritesState => {
+    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 {
+        ...state,
+        documents,
+        favorites,
+    };
+};
+
+export const applyUnfavoriteDocument = (state: FavoritesState, id: string): FavoritesState => {
+    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 {
+        ...state,
+        documents: documentsCopy,
+        favorites: newFavorites,
+    };
+};
+
+const FavoritesContext = createContext<FavoritesContextValue | undefined>(undefined);
+
+type FavoritesProviderProps = {
+    children: ReactNode;
+    initialState?: FavoritesState;
+};
+
+export const FavoritesProvider = ({
+    children,
+    initialState = defaultFavoritesState,
+}: FavoritesProviderProps) => {
+    const [state, setState] = useState<FavoritesState>(initialState);
+    const [isHydrated, setIsHydrated] = useState(false);
+
+    useEffect(() => {
+        setState(loadFavoritesState(initialState));
+        setIsHydrated(true);
+
+        const handleStorageChange = () => {
+            setState(loadFavoritesState(initialState));
+        };
+
+        window.addEventListener("storage", handleStorageChange);
+        return () => window.removeEventListener("storage", handleStorageChange);
+    }, [initialState]);
+
+    const favoriteTopic = (documentId: string, id: string, label: string, color: string) => {
+        setState((currentState) => {
+            const nextState = applyFavoriteTopic(currentState, documentId, id, label, color);
+            persistFavoritesState(nextState);
+            return nextState;
+        });
+    };
+
+    const unfavoriteTopic = (documentId: string, id: string) => {
+        setState((currentState) => {
+            const nextState = applyUnfavoriteTopic(currentState, documentId, id);
+            persistFavoritesState(nextState);
+            return nextState;
+        });
+    };
+
+    const favoriteDocument = (id: string, label: string) => {
+        setState((currentState) => {
+            const nextState = applyFavoriteDocument(currentState, id, label);
+            persistFavoritesState(nextState);
+            return nextState;
+        });
+    };
+
+    const unfavoriteDocument = (id: string) => {
+        setState((currentState) => {
+            const nextState = applyUnfavoriteDocument(currentState, id);
+            persistFavoritesState(nextState);
+            return nextState;
+        });
+    };
+
+    const contextValue: FavoritesContextValue = {
+        ...state,
+        isHydrated,
+        favoriteTopic,
+        unfavoriteTopic,
+        favoriteDocument,
+        unfavoriteDocument,
+    };
+
+    return (
+        <FavoritesContext.Provider value={contextValue}>
+            {children}
+        </FavoritesContext.Provider>
+    );
+};
+
+export const useFavorites = <T,>(selector: (state: FavoritesContextValue) => T): T => {
+    const favoritesContext = useContext(FavoritesContext);
+
+    if (!favoritesContext) {
+        throw new Error("useFavorites must be used within FavoritesProvider");
+    }
+
+    return selector(favoritesContext);
+};
+
+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,
+        [documentId]: {
+            ...currentDocument,
+            topics: [...currentTopics, { id, label, color }],
+        },
+    };
+};
+
+const unfavoriteTopic = (documents: FavoriteDocumentsMap, documentId: string, id: string): FavoriteDocumentsMap => {
+    const currentDocument = documents[documentId];
+    if (!currentDocument) {
+        return documents;
+    }
+
+    return {
+        ...documents,
+        [documentId]: {
+            ...currentDocument,
+            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;
+};
+
+const isFavoritesState = (value: PersistedFavoritesState): value is FavoritesState => (
+    "favorites" in value && "documents" in value
+);

package/src/icons/file-icon.tsx

@@ -34,34 +34,25 @@ const getGenericDisplayCode = (mimeType: string) => {
 
 const GenericFileTypeIcon = ({ code }: { code: string }) => (
     <svg
-        viewBox="0 0 24 24"
+        strokeWidth="0"
+        viewBox="0 0 256 256"
         className="size-5 text-primary"
         aria-hidden="true"
-        fill="none"
+        fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
     >
         <path
-            d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-6Z"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            fill="currentColor"
-            fillOpacity="0.08"
-        />
-        <path
-            d="M14 2v6h5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+            d="M36,112V40A16,16,0,0,1,52,24h100a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88v24a8,8,0,0,1-16,0V96H152a8,8,0,0,1-8-8V40H52v72a8,8,0,0,1-16,0ZM160,80h28.69L160,51.31Z"
         />
         <text
-            x="12"
-            y="17.25"
+            x="128"
+            y="220"
             textAnchor="middle"
-            fontSize="5.2"
+            fontSize="110"
             fontWeight="700"
             fill="currentColor"
-            letterSpacing="0.4"
+            fontFamily="inherit"
+            letterSpacing={code.length >= 4 ? -2 : 0}
         >
             {code}
         </text>
@@ -69,13 +60,5 @@ const GenericFileTypeIcon = ({ code }: { code: string }) => (
 );
 
 export const FileIcon = ({ extension }: { extension: string }) => {
-    if (extension === "application/pdf") {
-        return <PiFilePdf className="text-primary" />;
-    }
-
-    if (extension === "application/zip") {
-        return <PiFileZip className="text-primary" />;
-    }
-
     return <GenericFileTypeIcon code={getGenericDisplayCode(extension)} />;
 };

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

@@ -344,7 +344,7 @@ export const InformationUnitMetadataGridClient = ({
 
     const cardContent = (
         <CardContent className="space-y-3 !p-0">
-            <Table className="table-fixed">
+            <Table className="table-fixed overflow-ellipsis">
                 <TableBody>
                     {showBookmarkButton && (
                         <TableRow className="min-h-12">
@@ -374,26 +374,26 @@ export const InformationUnitMetadataGridClient = ({
                         availableInVersions
                             .filter((item) => item.shortId !== data.shortId)
                             .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">
-                                        {availableInVersions
-                                            .filter((item) => item.shortId !== data.shortId)
-                                            .map((item) => (
-                                                <span className="w-8 block border" key={item.shortId}>
-                                                    <Link
-                                                        href={linkPattern.replace("{shortId}", item.shortId)}
-                                                        title={item.language}
-                                                    >
-                                                        <Flag countryCode={extractCountryCodeFromLanguage(item.language)} />
-                                                    </Link>
-                                                </span>
-                                            ))}
-                                    </TableCell>
-                                </TableRow>
-                            ) : null
+                            <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">
+                                    {availableInVersions
+                                        .filter((item) => item.shortId !== data.shortId)
+                                        .map((item) => (
+                                            <span className="w-8 block border" key={item.shortId}>
+                                                <Link
+                                                    href={linkPattern.replace("{shortId}", item.shortId)}
+                                                    title={item.language}
+                                                >
+                                                    <Flag countryCode={extractCountryCodeFromLanguage(item.language)} />
+                                                </Link>
+                                            </span>
+                                        ))}
+                                </TableCell>
+                            </TableRow>
+                        ) : null
                     ) : (
                         <AvailableInRow
                             versionOfShortId={data.versionOf?.shortId}

package/src/page-wrapper.tsx

@@ -46,7 +46,7 @@ export const PageWrapper = ({
             <NavBar showInput={showInput} showPkgFilter={showPkgFilter} {...props} />
 
             {showRestrictMenu && (
-                <div className="flex-1 container pt-6">
+                <div className="container pt-6">
                     {renderRestrictionMenu ? renderRestrictionMenu(restrictionMenuProps) : (
                         <TaxonomyRestrictionMenu {...restrictionMenuProps} />
                     )}

package/src/renditions/html-client.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { FragmentsGetByIdClient } from "../generated/client-components";
 import type { RenditionModel } from "@c-rex/interfaces";
 import { RenderArticle } from "../render-article";
+import { useTranslations } from "next-intl";
 
 type HtmlRenditionClientProps = {
     htmlFormats?: string[];
@@ -11,8 +12,6 @@ type HtmlRenditionClientProps = {
     renditions?: RenditionModel[] | null;
 };
 
-const EMPTY = <div>No rendition available</div>;
-
 const findHtmlViewUrl = (
     renditions?: RenditionModel[] | null,
     htmlFormats: string[] = ["application/xhtml+xml", "application/html", "text/html"]
@@ -30,6 +29,7 @@ const HtmlFromRenditions = ({
     renditions?: RenditionModel[] | null;
     htmlFormats?: string[];
 }) => {
+    const t = useTranslations();
     const [htmlContent, setHtmlContent] = useState<string | null>(null);
     const [hasError, setHasError] = useState(false);
     const viewUrl = useMemo(() => findHtmlViewUrl(renditions, htmlFormats), [htmlFormats, renditions]);
@@ -62,8 +62,8 @@ const HtmlFromRenditions = ({
         };
     }, [viewUrl]);
 
-    if (!viewUrl || hasError) return EMPTY;
-    if (htmlContent == null) return <div className="text-muted-foreground text-sm">Loading content...</div>;
+    if (!viewUrl || hasError) return <div>{t("noRenditionAvailable")}</div>;
+    if (htmlContent == null) return <div className="text-muted-foreground text-sm">{t("loadingContent")}</div>;
 
     return <RenderArticle htmlContent={htmlContent} />;
 };
@@ -73,11 +73,13 @@ export const HtmlRenditionClient = ({
     htmlFormats = ["application/xhtml+xml", "application/html", "text/html"],
     renditions,
 }: HtmlRenditionClientProps) => {
+    const t = useTranslations();
+
     if (renditions !== undefined) {
         return <HtmlFromRenditions renditions={renditions} htmlFormats={htmlFormats} />;
     }
 
-    if (!fragmentShortId) return EMPTY;
+    if (!fragmentShortId) return <div>{t("noRenditionAvailable")}</div>;
 
     return (
         <FragmentsGetByIdClient
@@ -90,7 +92,7 @@ export const HtmlRenditionClient = ({
         >
             {({ data, isLoading }) => {
                 if (isLoading && !data) {
-                    return <div className="text-muted-foreground text-sm">Loading content...</div>;
+                    return <div className="text-muted-foreground text-sm">{t("loadingContent")}</div>;
                 }
                 return <HtmlFromRenditions renditions={data?.renditions} htmlFormats={htmlFormats} />;
             }}

package/src/renditions/html.tsx

@@ -3,6 +3,7 @@ import * as cheerio from "cheerio"
 import { RenditionModel } from "@c-rex/interfaces";
 import { fragmentsGetByIdServer } from "@c-rex/services/server-requests";
 import { call } from "@c-rex/utils";
+import { getTranslations } from "next-intl/server";
 
 interface HtmlRenditionProps {
     htmlFormats?: string[]
@@ -23,7 +24,8 @@ export const HtmlRendition: FC<HtmlRenditionProps> = async ({
     render = defaultRender,
     renditions,
 }) => {
-    const empty = <div>No rendition available</div>;
+    const t = await getTranslations();
+    const empty = <div>{t("noRenditionAvailable")}</div>;
 
     if (renditions == undefined) {
         if (fragmentShortId) {

package/src/restriction-menu/restriction-menu-item.tsx

@@ -38,47 +38,30 @@ export const RestrictionNavigationItem: FC<Props> = ({
         currentRestrict: restrict,
     });
 
-    const labelStyle = {
-        display: 'inline-block',
-        maxWidth: 100,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        verticalAlign: 'middle',
-    } as React.CSSProperties;
-
-    const needsTooltip = label.length > 12;
-
-    const labelNode = needsTooltip ? (
-        <TooltipProvider delayDuration={300}>
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <span style={labelStyle}>{label}</span>
-                </TooltipTrigger>
-                <TooltipContent>{label}</TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
-    ) : (
-        <span style={labelStyle}>{label}</span>
-    );
-
     return (
         <NavigationMenuItem key={shortId} asChild>
-            <Button
-                variant={selected ? "default" : "outline"}
-                rounded="full"
-                onClick={() => {
-                    startSearchNavigation();
-                    if (shouldRemoveRestrictParam) {
-                        setRestrict(null);
-                    } else {
-                        setRestrict(restrictionValue);
-                    }
-                }}
-                className="cursor-pointer"
-            >
-                {labelNode}
-            </Button>
+            <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant={selected ? "default" : "outline"}
+                            rounded="full"
+                            onClick={() => {
+                                startSearchNavigation();
+                                if (shouldRemoveRestrictParam) {
+                                    setRestrict(null);
+                                } else {
+                                    setRestrict(restrictionValue);
+                                }
+                            }}
+                            className="cursor-pointer"
+                        >
+                            {label}
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{label}</TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
         </NavigationMenuItem>
     );
 };
@@ -104,25 +87,32 @@ export const RestrictionDropdownItem: FC<Props> = ({
     });
 
     return (
-        <Button
-            variant={selected ? "default" : "ghost"}
-            onClick={() => {
-                if (onClick) {
-                    onClick();
-                    return;
-                }
-                startSearchNavigation();
-                if (shouldRemoveRestrictParam) {
-                    setRestrict(null);
-                } else {
-                    setRestrict(restrictionValue);
-                }
-            }}
-            rounded="full"
-            className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
-        >
-            {label}
-        </Button>
+        <TooltipProvider delayDuration={300}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant={selected ? "default" : "ghost"}
+                        onClick={() => {
+                            if (onClick) {
+                                onClick();
+                                return;
+                            }
+                            startSearchNavigation();
+                            if (shouldRemoveRestrictParam) {
+                                setRestrict(null);
+                            } else {
+                                setRestrict(restrictionValue);
+                            }
+                        }}
+                        rounded="full"
+                        className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
+                    >
+                        {label}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
     );
 };