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

package/src/search-input.tsx

@@ -5,6 +5,7 @@ import { FileCheck, FileX, Search } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
 import * as AutocompleteOptions from "./generated/suggestions";
 import { useQueryState } from "nuqs";
+import { useTranslations } from "next-intl";
 
 type PlacedOn = "NAVBAR" | "BODY"
 type Props = {
@@ -24,6 +25,7 @@ export const SearchInput: FC<Props> = ({
     alternativeAutocompleteType,
     alternativeOnSelectPath
 }) => {
+    const t = useTranslations();
     const [pkg] = useQueryState("package");
     const [checked, setChecked] = useState<boolean>(true);
     const [autocompleteComponentName, setAutocompleteComponentName] = useState<keyof typeof AutocompleteOptions>(autocompleteType);
@@ -61,11 +63,11 @@ export const SearchInput: FC<Props> = ({
                         </TooltipTrigger>
 
                         <TooltipContent>
-                            If checked will search only in this document
+                            {t("searchInDocument")}
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>
             </>}
         </>
     );
-};
+};

package/src/toc/toc-browse-controls.tsx

@@ -46,7 +46,7 @@ export const TocBrowseControls = ({
         >
             <div className={cn("min-w-0", justify === "between" ? "flex-1" : "flex-none")}>
                 {previous ? (
-                    <Button asChild variant="ghost" className={cn("max-w-full justify-start px-0", buttonClassName)}>
+                    <Button asChild variant="ghost" size="icon" className={buttonClassName}>
                         <Link href={previous.href} title={previous.label} className={cn("inline-flex min-w-0 items-center", buttonGapClassName)}>
                             <ChevronLeft className="h-4 w-4 shrink-0" />
                             {showLabels ? <span className="truncate">{previous.label}</span> : null}
@@ -59,7 +59,7 @@ export const TocBrowseControls = ({
 
             <div className={cn("min-w-0 text-right", justify === "between" ? "flex-1" : "flex-none")}>
                 {next ? (
-                    <Button asChild variant="ghost" className={cn("max-w-full justify-end px-0", buttonClassName)}>
+                    <Button asChild variant="ghost" size="icon" className={buttonClassName}>
                         <Link href={next.href} title={next.label} className={cn("inline-flex min-w-0 items-center", buttonGapClassName)}>
                             {showLabels ? <span className="truncate">{next.label}</span> : null}
                             <ChevronRight className="h-4 w-4 shrink-0" />

package/src/toc/toc-tree-panel.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type FC, type ReactNode } from "react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import {
     Sidebar,
@@ -35,16 +36,6 @@ const DEFAULT_TOC_WIDTH_PX = 336;
 const MIN_TOC_WIDTH_PX = 260;
 const MAX_TOC_WIDTH_PX = 640;
 
-const loadingSkeleton = (
-    <div className="pt-4 space-y-2">
-        <Skeleton className="w-auto h-10 mb-2" />
-        <Skeleton className="w-auto h-10 mb-2" />
-        <Skeleton className="w-auto h-10 mb-2 ml-8" />
-        <Skeleton className="w-auto h-10 mb-2 ml-8" />
-        <div className="px-2 pt-1 text-xs text-muted-foreground">Inhaltsverzeichnis wird geladen...</div>
-    </div>
-);
-
 export const TocTreePanel: FC<TocTreePanelProps> = ({
     lang,
     rootNodeId,
@@ -52,13 +43,25 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
     initialChildrenByParentId = {},
     placeholder,
     headerContent,
-    headerTitle = "Inhaltsverzeichnis",
+    headerTitle,
     loadChildren,
     buildNodeHref,
     defaultWidthPx = DEFAULT_TOC_WIDTH_PX,
     minWidthPx = MIN_TOC_WIDTH_PX,
     maxWidthPx = MAX_TOC_WIDTH_PX,
 }) => {
+    const t = useTranslations();
+    const resolvedHeaderTitle = headerTitle ?? t("tableOfContent");
+    const loadingSkeleton = (
+        <div className="pt-4 space-y-2">
+            <Skeleton className="w-auto h-10 mb-2" />
+            <Skeleton className="w-auto h-10 mb-2" />
+            <Skeleton className="w-auto h-10 mb-2 ml-8" />
+            <Skeleton className="w-auto h-10 mb-2 ml-8" />
+            <div className="px-2 pt-1 text-xs text-muted-foreground">{t("loadingTableOfContents")}</div>
+        </div>
+    );
+
     const [childrenByParentId, setChildrenByParentId] = useState<Record<string, TocNodeSummary[]>>(initialChildrenByParentId);
     const [loadingParentIds, setLoadingParentIds] = useState<Set<string>>(new Set());
     const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(activePathIds));
@@ -184,7 +187,7 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
                     {node.hasChildren ? (
                         <button
                             type="button"
-                            aria-label={isExpanded ? "Collapse section" : "Expand section"}
+                            aria-label={isExpanded ? t("collapseSection") : t("expandSection")}
                             className="h-8 w-8 inline-flex items-center justify-center text-muted-foreground hover:text-foreground shrink-0"
                             onClick={() => toggleExpanded(node.id, node.hasChildren)}
                         >
@@ -237,8 +240,8 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
             <Sidebar side="left">
                 <SidebarHeader className="border-b px-2 py-2">
                     <div className="flex min-w-0 w-full items-center justify-between gap-2">
-                        <div className="min-w-0 overflow-hidden pl-9 text-sm font-medium text-foreground" title={typeof headerTitle === "string" ? headerTitle : undefined}>
-                            <span className="truncate">{headerTitle}</span>
+                        <div className="min-w-0 overflow-hidden pl-9 text-sm font-medium text-foreground" title={typeof resolvedHeaderTitle === "string" ? resolvedHeaderTitle : undefined}>
+                            <span className="truncate">{resolvedHeaderTitle}</span>
                         </div>
                         <div className="ml-auto flex shrink-0 items-center">
                             {headerContent}
@@ -263,8 +266,8 @@ export const TocTreePanel: FC<TocTreePanelProps> = ({
             </Sidebar>
             <button
                 type="button"
-                aria-label="Resize table of contents"
-                title="Resize table of contents"
+                aria-label={t("resizeTableOfContents")}
+                title={t("resizeTableOfContents")}
                 className="absolute inset-y-0 -right-2 z-20 hidden w-4 cursor-ew-resize lg:block"
                 onMouseDown={(event) => {
                     resizeStartRef.current = { startX: event.clientX, startWidth: tocWidthPx };

package/src/article/article-content.tsx

@@ -1,19 +0,0 @@
-import { FC } from "react";
-import { RenderArticle } from "../render-article";
-
-interface Props {
-    articleHtml: string;
-}
-
-export const ArticleContent: FC<Props> = async ({ articleHtml }) => {
-    return (
-        <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>
-
-
-
-        </div>
-    )
-}

package/src/breadcrumb.tsx

@@ -1,124 +0,0 @@
-"use client";
-
-import React, { FC, Fragment, ReactNode } from "react";
-import {
-    Breadcrumb as BreadcrumbComponent,
-    BreadcrumbEllipsis,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator
-} from "@c-rex/ui/breadcrumb";
-import { Button } from "@c-rex/ui/button";
-import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@c-rex/ui/drawer";
-import { TreeOfContent } from "@c-rex/interfaces";
-import { useTranslations } from 'next-intl';
-import Link from "next/link"
-import { useBreakpoint } from "@c-rex/ui/hooks"
-import { DEVICE_OPTIONS } from "@c-rex/constants";
-import { generateBreadcrumbItems } from "@c-rex/utils";
-
-interface BreadcrumbProps {
-    tree: TreeOfContent[];
-    lang: string;
-}
-
-export const Breadcrumb: FC<BreadcrumbProps> = ({ tree, lang }) => {
-    const t = useTranslations("breadcrumbs");
-    const items = generateBreadcrumbItems(tree);
-    const device = useBreakpoint();
-    const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
-
-    if (!items) return null
-
-    const lastItem = items[items.length - 1] as TreeOfContent;
-
-    const renderDrawer = () => {
-        if (items.length < 2) return null
-
-        return (
-            <>
-                <BreadcrumbItem>
-                    <Drawer>
-                        <DrawerTrigger asChild>
-                            <BreadcrumbEllipsis className="h-4 w-4" />
-                        </DrawerTrigger>
-                        <DrawerContent>
-                            <DrawerHeader className="text-left">
-                                <DrawerTitle>Navigate to</DrawerTitle>
-                                <DrawerDescription>
-                                    Select a page to navigate to.
-                                </DrawerDescription>
-                            </DrawerHeader>
-
-                            <div className="grid gap-1 px-4">
-                                {items.slice(0, -1).map((item) => (
-                                    <Link
-                                        key={item.linkId}
-                                        href={`/topics/${item.linkId}/content`}
-                                        className="py-1 text-sm"
-                                    >
-                                        {item.label}
-                                    </Link>
-                                ))}
-                            </div>
-
-                            <DrawerFooter className="pt-4">
-                                <DrawerClose asChild>
-                                    <Button variant="outline">Close</Button>
-                                </DrawerClose>
-                            </DrawerFooter>
-                        </DrawerContent>
-                    </Drawer>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-            </>
-
-        );
-    };
-
-    const renderLink = (showLink: boolean, item: TreeOfContent): ReactNode => {
-        if (showLink) {
-            return <BreadcrumbLink href={`/topics/${item.linkId}/content`}>{item.label}</BreadcrumbLink>;
-        }
-
-        return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
-    };
-
-    return (
-        <BreadcrumbComponent lang={lang} className="hidden sm:block">
-            <BreadcrumbList>
-                <BreadcrumbItem>
-                    <BreadcrumbLink asChild>
-                        <BreadcrumbLink href="/">{t("home")}</BreadcrumbLink>
-                    </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-
-                {isMobile ? renderDrawer() : (
-                    <>
-                        {items.slice(0, -1).map((item, index) => {
-                            const isLast = index === items.length - 1;
-
-                            return (
-                                <Fragment key={`${item.label}-fragment`}>
-                                    <BreadcrumbItem key={`${item.label}-item`}>
-                                        {renderLink(!isLast, item)}
-                                    </BreadcrumbItem>
-                                    {!isLast && (
-                                        <BreadcrumbSeparator key={`${item.label}-separator`} />
-                                    )}
-                                </Fragment>
-                            );
-                        })}
-                    </>
-                )}
-
-                <BreadcrumbPage>
-                    {renderLink(false, lastItem)}
-                </BreadcrumbPage>
-            </BreadcrumbList>
-        </BreadcrumbComponent>
-    );
-};

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

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

package/src/render-article.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { useMemo, useRef, useEffect } from "react";
-import parse from "html-react-parser";
-import { useQueryState } from "nuqs";
-import { useHighlight } from "@c-rex/contexts/highlight-provider";
-import { useHighlightStore } from "./stores/highlight-store";
-import styles from "./render-article.module.css";
-
-type Props = {
-    htmlContent: string;
-    contentLang?: string;
-};
-
-export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
-    const [query] = useQueryState("q");
-    const containerRef = useRef<HTMLElement | null>(null);
-    const enableHighlight = useHighlightStore((state) => state.enable);
-    const { registerContainer } = useHighlight();
-
-    const highlightedContent = useMemo(() => {
-        if (!enableHighlight) return parse(htmlContent);
-        if (!query) return parse(htmlContent);
-
-        const terms = query
-            .split(/[+ ]/)
-            .map((t) => t.trim())
-            .filter(Boolean);
-
-        if (terms.length === 0) return parse(htmlContent);
-
-        const escaped = terms.map((t) =>
-            t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-        );
-        const regex = new RegExp(`(${escaped.join("|")})`, "gi");
-
-        return parse(htmlContent, {
-            replace: (domNode: any) => {
-                if (domNode.type === "text") {
-                    const parts = domNode.data.split(regex);
-                    if (parts.length === 1) return;
-                    return (
-                        <>
-                            {parts.map((part: any, i: any) =>
-                                regex.test(part) ? (
-                                    <mark key={i} className="bg-yellow-200">
-                                        {part}
-                                    </mark>
-                                ) : (
-                                    part
-                                )
-                            )}
-                        </>
-                    );
-                }
-            },
-        });
-    }, [htmlContent, query, enableHighlight]);
-
-    useEffect(() => {
-        registerContainer(containerRef.current);
-    }, [highlightedContent, registerContainer]);
-
-    return (
-        <main
-            ref={containerRef}
-            id="ids-content"
-            data-content-scope="dita"
-            lang={contentLang}
-            className={`ids-content ids-content--dita-ot ${styles.idsContent}`}
-        >
-            {highlightedContent}
-        </main>
-    );
-};

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

@@ -1,4 +0,0 @@
-export {
-    TaxonomyRestrictionMenu as RestrictionMenuContainer,
-    type TaxonomyRestrictionMenuProps as RestrictionMenuContainerProps,
-} from "./taxonomy-restriction-menu";

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

@@ -1,4 +0,0 @@
-export {
-    RestrictionSelectionMenu as RestrictionMenu,
-    type RestrictionSelectionMenuProps as RestrictionMenuProps,
-} from "./restriction-selection-menu";

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

@@ -1,54 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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: FavoriteDocumentsMap;
-    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 const useFavoritesStore = create<FavoritesStore>()(
-    persist((set) => ({
-        documents: {},
-        favorites: [],
-        favoriteTopic: (documentId: string, id: string, label: string, color: string) =>
-            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),
-                favorites: state.favorites.filter((topic) => topic.id !== id),
-            })),
-        favoriteDocument: (id: string, label: string) =>
-            set((state) => {
-                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,
-                    favorites,
-                };
-            }),
-        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, favorites: newFavorites };
-            }),
-    }), {
-        name: "c-rex-favorites",
-    })
-);
-
-
-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];
-    if (!current) {
-        return [...favorites, entry];
-    }
-
-    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;
-};