@rebasepro/admin 0.0.1-canary.f81da60 → 0.1.2

package/src/components/DrawerNavigationItem.tsx

@@ -22,7 +22,7 @@ export function DrawerNavigationItem({
 }) {
 
     const iconWrap = <div
-        className={"shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark"}>
+        className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4"}>
         {icon}
     </div>;
 
@@ -33,12 +33,12 @@ export function DrawerNavigationItem({
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
-            className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-text-primary dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
+            className={({ isActive }: any) => cls("rounded-md truncate",
+                "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
                 "flex flex-row items-center",
-                drawerOpen ? "pr-4 h-10" : "h-10",
-                "font-semibold text-xs",
-                isActive ? "bg-surface-100 dark:bg-surface-800/50 text-surface-900 dark:text-white" : ""
+                drawerOpen ? "pr-4 h-[30px]" : "h-[30px]",
+                "font-medium text-[13px]",
+                isActive ? "bg-surface-900/[0.06] dark:bg-surface-800/50 text-surface-900 dark:text-white" : ""
             )}
             to={url}
         >

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -91,8 +91,10 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const content = (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-800 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-800/90 z-10",
-                "h-full flex items-center justify-center flex-col bg-surface-50/90 dark:bg-surface-800/90 z-10",
+                "h-full flex items-center justify-center flex-col z-10",
+                isSelected
+                    ? "bg-surface-accent-50 dark:bg-surface-accent-900"
+                    : "bg-surface-50/90 dark:bg-surface-900/90",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: React.MouseEvent) => {
@@ -219,7 +221,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 style={sortableStyle}
                 className={cls(
                     "flex-shrink-0",
-                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
                 )}
                 {...sortableAttrsWithoutTabIndex}
             >

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -350,7 +350,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         <div ref={ref}
             style={style}
-            className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-800", className)}>
+            className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-900", className)}>
 
             {!hideToolbar && <CollectionTableToolbar
                 onTextSearch={onTextSearch}

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -13,6 +13,10 @@ interface CollectionTableToolbarProps {
     viewModeToggle?: React.ReactNode;
     title?: React.ReactNode,
     onTextSearch?: (searchString?: string) => void;
+    /**
+     * Initial search string to pre-populate the search bar (e.g. from URL params).
+     */
+    initialSearchText?: string;
     /**
      * When true the toolbar is in "compact" mode for the split-view left panel.
      * - Search bar, loading spinner, and view-mode toggle are hidden.
@@ -29,6 +33,7 @@ export function CollectionTableToolbar({
     onTextSearch,
     title,
     viewModeToggle,
+    initialSearchText,
     compact = false
 }: CollectionTableToolbarProps) {
 
@@ -54,7 +59,7 @@ export function CollectionTableToolbar({
                     {viewModeToggle}
                 </div>
 
-                {title && <div className={"hidden lg:block"}>
+                {title && <div className={"flex items-center"}>
                     {title}
                 </div>}
 
@@ -84,7 +89,8 @@ export function CollectionTableToolbar({
                             size={"small"}
                             placeholder={t("search")}
                             onTextSearch={onTextSearch}
-                            expandable={true}/>}
+                            expandable={true}
+                            initialValue={initialSearchText}/>}
                 </div>
 
                 {/* Secondary actions — always inline */}

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -204,7 +204,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     `flex relative h-full rounded-md p-${p} border-4`,
                     showSaved ? "bg-primary/20 dark:bg-primary/20" : (onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : ""),
                     hideOverflow ? "overflow-hidden" : "",
-                    isSelected && !showSaved ? "bg-surface-50 dark:bg-surface-900" : "",
+                    isSelected && !showSaved ? "bg-surface-accent-50 dark:bg-surface-accent-900" : "",
                     borderClass
                 )}
                 ref={ref}
@@ -265,7 +265,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 style={sortableStyle}
                 className={cls(
                     "flex-shrink-0",
-                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
                 )}
                 {...sortableAttrsWithoutTabIndex}
             >

package/src/components/EntityCollectionTable/table_bindings.tsx

@@ -252,37 +252,12 @@ path: referenceProperty.path as string }) : undefined;
         if (property.relation) {
             if (property.ui?.widget === "dialog") {
                 return {
-                    Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: any) => (
-                        <TableRelationField
-                            name={propertyKey}
-                            internalValue={internalValue as EntityRelation}
-                            updateValue={updateValue}
-                            disabled={disabled}
-                            size={size}
-                            multiselect={false}
-                            relation={property.relation}
-                            previewProperties={property.ui?.previewProperties}
-                            includeId={property.includeId}
-                            includeEntityLink={property.includeEntityLink}
-                            title={property.name ?? propertyKey}
-                            fixedFilter={property.fixedFilter}
-                        />
-                    ),
+                    Component: RelationDialogBindingComponent,
                     allowScroll: false
                 };
             } else {
                 return {
-                    Component: ({ propertyKey, internalValue, updateValue, disabled, property }: any) => (
-                        <TableRelationSelectorField
-                            name={propertyKey}
-                            internalValue={internalValue as EntityRelation}
-                            updateValue={updateValue}
-                            disabled={disabled}
-                            size={"small"}
-                            relation={property.relation!}
-                            fixedFilter={property.fixedFilter}
-                        />
-                    ),
+                    Component: RelationSelectorBindingComponent,
                     allowScroll: false
                 };
             }
@@ -344,3 +319,38 @@ path: referenceProperty.path as string }) : undefined;
 
     return undefined;
 }
+
+/** Stable component for relation fields rendered with the dialog widget */
+function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: any) {
+    return (
+        <TableRelationField
+            name={propertyKey}
+            internalValue={internalValue as EntityRelation}
+            updateValue={updateValue}
+            disabled={disabled}
+            size={size}
+            multiselect={false}
+            relation={property.relation}
+            previewProperties={property.ui?.previewProperties}
+            includeId={property.includeId}
+            includeEntityLink={property.includeEntityLink}
+            title={property.name ?? propertyKey}
+            fixedFilter={property.fixedFilter}
+        />
+    );
+}
+
+/** Stable component for relation fields rendered with the inline selector */
+function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }: any) {
+    return (
+        <TableRelationSelectorField
+            name={propertyKey}
+            internalValue={internalValue as EntityRelation}
+            updateValue={updateValue}
+            disabled={disabled}
+            size={"small"}
+            relation={property.relation!}
+            fixedFilter={property.fixedFilter}
+        />
+    );
+}

package/src/components/EntityCollectionView/EntityCard.tsx

@@ -94,8 +94,8 @@ export function EntityCard<M extends Record<string, unknown> = Record<string, un
                 "cursor-pointer overflow-hidden group relative",
                 "transition-all duration-200",
                 "hover:shadow-lg hover:-translate-y-0.5",
-                selected && "ring-2 ring-primary",
-                highlighted && !selected && "ring-2 ring-primary ring-opacity-50"
+                selected && "ring-2 ring-primary bg-surface-accent-50 dark:bg-surface-accent-900",
+                highlighted && !selected && "ring-2 ring-primary ring-opacity-50 bg-surface-accent-50/50 dark:bg-surface-accent-900"
             )}
             onClick={handleClick}
         >

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -5,7 +5,6 @@ import { EntityCard } from "./EntityCard";
 import {
     cls,
     CircularProgress,
-    CircularProgressCenter,
     Typography
 } from "@rebasepro/ui";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
@@ -213,9 +212,11 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
                     </Typography>
                 </div>
             ) : isInitialLoading ? (
-                <CircularProgressCenter/>
+                <div className="flex items-center justify-center py-12 px-8">
+                    <CircularProgress size="small"/>
+                </div>
             ) : isEmpty ? (
-                <div className="h-full flex items-center justify-center p-8">
+                <div className="flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -7,7 +7,6 @@ import {
     Checkbox,
     Chip,
     CircularProgress,
-    CircularProgressCenter,
     cls,
     defaultBorderMixin,
     Typography
@@ -572,9 +571,11 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                     </Typography>
                 </div>
             ) : isInitialLoading ? (
-                <CircularProgressCenter/>
+                <div className="flex items-center justify-center py-12 px-8">
+                    <CircularProgress size="small"/>
+                </div>
             ) : isEmpty ? (
-                <div className="flex items-center justify-center p-8">
+                <div className="flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found
@@ -719,11 +720,11 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 "flex items-center gap-4 cursor-pointer group transition-colors duration-200 relative h-full",
                 rowClasses,
                 isActive
-                    ? "bg-surface-accent-100 dark:bg-surface-accent-950 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-900"
+                    ? "bg-surface-accent-100 dark:bg-surface-accent-950 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-950"
                     : selected
-                        ? "bg-primary-50 dark:bg-primary-900/20 hover:bg-surface-50 dark:hover:bg-surface-800/40"
+                        ? "bg-surface-accent-50 dark:bg-surface-accent-900 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-950"
                         : highlighted
-                            ? "bg-surface-accent-50 dark:bg-surface-accent-950 hover:bg-surface-50 dark:hover:bg-surface-800/40"
+                            ? "bg-surface-accent-50 dark:bg-surface-accent-900 hover:bg-surface-50 dark:hover:bg-surface-800/40"
                             : "bg-white dark:bg-surface-900 hover:bg-surface-50 dark:hover:bg-surface-800/40"
             )}
             onClick={handleClick}

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -30,7 +30,8 @@ import {
     useLargeLayout,
     usePermissions,
     useTranslation,
-    useSlot
+    useSlot,
+    IconForView
 } from "@rebasepro/core";
 import { useUserConfigurationPersistence } from "@rebasepro/core";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
@@ -373,6 +374,23 @@ export const EntityCollectionView = React.memo(
             })
         }, [path, sideEntityController]);
 
+        const openNewDocument = useCallback((defaultValues?: Record<string, unknown>) => {
+            const collection = collectionRef.current;
+            analyticsController.onAnalyticsEvent?.("new_entity_click", {
+                path: path
+            });
+            navigateToEntity({
+                openEntityMode,
+                collection,
+                entityId: undefined,
+                defaultValues,
+                path: path,
+                sideEntityController,
+                navigation: urlController,
+                onClose: unselectNavigatedEntity
+            });
+        }, [path, sideEntityController, openEntityMode, urlController, unselectNavigatedEntity]);
+
         const onMultipleDeleteClick = () => {
             analyticsController.onAnalyticsEvent?.("multiple_delete_dialog_open", {
                 path: path
@@ -837,7 +855,8 @@ export const EntityCollectionView = React.memo(
             : null;
 
         // Shared empty state — plugin slot takes priority, then default
-        const isFilteredOrSorted = tableController.filterValues !== undefined || tableController.sortBy !== undefined;
+        const isSearching = !!tableController.searchString;
+        const isFilteredOrSorted = tableController.filterValues !== undefined || tableController.sortBy !== undefined || isSearching;
         const emptyComponent = pluginEmptyStates.length > 0
             ? <>{pluginEmptyStates}</>
             : canCreateEntities && !isFilteredOrSorted
@@ -851,13 +870,18 @@ export const EntityCollectionView = React.memo(
                         {t("create_your_first_entry")}
                     </Button>
                 </div>
-                : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>;
+                : <Typography variant={"label"}>
+                    {isSearching
+                        ? t("no_results_search", { search: tableController.searchString ?? "" })
+                        : t("no_results_filter_sort")}
+                </Typography>;
 
         const toolbarNode = (
             <CollectionTableToolbar
                 compact={isCompact}
                 loading={tableController.dataLoading}
                 onTextSearch={tableController.setSearchString}
+                initialSearchText={tableController.searchString}
                 viewModeToggle={viewModeToggleElement}
                 actionsStart={<EntityCollectionViewStartActions
                     parentCollectionSlugs={parentCollectionSlugs ?? EMPTY_ARRAY} parentEntityIds={parentEntityIds ?? EMPTY_ARRAY}
@@ -868,6 +892,7 @@ export const EntityCollectionView = React.memo(
                     selectionController={usedSelectionController}
                     collectionEntitiesCount={docsCount ?? undefined}
                     resolvedProperties={resolvedCollection.properties}
+                    openNewDocument={openNewDocument}
                     compact={isCompact}/>}
                 actions={
                     <EntityCollectionViewActions
@@ -876,6 +901,7 @@ export const EntityCollectionView = React.memo(
                         tableController={tableController}
                         onMultipleDeleteClick={onMultipleDeleteClick}
                         onNewClick={onNewClick}
+                        openNewDocument={openNewDocument}
                         path={path}
                         relativePath={collection.slug}
                         selectionController={usedSelectionController}
@@ -1146,6 +1172,13 @@ export const EntityCollectionView = React.memo(
             equal(a.selectedTab, b.selectedTab);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
+/**
+ * Inflight count request deduplication map.
+ * Keyed by `path|filterKey|sortByProperty|sortDir` so that concurrent
+ * callers (e.g. React StrictMode double-mount) share the same promise.
+ */
+const inflightCountRequests = new Map<string, Promise<number>>();
+
 function EntitiesCount({
     path,
     collection,
@@ -1204,10 +1237,20 @@ function EntitiesCount({
         const whereParams = Object.keys(whereMap).length > 0 ? whereMap : undefined;
         const orderByParams = sortByProperty ? `${String(sortByProperty)}:${currentSort}` : undefined;
 
-        accessor.count({
-            where: whereParams,
-            orderBy: orderByParams
-        }).then((c) => {
+        // Deduplicate inflight count requests (e.g. React StrictMode double-mount)
+        const cacheKey = `${path}|${filterKey}|${sortByProperty ?? ""}|${currentSort ?? ""}`;
+        let countPromise = inflightCountRequests.get(cacheKey);
+        if (!countPromise) {
+            countPromise = accessor.count({
+                where: whereParams,
+                orderBy: orderByParams
+            });
+            inflightCountRequests.set(cacheKey, countPromise);
+            // Clean up the inflight entry once resolved/rejected
+            countPromise.finally(() => inflightCountRequests.delete(cacheKey));
+        }
+
+        countPromise.then((c) => {
             if (!cancelled) onCountChangeRef.current?.(c);
         }).catch((e) => {
             console.warn("Error fetching count", e);

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -2,7 +2,7 @@
 import type { EntityCollection } from "@rebasepro/types";
 import React, { lazy, Suspense } from "react";
 
-import { useLargeLayout, useTranslation, useSlot } from "@rebasepro/core";
+import { useLargeLayout, useTranslation, useSlot, resolveComponentRef } from "@rebasepro/core";
 import { CollectionActionsProps, EntityTableController, SelectionController } from "@rebasepro/types";
 import { Button, IconButton, Tooltip, Popover, iconSize } from "@rebasepro/ui";
 import { PlusIcon, Trash2Icon, MoreVerticalIcon } from "lucide-react";
@@ -29,6 +29,7 @@ export type EntityCollectionViewActionsProps<M extends Record<string, unknown>>
     collectionEntitiesCount?: number;
     compact?: boolean;
     children?: React.ReactNode;
+    openNewDocument: (defaultValues?: Record<string, unknown>) => void;
 }
 
 export function EntityCollectionViewActions<M extends Record<string, unknown>>({
@@ -43,7 +44,8 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
     tableController,
     collectionEntitiesCount,
     compact,
-    children
+    children,
+    openNewDocument
 }: EntityCollectionViewActionsProps<M>) {
     const context = useCMSContext();
 
@@ -116,15 +118,22 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
         selectionController,
         context,
         tableController,
-        collectionEntitiesCount
+        collectionEntitiesCount,
+        openNewDocument
     };
 
     const actions = toArray(collection.Actions)
-        .map((Action, i) => (
-            <ErrorBoundary key={`actions_${i}`}>
-                <Action {...actionProps}/>
-            </ErrorBoundary>
-        ));
+        .map((actionRef, i) => {
+            const Action = resolveComponentRef(actionRef);
+            if (!Action) return null;
+            return (
+                <ErrorBoundary key={`actions_${i}`}>
+                    <Suspense fallback={null}>
+                        <Action {...actionProps}/>
+                    </Suspense>
+                </ErrorBoundary>
+            );
+        });
 
     const pluginActions = useSlot("collection.actions", actionProps as any);
 

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -25,6 +25,7 @@ export type EntityCollectionViewStartActionsProps<M extends Record<string, unkno
      */
     resolvedProperties?: Properties;
     compact?: boolean;
+    openNewDocument: (defaultValues?: Record<string, unknown>) => void;
 }
 
 export function EntityCollectionViewStartActions<M extends Record<string, unknown>>({
@@ -36,7 +37,8 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
     tableController,
     collectionEntitiesCount,
     resolvedProperties,
-    compact
+    compact,
+    openNewDocument
 }: EntityCollectionViewStartActionsProps<M>) {
 
     const context = useCMSContext();
@@ -64,7 +66,8 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
         selectionController,
         context,
         tableController,
-        collectionEntitiesCount
+        collectionEntitiesCount,
+        openNewDocument
     };
 
     const handleBackClick = useCallback(() => {
@@ -108,13 +111,14 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
                         {t("filters")}{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
                     </Button>
                 ) : (
-                    <IconButton
+                    <Button
+                        variant="text"
                         size="small"
                         onClick={() => setFiltersDialogOpen(true)}
                         className={cls(activeFilterCount > 0 && "text-primary")}
                     >
                         <FilterIcon size={iconSize.small}/>
-                    </IconButton>
+                    </Button>
                 )}
             </Badge>
         </Tooltip>

package/src/components/EntityCollectionView/useEntityPreviewSlots.ts

@@ -110,11 +110,39 @@ export function resolveCollectionSlotKeys(
 
     // Status: first string-enum that isn't the title
     let statusKey: string | undefined;
-    for (const [key, prop] of Object.entries(collection.properties)) {
-        const p = prop as Property;
-        if (p.type === "string" && "enum" in p && p.enum && key !== titleKey) {
-            statusKey = key;
-            break;
+
+    // 1. Explicitly defined in previewProperties
+    if (!statusKey && collection.previewProperties) {
+        for (const key of collection.previewProperties) {
+            const p = collection.properties[key] as Property | undefined;
+            if (p?.type === "string" && "enum" in p && p.enum && key !== titleKey) {
+                statusKey = key;
+                break;
+            }
+        }
+    }
+
+    // 2. Explicitly defined in propertiesOrder
+    if (!statusKey && collection.propertiesOrder) {
+        for (const key of collection.propertiesOrder) {
+            if (typeof key === "string" && !key.startsWith("subcollection:")) {
+                const p = collection.properties[key] as Property | undefined;
+                if (p?.type === "string" && "enum" in p && p.enum && key !== titleKey) {
+                    statusKey = key;
+                    break;
+                }
+            }
+        }
+    }
+
+    // 3. Default automatic inference
+    if (!statusKey) {
+        for (const [key, prop] of Object.entries(collection.properties)) {
+            const p = prop as Property;
+            if (p.type === "string" && "enum" in p && p.enum && key !== titleKey) {
+                statusKey = key;
+                break;
+            }
         }
     }