@strapi/upload 5.51.0 → 5.51.2

package/dist/admin/future/pages/Assets/AssetsPage.js

@@ -8,23 +8,38 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
+var useAiAvailability = require('../../../hooks/useAiAvailability.js');
+var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
 var api = require('../../services/api.js');
 var folders = require('../../services/folders.js');
+var settings = require('../../services/settings.js');
 var translations = require('../../utils/translations.js');
 var AssetDetailsDrawer = require('./components/AssetDetails/AssetDetailsDrawer.js');
 var AssetsGrid = require('./components/AssetsGrid.js');
+var AssetsSearchInput = require('./components/AssetsSearchInput.js');
 var AssetsTable = require('./components/AssetsTable.js');
+var BulkActionsBar = require('./components/BulkActionsBar.js');
 var CreateFolderDialog = require('./components/CreateFolderDialog.js');
 var AssetsDndProvider = require('./components/Dnd/AssetsDndProvider.js');
 var UploadDropZone = require('./components/DropZone/UploadDropZone.js');
 var UploadDropZoneContext = require('./components/DropZone/UploadDropZoneContext.js');
 var EmptyState = require('./components/EmptyState.js');
+var FilterBadges = require('./components/FilterBadges.js');
+var FilterMenu = require('./components/FilterMenu.js');
 var FolderTree = require('./components/FolderTree/FolderTree.js');
 var ImportFromUrlDialog = require('./components/ImportFromUrlDialog.js');
+var SortMenu = require('./components/SortMenu.js');
 var constants = require('./constants.js');
+var useAssetSearch = require('./hooks/useAssetSearch.js');
+var useAssetSelection = require('./hooks/useAssetSelection.js');
 var useFolderInfo = require('./hooks/useFolderInfo.js');
 var useFolderNavigation = require('./hooks/useFolderNavigation.js');
 var useInfiniteAssets = require('./hooks/useInfiniteAssets.js');
+var useListFilters = require('./hooks/useListFilters.js');
+var useListSort = require('./hooks/useListSort.js');
+var buildAssetFilters = require('./utils/buildAssetFilters.js');
+var listQueryKey = require('./utils/listQueryKey.js');
+var mergeMixedList = require('./utils/mergeMixedList.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -49,16 +64,53 @@ var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 const INTERSECTION_OPTIONS = {
     threshold: 0.1
 };
-const AssetsView = ({ view, folderId, onAssetItemClick, onAddAssets })=>{
+const ITEM_COUNT_MESSAGE = {
+    id: translations.getTranslationKey('header.content.item-count'),
+    defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+};
+const SEARCH_RESULTS_COUNT_MESSAGES = {
+    both: {
+        id: translations.getTranslationKey('header.search-results.count'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}}'
+    },
+    folders: {
+        id: translations.getTranslationKey('header.search-results.count.folders'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}}'
+    },
+    assets: {
+        id: translations.getTranslationKey('header.search-results.count.assets'),
+        defaultMessage: '{numberAssets, plural, =0 {0 assets} one {1 asset} other {# assets}}'
+    }
+};
+const getSearchResultsCountMessage = (numberFolders, numberAssets)=>{
+    if (numberFolders === 0) {
+        return SEARCH_RESULTS_COUNT_MESSAGES.assets;
+    }
+    if (numberAssets === 0) {
+        return SEARCH_RESULTS_COUNT_MESSAGES.folders;
+    }
+    return SEARCH_RESULTS_COUNT_MESSAGES.both;
+};
+const AssetsView = ({ view, folders, isLoadingFolders, assets, isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error, searchQuery, assetsSort, foldersPosition, hasActiveFilters, onClearFilters, onAssetItemClick, onAddAssets, canAddAssets, onClearSearch })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const { assets, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets.useInfiniteAssets({
-        folder: folderId
-    });
-    const { data: folders$1 = [], isLoading: isLoadingFolders } = folders.useGetFoldersQuery({
-        parentId: folderId
-    });
     const isGridView = view === constants.viewOptions.GRID;
     const isLoading = isLoadingAssets || isLoadingFolders;
+    // "Folders: Mixed with files" — interleave the complete folder list into the
+    // loaded asset stream client-side, following the active sort. Table view
+    // only: the grid always keeps folders in their own band on top.
+    const mixedItems = React.useMemo(()=>foldersPosition === 'mixed' && !isGridView ? mergeMixedList.mergeMixedList({
+            folders,
+            assets,
+            sort: assetsSort,
+            hasNextPage
+        }) : null, [
+        foldersPosition,
+        isGridView,
+        folders,
+        assets,
+        assetsSort,
+        hasNextPage
+    ]);
     const loadMoreRef = strapiAdmin.useElementOnScreen(React.useCallback((isVisible)=>{
         if (isVisible && hasNextPage && !isFetchingMore) {
             fetchNextPage();
@@ -92,20 +144,28 @@ const AssetsView = ({ view, folderId, onAssetItemClick, onAddAssets })=>{
             })
         });
     }
-    if (folders$1.length === 0 && assets.length === 0) {
-        return /*#__PURE__*/ jsxRuntime.jsx(EmptyState.EmptyState, {
-            onAddAssets: onAddAssets
+    if (folders.length === 0 && assets.length === 0) {
+        // While searching, the search empty state wins (it names the query); a
+        // filter-only dead end gets the filtered variant with its Clear action.
+        return hasActiveFilters && !searchQuery ? /*#__PURE__*/ jsxRuntime.jsx(EmptyState.FilteredEmptyState, {
+            onClearFilters: onClearFilters
+        }) : /*#__PURE__*/ jsxRuntime.jsx(EmptyState.EmptyState, {
+            onAddAssets: onAddAssets,
+            canAddAssets: canAddAssets,
+            searchQuery: searchQuery,
+            onClearSearch: onClearSearch
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             isGridView ? /*#__PURE__*/ jsxRuntime.jsx(AssetsGrid.AssetsGrid, {
-                folders: folders$1,
+                folders: folders,
                 assets: assets,
                 onAssetItemClick: onAssetItemClick
             }) : /*#__PURE__*/ jsxRuntime.jsx(AssetsTable.AssetsTable, {
                 assets: assets,
-                folders: folders$1,
+                folders: folders,
+                mixedItems: mixedItems,
                 onAssetItemClick: onAssetItemClick
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -123,36 +183,61 @@ const AssetsView = ({ view, folderId, onAssetItemClick, onAddAssets })=>{
                         defaultMessage: 'Loading more assets...'
                     })
                 })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(BulkActionsBar.BulkActionsBar, {
+                assets: assets
             })
         ]
     });
 };
+const ClearSelectionOnChange = ({ listQueryKey })=>{
+    const { clear } = useAssetSelection.useAssetSelection();
+    React.useEffect(()=>{
+        clear();
+    }, [
+        listQueryKey,
+        clear
+    ]);
+    return null;
+};
 /* -------------------------------------------------------------------------------------------------
  * AssetsPage
- * -----------------------------------------------------------------------------------------------*/ const StyledToggleGroup = styledComponents.styled(ToggleGroup__namespace.Root)`
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * Mirrors the design-system Toggle look (grey track, white active segment
+ * card) — reproduced locally because the DS component is a labels-only
+ * boolean input (no icons) and paints its left segment in danger red. Here
+ * both segments use the primary blue when active.
+ */ const StyledToggleGroup = styledComponents.styled(ToggleGroup__namespace.Root)`
   display: flex;
+  padding: ${({ theme })=>theme.spaces[1]};
+  background: ${({ theme })=>theme.colors.neutral100};
   border: 1px solid ${({ theme })=>theme.colors.neutral200};
   border-radius: ${({ theme })=>theme.borderRadius};
-  overflow: hidden;
 `;
 const StyledToggleItem = styledComponents.styled(ToggleGroup__namespace.Item)`
   display: flex;
+  flex: 1 1 50%;
   align-items: center;
+  justify-content: center;
   gap: ${({ theme })=>theme.spaces[2]};
-  padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[4]}`};
-  border: none;
-  background: ${({ theme })=>theme.colors.neutral0};
-  color: ${({ theme })=>theme.colors.neutral800};
+  padding: 0.6rem ${({ theme })=>theme.spaces[3]};
+  border: 1px solid transparent;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: transparent;
+  color: ${({ theme })=>theme.colors.neutral600};
   cursor: pointer;
   font-size: ${({ theme })=>theme.fontSizes[1]};
   font-weight: ${({ theme })=>theme.fontWeights.semiBold};
+  white-space: nowrap;
 
   &:hover {
-    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.neutral700};
   }
 
   &[data-state='on'] {
-    background: ${({ theme })=>theme.colors.neutral150};
+    background: ${({ theme })=>theme.colors.neutral0};
+    border-color: ${({ theme })=>theme.colors.neutral200};
+    color: ${({ theme })=>theme.colors.primary600};
   }
 
   svg {
@@ -172,6 +257,7 @@ const HeaderWrapper = styledComponents.styled(designSystem.Box)`
 const AssetsPage = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { openDetails } = AssetDetailsDrawer.useAssetDetailsParam();
+    const { canCreate, canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
     const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation.useFolderNavigation();
     // Deleted or missing folders (404) need a fetch — handled here, not in
     // `useFolderNavigation` (which only strips malformed ?folder= values).
@@ -189,16 +275,65 @@ const AssetsPage = ()=>{
         navigateToRoot
     ]);
     const { title, itemCount } = useFolderInfo.useFolderInfo(currentFolderId);
-    const itemCountLabel = formatMessage({
-        id: translations.getTranslationKey('header.content.item-count'),
-        defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+    const { searchQuery, isSearching, clearSearch } = useAssetSearch.useAssetSearch();
+    const listSort = useListSort.useListSort();
+    const listFilters = useListFilters.useListFilters();
+    // Resolve relative presets against "now" only when the filters change —
+    // keeps the query args (and RTK cache keys) stable between renders.
+    const builtFilters = React.useMemo(()=>buildAssetFilters.buildAssetFilters(listFilters.filters, new Date()), // eslint-disable-next-line react-hooks/exhaustive-deps -- serialized is the value identity of filters
+    [
+        listFilters.serialized
+    ]);
+    const { assets, pagination, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error: assetsError } = useInfiniteAssets.useInfiniteAssets({
+        // The real folder is passed even while searching: the service drops the folder
+        // filter when `search` is set, so results are still global. List filters
+        // compose with both modes.
+        folder: currentFolderId,
+        search: searchQuery || undefined,
+        sort: listSort.assetsSort,
+        filters: builtFilters.fileClauses,
+        filtersKey: listFilters.serialized,
+        enabled: builtFilters.showFiles
+    });
+    const { data: fetchedFolders = [], isLoading: isLoadingFolders } = folders.useGetFoldersQuery({
+        parentId: currentFolderId,
+        search: searchQuery || undefined,
+        sort: listSort.foldersSort,
+        filters: builtFilters.folderClauses
     }, {
+        skip: !builtFilters.showFolders
+    });
+    // A type badge can exclude folders structurally (e.g. "Type is Picture").
+    const folders$1 = React.useMemo(()=>builtFilters.showFolders ? fetchedFolders : [], [
+        builtFilters.showFolders,
+        fetchedFolders
+    ]);
+    const itemCountLabel = formatMessage(ITEM_COUNT_MESSAGE, {
         count: itemCount
     });
-    const pageHeaderTitle = title ? `${title} (${itemCountLabel})` : formatMessage({
-        id: 'app.loading',
-        defaultMessage: 'Loading...'
+    const searchResultsTitle = formatMessage({
+        id: translations.getTranslationKey('header.search-results'),
+        defaultMessage: 'Search results for "{query}"'
+    }, {
+        query: searchQuery
     });
+    const numberFolders = folders$1.length;
+    const numberAssets = pagination?.total ?? 0;
+    const searchResultsCountLabel = formatMessage(getSearchResultsCountMessage(numberFolders, numberAssets), {
+        numberFolders,
+        numberAssets
+    });
+    let pageHeaderTitle;
+    if (isSearching) {
+        pageHeaderTitle = `${searchResultsTitle} (${searchResultsCountLabel})`;
+    } else if (title) {
+        pageHeaderTitle = `${title} (${itemCountLabel})`;
+    } else {
+        pageHeaderTitle = formatMessage({
+            id: 'app.loading',
+            defaultMessage: 'Loading...'
+        });
+    }
     const [isCreateFolderDialogOpen, setIsCreateFolderDialogOpen] = React.useState(false);
     // View state
     const [view, setView] = strapiAdmin.usePersistentState(constants.localStorageKeys.view, constants.viewOptions.GRID);
@@ -211,6 +346,13 @@ const AssetsPage = ()=>{
     // Upload handlers
     const [uploadFiles] = api.useUploadFilesMutation();
     const [uploadFromUrls] = api.useUploadFromUrlsMutation();
+    // `concurrentUploadRequests` echoes the app config. Missing settings (still
+    // loading, no permission) fall back to sequential — never faster than the
+    // server asked for.
+    const { data: settings$1 } = settings.useGetUploadSettingsQuery();
+    const concurrency = settings$1?.data?.concurrentUploadRequests ?? 1;
+    // Drives the post-upload AI metadata phase shown per row in the progress dialog.
+    const { isEnabled: isAiMetadataEnabled } = useAiAvailability.useAIAvailability();
     const uploadFilesToFolder = async (files, folderId)=>{
         if (files.length === 0) return;
         const formData = new FormData();
@@ -228,9 +370,11 @@ const AssetsPage = ()=>{
         try {
             await uploadFiles({
                 formData,
-                totalFiles: files.length
+                totalFiles: files.length,
+                concurrency,
+                generateAiMetadata: Boolean(isAiMetadataEnabled)
             }).unwrap();
-        } catch (error) {
+        } catch  {
         // Error is already dispatched to store from the API queryFn
         }
     };
@@ -245,160 +389,210 @@ const AssetsPage = ()=>{
         e.target.value = '';
     };
     const handleDrop = async (files)=>{
+        // Defence in depth: the provider is `disabled` without `assets.create`
+        // (so onDrop won't fire), but guard here too in case it's ever wired live.
+        if (!canCreate) return;
         await uploadFilesToFolder(files, currentFolderId);
     };
     const handleUrlUpload = async (urls)=>{
         try {
             await uploadFromUrls({
                 urls,
-                folderId: currentFolderId
+                folderId: currentFolderId,
+                generateAiMetadata: Boolean(isAiMetadataEnabled)
             }).unwrap();
-        } catch (error) {
+        } catch  {
         // Error is already dispatched to store from the API queryFn
         }
     };
+    // The view is deliberately absent: table and grid render the same list, so
+    // toggling views keeps the selection.
+    const listQueryKey$1 = listQueryKey.getListQueryKey({
+        folderId: currentFolderId,
+        search: searchQuery,
+        // Folder position changes the render order too — selection must reset.
+        sort: `${listSort.assetsSort};folders=${listSort.foldersPosition}`,
+        filter: listFilters.serialized || null
+    });
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(UploadDropZoneContext.UploadDropZoneProvider, {
                 onDrop: handleDrop,
-                children: /*#__PURE__*/ jsxRuntime.jsx(AssetsDndProvider.AssetsDndProvider, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                        ref: uploadDropZoneRef,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
-                            minHeight: "100vh",
-                            background: "neutral0",
-                            sideNav: /*#__PURE__*/ jsxRuntime.jsx(FolderTree.FolderTree, {
-                                currentFolderId: currentFolderId,
-                                onSelectFolder: navigateToFolderId
+                disabled: !canCreate,
+                children: /*#__PURE__*/ jsxRuntime.jsx(useAssetSelection.AssetSelectionProvider, {
+                    disabled: !canUpdate,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(AssetsDndProvider.AssetsDndProvider, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(ClearSelectionOnChange, {
+                                listQueryKey: listQueryKey$1
                             }),
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
-                                    children: /*#__PURE__*/ jsxRuntime.jsx("input", {
-                                        type: "file",
-                                        ref: fileInputRef,
-                                        onChange: handleFileChange,
-                                        multiple: true
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(HeaderWrapper, {
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
-                                        title: pageHeaderTitle,
-                                        primaryAction: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SimpleMenu, {
-                                            popoverPlacement: "bottom-end",
-                                            variant: "default",
-                                            endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {}),
-                                            label: formatMessage({
-                                                id: translations.getTranslationKey('new'),
-                                                defaultMessage: 'New'
-                                            }),
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
-                                                    onSelect: ()=>setIsCreateFolderDialogOpen(true),
-                                                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {}),
-                                                    children: formatMessage({
-                                                        id: translations.getTranslationKey('folder.create.title'),
-                                                        defaultMessage: 'New folder'
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
-                                                    onSelect: handleFileSelect,
-                                                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
-                                                    children: formatMessage({
-                                                        id: translations.getTranslationKey('import-files'),
-                                                        defaultMessage: 'Import files'
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
-                                                    onSelect: ()=>setIsUrlDialogOpen(true),
-                                                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
-                                                    children: formatMessage({
-                                                        id: translations.getTranslationKey('import-from-url'),
-                                                        defaultMessage: 'Import from URL'
-                                                    })
-                                                })
-                                            ]
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                ref: uploadDropZoneRef,
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
+                                    minHeight: "100vh",
+                                    background: "neutral0",
+                                    sideNav: /*#__PURE__*/ jsxRuntime.jsx(FolderTree.FolderTree, {
+                                        currentFolderId: currentFolderId,
+                                        showActiveFolder: !isSearching,
+                                        onSelectFolder: navigateToFolderId
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                            children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                                type: "file",
+                                                ref: fileInputRef,
+                                                onChange: handleFileChange,
+                                                multiple: true
+                                            })
                                         }),
-                                        subtitle: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                            justifyContent: "space-between",
-                                            alignItems: "center",
-                                            gap: 4,
-                                            width: "100%",
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                                    gap: 4,
-                                                    alignItems: "center",
-                                                    children: "TODO: Filters and search"
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                                    gap: 4,
-                                                    alignItems: "center",
+                                        /*#__PURE__*/ jsxRuntime.jsx(HeaderWrapper, {
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
+                                                title: pageHeaderTitle,
+                                                primaryAction: canCreate && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SimpleMenu, {
+                                                    popoverPlacement: "bottom-end",
+                                                    variant: "default",
+                                                    endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {}),
+                                                    label: formatMessage({
+                                                        id: translations.getTranslationKey('new'),
+                                                        defaultMessage: 'New'
+                                                    }),
                                                     children: [
-                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                                            children: "TODO: Sort"
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                            onSelect: ()=>setIsCreateFolderDialogOpen(true),
+                                                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {}),
+                                                            children: formatMessage({
+                                                                id: translations.getTranslationKey('folder.create.title'),
+                                                                defaultMessage: 'New folder'
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                            onSelect: handleFileSelect,
+                                                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
+                                                            children: formatMessage({
+                                                                id: translations.getTranslationKey('import-files'),
+                                                                defaultMessage: 'Import files'
+                                                            })
                                                         }),
-                                                        /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleGroup, {
-                                                            type: "single",
-                                                            value: isGridView ? 'grid' : 'table',
-                                                            onValueChange: (value)=>value && setView(value === 'grid' ? constants.viewOptions.GRID : constants.viewOptions.TABLE),
-                                                            "aria-label": formatMessage({
-                                                                id: translations.getTranslationKey('view.switch.label'),
-                                                                defaultMessage: 'View options'
-                                                            }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                            onSelect: ()=>setIsUrlDialogOpen(true),
+                                                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
+                                                            children: formatMessage({
+                                                                id: translations.getTranslationKey('import-from-url'),
+                                                                defaultMessage: 'Import from URL'
+                                                            })
+                                                        })
+                                                    ]
+                                                }),
+                                                subtitle: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                            justifyContent: "space-between",
+                                                            alignItems: "center",
+                                                            gap: 4,
+                                                            width: "100%",
                                                             children: [
-                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
-                                                                    value: "table",
-                                                                    "aria-label": formatMessage({
-                                                                        id: translations.getTranslationKey('view.table'),
-                                                                        defaultMessage: 'Table view'
-                                                                    }),
+                                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
                                                                     children: [
-                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
-                                                                        formatMessage({
-                                                                            id: translations.getTranslationKey('view.table'),
-                                                                            defaultMessage: 'Table view'
-                                                                        })
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(FilterMenu.FilterMenu, {
+                                                                            listFilters: listFilters
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(AssetsSearchInput.AssetsSearchInput, {})
                                                                     ]
                                                                 }),
-                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
-                                                                    value: "grid",
-                                                                    "aria-label": formatMessage({
-                                                                        id: translations.getTranslationKey('view.grid'),
-                                                                        defaultMessage: 'Grid view'
-                                                                    }),
+                                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
                                                                     children: [
-                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {}),
-                                                                        formatMessage({
-                                                                            id: translations.getTranslationKey('view.grid'),
-                                                                            defaultMessage: 'Grid view'
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(SortMenu.SortMenu, {
+                                                                            sort: listSort,
+                                                                            showFoldersGroup: !isGridView
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleGroup, {
+                                                                            type: "single",
+                                                                            value: isGridView ? 'grid' : 'table',
+                                                                            onValueChange: (value)=>value && setView(value === 'grid' ? constants.viewOptions.GRID : constants.viewOptions.TABLE),
+                                                                            "aria-label": formatMessage({
+                                                                                id: translations.getTranslationKey('view.switch.label'),
+                                                                                defaultMessage: 'View options'
+                                                                            }),
+                                                                            children: [
+                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
+                                                                                    value: "table",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: translations.getTranslationKey('view.table'),
+                                                                                        defaultMessage: 'Table view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
+                                                                                        formatMessage({
+                                                                                            id: translations.getTranslationKey('view.table'),
+                                                                                            defaultMessage: 'Table view'
+                                                                                        })
+                                                                                    ]
+                                                                                }),
+                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
+                                                                                    value: "grid",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: translations.getTranslationKey('view.grid'),
+                                                                                        defaultMessage: 'Grid view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {}),
+                                                                                        formatMessage({
+                                                                                            id: translations.getTranslationKey('view.grid'),
+                                                                                            defaultMessage: 'Grid view'
+                                                                                        })
+                                                                                    ]
+                                                                                })
+                                                                            ]
                                                                         })
                                                                     ]
                                                                 })
                                                             ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(FilterBadges.FilterBadges, {
+                                                            listFilters: listFilters
                                                         })
                                                     ]
                                                 })
-                                            ]
-                                        })
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
-                                    children: /*#__PURE__*/ jsxRuntime.jsxs(UploadDropZone.DropZoneWithOverlay, {
-                                        children: [
-                                            /*#__PURE__*/ jsxRuntime.jsx(UploadDropZone.DropFilesMessage, {
-                                                uploadDropZoneRef: uploadDropZoneRef,
-                                                folderName: title
-                                            }),
-                                            /*#__PURE__*/ jsxRuntime.jsx(AssetsView, {
-                                                view: view,
-                                                folderId: currentFolderId,
-                                                onAssetItemClick: openDetails,
-                                                onAddAssets: handleFileSelect
                                             })
-                                        ]
-                                    })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
+                                            children: /*#__PURE__*/ jsxRuntime.jsxs(UploadDropZone.DropZoneWithOverlay, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx(UploadDropZone.DropFilesMessage, {
+                                                        uploadDropZoneRef: uploadDropZoneRef,
+                                                        folderName: title
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(AssetsView, {
+                                                        view: view,
+                                                        folders: folders$1,
+                                                        isLoadingFolders: isLoadingFolders,
+                                                        assets: assets,
+                                                        isLoadingAssets: isLoadingAssets,
+                                                        isFetchingMore: isFetchingMore,
+                                                        hasNextPage: hasNextPage,
+                                                        fetchNextPage: fetchNextPage,
+                                                        error: assetsError,
+                                                        searchQuery: searchQuery,
+                                                        assetsSort: listSort.assetsSort,
+                                                        foldersPosition: listSort.foldersPosition,
+                                                        hasActiveFilters: listFilters.filters.length > 0,
+                                                        onClearFilters: listFilters.clearFilters,
+                                                        onAssetItemClick: openDetails,
+                                                        onAddAssets: handleFileSelect,
+                                                        canAddAssets: canCreate,
+                                                        onClearSearch: clearSearch
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
                                 })
-                            ]
-                        })
+                            })
+                        ]
                     })
                 })
             }),