@firecms/core 3.0.1 → 3.1.0-canary.02232f4

package/src/components/HomePage/DefaultHomePage.tsx

@@ -30,15 +30,20 @@ import { NavigationCardBinding } from "./NavigationCardBinding";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { RenameGroupDialog } from "./RenameGroupDialog";
+import { useTranslation } from "../../hooks/useTranslation";
 
-export const DEFAULT_GROUP_NAME = "Views";
+/**
+ * Internal sentinel key for ungrouped navigation entries.
+ * Not displayed — display components use t("views_group") when group is undefined.
+ */
+const DEFAULT_GROUP_KEY = "__default__";
 export const ADMIN_GROUP_NAME = "Admin";
 
 export function DefaultHomePage({
-                                    additionalActions,
-                                    additionalChildrenStart,
-                                    additionalChildrenEnd
-                                }: {
+    additionalActions,
+    additionalChildrenStart,
+    additionalChildrenEnd
+}: {
     additionalActions?: React.ReactNode;
     additionalChildrenStart?: React.ReactNode;
     additionalChildrenEnd?: React.ReactNode;
@@ -47,6 +52,7 @@ export function DefaultHomePage({
     const context = useFireCMSContext();
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
+    const { t } = useTranslation();
 
     if (!navigationController.topLevelNavigation)
         throw Error("Navigation not ready");
@@ -95,6 +101,10 @@ export function DefaultHomePage({
         entries: NavigationEntry[];
     } | null>(null);
 
+    // Flag to prevent useEffect from overwriting local DnD state
+    const isDndDirtyRef = useRef(false);
+    const dndDirtyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
     // Memoize the processed groups to avoid unnecessary recalculations
     const processedGroups = useMemo(() => {
         const src = filteredNavigationEntries;
@@ -104,7 +114,7 @@ export function DefaultHomePage({
             const g =
                 e.type === "admin"
                     ? ADMIN_GROUP_NAME
-                    : e.group ?? DEFAULT_GROUP_NAME;
+                    : e.group ?? DEFAULT_GROUP_KEY;
             (entriesByGroup[g] ??= []).push(e);
         });
 
@@ -115,7 +125,7 @@ export function DefaultHomePage({
 
         if (performingSearch) {
             const ordered = [
-                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_NAME))
+                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_KEY))
             ];
             allProcessed = ordered
                 .map((name) => ({
@@ -125,11 +135,11 @@ export function DefaultHomePage({
                 .filter((g) => g.entries.length);
         } else {
             allProcessed = groupOrderFromNavController.map((g) => ({
-                name: g,
-                entries: entriesByGroup[g] || []
+                name: g ?? DEFAULT_GROUP_KEY,
+                entries: entriesByGroup[g ?? DEFAULT_GROUP_KEY] || []
             }));
             Object.keys(entriesByGroup).forEach((g) => {
-                if (!groupOrderFromNavController.includes(g))
+                if (!groupOrderFromNavController.map(x => x ?? DEFAULT_GROUP_KEY).includes(g))
                     allProcessed.push({
                         name: g,
                         entries: entriesByGroup[g]
@@ -137,9 +147,9 @@ export function DefaultHomePage({
             });
 
             // Ensure default group exists if there are plugin additional cards but no collections
-            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_NAME)) {
+            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_KEY)) {
                 allProcessed.push({
-                    name: DEFAULT_GROUP_NAME,
+                    name: DEFAULT_GROUP_KEY,
                     entries: []
                 });
             }
@@ -147,7 +157,7 @@ export function DefaultHomePage({
             allProcessed = allProcessed.filter(
                 (g) =>
                     g.entries.length ||
-                    (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
+                    (g.name === DEFAULT_GROUP_KEY && hasPluginAdditionalCards)
             );
         }
 
@@ -159,7 +169,12 @@ export function DefaultHomePage({
     }, [filteredNavigationEntries, performingSearch, groupOrderFromNavController, customizationController.plugins]);
 
     // Update state only when processedGroups actually changes
+    // Skip update if DnD just made a local change (dirty flag is set)
     useEffect(() => {
+        if (isDndDirtyRef.current) {
+            // DnD just updated the state, skip this sync
+            return;
+        }
         setAdminGroupData(processedGroups.adminGroupData);
         setItems(processedGroups.items);
     }, [processedGroups]);
@@ -171,8 +186,8 @@ export function DefaultHomePage({
         updater:
             | { name: string; entries: NavigationEntry[] }[]
             | ((
-            prev: { name: string; entries: NavigationEntry[] }[]
-        ) => { name: string; entries: NavigationEntry[] }[])
+                prev: { name: string; entries: NavigationEntry[] }[]
+            ) => { name: string; entries: NavigationEntry[] }[])
     ) => {
         setItems(updater); // local only
     };
@@ -180,6 +195,19 @@ export function DefaultHomePage({
     const persistNavigationGroups = (
         latest: { name: string; entries: NavigationEntry[] }[]
     ) => {
+        // Set dirty flag to prevent useEffect from overwriting local state
+        isDndDirtyRef.current = true;
+
+        // Clear any existing timeout
+        if (dndDirtyTimeoutRef.current) {
+            clearTimeout(dndDirtyTimeoutRef.current);
+        }
+
+        // Clear dirty flag after a delay to allow navigation to update
+        dndDirtyTimeoutRef.current = setTimeout(() => {
+            isDndDirtyRef.current = false;
+        }, 1000);
+
         // Map ALL groups including "Views"
         const draggable: NavigationGroupMapping[] = latest.map((g) => ({
             name: g.name,
@@ -205,7 +233,7 @@ export function DefaultHomePage({
         ...(adminGroupData ? [adminGroupData.name] : [])
     ], [items, adminGroupData]);
 
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames);
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home");
 
 
     const {
@@ -264,6 +292,7 @@ export function DefaultHomePage({
     let additionalPluginChildrenStart: React.ReactNode | undefined;
     let additionalPluginChildrenEnd: React.ReactNode | undefined;
     let additionalPluginSections: React.ReactNode | undefined;
+    let additionalPluginActions: React.ReactNode | undefined;
 
     if (customizationController.plugins) {
         const sectionProps: PluginGenericProps = { context };
@@ -311,6 +340,19 @@ export function DefaultHomePage({
                     ))}
             </div>
         );
+
+        // Collect additionalActions from plugins
+        additionalPluginActions = (
+            <>
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.additionalActions)
+                    .map((plugin, i) => (
+                        <React.Fragment key={`plugin_actions_${i}`}>
+                            {plugin.homePage!.additionalActions}
+                        </React.Fragment>
+                    ))}
+            </>
+        );
     }
 
     /* ───────────────────────────────────────────────────────────────
@@ -326,15 +368,16 @@ export function DefaultHomePage({
                 >
                     <SearchBar
                         onTextSearch={updateSearch}
-                        placeholder="Search collections"
+                        placeholder={t("search_collections")}
                         autoFocus
                         innerClassName="w-full"
                         className="w-full flex-grow"
                     />
                     {additionalActions}
+                    {additionalPluginActions}
                 </div>
 
-                <FavouritesView hidden={performingSearch}/>
+                <FavouritesView hidden={performingSearch} />
 
                 {additionalChildrenStart}
                 {additionalPluginChildrenStart}
@@ -375,7 +418,7 @@ export function DefaultHomePage({
 
                             const actionProps: PluginHomePageAdditionalCardsProps = {
                                 group:
-                                    groupKey === DEFAULT_GROUP_NAME
+                                    groupKey === DEFAULT_GROUP_KEY
                                         ? undefined
                                         : groupKey,
                                 context
@@ -395,7 +438,7 @@ export function DefaultHomePage({
                                 >
                                     <NavigationGroup
                                         group={
-                                            groupKey === DEFAULT_GROUP_NAME
+                                            groupKey === DEFAULT_GROUP_KEY
                                                 ? undefined
                                                 : groupKey
                                         }
@@ -487,7 +530,7 @@ export function DefaultHomePage({
 
                     <DragOverlay adjustScale={false} dropAnimation={dropAnimation}>
                         {activeGroupData &&
-                        draggingGroupId === activeGroupData.name ? (
+                            draggingGroupId === activeGroupData.name ? (
                             <div
                                 className="rounded-lg bg-transparent"
                                 style={{
@@ -498,7 +541,7 @@ export function DefaultHomePage({
                                 <NavigationGroup
                                     group={
                                         activeGroupData.name ===
-                                        DEFAULT_GROUP_NAME
+                                            DEFAULT_GROUP_KEY
                                             ? undefined
                                             : activeGroupData.name
                                     }

package/src/components/HomePage/HomePageDnD.tsx

@@ -29,7 +29,8 @@ import { CSS } from "@dnd-kit/utilities";
 
 import { NavigationCardBinding } from "./NavigationCardBinding";
 import { NavigationEntry } from "../../types";
-import { cls } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
 
 const animateLayoutChanges: AnimateLayoutChanges = (args) =>
     defaultAnimateLayoutChanges({
@@ -65,9 +66,9 @@ const cloneItemsForDnd = (items: { name: string; entries: NavigationEntry[] }[])
 
 /* ─────────────────────────────────────────────────────────── */
 export function SortableNavigationCard({
-                                           entry,
-                                           onClick
-                                       }: {
+    entry,
+    onClick
+}: {
     entry: NavigationEntry;
     onClick?: () => void;
 }) {
@@ -92,17 +93,17 @@ export function SortableNavigationCard({
 
     return (
         <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-            <NavigationCardBinding {...entry} onClick={onClick}/>
+            <NavigationCardBinding {...entry} onClick={onClick} />
         </div>
     );
 }
 
 export function NavigationGroupDroppable({
-                                             id,
-                                             itemIds,
-                                             children,
-                                             isPotentialCardDropTarget = false
-                                         }: {
+    id,
+    itemIds,
+    children,
+    isPotentialCardDropTarget = false
+}: {
     id: UniqueIdentifier;
     itemIds: UniqueIdentifier[];
     children: React.ReactNode;
@@ -128,10 +129,10 @@ export function NavigationGroupDroppable({
 }
 
 export function SortableNavigationGroup({
-                                            groupName,
-                                            children,
-                                            disabled
-                                        }: {
+    groupName,
+    children,
+    disabled
+}: {
     groupName: string;
     children: React.ReactNode;
     disabled?: boolean;
@@ -164,21 +165,21 @@ export function SortableNavigationGroup({
 }
 
 export function useHomePageDnd({
-                                   items,
-                                   setItems,
-                                   disabled,
-                                   onCardMovedBetweenGroups,
-                                   onGroupMoved,
-                                   onNewGroupDrop,
-                                   onPersist
-                               }: {
+    items,
+    setItems,
+    disabled,
+    onCardMovedBetweenGroups,
+    onGroupMoved,
+    onNewGroupDrop,
+    onPersist
+}: {
     items: { name: string; entries: NavigationEntry[] }[];
     setItems: (
         newItemsOrUpdater:
             | { name: string; entries: NavigationEntry[] }[]
             | ((
-            currentItems: { name: string; entries: NavigationEntry[] }[]
-        ) => { name: string; entries: NavigationEntry[] }[])
+                currentItems: { name: string; entries: NavigationEntry[] }[]
+            ) => { name: string; entries: NavigationEntry[] }[])
     ) => void;
     disabled: boolean;
     onCardMovedBetweenGroups?: (card: NavigationEntry) => void;
@@ -344,9 +345,9 @@ export function useHomePageDnd({
     };
 
     const handleDragOver = ({
-                                active,
-                                over
-                            }: { active: Active; over: any }) => {
+        active,
+        over
+    }: { active: Active; over: any }) => {
         if (disabled || !over) return;
 
         const activeIdNow = active.id;
@@ -395,9 +396,9 @@ export function useHomePageDnd({
     };
 
     const handleDragEnd = ({
-                               active,
-                               over
-                           }: { active: Active; over: any }) => {
+        active,
+        over
+    }: { active: Active; over: any }) => {
         if (disabled || !over) {
             resetDragState();
             return;
@@ -505,10 +506,10 @@ export function useHomePageDnd({
                         }
                     }
                 } else if (overCont && activeCont !== overCont) {
-                    // Card moved between different groups - use CLEAN pre-drag state
+                    // Card moved between different groups - use CLEAN pre-drag state for the MOVE
+                    // but use current dndItems for the POSITION
                     const finalState = cloneItemsForDnd(sourceState);
 
-                    // Find target container from clean state too
                     const finalOverId = lastOverId.current || overIdNow;
                     const cleanOverCont = findContainerInState(finalOverId as string, sourceState) || overCont;
 
@@ -524,17 +525,32 @@ export function useHomePageDnd({
                             // Remove from source
                             const [moved] = src.entries.splice(idxInSrc, 1);
 
-                            // Calculate insertion position in target
+                            // Calculate insertion position using CURRENT dndItems (visual state after handleDragOver)
+                            // because that's where the user visually dropped it
+                            const currentTgt = dndItems.find((g) => g.name === cleanOverCont);
                             const overIsContainer = finalOverId === cleanOverCont;
+
                             if (overIsContainer) {
                                 tgt.entries.push(moved);
-                            } else {
-                                const overIdx = tgt.entries.findIndex((e) => e.url === finalOverId);
-                                if (overIdx !== -1) {
-                                    tgt.entries.splice(overIdx, 0, moved);
+                            } else if (currentTgt) {
+                                // Find position in current visual state
+                                const currentOverIdx = currentTgt.entries.findIndex((e) => e.url === finalOverId);
+                                if (currentOverIdx !== -1) {
+                                    // Find the card at that position in currentTgt, get its URL
+                                    // Then find that same card in tgt (pre-drag state) and insert before it
+                                    const cardAtPosition = currentTgt.entries[currentOverIdx];
+                                    const tgtOverIdx = tgt.entries.findIndex((e) => e.url === cardAtPosition.url);
+                                    if (tgtOverIdx !== -1) {
+                                        tgt.entries.splice(tgtOverIdx, 0, moved);
+                                    } else {
+                                        // Card might have been the dragged one in current state, just push
+                                        tgt.entries.push(moved);
+                                    }
                                 } else {
                                     tgt.entries.push(moved);
                                 }
+                            } else {
+                                tgt.entries.push(moved);
                             }
 
                             // Remove empty source group if needed
@@ -648,12 +664,13 @@ export function useHomePageDnd({
 }
 
 export function NewGroupDropZone({
-                                     disabled,
-                                     setIsHovering
-                                 }: {
+    disabled,
+    setIsHovering
+}: {
     disabled: boolean;
     setIsHovering: (v: boolean) => void;
 }) {
+    const { t } = useTranslation();
     const {
         setNodeRef,
         isOver
@@ -690,11 +707,11 @@ export function NewGroupDropZone({
                 "fixed right-8 top-1/2 -translate-y-1/2 w-[200px] h-[120px] border border-dashed rounded-lg flex items-center justify-center transition-all",
                 isOver
                     ? "bg-surface-accent-100 dark:bg-surface-accent-800 border-surface-300 dark:border-surface-600"
-                    : "bg-surface-50 dark:bg-surface-900 border-surface-200 dark:border-surface-700"
+                    : "bg-surface-50 dark:bg-surface-900 " + defaultBorderMixin
             )}>
             <div className="text-center p-4">
                 <span className="block font-medium text-sm">
-                    Drop here to create a new group
+                    {t("drop_here_create_group")}
                 </span>
             </div>
         </div>

package/src/components/HomePage/NavigationCard.tsx

@@ -12,18 +12,19 @@ export type NavigationCardProps = {
 
 // Wrap the component with React.memo
 export const NavigationCard = React.memo(function NavigationCard({
-                                   name,
-                                   description,
-                                   icon,
-                                   actions,
-                                   onClick,
-                                   shrink
-                               }: NavigationCardProps) {
+    name,
+    description,
+    icon,
+    actions,
+    onClick,
+    shrink
+}: NavigationCardProps) {
 
     return (
         <Card
             className={cls(
-                "h-full p-4 cursor-pointer min-h-[230px] transition-all duration-200 ease-in-out",
+                "h-full px-4 py-3 cursor-pointer min-h-[160px] transition-all duration-200 ease-in-out",
+                "hover:-translate-y-0.5 hover:shadow-md hover:shadow-primary/5",
                 shrink && "w-full max-w-full min-h-0 scale-75"
             )}
             onClick={() => {
@@ -36,12 +37,12 @@ export const NavigationCard = React.memo(function NavigationCard({
                     className="flex-grow w-full">
 
                     <div
-                        className="h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
+                        className="h-8 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
 
                         {icon}
 
                         <div
-                            className="flex items-center gap-1"
+                            className="flex items-center gap-0.5"
                             onClick={(event: React.MouseEvent) => {
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -53,22 +54,23 @@ export const NavigationCard = React.memo(function NavigationCard({
 
                     </div>
 
-                    <Typography gutterBottom variant="h5"
-                                component="h2">
+                    <Typography gutterBottom variant="subtitle1"
+                        className="font-medium mt-1"
+                        component="h2">
                         {name}
                     </Typography>
 
-                    {description && <Typography variant="body2"
-                                                color="secondary"
-                                                component="div">
-                        <Markdown source={description} size={"small"}/>
+                    {description && <Typography variant="caption"
+                        color="secondary"
+                        component="div">
+                        <Markdown source={description} size={"small"} />
                     </Typography>}
                 </div>
 
                 <div style={{ alignSelf: "flex-end" }}>
 
-                    <div className={"p-4"}>
-                        <ArrowForwardIcon className="text-primary"/>
+                    <div className={"p-2"}>
+                        <ArrowForwardIcon className="text-primary" size={"small"} />
                     </div>
                 </div>
 

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,17 +1,18 @@
 import React, { PropsWithChildren, useState } from "react";
 import { cls, EditIcon, IconButton, Typography, ExpandablePanel } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export function NavigationGroup({
-                                    children,
-                                    group,
-                                    minimised,
-                                    isPreview,
-                                    isPotentialCardDropTarget,
-                                    onEditGroup,
-                                    dndDisabled,
-                                    collapsed,
-                                    onToggleCollapsed
-                                }: PropsWithChildren<{
+    children,
+    group,
+    minimised,
+    isPreview,
+    isPotentialCardDropTarget,
+    onEditGroup,
+    dndDisabled,
+    collapsed,
+    onToggleCollapsed
+}: PropsWithChildren<{
     group: string | undefined,
     minimised?: boolean,
     isPreview?: boolean,
@@ -22,8 +23,9 @@ export function NavigationGroup({
     onToggleCollapsed?: () => void;
 }>) {
 
+    const { t } = useTranslation();
     const [isHovered, setIsHovered] = useState(false);
-    const currentGroupName = group ?? "Views";
+    const currentGroupName = group ?? t("views_group");
 
     // Show caret only when not in preview and there is a toggle handler
     const showCaret = !isPreview && !!onToggleCollapsed;
@@ -52,7 +54,7 @@ export function NavigationGroup({
                     }}
                     className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
                 >
-                    <EditIcon size="smallest"/>
+                    <EditIcon size="smallest" />
                 </IconButton>
             )}
         </div>
@@ -70,7 +72,7 @@ export function NavigationGroup({
                     <div
                         className={cls(
                             "flex items-center justify-between w-full",
-                          "p-4 py-2"
+                            "p-4 py-2"
                         )}
                         onMouseEnter={() => setIsHovered(true)}
                         onMouseLeave={() => setIsHovered(false)}
@@ -94,9 +96,10 @@ export function NavigationGroup({
                     className={cls("mt-6")}
                     titleClassName={cls(
                         "min-h-0 p-0 border-none",
-                        "rounded-t flex items-center justify-between w-full",
+                        "rounded flex items-center justify-between w-full",
                         "hover:bg-transparent",
-                        "cursor-pointer select-none"
+                        "cursor-pointer select-none",
+                        collapsed && "bg-surface-100 dark:bg-surface-800/50"
                     )}
                     innerClassName={cls("mt-4", !minimised ? "pt-0" : "")}
                     title={
@@ -111,7 +114,7 @@ export function NavigationGroup({
                 >
                     {minimised ? (
                         <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
-                             style={{ minHeight: "50px" }}>
+                            style={{ minHeight: "50px" }}>
                         </div>
                     ) : (
                         <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
@@ -138,7 +141,7 @@ export function NavigationGroup({
                     {!collapsed && (
                         minimised ? (
                             <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
-                                 style={{ minHeight: "50px" }}>
+                                style={{ minHeight: "50px" }}>
                             </div>
                         ) : (
                             <div className={cls("mt-4", !minimised ? "pt-0" : "")}>