@strapi/upload 5.51.1 → 5.52.0

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

@@ -1,48 +1,90 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useEffect, useState, useRef, useMemo, 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 { usePersistentState, useElementOnScreen, Layouts, Page } from '@strapi/admin/strapi-admin';
+import { Box, VisuallyHidden, Typography, SimpleMenu, MenuItem, Flex, Loader } from '@strapi/design-system';
+import { Folder, Files, Link, ChevronDown, List, GridFour } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { styled } from 'styled-components';
+import { css, styled } from 'styled-components';
+import { BetaNotice } from '../../components/BetaNotice.mjs';
+import { useAIMetadataEnabled } from '../../hooks/useAIMetadataEnabled.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 { buildItemLocations } from '../../utils/itemLocations.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 { FolderFormDialog } from './components/FolderFormDialog.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 { BusyAssetsProvider } from './hooks/useBusyAssets.mjs';
 import { useFolderInfo } from './hooks/useFolderInfo.mjs';
 import { useFolderNavigation } from './hooks/useFolderNavigation.mjs';
 import { useInfiniteAssets } from './hooks/useInfiniteAssets.mjs';
+import { useInfiniteScrollSentinel } from './hooks/useInfiniteScrollSentinel.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';
 
+// The negative bottom margin shrinks the trigger area by a pixel so the 1px
+// sentinel sitting exactly at the fold (when a page's rows happen to fill the
+// viewport) reads as "not visible" and doesn't pull an extra page. It still
+// triggers as soon as the sentinel scrolls a hair into view. Tune the bottom
+// value if the list over- or under-fetches near the fold.
 const INTERSECTION_OPTIONS = {
-    threshold: 0.1
+    threshold: 0,
+    rootMargin: '0px 0px -1px 0px'
 };
-const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition, onAssetItemClick, onAddAssets })=>{
+// Module-level so the header sentinel's observer isn't rebuilt every render.
+const HEADER_SENTINEL_OPTIONS = {
+    threshold: 0
+};
+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, locations, searchQuery, assetsSort, foldersPosition, hasActiveFilters, onClearFilters, onAssetItemClick, onAddAssets, canAddAssets, onClearSearch })=>{
     const { formatMessage } = useIntl();
-    const { assets, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets({
-        folder: folderId,
-        sort: assetsSort
-    });
-    const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({
-        parentId: folderId,
-        sort: foldersSort
-    });
     const isGridView = view === viewOptions.GRID;
     const isLoading = isLoadingAssets || isLoadingFolders;
     // "Folders: Mixed with files" — interleave the complete folder list into the
@@ -61,15 +103,12 @@ const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition,
         assetsSort,
         hasNextPage
     ]);
-    const loadMoreRef = useElementOnScreen(useCallback((isVisible)=>{
-        if (isVisible && hasNextPage && !isFetchingMore) {
-            fetchNextPage();
-        }
-    }, [
+    const loadMoreRef = useInfiniteScrollSentinel({
         hasNextPage,
         isFetchingMore,
-        fetchNextPage
-    ]), INTERSECTION_OPTIONS);
+        onLoadMore: fetchNextPage,
+        options: INTERSECTION_OPTIONS
+    });
     if (isLoading) {
         return /*#__PURE__*/ jsx(Flex, {
             justifyContent: "center",
@@ -95,8 +134,15 @@ const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition,
         });
     }
     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, {
@@ -126,6 +172,10 @@ const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition,
                         defaultMessage: 'Loading more assets...'
                     })
                 })
+            }),
+            /*#__PURE__*/ jsx(BulkActionsBar, {
+                assets: assets,
+                locations: locations
             })
         ]
     });
@@ -185,18 +235,128 @@ const StyledToggleItem = styled(ToggleGroup.Item)`
     height: 1.6rem;
   }
 `;
-const HeaderWrapper = styled(Box)`
-  [data-strapi-header] {
-    background: ${({ theme })=>theme.colors.neutral0};
+// A single sticky header — same layout scrolled or not, so the toolbar
+// alignment can't reflow the way the shared sticky header did. Once the list
+// scrolls under it, it shrinks (reduced vertical padding + a shadow to lift it
+// off the rows), like the sticky headers elsewhere in the admin. Horizontal
+// padding stays responsive (passed as props); only the vertical rhythm + shadow
+// change here so they can animate.
+const StickyHeader = styled(Box)`
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  /* Transparent at rest (the grey page shows through); an opaque background +
+     shadow appear only once it sticks and content scrolls under it. */
+  background: transparent;
+  /* Horizontal padding matches the list's default spacing (Layouts.Content /
+     RESPONSIVE_DEFAULT_SPACING: 4 / 6 / 10) so the header lines up with the rows. */
+  padding: ${({ theme })=>`${theme.spaces[6]} ${theme.spaces[4]}`};
+  transition:
+    padding 0.2s ease,
+    background 0.2s ease,
+    box-shadow 0.2s ease;
 
-    h1 {
-      font-size: 1.8rem;
-    }
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding-left: ${({ theme })=>theme.spaces[6]};
+    padding-right: ${({ theme })=>theme.spaces[6]};
+  }
+  ${({ theme })=>theme.breakpoints.large} {
+    padding-left: ${({ theme })=>theme.spaces[10]};
+    padding-right: ${({ theme })=>theme.spaces[10]};
+  }
+
+  /* Compacting is scoped to medium and up, where the header actually sticks. On
+     mobile it scrolls away with the list, so shrinking it mid-scroll animated a
+     header the user could no longer see — the transition read as a glitch on the
+     way back up rather than as the header settling. */
+  ${({ $compact, theme })=>$compact && css`
+      ${theme.breakpoints.medium} {
+        padding-top: ${theme.spaces[3]};
+        padding-bottom: ${theme.spaces[3]};
+        padding-left: ${theme.spaces[4]};
+        padding-right: ${theme.spaces[4]};
+        background: ${theme.colors.neutral0};
+        box-shadow: ${theme.shadows.tableShadow};
+      }
+      ${theme.breakpoints.large} {
+        padding-left: ${theme.spaces[6]};
+        padding-right: ${theme.spaces[6]};
+      }
+    `}
+`;
+// New button aligns with the title, not the toolbar.
+const TitleRow = styled(Flex)`
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: ${({ theme })=>theme.spaces[4]};
+
+  h1 {
+    font-size: 1.8rem;
+  }
+`;
+// Two groups in source order (Filter, Search / Sort, Toggle). Mobile: stacked —
+// Filter+Search on row 1, Sort+Toggle on row 2. Desktop (large+): one row,
+// Filter+Search on the left, Sort+Toggle pushed right.
+const Toolbar = styled(Flex)`
+  margin-top: ${({ theme })=>theme.spaces[5]};
+  flex-direction: column;
+  align-items: stretch;
+  gap: ${({ theme })=>theme.spaces[3]};
+  transition: margin-top 0.2s ease;
+
+  /* Tightening the gap to the title belongs to the compact header, so it is
+     scoped to the breakpoints that compact. On mobile the header never sticks,
+     and this was the last thing still shifting as the page scrolled. */
+  ${({ $compact, theme })=>$compact && css`
+      ${theme.breakpoints.medium} {
+        margin-top: ${theme.spaces[2]};
+      }
+    `}
+
+  ${({ theme })=>theme.breakpoints.large} {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+const ToolbarGroup = styled(Flex)`
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[3]};
+`;
+// Filter + Search. On mobile the group fills the row (search grows into it);
+// on desktop it keeps its intrinsic size and sits at the left edge.
+const FilterSearchGroup = styled(ToolbarGroup)``;
+// Sort + Toggle. Mobile: spread across the row (Sort left, Toggle right).
+// Desktop: sit together at the right edge (space-between on the toolbar leaves
+// the empty space between the search and here).
+const SortToggleGroup = styled(ToolbarGroup)`
+  justify-content: space-between;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    justify-content: flex-end;
+    flex: 0 0 auto;
+  }
+`;
+// Fills the row on mobile; intrinsic width on desktop.
+const SearchSlot = styled(Box)`
+  flex: 1;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    flex: 0 1 auto;
+  }
+`;
+// Toggle labels are hidden below desktop — icons only (buttons keep aria-label).
+const ToggleLabel = styled.span`
+  display: none;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    display: inline;
   }
 `;
 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).
@@ -214,16 +374,71 @@ 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, subscribers: assetPageSubscribers, 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,
+        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
+    ]);
+    // Both move affordances (drag and the bulk bar) resolve each item's parent
+    // from the rows on screen — while searching, results are global and the
+    // folder currently open says nothing about where an item lives.
+    const itemLocations = useMemo(()=>buildItemLocations(assets, folders), [
+        assets,
+        folders
+    ]);
+    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);
@@ -233,9 +448,24 @@ const AssetsPage = ()=>{
     // Refs
     const fileInputRef = useRef(null);
     const uploadDropZoneRef = useRef(null);
+    // Shrink the sticky header once the list scrolls beneath it. A zero-height
+    // sentinel sits at the very top of the scroll content; when it leaves the
+    // viewport we're scrolled → compact.
+    const [isHeaderCompact, setIsHeaderCompact] = useState(false);
+    const onHeaderSentinelVisibility = useCallback((isVisible)=>setIsHeaderCompact(!isVisible), []);
+    const headerSentinelRef = useElementOnScreen(onHeaderSentinelVisibility, HEADER_SENTINEL_OPTIONS);
     // 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. No mime argument: the files are not known until they are picked,
+    // and the server filters the batch on the same allowlist anyway.
+    const isAiMetadataEnabled = useAIMetadataEnabled();
     const uploadFilesToFolder = async (files, folderId)=>{
         if (files.length === 0) return;
         const formData = new FormData();
@@ -253,9 +483,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
         }
     };
@@ -270,188 +502,239 @@ 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
         }
     };
-    const listSort = useListSort();
     // The view is deliberately absent: table and grid render the same list, so
     // toggling views keeps the selection.
     const listQueryKey = getListQueryKey({
         folderId: currentFolderId,
-        search: '',
+        search: searchQuery,
         // Folder position changes the render order too — selection must reset.
         sort: `${listSort.assetsSort};folders=${listSort.foldersPosition}`,
-        filter: null
+        filter: listFilters.serialized || null
     });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(UploadDropZoneProvider, {
                 onDrop: handleDrop,
+                disabled: !canCreate,
                 children: /*#__PURE__*/ jsx(AssetSelectionProvider, {
-                    children: /*#__PURE__*/ jsxs(AssetsDndProvider, {
-                        children: [
-                            /*#__PURE__*/ jsx(ClearSelectionOnChange, {
-                                listQueryKey: listQueryKey
-                            }),
-                            /*#__PURE__*/ jsx(Box, {
-                                ref: uploadDropZoneRef,
-                                children: /*#__PURE__*/ jsxs(Layouts.Root, {
-                                    minHeight: "100vh",
-                                    background: "neutral0",
+                    disabled: !canUpdate,
+                    children: /*#__PURE__*/ jsx(BusyAssetsProvider, {
+                        children: /*#__PURE__*/ jsxs(AssetsDndProvider, {
+                            locations: itemLocations,
+                            children: [
+                                /*#__PURE__*/ jsx(ClearSelectionOnChange, {
+                                    listQueryKey: listQueryKey
+                                }),
+                                /*#__PURE__*/ jsx(Layouts.Root, {
                                     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
-                                            })
-                                        }),
-                                        /*#__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'
-                                                            })
-                                                        })
-                                                    ]
+                                    children: /*#__PURE__*/ jsx(Page.Main, {
+                                        children: /*#__PURE__*/ jsxs(Box, {
+                                            ref: uploadDropZoneRef,
+                                            children: [
+                                                /*#__PURE__*/ jsx(VisuallyHidden, {
+                                                    children: /*#__PURE__*/ jsx("input", {
+                                                        type: "file",
+                                                        ref: fileInputRef,
+                                                        onChange: handleFileChange,
+                                                        multiple: true
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx(Box, {
+                                                    ref: headerSentinelRef,
+                                                    height: 0,
+                                                    "aria-hidden": true
                                                 }),
-                                                subtitle: /*#__PURE__*/ jsxs(Flex, {
-                                                    justifyContent: "space-between",
-                                                    alignItems: "center",
-                                                    gap: 4,
-                                                    width: "100%",
+                                                /*#__PURE__*/ jsxs(StickyHeader, {
+                                                    $compact: isHeaderCompact,
                                                     children: [
-                                                        /*#__PURE__*/ jsx(Flex, {
-                                                            gap: 4,
-                                                            alignItems: "center",
-                                                            children: "TODO: Filters and search"
-                                                        }),
-                                                        /*#__PURE__*/ jsxs(Flex, {
-                                                            gap: 4,
-                                                            alignItems: "stretch",
+                                                        /*#__PURE__*/ jsxs(TitleRow, {
                                                             children: [
-                                                                /*#__PURE__*/ jsx(SortMenu, {
-                                                                    sort: listSort,
-                                                                    showFoldersGroup: !isGridView
+                                                                /*#__PURE__*/ jsx(Typography, {
+                                                                    variant: "alpha",
+                                                                    tag: "h1",
+                                                                    children: pageHeaderTitle
                                                                 }),
-                                                                /*#__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'
+                                                                canCreate && /*#__PURE__*/ jsxs(SimpleMenu, {
+                                                                    popoverPlacement: "bottom-end",
+                                                                    variant: "default",
+                                                                    endIcon: /*#__PURE__*/ jsx(ChevronDown, {}),
+                                                                    label: formatMessage({
+                                                                        id: getTranslationKey('new'),
+                                                                        defaultMessage: 'New'
                                                                     }),
                                                                     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__*/ 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(StyledToggleItem, {
-                                                                            value: "grid",
+                                                                        /*#__PURE__*/ jsx(MenuItem, {
+                                                                            onSelect: ()=>setIsUrlDialogOpen(true),
+                                                                            startIcon: /*#__PURE__*/ jsx(Link, {}),
+                                                                            children: formatMessage({
+                                                                                id: getTranslationKey('import-from-url'),
+                                                                                defaultMessage: 'Import from URL'
+                                                                            })
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxs(Toolbar, {
+                                                            $compact: isHeaderCompact,
+                                                            children: [
+                                                                /*#__PURE__*/ jsxs(FilterSearchGroup, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Box, {
+                                                                            children: /*#__PURE__*/ jsx(FilterMenu, {
+                                                                                listFilters: listFilters
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(SearchSlot, {
+                                                                            children: /*#__PURE__*/ jsx(AssetsSearchInput, {})
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ jsxs(SortToggleGroup, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Box, {
+                                                                            children: /*#__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.grid'),
-                                                                                defaultMessage: 'Grid view'
+                                                                                id: getTranslationKey('view.switch.label'),
+                                                                                defaultMessage: 'View options'
                                                                             }),
                                                                             children: [
-                                                                                /*#__PURE__*/ jsx(GridFour, {}),
-                                                                                formatMessage({
-                                                                                    id: getTranslationKey('view.grid'),
-                                                                                    defaultMessage: 'Grid view'
+                                                                                /*#__PURE__*/ jsxs(StyledToggleItem, {
+                                                                                    value: "table",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: getTranslationKey('view.table'),
+                                                                                        defaultMessage: 'Table view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsx(List, {}),
+                                                                                        /*#__PURE__*/ jsx(ToggleLabel, {
+                                                                                            children: 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, {}),
+                                                                                        /*#__PURE__*/ jsx(ToggleLabel, {
+                                                                                            children: formatMessage({
+                                                                                                id: getTranslationKey('view.grid'),
+                                                                                                defaultMessage: 'Grid view'
+                                                                                            })
+                                                                                        })
+                                                                                    ]
                                                                                 })
                                                                             ]
                                                                         })
                                                                     ]
                                                                 })
                                                             ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx(FilterBadges, {
+                                                            listFilters: listFilters,
+                                                            compact: isHeaderCompact
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs(Layouts.Content, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(BetaNotice, {}),
+                                                        assetPageSubscribers,
+                                                        /*#__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,
+                                                                    locations: itemLocations,
+                                                                    searchQuery: searchQuery,
+                                                                    assetsSort: listSort.assetsSort,
+                                                                    foldersPosition: listSort.foldersPosition,
+                                                                    hasActiveFilters: listFilters.filters.length > 0,
+                                                                    onClearFilters: listFilters.clearFilters,
+                                                                    onAssetItemClick: openDetails,
+                                                                    onAddAssets: handleFileSelect,
+                                                                    canAddAssets: canCreate,
+                                                                    onClearSearch: clearSearch
+                                                                })
+                                                            ]
                                                         })
                                                     ]
                                                 })
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx(Layouts.Content, {
-                                            children: /*#__PURE__*/ jsxs(DropZoneWithOverlay, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(DropFilesMessage, {
-                                                        uploadDropZoneRef: uploadDropZoneRef,
-                                                        folderName: title
-                                                    }),
-                                                    /*#__PURE__*/ jsx(AssetsView, {
-                                                        view: view,
-                                                        folderId: currentFolderId,
-                                                        assetsSort: listSort.assetsSort,
-                                                        foldersSort: listSort.foldersSort,
-                                                        foldersPosition: listSort.foldersPosition,
-                                                        onAssetItemClick: openDetails,
-                                                        onAddAssets: handleFileSelect
-                                                    })
-                                                ]
-                                            })
+                                            ]
                                         })
-                                    ]
+                                    })
                                 })
-                            }),
-                            /*#__PURE__*/ jsx(BulkActionsBar, {})
-                        ]
+                            ]
+                        })
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(CreateFolderDialog, {
+            /*#__PURE__*/ jsx(FolderFormDialog, {
                 open: isCreateFolderDialogOpen,
-                folderName: title,
+                mode: "create",
+                parentFolderName: title,
                 parentFolderId: currentFolderId,
                 onClose: ()=>setIsCreateFolderDialogOpen(false)
             }),