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

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/navbar/navbar.tsx

@@ -11,7 +11,7 @@ import { cn } from "@c-rex/utils";
 import { getTranslations } from "next-intl/server";
 import { Button } from "@c-rex/ui/button";
 import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
-import { Menu } from "lucide-react";
+import { Menu, Search } from "lucide-react";
 import { getOrganizationBranding } from "@c-rex/services/vcard";
 
 type NavBarProps = {
@@ -53,14 +53,9 @@ export const NavBar: FC<NavBarProps> = async ({
     }
 
     return (
-        <header className="sticky flex flex-col top-0 z-40 w-full p-4 backdrop-blur-xl transition-all bg-transparent border-b gap-2">
-            <div className="w-full flex items-center justify-between gap-2">
-                <div
-                    className={cn(
-                        "flex items-center gap-4",
-                        title && "lg:w-[calc(16rem-16px)]"
-                    )}
-                >
+        <header className="sticky flex flex-col top-0 z-40 w-full backdrop-blur-xl transition-all bg-transparent border-b">
+            <div className="w-full flex items-center justify-between gap-2 p-4">
+                <div className="flex items-center gap-4">
                     {showMenu && (
                         <DropdownHoverItem
                             label={
@@ -107,28 +102,22 @@ export const NavBar: FC<NavBarProps> = async ({
                             <img
                                 src={organizationBranding.logoSrc}
                                 alt={`${organizationBranding.organizationName} logo`}
-                                className="h-14"
+                                className="h-10"
                             />
                         </Link>
                     )}
                 </div>
 
-                {title && (
-                    <div className="flex-1 hidden md:flex md:justify-center lg:justify-start">
-                        <h1 className="md:text-2xl lg:text-3xl font-bold tracking-tight text-balance">{title}</h1>
-                    </div>
-                )}
-
                 <div className="flex gap-2">
-                    {willShowInput &&
-                        <div className="hidden sm:flex flex-1 items-center px-3 border rounded-full h-8 c-rex-search-bar">
-                            <SearchInput
-                                autocompleteType={autocompleteType}
-                                onSelectPath={onSelectPath}
-                                {...props}
-                            />
-                        </div>
-                    }
+
+
+                    <Button rounded="full" size="sm" className="w-8" variant="ghost">
+                        <Search className="!size-5" />
+                    </Button>
+
+                    {clientConfigs.languageSwitcher.enabled && (
+                        <SettingsMenu />
+                    )}
 
                     {clientConfigs.OIDC.userEnabled && (
                         <>
@@ -140,15 +129,12 @@ export const NavBar: FC<NavBarProps> = async ({
                         </>
                     )}
 
-                    {clientConfigs.languageSwitcher.enabled && (
-                        <SettingsMenu />
-                    )}
                 </div>
             </div>
 
             {title && (
-                <div className="flex-1 flex justify-center md:hidden">
-                    <h1 className="text-2xl font-bold tracking-tight text-balance">{title}</h1>
+                <div className="flex-1 flex justify-center border-t py-2">
+                    <h1 className="text-2xl font-bold tracking-tight text-balance text-center">{title}</h1>
                 </div>
             )}
         </header>

package/src/navbar/settings.tsx

@@ -25,7 +25,7 @@ export const SettingsMenu: FC = () => {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" rounded="full" size="icon">
+                <Button rounded="full" size="sm" className="w-8" variant="ghost">
                     <Settings className="!size-5" />
                 </Button>
 

package/src/page-wrapper.tsx

@@ -22,7 +22,7 @@ export const PageWrapper = ({
     renderRestrictionMenu,
     restrictField,
     requestType,
-    itemsToRender,
+    itemsByRow,
     onlyUsedEntries = true,
     enableHierarchy = false,
     fetchMode = "deferred",
@@ -33,7 +33,7 @@ export const PageWrapper = ({
     const restrictionMenuProps: ComponentProps<typeof TaxonomyRestrictionMenu> = {
         restrictField: restrictField ?? "informationSubjects",
         requestType: requestType ?? "InformationSubjectsGetAllClient",
-        itemsToRender,
+        itemsByRow,
         onlyUsedEntries,
         enableHierarchy,
         fetchMode,
@@ -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-4">
                     {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) {