@strapi/upload 5.51.0 → 5.51.2

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

@@ -1,42 +1,94 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { usePersistentState, Layouts, useElementOnScreen } from '@strapi/admin/strapi-admin';
 import { Box, VisuallyHidden, Flex, SimpleMenu, MenuItem, Loader, Typography } from '@strapi/design-system';
 import { List, GridFour, Folder, Files, Link, ChevronDown } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
+import { useAIAvailability } from '../../../hooks/useAiAvailability.mjs';
+import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
 import { useUploadFilesMutation, useUploadFromUrlsMutation } from '../../services/api.mjs';
 import { useGetFolderQuery, useGetFoldersQuery } from '../../services/folders.mjs';
+import { useGetUploadSettingsQuery } from '../../services/settings.mjs';
 import { getTranslationKey } from '../../utils/translations.mjs';
 import { useAssetDetailsParam, AssetDetailsDrawer } from './components/AssetDetails/AssetDetailsDrawer.mjs';
 import { AssetsGrid } from './components/AssetsGrid.mjs';
+import { AssetsSearchInput } from './components/AssetsSearchInput.mjs';
 import { AssetsTable } from './components/AssetsTable.mjs';
+import { BulkActionsBar } from './components/BulkActionsBar.mjs';
 import { CreateFolderDialog } from './components/CreateFolderDialog.mjs';
 import { AssetsDndProvider } from './components/Dnd/AssetsDndProvider.mjs';
 import { DropZoneWithOverlay, DropFilesMessage } from './components/DropZone/UploadDropZone.mjs';
 import { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext.mjs';
-import { EmptyState } from './components/EmptyState.mjs';
+import { FilteredEmptyState, EmptyState } from './components/EmptyState.mjs';
+import { FilterBadges } from './components/FilterBadges.mjs';
+import { FilterMenu } from './components/FilterMenu.mjs';
 import { FolderTree } from './components/FolderTree/FolderTree.mjs';
 import { ImportFromUrlDialog } from './components/ImportFromUrlDialog.mjs';
+import { SortMenu } from './components/SortMenu.mjs';
 import { localStorageKeys, viewOptions } from './constants.mjs';
+import { useAssetSearch } from './hooks/useAssetSearch.mjs';
+import { AssetSelectionProvider, useAssetSelection } from './hooks/useAssetSelection.mjs';
 import { useFolderInfo } from './hooks/useFolderInfo.mjs';
 import { useFolderNavigation } from './hooks/useFolderNavigation.mjs';
 import { useInfiniteAssets } from './hooks/useInfiniteAssets.mjs';
+import { useListFilters } from './hooks/useListFilters.mjs';
+import { useListSort } from './hooks/useListSort.mjs';
+import { buildAssetFilters } from './utils/buildAssetFilters.mjs';
+import { getListQueryKey } from './utils/listQueryKey.mjs';
+import { mergeMixedList } from './utils/mergeMixedList.mjs';
 
 const INTERSECTION_OPTIONS = {
     threshold: 0.1
 };
-const AssetsView = ({ view, folderId, onAssetItemClick, onAddAssets })=>{
+const ITEM_COUNT_MESSAGE = {
+    id: getTranslationKey('header.content.item-count'),
+    defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+};
+const SEARCH_RESULTS_COUNT_MESSAGES = {
+    both: {
+        id: getTranslationKey('header.search-results.count'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}}'
+    },
+    folders: {
+        id: getTranslationKey('header.search-results.count.folders'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}}'
+    },
+    assets: {
+        id: 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 } = useIntl();
-    const { assets, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets({
-        folder: folderId
-    });
-    const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({
-        parentId: folderId
-    });
     const isGridView = view === 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 = useMemo(()=>foldersPosition === 'mixed' && !isGridView ? mergeMixedList({
+            folders,
+            assets,
+            sort: assetsSort,
+            hasNextPage
+        }) : null, [
+        foldersPosition,
+        isGridView,
+        folders,
+        assets,
+        assetsSort,
+        hasNextPage
+    ]);
     const loadMoreRef = useElementOnScreen(useCallback((isVisible)=>{
         if (isVisible && hasNextPage && !isFetchingMore) {
             fetchNextPage();
@@ -71,8 +123,15 @@ const AssetsView = ({ view, folderId, onAssetItemClick, onAddAssets })=>{
         });
     }
     if (folders.length === 0 && assets.length === 0) {
-        return /*#__PURE__*/ jsx(EmptyState, {
-            onAddAssets: onAddAssets
+        // 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__*/ jsx(FilteredEmptyState, {
+            onClearFilters: onClearFilters
+        }) : /*#__PURE__*/ jsx(EmptyState, {
+            onAddAssets: onAddAssets,
+            canAddAssets: canAddAssets,
+            searchQuery: searchQuery,
+            onClearSearch: onClearSearch
         });
     }
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -84,6 +143,7 @@ const AssetsView = ({ view, folderId, onAssetItemClick, onAddAssets })=>{
             }) : /*#__PURE__*/ jsx(AssetsTable, {
                 assets: assets,
                 folders: folders,
+                mixedItems: mixedItems,
                 onAssetItemClick: onAssetItemClick
             }),
             /*#__PURE__*/ jsx("div", {
@@ -101,36 +161,61 @@ const AssetsView = ({ view, folderId, onAssetItemClick, onAddAssets })=>{
                         defaultMessage: 'Loading more assets...'
                     })
                 })
+            }),
+            /*#__PURE__*/ jsx(BulkActionsBar, {
+                assets: assets
             })
         ]
     });
 };
+const ClearSelectionOnChange = ({ listQueryKey })=>{
+    const { clear } = useAssetSelection();
+    useEffect(()=>{
+        clear();
+    }, [
+        listQueryKey,
+        clear
+    ]);
+    return null;
+};
 /* -------------------------------------------------------------------------------------------------
  * AssetsPage
- * -----------------------------------------------------------------------------------------------*/ const StyledToggleGroup = styled(ToggleGroup.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 = styled(ToggleGroup.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 = styled(ToggleGroup.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 {
@@ -150,6 +235,7 @@ const HeaderWrapper = styled(Box)`
 const AssetsPage = ()=>{
     const { formatMessage } = useIntl();
     const { openDetails } = useAssetDetailsParam();
+    const { canCreate, canUpdate } = useMediaLibraryPermissions();
     const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation();
     // Deleted or missing folders (404) need a fetch — handled here, not in
     // `useFolderNavigation` (which only strips malformed ?folder= values).
@@ -167,16 +253,65 @@ const AssetsPage = ()=>{
         navigateToRoot
     ]);
     const { title, itemCount } = useFolderInfo(currentFolderId);
-    const itemCountLabel = formatMessage({
-        id: getTranslationKey('header.content.item-count'),
-        defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+    const { searchQuery, isSearching, clearSearch } = useAssetSearch();
+    const listSort = useListSort();
+    const listFilters = useListFilters();
+    // Resolve relative presets against "now" only when the filters change —
+    // keeps the query args (and RTK cache keys) stable between renders.
+    const builtFilters = useMemo(()=>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({
+        // 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 } = 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 = 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: getTranslationKey('header.search-results'),
+        defaultMessage: 'Search results for "{query}"'
+    }, {
+        query: searchQuery
     });
+    const numberFolders = folders.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] = useState(false);
     // View state
     const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
@@ -189,6 +324,13 @@ const AssetsPage = ()=>{
     // Upload handlers
     const [uploadFiles] = useUploadFilesMutation();
     const [uploadFromUrls] = 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 } = useGetUploadSettingsQuery();
+    const concurrency = settings?.data?.concurrentUploadRequests ?? 1;
+    // Drives the post-upload AI metadata phase shown per row in the progress dialog.
+    const { isEnabled: isAiMetadataEnabled } = useAIAvailability();
     const uploadFilesToFolder = async (files, folderId)=>{
         if (files.length === 0) return;
         const formData = new FormData();
@@ -206,9 +348,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
         }
     };
@@ -223,160 +367,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 = 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__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(UploadDropZoneProvider, {
                 onDrop: handleDrop,
-                children: /*#__PURE__*/ jsx(AssetsDndProvider, {
-                    children: /*#__PURE__*/ jsx(Box, {
-                        ref: uploadDropZoneRef,
-                        children: /*#__PURE__*/ jsxs(Layouts.Root, {
-                            minHeight: "100vh",
-                            background: "neutral0",
-                            sideNav: /*#__PURE__*/ jsx(FolderTree, {
-                                currentFolderId: currentFolderId,
-                                onSelectFolder: navigateToFolderId
+                disabled: !canCreate,
+                children: /*#__PURE__*/ jsx(AssetSelectionProvider, {
+                    disabled: !canUpdate,
+                    children: /*#__PURE__*/ jsxs(AssetsDndProvider, {
+                        children: [
+                            /*#__PURE__*/ jsx(ClearSelectionOnChange, {
+                                listQueryKey: listQueryKey
                             }),
-                            children: [
-                                /*#__PURE__*/ jsx(VisuallyHidden, {
-                                    children: /*#__PURE__*/ jsx("input", {
-                                        type: "file",
-                                        ref: fileInputRef,
-                                        onChange: handleFileChange,
-                                        multiple: true
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(HeaderWrapper, {
-                                    children: /*#__PURE__*/ jsx(Layouts.Header, {
-                                        title: pageHeaderTitle,
-                                        primaryAction: /*#__PURE__*/ jsxs(SimpleMenu, {
-                                            popoverPlacement: "bottom-end",
-                                            variant: "default",
-                                            endIcon: /*#__PURE__*/ jsx(ChevronDown, {}),
-                                            label: formatMessage({
-                                                id: getTranslationKey('new'),
-                                                defaultMessage: 'New'
-                                            }),
-                                            children: [
-                                                /*#__PURE__*/ jsx(MenuItem, {
-                                                    onSelect: ()=>setIsCreateFolderDialogOpen(true),
-                                                    startIcon: /*#__PURE__*/ jsx(Folder, {}),
-                                                    children: formatMessage({
-                                                        id: getTranslationKey('folder.create.title'),
-                                                        defaultMessage: 'New folder'
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(MenuItem, {
-                                                    onSelect: handleFileSelect,
-                                                    startIcon: /*#__PURE__*/ jsx(Files, {}),
-                                                    children: formatMessage({
-                                                        id: getTranslationKey('import-files'),
-                                                        defaultMessage: 'Import files'
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(MenuItem, {
-                                                    onSelect: ()=>setIsUrlDialogOpen(true),
-                                                    startIcon: /*#__PURE__*/ jsx(Link, {}),
-                                                    children: formatMessage({
-                                                        id: getTranslationKey('import-from-url'),
-                                                        defaultMessage: 'Import from URL'
-                                                    })
-                                                })
-                                            ]
+                            /*#__PURE__*/ jsx(Box, {
+                                ref: uploadDropZoneRef,
+                                children: /*#__PURE__*/ jsxs(Layouts.Root, {
+                                    minHeight: "100vh",
+                                    background: "neutral0",
+                                    sideNav: /*#__PURE__*/ jsx(FolderTree, {
+                                        currentFolderId: currentFolderId,
+                                        showActiveFolder: !isSearching,
+                                        onSelectFolder: navigateToFolderId
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ jsx(VisuallyHidden, {
+                                            children: /*#__PURE__*/ jsx("input", {
+                                                type: "file",
+                                                ref: fileInputRef,
+                                                onChange: handleFileChange,
+                                                multiple: true
+                                            })
                                         }),
-                                        subtitle: /*#__PURE__*/ jsxs(Flex, {
-                                            justifyContent: "space-between",
-                                            alignItems: "center",
-                                            gap: 4,
-                                            width: "100%",
-                                            children: [
-                                                /*#__PURE__*/ jsx(Flex, {
-                                                    gap: 4,
-                                                    alignItems: "center",
-                                                    children: "TODO: Filters and search"
-                                                }),
-                                                /*#__PURE__*/ jsxs(Flex, {
-                                                    gap: 4,
-                                                    alignItems: "center",
+                                        /*#__PURE__*/ jsx(HeaderWrapper, {
+                                            children: /*#__PURE__*/ jsx(Layouts.Header, {
+                                                title: pageHeaderTitle,
+                                                primaryAction: canCreate && /*#__PURE__*/ jsxs(SimpleMenu, {
+                                                    popoverPlacement: "bottom-end",
+                                                    variant: "default",
+                                                    endIcon: /*#__PURE__*/ jsx(ChevronDown, {}),
+                                                    label: formatMessage({
+                                                        id: getTranslationKey('new'),
+                                                        defaultMessage: 'New'
+                                                    }),
                                                     children: [
-                                                        /*#__PURE__*/ jsx(Box, {
-                                                            children: "TODO: Sort"
+                                                        /*#__PURE__*/ jsx(MenuItem, {
+                                                            onSelect: ()=>setIsCreateFolderDialogOpen(true),
+                                                            startIcon: /*#__PURE__*/ jsx(Folder, {}),
+                                                            children: formatMessage({
+                                                                id: getTranslationKey('folder.create.title'),
+                                                                defaultMessage: 'New folder'
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx(MenuItem, {
+                                                            onSelect: handleFileSelect,
+                                                            startIcon: /*#__PURE__*/ jsx(Files, {}),
+                                                            children: formatMessage({
+                                                                id: getTranslationKey('import-files'),
+                                                                defaultMessage: 'Import files'
+                                                            })
                                                         }),
-                                                        /*#__PURE__*/ jsxs(StyledToggleGroup, {
-                                                            type: "single",
-                                                            value: isGridView ? 'grid' : 'table',
-                                                            onValueChange: (value)=>value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE),
-                                                            "aria-label": formatMessage({
-                                                                id: getTranslationKey('view.switch.label'),
-                                                                defaultMessage: 'View options'
-                                                            }),
+                                                        /*#__PURE__*/ jsx(MenuItem, {
+                                                            onSelect: ()=>setIsUrlDialogOpen(true),
+                                                            startIcon: /*#__PURE__*/ jsx(Link, {}),
+                                                            children: formatMessage({
+                                                                id: getTranslationKey('import-from-url'),
+                                                                defaultMessage: 'Import from URL'
+                                                            })
+                                                        })
+                                                    ]
+                                                }),
+                                                subtitle: /*#__PURE__*/ jsxs(Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsxs(Flex, {
+                                                            justifyContent: "space-between",
+                                                            alignItems: "center",
+                                                            gap: 4,
+                                                            width: "100%",
                                                             children: [
-                                                                /*#__PURE__*/ jsxs(StyledToggleItem, {
-                                                                    value: "table",
-                                                                    "aria-label": formatMessage({
-                                                                        id: getTranslationKey('view.table'),
-                                                                        defaultMessage: 'Table view'
-                                                                    }),
+                                                                /*#__PURE__*/ jsxs(Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
                                                                     children: [
-                                                                        /*#__PURE__*/ jsx(List, {}),
-                                                                        formatMessage({
-                                                                            id: getTranslationKey('view.table'),
-                                                                            defaultMessage: 'Table view'
-                                                                        })
+                                                                        /*#__PURE__*/ jsx(FilterMenu, {
+                                                                            listFilters: listFilters
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(AssetsSearchInput, {})
                                                                     ]
                                                                 }),
-                                                                /*#__PURE__*/ jsxs(StyledToggleItem, {
-                                                                    value: "grid",
-                                                                    "aria-label": formatMessage({
-                                                                        id: getTranslationKey('view.grid'),
-                                                                        defaultMessage: 'Grid view'
-                                                                    }),
+                                                                /*#__PURE__*/ jsxs(Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
                                                                     children: [
-                                                                        /*#__PURE__*/ jsx(GridFour, {}),
-                                                                        formatMessage({
-                                                                            id: getTranslationKey('view.grid'),
-                                                                            defaultMessage: 'Grid view'
+                                                                        /*#__PURE__*/ jsx(SortMenu, {
+                                                                            sort: listSort,
+                                                                            showFoldersGroup: !isGridView
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxs(StyledToggleGroup, {
+                                                                            type: "single",
+                                                                            value: isGridView ? 'grid' : 'table',
+                                                                            onValueChange: (value)=>value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE),
+                                                                            "aria-label": formatMessage({
+                                                                                id: getTranslationKey('view.switch.label'),
+                                                                                defaultMessage: 'View options'
+                                                                            }),
+                                                                            children: [
+                                                                                /*#__PURE__*/ jsxs(StyledToggleItem, {
+                                                                                    value: "table",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: getTranslationKey('view.table'),
+                                                                                        defaultMessage: 'Table view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsx(List, {}),
+                                                                                        formatMessage({
+                                                                                            id: getTranslationKey('view.table'),
+                                                                                            defaultMessage: 'Table view'
+                                                                                        })
+                                                                                    ]
+                                                                                }),
+                                                                                /*#__PURE__*/ jsxs(StyledToggleItem, {
+                                                                                    value: "grid",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: getTranslationKey('view.grid'),
+                                                                                        defaultMessage: 'Grid view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsx(GridFour, {}),
+                                                                                        formatMessage({
+                                                                                            id: getTranslationKey('view.grid'),
+                                                                                            defaultMessage: 'Grid view'
+                                                                                        })
+                                                                                    ]
+                                                                                })
+                                                                            ]
                                                                         })
                                                                     ]
                                                                 })
                                                             ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx(FilterBadges, {
+                                                            listFilters: listFilters
                                                         })
                                                     ]
                                                 })
-                                            ]
-                                        })
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Layouts.Content, {
-                                    children: /*#__PURE__*/ jsxs(DropZoneWithOverlay, {
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropFilesMessage, {
-                                                uploadDropZoneRef: uploadDropZoneRef,
-                                                folderName: title
-                                            }),
-                                            /*#__PURE__*/ jsx(AssetsView, {
-                                                view: view,
-                                                folderId: currentFolderId,
-                                                onAssetItemClick: openDetails,
-                                                onAddAssets: handleFileSelect
                                             })
-                                        ]
-                                    })
+                                        }),
+                                        /*#__PURE__*/ jsx(Layouts.Content, {
+                                            children: /*#__PURE__*/ jsxs(DropZoneWithOverlay, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(DropFilesMessage, {
+                                                        uploadDropZoneRef: uploadDropZoneRef,
+                                                        folderName: title
+                                                    }),
+                                                    /*#__PURE__*/ jsx(AssetsView, {
+                                                        view: view,
+                                                        folders: folders,
+                                                        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
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
                                 })
-                            ]
-                        })
+                            })
+                        ]
                     })
                 })
             }),