@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -2,6 +2,7 @@ import React, { RefObject, useCallback, useEffect, useState } from "react";
 import equal from "react-fast-compare";
 
 import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { useTranslation } from "../../hooks";
 import { ErrorBoundary } from "../ErrorBoundary";
 import {
     ArrowUpwardIcon,
@@ -34,7 +35,7 @@ export type FilterFormFieldProps<CustomProps> = {
 };
 
 type VirtualTableHeaderProps<M extends Record<string, any>> = {
-    resizeHandleRef: RefObject<HTMLDivElement>;
+    resizeHandleRef: RefObject<HTMLDivElement | null>;
     columnIndex: number;
     isResizingIndex: number;
     column: VirtualTableColumn<any>;
@@ -47,24 +48,26 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
     isDragging?: boolean;
     isDraggable?: boolean;
+    headerIconSize?: "small" | "smallest";
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     function VirtualTableHeader<M extends Record<string, any>>({
-                                                                   resizeHandleRef,
-                                                                   columnIndex,
-                                                                   isResizingIndex,
-                                                                   sort,
-                                                                   onColumnSort,
-                                                                   onFilterUpdate,
-                                                                   filter,
-                                                                   column,
-                                                                   onClickResizeColumn,
-                                                                   createFilterField,
-                                                                   AdditionalHeaderWidget,
-                                                                   isDragging,
-                                                                   isDraggable
-                                                               }: VirtualTableHeaderProps<M>) {
+        resizeHandleRef,
+        columnIndex,
+        isResizingIndex,
+        sort,
+        onColumnSort,
+        onFilterUpdate,
+        filter,
+        column,
+        onClickResizeColumn,
+        createFilterField,
+        AdditionalHeaderWidget,
+        isDragging,
+        isDraggable,
+        headerIconSize = "small",
+    }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
 
@@ -129,24 +132,23 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     <>
 
                         {AdditionalHeaderWidget &&
-                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
+                            <AdditionalHeaderWidget onHover={onHover || openFilter} />}
 
                         {column.sortable && (sort || hovered || openFilter) &&
                             <Badge color="secondary"
-                                   invisible={!sort}>
+                                invisible={!sort}>
                                 <IconButton
-                                    size={"small"}
+                                    size={headerIconSize}
                                     className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
                                 >
-                                    {!sort &&
-                                        <ArrowUpwardIcon/>}
-                                    {sort === "asc" &&
-                                        <ArrowUpwardIcon/>}
-                                    {sort === "desc" &&
-                                        <ArrowUpwardIcon className={"rotate-180"}/>}
+                                    <ArrowUpwardIcon size={headerIconSize}
+                                                     className={cls(
+                                                         "transition-transform duration-200",
+                                                         sort === "desc" ? "rotate-180" : "rotate-0"
+                                                     )} />
                                 </IconButton>
                             </Badge>
                         }
@@ -154,7 +156,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.filter && createFilterField && <div>
                         <Badge color="secondary"
-                               invisible={!filter}>
+                            invisible={!filter}>
 
                             <Popover
                                 open={openFilter}
@@ -166,16 +168,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
-                                        <FilterListIcon size={"small"}/>
+                                        <FilterListIcon size={"small"} />
                                     </IconButton>}
                             >
                                 <FilterForm column={column}
-                                            filter={filter}
-                                            onHover={onHover}
-                                            onFilterUpdate={update}
-                                            createFilterField={createFilterField}
-                                            hidden={hidden}
-                                            setHidden={setHidden}/>
+                                    filter={filter}
+                                    onHover={onHover}
+                                    onFilterUpdate={update}
+                                    createFilterField={createFilterField}
+                                    hidden={hidden}
+                                    setHidden={setHidden} />
 
                             </Popover>
 
@@ -204,14 +206,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     }, equal) as React.FunctionComponent<VirtualTableHeaderProps<any>>;
 
 function FilterForm<M>({
-                           column,
-                           onFilterUpdate,
-                           filter,
-                           onHover,
-                           createFilterField,
-                           hidden,
-                           setHidden
-                       }: FilterFormProps<M>) {
+    column,
+    onFilterUpdate,
+    filter,
+    onHover,
+    createFilterField,
+    hidden,
+    setHidden
+}: FilterFormProps<M>) {
+
+    const { t } = useTranslation();
 
     const id = column.key;
 
@@ -245,12 +249,12 @@ function FilterForm<M>({
     if (!filterField) return null;
     return (
         <form noValidate={true}
-              onSubmit={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  submit();
-              }}
-              className={"text-surface-900 dark:text-white"}>
+            onSubmit={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                submit();
+            }}
+            className={"text-surface-900 dark:text-white"}>
             <div
                 className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
@@ -258,16 +262,15 @@ function FilterForm<M>({
             {filterField && <div className="m-4 w-[400px]">
                 {filterField}
             </div>}
-            <div className="flex justify-end m-4">
-                <Button
-                    className="mr-4"
-                    disabled={!filterIsSet}
-                    variant={"text"}
-                    type="reset"
-                    aria-label="filter clear"
-                    onClick={reset}>Clear</Button>
-                <Button
-                    type="submit">Filter</Button>
+            <div className="flex justify-end p-4 pt-0 gap-2">
+                <Button variant={"text"}
+                        size={"small"}
+                        aria-label="filter clear"
+                        onClick={reset}>{t("clear")}</Button>
+
+                <Button variant={"outlined"}
+                        size={"small"}
+                        type="submit">{t("filter")}</Button>
             </div>
         </form>
     );

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -22,11 +22,12 @@ const SortableColumnHeader = ({
     onClickResizeColumn,
     createFilterField,
     isDragging,
-    isDraggable
+    isDraggable,
+    headerIconSize
 }: {
     column: VirtualTableColumn;
     columnIndex: number;
-    columnRefs: React.RefObject<HTMLDivElement>[];
+    columnRefs: React.RefObject<HTMLDivElement | null>[];
     isResizing: number;
     onFilterUpdate: any;
     filter: [VirtualTableWhereFilterOp, any] | undefined;
@@ -37,6 +38,7 @@ const SortableColumnHeader = ({
     createFilterField: any;
     isDragging: boolean;
     isDraggable: boolean;
+    headerIconSize?: "small" | "smallest";
 }) => {
     const [isPressing, setIsPressing] = useState(false);
 
@@ -103,7 +105,8 @@ const SortableColumnHeader = ({
                 createFilterField={createFilterField}
                 AdditionalHeaderWidget={column.AdditionalHeaderWidget}
                 isDragging={isDragging || isPressing}
-                isDraggable={isDraggable} />
+                isDraggable={isDraggable}
+                headerIconSize={headerIconSize} />
         </div>
     );
 };
@@ -123,7 +126,8 @@ export const VirtualTableHeaderRow = ({
     data,
     cellRenderer: CellRenderer,
     rowHeight = 54,
-    draggingColumnId
+    draggingColumnId,
+    headerIconSize,
 }: VirtualTableContextProps<any>) => {
 
     const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
@@ -234,6 +238,7 @@ export const VirtualTableHeaderRow = ({
                                 createFilterField={createFilterField}
                                 isDragging={isDragging}
                                 isDraggable={isDraggable}
+                                headerIconSize={headerIconSize}
                             />
                         </ErrorBoundary>
                     );

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -168,6 +168,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
 
+    /**
+     * Size of icons in column headers (sort, filter).
+     * @default "small"
+     */
+    headerIconSize?: "small" | "smallest";
+
 }
 
 export type CellRendererParams<T = any> = {
@@ -206,7 +212,7 @@ export interface VirtualTableColumn<CustomProps = any> {
     /**
      * Label displayed in the header
      */
-    title?: string;
+    title?: React.ReactNode;
 
     /**
      * This column is frozen to the left

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -79,7 +79,7 @@ export function VirtualTableSelect(props: {
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                className="w-full h-full p-0 bg-transparent"
+                className="w-full h-full p-0 bg-transparent outline-none"
                 position={"item-aligned"}
                 disabled={disabled}
                 includeClear={false}
@@ -104,8 +104,8 @@ export function VirtualTableSelect(props: {
                 inputRef={ref}
                 size={"large"}
                 fullWidth={true}
-                className="w-full h-full p-0 bg-transparent"
-                inputClassName="focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none"
+                className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
+                inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
                 position={"item-aligned"}
                 disabled={disabled}
                 padding={false}

package/src/components/VirtualTable/types.tsx

@@ -42,4 +42,5 @@ export type VirtualTableContextProps<T extends any> = {
     AddColumnComponent?: React.ComponentType;
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
     draggingColumnId?: string | null;
+    headerIconSize?: "small" | "smallest";
 };

package/src/components/common/default_entity_actions.tsx

@@ -1,3 +1,7 @@
+// Note: entity action 'name' fields (Edit, Copy, Delete) are plain strings defined
+// at module level. They cannot use hooks. Consumers who need to translate these
+// should override the action name by creating their own EntityAction objects or
+// by using the entityActions prop with custom names for their locale.
 import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";

package/src/components/common/useDataSourceTableController.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 
 import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
@@ -94,7 +95,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [searchString, setSearchString] = React.useState<string | undefined>();
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-                                                sortBy?: [string, "asc" | "desc"]) => {
+        sortBy?: [string, "asc" | "desc"]) => {
         if (!dataSource.isFilterCombinationValid)
             return true;
         return dataSource.isFilterCombinationValid({
@@ -106,8 +107,8 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     }, []);
 
     const onScroll = ({
-                          scrollOffset
-                      }: {
+        scrollOffset
+    }: {
         scrollOffset: number
     }) => {
         if (scrollRestoration) {
@@ -128,10 +129,12 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         return initialSort;
     }, [initialSort, forceFilter]);
 
+    const location = useLocation();
+
     const {
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
-    } = parseFilterAndSort(window.location.search);
+    } = parseFilterAndSort(location.search);
 
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
@@ -328,6 +331,11 @@ function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [stri
                         } else if (val instanceof EntityReference) {
                             encodedValue = encodeRef(val);
                         }
+                    } else if (typeof val === "string") {
+                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
+                        // so that decodeString's JSON.parse restores the string type,
+                        // not a number. Without this, "4" round-trips as the number 4.
+                        encodedValue = JSON.stringify(val);
                     }
                 } catch (e) {
                     encodedValue = val;

package/src/components/index.tsx

@@ -42,3 +42,4 @@ export * from "./FieldCaption";
 export * from "./EntityPreview";
 
 export * from "./AIIcon";
+export * from "./LanguageToggle";

package/src/core/DefaultAppBar.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 
 import { Link, useNavigate } from "react-router-dom";
-import { ErrorBoundary, FireCMSLogo } from "../components";
+import { ErrorBoundary, FireCMSLogo, LanguageToggle } from "../components";
 import {
     Avatar,
     BrightnessMediumIcon,
+    CheckIcon,
     cls,
     DarkModeIcon,
     IconButton,
@@ -15,7 +16,7 @@ import {
     Skeleton,
     Typography
 } from "@firecms/ui";
-import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
+import { useAuthController, useLargeLayout, useModeController, useNavigationController, useTranslation } from "../hooks";
 import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
@@ -85,6 +86,8 @@ export const DefaultAppBar = function DefaultAppBar({
         mode,
         setMode
     } = useModeController();
+    
+    const { i18n, t } = useTranslation();
 
     const navigate = useNavigate();
 
@@ -92,7 +95,7 @@ export const DefaultAppBar = function DefaultAppBar({
 
     const user = userProp ?? authController.user;
 
-    let avatarComponent: JSX.Element | null;
+    let avatarComponent: React.ReactElement | null;
 
     if (user) {
         const initial = user?.displayName
@@ -192,18 +195,19 @@ export const DefaultAppBar = function DefaultAppBar({
                 <Menu
                     trigger={<IconButton
                         color="inherit"
-                        aria-label="Open drawer"
-                        size="large">
+                        aria-label="Open drawer">
                         {mode === "dark"
-                            ? <DarkModeIcon />
-                            : <LightModeIcon />}
+                            ? <DarkModeIcon size="small" />
+                            : <LightModeIcon size="small" />}
                     </IconButton>}>
-                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> Dark</MenuItem>
-                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> Light </MenuItem>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> {t("dark_mode")}</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> {t("light_mode")}</MenuItem>
                     <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
-                        size={"smallest"} />System</MenuItem>
+                        size={"smallest"} />{t("system_mode")}</MenuItem>
                 </Menu>}
 
+            <LanguageToggle />
+
             <Menu trigger={avatarComponent}>
                 {user && <div className={"px-4 py-2 mb-2"}>
                     {user.displayName && <Typography variant={"body1"} color={"secondary"}>
@@ -222,7 +226,7 @@ export const DefaultAppBar = function DefaultAppBar({
                     navigate("/");
                 }}>
                     <LogoutIcon />
-                    Log Out
+                    {t("log_out")}
                 </MenuItem>}
 
             </Menu>

package/src/core/DefaultDrawer.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 
-import { useCollapsedGroups, useLargeLayout, useNavigationController } from "../hooks";
+import {
+    useCollapsedGroups,
+    useLargeLayout,
+    useNavigationController,
+    useTranslation
+} from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
@@ -34,6 +39,7 @@ export function DefaultDrawer({
 
     const analyticsController = useAnalyticsController();
     const navigation = useNavigationController();
+    const { t } = useTranslation();
 
     const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
@@ -122,7 +128,7 @@ export function DefaultDrawer({
                             }}
                             key={entry.id}>
                             {<IconForView collectionOrView={entry.view} />}
-                            {entry.name}
+                            {t(entry.name as any)}
                         </MenuItem>)}
 
                 </Menu>}

package/src/core/DrawerNavigationGroup.tsx

@@ -3,12 +3,13 @@ import { cls, ExpandMoreIcon, Typography } from "@firecms/ui";
 import { NavigationEntry } from "../types";
 import { IconForView } from "../util";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface DrawerNavigationGroupProps {
     /**
-     * Group name to display in header
+     * Group name to display in header. When null, uses the translated default group name.
      */
-    group: string;
+    group: string | null;
     /**
      * Navigation entries in this group
      */
@@ -58,6 +59,7 @@ export function DrawerNavigationGroup({
     headerActions,
     onItemClick
 }: DrawerNavigationGroupProps) {
+    const { t } = useTranslation();
     return (
         <div
             className={"bg-surface-50 dark:bg-surface-800/30 my-4 rounded-lg ml-3 mr-1"}
@@ -81,7 +83,7 @@ export function DrawerNavigationGroup({
                         color={"secondary"}
                         className="font-medium flex-grow line-clamp-1"
                     >
-                        {(group || "Views").toUpperCase()}
+                        {(group && group !== "__default__" ? group : t("views_group")).toUpperCase()}
                     </Typography>
                     {headerActions && (
                         <div onClick={(e) => e.stopPropagation()}>

package/src/core/EntityEditView.tsx

@@ -26,12 +26,13 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography, Menu, MenuItem, ExpandMoreIcon } from "@firecms/ui";
 import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 import { createFormexStub } from "../util/createFormexStub";
+import { useTranslation } from "../hooks/useTranslation";
 
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
@@ -170,6 +171,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 }) {
 
     const context = useFireCMSContext();
+    const { t } = useTranslation();
 
     const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
 
@@ -228,6 +230,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
+    const groupedViews = useMemo(() => {
+        return (collection.viewGroups ?? []).flatMap(g => g.views);
+    }, [collection.viewGroups]);
+
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -342,8 +348,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             openEntityMode={layout} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
-                                You need to save your entity before
-                                adding additional collections
+                                {t("youd_need_to_save_before_additional_collections")}
                             </Typography>
                         </div>)
                 }
@@ -418,16 +423,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         Builder={selectedSecondaryForm?.Builder}
     />;
 
-    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
+    const subcollectionTabs = subcollections && subcollections
+        .filter(sub => !groupedViews.includes(sub.id ?? sub.path))
+        .map((subcollection) =>
         <Tab
             className="text-sm min-w-[120px]"
-            value={subcollection.id}
+            value={subcollection.id ?? subcollection.path}
             key={`entity_detail_collection_tab_${subcollection.name}`}>
             {subcollection.name}
         </Tab>
     );
 
-    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start" && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -436,7 +443,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {view.tabComponent ?? view.name}
             </Tab>
         );
-    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+    const customViewTabsEnd = resolvedEntityViews.filter(view => (!view.position || view.position === "end") && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -446,12 +453,49 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </Tab>
         );
 
+    const viewGroupMenus = collection.viewGroups?.map(group => {
+        const isActive = group.views.includes(selectedTab);
+        return (
+            <Menu
+                key={`view_group_${group.name}`}
+                trigger={
+                    <button
+                        type="button"
+                        className={cls(
+                            "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
+                            "disabled:pointer-events-none disabled:opacity-50",
+                            isActive ? "bg-white text-surface-900 dark:bg-surface-950 dark:text-surface-50" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800"
+                        )}
+                    >
+                        {group.name}
+                        <ExpandMoreIcon className="ml-1 -mr-1" size="small" />
+                    </button>
+                }>
+                {group.views.map(viewId => {
+                    const subcollection = subcollections.find(s => (s.id ?? s.path) === viewId);
+                    const customView = resolvedEntityViews.find(v => v.key === viewId);
+                    const name = subcollection?.name ?? customView?.name ?? viewId;
+                    return (
+                        <MenuItem 
+                            key={`view_group_${group.name}_${viewId}`} 
+                            onClick={() => onSideTabClick(viewId)}
+                            className={selectedTab === viewId ? "bg-surface-accent-100 dark:bg-surface-accent-900" : ""}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            </Menu>
+        );
+    });
+
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
         {shouldShowTopBar && <div
-            className={cls("h-14 items-center overflow-visible overflow-x-scroll w-full no-scrollbar border-b pl-2 pr-2 flex gap-2 bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+            className={cls("h-14 items-center overflow-hidden w-full border-b pl-2 pr-2 flex gap-2 bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
             {barActions?.({
                 path: fullIdPath ?? path,
@@ -493,6 +537,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                 {customViewTabsEnd}
 
+                {viewGroupMenus}
+
                 {subcollectionTabs}
             </Tabs>}
         </div>}