@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/components/{EntityCollectionTable → CollectionTableBinding}/PropertyTableCell.tsx

@@ -1,4 +1,4 @@
-import { useCellSelected } from "../SelectableTable/SelectionStore";
+import { useCellSelected, createSelectionStore } from "../SelectableTable/SelectionStore";
 import type { ArrayProperty, NumberProperty, Property, ReferenceProperty, StringProperty } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { deepEqual as equal } from "fast-equals"
@@ -17,7 +17,7 @@ import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 
 import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
 import { useClearRestoreValue } from "../../form/useClearRestoreValue";
-import { getRowHeight } from "@rebasepro/core";
+import { getRowHeight } from "@rebasepro/app";
 import { isReadOnly } from "@rebasepro/common";
 import { TableRelationField } from "./fields/TableRelationField";
 import { TableRelationSelectorField } from "./fields/TableRelationSelectorField";
@@ -76,7 +76,9 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             setPopupCell
         } = useSelectableTableController();
 
-        const selected = useCellSelected(selectionStore, propertyKey, entity.path, entity.id);
+        const dummySelectionStore = useMemo(() => createSelectionStore(), []);
+        const activeSelectionStore = selectionStore || dummySelectionStore;
+        const selected = useCellSelected(activeSelectionStore, propertyKey, entity.path, entity.id);
 
         const [internalValue, setInternalValue] = useState<any | null>(value);
         const internalValueRef = useRef(value);
@@ -89,11 +91,11 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             setSavedTimestamp(Date.now());
         }, []);
 
-        const customField = Boolean(property.Field);
-        const customPreview = Boolean(property.Preview);
+        const customField = Boolean(property.ui?.Field);
+        const customPreview = Boolean(property.ui?.Preview);
         const readOnlyProperty = isReadOnly(property);
-        const disabledTooltip: string | undefined = typeof property.disabled === "object" ? property.disabled.disabledMessage : undefined;
-        const disabled = readonly || disabledProp || Boolean(property.disabled);
+        const disabledTooltip: string | undefined = typeof property.ui?.disabled === "object" ? property.ui?.disabled.disabledMessage : undefined;
+        const disabled = readonly || disabledProp || Boolean(property.ui?.disabled);
 
         const validation = useMemo(() => mapPropertyToZod({
             property,
@@ -114,13 +116,13 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             [onValueUpdated, value]
         );
 
-        const saveValues = async (value: any) => {
+        const saveValues = async (value: unknown) => {
             if (equal(value, internalValueRef.current))
                 return;
             const result = await validation.safeParseAsync(value);
             if (result.success) {
                     setValidationError(undefined);
-                    internalValueRef.current = value;
+                    internalValueRef.current = value as T;
                     if (onValueChange) {
                         try {
                             onValueChange({
@@ -153,9 +155,9 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 });
         }, [internalValue, validation, propertyKey, property, entity]);
 
-        const updateValue = (newValue: any | null) => {
+        const updateValue = (newValue: unknown | null) => {
 
-            let updatedValue: any;
+            let updatedValue: unknown;
             if (newValue === undefined) {
                 updatedValue = null;
             } else {
@@ -165,7 +167,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             saveValues(updatedValue);
         };
 
-        useClearRestoreValue<any>({
+        useClearRestoreValue<unknown>({
             property,
             value: internalValue,
             setValue: updateValue

package/src/components/{EntityCollectionTable → CollectionTableBinding}/column_utils.tsx

@@ -4,7 +4,7 @@ import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/c
 import { FilterValues } from "@rebasepro/types";
 import { VirtualTableColumn } from "@rebasepro/ui";
 import { getIconForProperty, getResolvedPropertyInPath } from "../../util/property_utils";
-import { getColumnKeysForProperty } from "@rebasepro/core";
+import { getColumnKeysForProperty } from "@rebasepro/app";
 
 export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
     return {
@@ -21,7 +21,7 @@ export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
 export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
     properties: Properties;
     sortable?: boolean;
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    fixedFilter?: FilterValues<keyof M extends string ? keyof M : never>;
     AdditionalHeaderWidget?: React.ComponentType<{
         property: Property,
         propertyKey: string,
@@ -29,8 +29,8 @@ export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
     }>;
 }
 
-export function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, forceFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
-    const disabledFilter = Boolean(forceFilter);
+export function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, fixedFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
+    const disabledFilter = Boolean(fixedFilter);
     return Object.entries<Property>(properties)
         .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
         .map(({

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableMultipleRelationField.tsx

@@ -1,17 +1,17 @@
-import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
+import { getCollectionDataPath } from "@rebasepro/types";
 import React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals";
 
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, PencilIcon } from "@rebasepro/ui";
 import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
 
 import { RelationPreview } from "../../../preview";
 import { CollectionSize, Entity, EntityRelation, FilterValues, Relation } from "@rebasepro/types";
-import { } from "@rebasepro/core";
-import { ErrorView } from "@rebasepro/core";
-import { EntityPreviewContainer } from "../../EntityPreview";
+import { } from "@rebasepro/app";
+import { ErrorView } from "@rebasepro/app";
+import { EntityPreviewContainer } from "../../EntityPreviewBinding";
 
 type TableMultipleRelationFieldProps = {
     name: string;
@@ -22,7 +22,7 @@ type TableMultipleRelationFieldProps = {
     previewProperties?: string[];
     title?: string;
     relation: Relation;
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     includeId?: boolean;
     includeEntityLink?: boolean;
 };
@@ -34,7 +34,7 @@ export function TableMultipleRelationField(props: TableMultipleRelationFieldProp
 
 export const TableMultipleRelationFieldInternal = React.memo(
     function TableMultipleRelationFieldInternal(props: TableMultipleRelationFieldProps & {
-        collection: EntityCollection;
+        collection: CollectionConfig;
     }) {
         const {
             name,
@@ -43,7 +43,7 @@ export const TableMultipleRelationFieldInternal = React.memo(
             previewProperties,
             title,
             disabled,
-            forceFilter,
+            fixedFilter,
             collection,
             includeId,
             includeEntityLink
@@ -57,13 +57,13 @@ export const TableMultipleRelationFieldInternal = React.memo(
 
         const selectedEntityIds = value.map((ref) => ref.id);
 
-        const relationDialogController = useEntitySelectionDialog({
+        const relationDialogController = useSelectionDialog({
             multiselect: true,
-            path: collection.slug,
+            path: getCollectionDataPath(collection),
             collection,
             onMultipleEntitiesSelected,
             selectedEntityIds,
-            forceFilter
+            fixedFilter
         }
         );
 

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableReferenceField.tsx

@@ -1,5 +1,5 @@
-import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals"
 
@@ -7,11 +7,9 @@ import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityReference, FilterValues } from "@rebasepro/types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { useCustomizationController } from "@rebasepro/core";
-import { ErrorView } from "@rebasepro/core";
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
-import { EntityPreviewContainer } from "../../EntityPreview";
+import { useComponentOverride, ErrorView, CollectionScopeProvider } from "@rebasepro/app";
+import { cls, PencilIcon } from "@rebasepro/ui";
+import { EntityPreviewContainer } from "../../EntityPreviewBinding";
 import { getReferenceFrom } from "@rebasepro/common";
 import { useCollectionRegistryController } from "../../../index";
 
@@ -25,20 +23,20 @@ type TableReferenceFieldProps = {
     previewProperties?: string[];
     title?: string;
     path: string;
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     includeId?: boolean;
     includeEntityLink?: boolean;
 };
 
-export function TableReferenceField(props: TableReferenceFieldProps) {
-    const customizationController = useCustomizationController();
+const DefaultMissingReference: React.FC<{ path: string }> = () => null;
+
+function TableReferenceFieldResolver(props: TableReferenceFieldProps & { collection: CollectionConfig | undefined }) {
+    const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
+    const { path, collection } = props;
 
-    const collectionRegistryController = useCollectionRegistryController();
-    const { path } = props;
-    const collection = collectionRegistryController.getCollection(path);
     if (!collection) {
-        if (customizationController.components?.missingReference) {
-            return <customizationController.components.missingReference path={path}/>;
+        if (ResolvedMissingReference !== DefaultMissingReference) {
+            return <ResolvedMissingReference path={path}/>;
         } else {
             return <ErrorView error={`Collection not found: ${path}`}/>;
         }
@@ -46,9 +44,31 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
     return <TableReferenceFieldInternal {...props} collection={collection}/>;
 }
 
+export function TableReferenceField(props: TableReferenceFieldProps) {
+    const collectionRegistryController = useCollectionRegistryController();
+    const { path } = props;
+    const collection = collectionRegistryController.getCollection(path);
+
+    const content = (
+        <TableReferenceFieldResolver
+            {...props}
+            collection={collection}
+        />
+    );
+
+    if (collection) {
+        return (
+            <CollectionScopeProvider collection={collection}>
+                {content}
+            </CollectionScopeProvider>
+        );
+    }
+    return content;
+}
+
 export const TableReferenceFieldInternal = React.memo(
     function TableReferenceFieldInternal(props: TableReferenceFieldProps & {
-        collection: EntityCollection;
+        collection: CollectionConfig;
     }) {
         const {
             name,
@@ -60,7 +80,7 @@ export const TableReferenceFieldInternal = React.memo(
             previewProperties,
             title,
             disabled,
-            forceFilter,
+            fixedFilter,
             collection,
             includeId,
             includeEntityLink
@@ -80,14 +100,14 @@ export const TableReferenceFieldInternal = React.memo(
                 : internalValue.id ? [internalValue.id] : [])
             : [];
 
-        const referenceDialogController = useEntitySelectionDialog({
+        const referenceDialogController = useSelectionDialog({
             multiselect,
             path,
             collection,
             onMultipleEntitiesSelected,
             onSingleEntitySelected,
             selectedEntityIds,
-            forceFilter
+            fixedFilter
         }
         );
 

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableRelationField.tsx

@@ -1,5 +1,6 @@
-import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
+import { getCollectionDataPath } from "@rebasepro/types";
 import React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals"
 
@@ -7,11 +8,10 @@ import { RelationPreview } from "../../../preview";
 import { CollectionSize, Entity, EntityRelation, FilterValues, Relation } from "@rebasepro/types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { } from "@rebasepro/core";
-import { ErrorView } from "@rebasepro/core";
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
-import { EntityPreviewContainer } from "../../EntityPreview";
+import { } from "@rebasepro/app";
+import { ErrorView } from "@rebasepro/app";
+import { cls, PencilIcon } from "@rebasepro/ui";
+import { EntityPreviewContainer } from "../../EntityPreviewBinding";
 import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
 import { TableMultipleRelationField } from "./TableMultipleRelationField";
 
@@ -25,7 +25,7 @@ type TableRelationFieldProps = {
     previewProperties?: string[];
     title?: string;
     relation: Relation;
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     includeId?: boolean;
     includeEntityLink?: boolean;
 };
@@ -46,7 +46,7 @@ export function TableRelationField(props: TableRelationFieldProps) {
             previewProperties={props.previewProperties}
             title={props.title}
             relation={props.relation}
-            forceFilter={props.forceFilter}
+            fixedFilter={props.fixedFilter}
             includeId={props.includeId}
             includeEntityLink={props.includeEntityLink}
         />;
@@ -57,7 +57,7 @@ export function TableRelationField(props: TableRelationFieldProps) {
 
 export const TableRelationFieldInternal = React.memo(
     function TableRelationFieldInternal(props: TableRelationFieldProps & {
-        collection: EntityCollection;
+        collection: CollectionConfig;
     }) {
         const {
             name,
@@ -69,7 +69,7 @@ export const TableRelationFieldInternal = React.memo(
             previewProperties,
             title,
             disabled,
-            forceFilter,
+            fixedFilter,
             collection,
             includeId,
             includeEntityLink
@@ -89,14 +89,14 @@ export const TableRelationFieldInternal = React.memo(
                 : internalValue.id ? [internalValue.id] : [])
             : [];
 
-        const relationDialogController = useEntitySelectionDialog({
+        const relationDialogController = useSelectionDialog({
             multiselect,
-            path: collection.slug,
+            path: getCollectionDataPath(collection),
             collection,
             onMultipleEntitiesSelected,
             onSingleEntitySelected,
             selectedEntityIds,
-            forceFilter
+            fixedFilter
         }
         );
 

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableRelationSelectorField.tsx

@@ -14,7 +14,7 @@ interface RelationSelectorFieldProps {
     /** The relation configuration */
     relation: Relation;
     /** Force filter to be applied to the relation search */
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     /** Collection size for display */
     size?: "small" | "medium";
 }
@@ -25,7 +25,7 @@ export function TableRelationSelectorField({
     internalValue,
     updateValue,
     relation,
-    forceFilter,
+    fixedFilter,
     size = "medium"
 }: RelationSelectorFieldProps) {
 
@@ -36,7 +36,7 @@ export function TableRelationSelectorField({
             value={internalValue || null}
             onValueChange={(newVal) => updateValue(newVal ?? null)}
             relation={relation}
-            forceFilter={forceFilter}
+            fixedFilter={fixedFilter}
         />
     );
 }

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableStorageUpload.tsx

@@ -7,11 +7,10 @@ import { PreviewSize } from "../../../types";
 import { useDropzone } from "react-dropzone";
 import { PropertyPreview } from "../../../preview";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
-import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController } from "@rebasepro/core";
+import { cls, IconButton, PencilIcon, Typography } from "@rebasepro/ui";
+import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController, StorageSourceContext } from "@rebasepro/app";
 import { getThumbnailMeasure } from "../../../preview/util";
 import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
-import { cls, IconButton, Typography } from "@rebasepro/ui";
 import { EntityTableCellActions } from "../internal/EntityTableCellActions";
 
 const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
@@ -35,7 +34,7 @@ export function TableStorageUpload(props: {
     selected: boolean;
     focused: boolean;
     property: StringProperty | ArrayProperty;
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
     path: string;
     previewSize: PreviewSize;
     openPopup?: (cellRect?: DOMRect) => void;
@@ -65,7 +64,8 @@ export function TableStorageUpload(props: {
         storage,
         onFileUploadComplete,
         storagePathBuilder,
-        multipleFilesSupported
+        multipleFilesSupported,
+        resolvedStorageSource
     } = useStorageUploadController({
         entityValues: entity.values,
         entityId: entity.id,
@@ -80,24 +80,26 @@ export function TableStorageUpload(props: {
 
     return (
 
-        <StorageUpload
-            internalValue={internalValue}
-            setInternalValue={setInternalValue}
-            name={propertyKey}
-            disabled={disabled}
-            autoFocus={false}
-            openPopup={openPopup}
-            error={error}
-            selected={selected}
-            property={property}
-            onChange={updateValue}
-            entity={entity}
-            storagePathBuilder={storagePathBuilder}
-            storage={storage}
-            multipleFilesSupported={multipleFilesSupported}
-            onFilesAdded={onFilesAdded}
-            onFileUploadComplete={onFileUploadComplete}
-            previewSize={previewSize}/>
+        <StorageSourceContext.Provider value={resolvedStorageSource}>
+            <StorageUpload
+                internalValue={internalValue}
+                setInternalValue={setInternalValue}
+                name={propertyKey}
+                disabled={disabled}
+                autoFocus={false}
+                openPopup={openPopup}
+                error={error}
+                selected={selected}
+                property={property}
+                onChange={updateValue}
+                entity={entity}
+                storagePathBuilder={storagePathBuilder}
+                storage={storage}
+                multipleFilesSupported={multipleFilesSupported}
+                onFilesAdded={onFilesAdded}
+                onFileUploadComplete={onFileUploadComplete}
+                previewSize={previewSize}/>
+        </StorageSourceContext.Provider>
 
     );
 }
@@ -113,13 +115,13 @@ interface StorageUploadProps {
     autoFocus: boolean;
     selected: boolean;
     disabled: boolean;
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
     previewSize: PreviewSize;
     storage: StorageConfig;
     onFilesAdded: (acceptedFiles: File[]) => void;
     storagePathBuilder: (file: File) => string;
     openPopup?: (cellRect?: DOMRect) => void;
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>;
 }
 
 function StorageUpload({
@@ -157,7 +159,7 @@ function StorageUpload({
         }
     }
 
-    const metadata: any | undefined = storage?.metadata;
+    const metadata: Record<string, unknown> | undefined = storage?.metadata;
     const hasValue = Boolean(internalValue);
 
     const snackbarContext = useSnackbarController();
@@ -289,7 +291,7 @@ interface TableStorageItemPreviewProps {
     property: StringProperty;
     value: string,
     size: PreviewSize;
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
 }
 
 export function TableStorageItemPreview({

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/VirtualTableSelect.tsx

@@ -40,7 +40,6 @@ export function VirtualTableSelect(props: {
     }, [focused, ref]);
 
     const onChange = useCallback((updatedValue: string | string[]) => {
-        console.trace("onChange");
         if (valueType === "number") {
             if (multiple) {
                 const newValue = (updatedValue as string[]).map((v) => parseFloat(v));

package/src/components/CollectionTableBinding/index.tsx

@@ -0,0 +1,14 @@
+export {
+    CollectionTableBinding
+} from "./CollectionTableBinding";
+
+export type {
+    CollectionTableBindingProps
+} from "./CollectionTableBindingProps";
+
+export * from "./PropertyTableCell";
+export * from "./CollectionRowActions";
+
+export * from "./column_utils";
+
+export { VirtualTableInput } from "@rebasepro/ui";

package/src/components/{EntityCollectionTable → CollectionTableBinding}/internal/CollectionTableToolbar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { CircularProgress, cls, defaultBorderMixin, SearchBar } from "@rebasepro/ui";
-import { useLargeLayout, useTranslation } from "@rebasepro/core";
+import { useLargeLayout, useTranslation } from "@rebasepro/app";
 
 interface CollectionTableToolbarProps {
     loading: boolean;
@@ -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) {
 
@@ -44,17 +49,12 @@ export function CollectionTableToolbar({
         <div
             className={cls(defaultBorderMixin, "no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
-            <div className="flex items-center gap-1 md:mr-4 mr-2">
+            <div className="flex items-center gap-1 md:mr-4 mr-2 min-w-0">
 
                 {/* View toggle — hidden in compact */}
-                <div className={cls(
-                    "transition-all duration-300 ease-out overflow-hidden",
-                    compact ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"
-                )}>
-                    {viewModeToggle}
-                </div>
+                {!compact && viewModeToggle}
 
-                {title && <div className={"hidden lg:block"}>
+                {title && <div className={"flex items-center"}>
                     {title}
                 </div>}
 
@@ -65,27 +65,21 @@ export function CollectionTableToolbar({
             <div className="flex items-center gap-1">
 
                 {/* Loading spinner — hidden in compact */}
-                {largeLayout && <div className={cls(
-                    "mr-4 transition-all duration-300 ease-out overflow-hidden",
-                    compact ? "w-0 opacity-0" : "w-[22px] opacity-100"
-                )}>
-                    {loading &&
-                        <CircularProgress size={"smallest"}/>}
-                </div>}
+                {largeLayout && !compact && loading && (
+                    <div className="mr-4">
+                        <CircularProgress size={"smallest"}/>
+                    </div>
+                )}
 
                 {/* Search bar — hidden in compact */}
-                <div className={cls(
-                    "transition-all duration-300 ease-out",
-                    compact ? "max-w-0 opacity-0 overflow-hidden" : "max-w-[300px] opacity-100"
-                )}>
-                    {onTextSearch &&
-                        <SearchBar
-                            key={"search-bar"}
-                            size={"small"}
-                            placeholder={t("search")}
-                            onTextSearch={onTextSearch}
-                            expandable={true}/>}
-                </div>
+                {!compact && onTextSearch &&
+                    <SearchBar
+                        key={"search-bar"}
+                        size={"small"}
+                        placeholder={t("search")}
+                        onTextSearch={onTextSearch}
+                        expandable={true}
+                        initialValue={initialSearchText}/>}
 
                 {/* Secondary actions — always inline */}
                 <div className="flex items-center gap-1">