@strapi/upload 5.36.1 → 5.37.1

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

@@ -9,12 +9,15 @@ var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var api = require('../../services/api.js');
+var folders = require('../../services/folders.js');
 var translations = require('../../utils/translations.js');
 var AssetsGrid = require('./components/AssetsGrid.js');
 var AssetsTable = require('./components/AssetsTable.js');
 var UploadDropZone = require('./components/DropZone/UploadDropZone.js');
 var UploadDropZoneContext = require('./components/DropZone/UploadDropZoneContext.js');
 var constants = require('./constants.js');
+var useFolderInfo = require('./hooks/useFolderInfo.js');
+var useFolderNavigation = require('./hooks/useFolderNavigation.js');
 var useInfiniteAssets = require('./hooks/useInfiniteAssets.js');
 
 function _interopNamespaceDefault(e) {
@@ -39,10 +42,16 @@ var ToggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(ToggleGroup);
 const INTERSECTION_OPTIONS = {
     threshold: 0.1
 };
-const AssetsView = ({ view })=>{
+const AssetsView = ({ view, folderId })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const { assets, isLoading, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets.useInfiniteAssets();
+    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;
     const loadMoreRef = strapiAdmin.useElementOnScreen(React.useCallback((isVisible)=>{
         if (isVisible && hasNextPage && !isFetchingMore) {
             fetchNextPage();
@@ -76,12 +85,26 @@ const AssetsView = ({ view })=>{
             })
         });
     }
+    if (folders$1.length === 0 && assets.length === 0) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            padding: 8,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: 'app.components.EmptyStateLayout.content-document',
+                    defaultMessage: 'No content found'
+                })
+            })
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             isGridView ? /*#__PURE__*/ jsxRuntime.jsx(AssetsGrid.AssetsGrid, {
+                folders: folders$1,
                 assets: assets
             }) : /*#__PURE__*/ jsxRuntime.jsx(AssetsTable.AssetsTable, {
-                assets: assets
+                assets: assets,
+                folders: folders$1
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 ref: loadMoreRef,
@@ -123,7 +146,7 @@ const StyledToggleItem = styledComponents.styled(ToggleGroup__namespace.Item)`
   font-weight: ${({ theme })=>theme.fontWeights.semiBold};
 
   &:hover {
-    background: ${({ theme })=>theme.colors.neutral100};
+    background: ${({ theme })=>theme.colors.primary100};
   }
 
   &[data-state='on'] {
@@ -146,6 +169,14 @@ const HeaderWrapper = styledComponents.styled.div`
 `;
 const AssetsPage = ()=>{
     const { formatMessage } = reactIntl.useIntl();
+    const { currentFolderId } = useFolderNavigation.useFolderNavigation();
+    const { title, itemCount } = useFolderInfo.useFolderInfo(currentFolderId);
+    const itemCountLabel = formatMessage({
+        id: translations.getTranslationKey('header.content.item-count'),
+        defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+    }, {
+        count: itemCount
+    });
     // View state
     const [view, setView] = strapiAdmin.usePersistentState(constants.localStorageKeys.view, constants.viewOptions.GRID);
     const isGridView = view === constants.viewOptions.GRID;
@@ -183,12 +214,12 @@ const AssetsPage = ()=>{
     const handleFileChange = async (e)=>{
         const files = e.target.files;
         if (files && files.length > 0) {
-            await uploadFilesToFolder(Array.from(files), null);
+            await uploadFilesToFolder(Array.from(files), currentFolderId);
         }
         e.target.value = '';
     };
     const handleDrop = async (files)=>{
-        await uploadFilesToFolder(files, null);
+        await uploadFilesToFolder(files, currentFolderId);
     };
     return /*#__PURE__*/ jsxRuntime.jsx(UploadDropZoneContext.UploadDropZoneProvider, {
         onDrop: handleDrop,
@@ -208,7 +239,7 @@ const AssetsPage = ()=>{
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(HeaderWrapper, {
                         children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
-                            title: "TODO: Folder name",
+                            title: `${title} (${itemCountLabel})`,
                             primaryAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.SimpleMenu, {
                                 popoverPlacement: "bottom-end",
                                 variant: "default",
@@ -293,10 +324,12 @@ const AssetsPage = ()=>{
                         children: /*#__PURE__*/ jsxRuntime.jsxs(UploadDropZone.DropZoneWithOverlay, {
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(UploadDropZone.DropFilesMessage, {
-                                    uploadDropZoneRef: uploadDropZoneRef
+                                    uploadDropZoneRef: uploadDropZoneRef,
+                                    folderName: title
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(AssetsView, {
-                                    view: view
+                                    view: view,
+                                    folderId: currentFolderId
                                 })
                             ]
                         })

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsPage.js","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useRef, useCallback, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport { Layouts, useElementOnScreen, usePersistentState } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  Loader,\n  MenuItem,\n  SimpleMenu,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, GridFour as GridIcon, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useUploadFilesStreamMutation } from '../../services/api';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { DropFilesMessage, DropZoneWithOverlay } from './components/DropZone/UploadDropZone';\nimport { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext';\nimport { localStorageKeys, viewOptions } from './constants';\nimport { useInfiniteAssets } from './hooks/useInfiniteAssets';\n\nconst INTERSECTION_OPTIONS: IntersectionObserverInit = { threshold: 0.1 };\n\nimport type { UploadFileInfo } from '../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsView\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsViewProps {\n  view: number;\n}\n\nconst AssetsView = ({ view }: AssetsViewProps) => {\n  const { formatMessage } = useIntl();\n  const { assets, isLoading, isFetchingMore, hasNextPage, fetchNextPage, error } =\n    useInfiniteAssets();\n\n  const isGridView = view === viewOptions.GRID;\n\n  const loadMoreRef = useElementOnScreen<HTMLDivElement>(\n    useCallback(\n      (isVisible) => {\n        if (isVisible && hasNextPage && !isFetchingMore) {\n          fetchNextPage();\n        }\n      },\n      [hasNextPage, isFetchingMore, fetchNextPage]\n    ),\n    INTERSECTION_OPTIONS\n  );\n\n  if (isLoading) {\n    return (\n      <Flex justifyContent=\"center\" padding={8}>\n        <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n      </Flex>\n    );\n  }\n\n  if (error) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"danger600\">\n          {formatMessage({\n            id: getTranslationKey('list.assets.error'),\n            defaultMessage: 'An error occurred while fetching assets.',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      {isGridView ? <AssetsGrid assets={assets} /> : <AssetsTable assets={assets} />}\n      <div ref={loadMoreRef} style={{ height: 1 }} />\n      {isFetchingMore && (\n        <Flex justifyContent=\"center\" padding={4}>\n          <Loader>\n            {formatMessage({\n              id: getTranslationKey('list.assets.loading-more'),\n              defaultMessage: 'Loading more assets...',\n            })}\n          </Loader>\n        </Flex>\n      )}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n  display: flex;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral800};\n  cursor: pointer;\n  font-size: ${({ theme }) => theme.fontSizes[1]};\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n  &:hover {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &[data-state='on'] {\n    background: ${({ theme }) => theme.colors.neutral150};\n  }\n\n  svg {\n    width: 1.6rem;\n    height: 1.6rem;\n  }\n`;\n\nconst HeaderWrapper = styled.div`\n  [data-strapi-header] {\n    background: ${({ theme }) => theme.colors.neutral0};\n\n    h1 {\n      font-size: 1.8rem;\n    }\n  }\n`;\n\nexport const AssetsPage = () => {\n  const { formatMessage } = useIntl();\n\n  // View state\n  const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n  const isGridView = view === viewOptions.GRID;\n\n  // Refs\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n  // Upload handlers\n  const [uploadFilesStream] = useUploadFilesStreamMutation();\n\n  const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n    if (files.length === 0) return;\n\n    const formData = new FormData();\n    const fileInfoArray: UploadFileInfo[] = [];\n\n    files.forEach((file) => {\n      formData.append('files', file);\n      fileInfoArray.push({\n        name: file.name,\n        caption: null,\n        alternativeText: null,\n        folder: folderId,\n      });\n    });\n\n    formData.append('fileInfo', JSON.stringify(fileInfoArray));\n    try {\n      await uploadFilesStream({ formData, totalFiles: files.length }).unwrap();\n    } catch (error) {\n      // Error is already dispatched to store from the API queryFn\n    }\n  };\n\n  const handleFileSelect = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files;\n    if (files && files.length > 0) {\n      await uploadFilesToFolder(Array.from(files), null);\n    }\n    e.target.value = '';\n  };\n\n  const handleDrop = async (files: globalThis.File[]) => {\n    await uploadFilesToFolder(files, null);\n  };\n\n  return (\n    <UploadDropZoneProvider onDrop={handleDrop}>\n      <Box ref={uploadDropZoneRef}>\n        <Layouts.Root minHeight=\"100vh\" background=\"neutral0\">\n          <VisuallyHidden>\n            <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n          </VisuallyHidden>\n\n          <HeaderWrapper>\n            <Layouts.Header\n              title=\"TODO: Folder name\"\n              primaryAction={\n                <SimpleMenu\n                  popoverPlacement=\"bottom-end\"\n                  variant=\"default\"\n                  endIcon={<ChevronDown />}\n                  label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n                >\n                  <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n                    {formatMessage({\n                      id: getTranslationKey('import-files'),\n                      defaultMessage: 'Import files',\n                    })}\n                  </MenuItem>\n                </SimpleMenu>\n              }\n              subtitle={\n                <Flex justifyContent=\"space-between\" alignItems=\"center\" gap={4} width=\"100%\">\n                  <Flex gap={4} alignItems=\"center\">\n                    TODO: Filters and search\n                  </Flex>\n\n                  <Flex gap={4} alignItems=\"center\">\n                    <Box>TODO: Sort</Box>\n                    <StyledToggleGroup\n                      type=\"single\"\n                      value={isGridView ? 'grid' : 'table'}\n                      onValueChange={(value) =>\n                        value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n                      }\n                      aria-label={formatMessage({\n                        id: getTranslationKey('view.switch.label'),\n                        defaultMessage: 'View options',\n                      })}\n                    >\n                      <StyledToggleItem\n                        value=\"table\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      >\n                        <List />\n                        {formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      </StyledToggleItem>\n                      <StyledToggleItem\n                        value=\"grid\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      >\n                        <GridIcon />\n                        {formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      </StyledToggleItem>\n                    </StyledToggleGroup>\n                  </Flex>\n                </Flex>\n              }\n            />\n          </HeaderWrapper>\n\n          <Layouts.Content>\n            <DropZoneWithOverlay>\n              <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} />\n              <AssetsView view={view} />\n            </DropZoneWithOverlay>\n          </Layouts.Content>\n        </Layouts.Root>\n      </Box>\n    </UploadDropZoneProvider>\n  );\n};\n"],"names":["INTERSECTION_OPTIONS","threshold","AssetsView","view","formatMessage","useIntl","assets","isLoading","isFetchingMore","hasNextPage","fetchNextPage","error","useInfiniteAssets","isGridView","viewOptions","GRID","loadMoreRef","useElementOnScreen","useCallback","isVisible","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","_jsxs","_Fragment","AssetsGrid","AssetsTable","div","ref","style","height","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","neutral100","neutral150","HeaderWrapper","AssetsPage","setView","usePersistentState","localStorageKeys","fileInputRef","useRef","uploadDropZoneRef","uploadFilesStream","useUploadFilesStreamMutation","uploadFilesToFolder","files","folderId","length","formData","FormData","fileInfoArray","forEach","file","append","push","name","caption","alternativeText","folder","JSON","stringify","totalFiles","unwrap","handleFileSelect","current","click","handleFileChange","e","target","Array","from","value","handleDrop","UploadDropZoneProvider","onDrop","Layouts","minHeight","background","VisuallyHidden","input","type","onChange","multiple","Header","title","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","subtitle","alignItems","gap","width","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay","DropFilesMessage"],"mappings":"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"}
+{"version":3,"file":"AssetsPage.js","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useRef, useCallback, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport { Layouts, useElementOnScreen, usePersistentState } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  Loader,\n  MenuItem,\n  SimpleMenu,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, GridFour as GridIcon, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useUploadFilesStreamMutation } from '../../services/api';\nimport { useGetFoldersQuery } from '../../services/folders';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { DropFilesMessage, DropZoneWithOverlay } from './components/DropZone/UploadDropZone';\nimport { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext';\nimport { localStorageKeys, viewOptions } from './constants';\nimport { useFolderInfo } from './hooks/useFolderInfo';\nimport { useFolderNavigation } from './hooks/useFolderNavigation';\nimport { useInfiniteAssets } from './hooks/useInfiniteAssets';\n\nimport type { UploadFileInfo } from '../../../../../shared/contracts/files';\n\nconst INTERSECTION_OPTIONS: IntersectionObserverInit = { threshold: 0.1 };\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsView\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsViewProps {\n  view: number;\n  folderId: number | null;\n}\n\nconst AssetsView = ({ view, folderId }: AssetsViewProps) => {\n  const { formatMessage } = useIntl();\n  const {\n    assets,\n    isLoading: isLoadingAssets,\n    isFetchingMore,\n    hasNextPage,\n    fetchNextPage,\n    error,\n  } = useInfiniteAssets({ folder: folderId });\n  const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({\n    parentId: folderId,\n  });\n\n  const isGridView = view === viewOptions.GRID;\n  const isLoading = isLoadingAssets || isLoadingFolders;\n\n  const loadMoreRef = useElementOnScreen<HTMLDivElement>(\n    useCallback(\n      (isVisible) => {\n        if (isVisible && hasNextPage && !isFetchingMore) {\n          fetchNextPage();\n        }\n      },\n      [hasNextPage, isFetchingMore, fetchNextPage]\n    ),\n    INTERSECTION_OPTIONS\n  );\n\n  if (isLoading) {\n    return (\n      <Flex justifyContent=\"center\" padding={8}>\n        <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n      </Flex>\n    );\n  }\n\n  if (error) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"danger600\">\n          {formatMessage({\n            id: getTranslationKey('list.assets.error'),\n            defaultMessage: 'An error occurred while fetching assets.',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n\n  if (folders.length === 0 && assets.length === 0) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"neutral600\">\n          {formatMessage({\n            id: 'app.components.EmptyStateLayout.content-document',\n            defaultMessage: 'No content found',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n  return (\n    <>\n      {isGridView ? (\n        <AssetsGrid folders={folders} assets={assets} />\n      ) : (\n        <AssetsTable assets={assets} folders={folders} />\n      )}\n      <div ref={loadMoreRef} style={{ height: 1 }} />\n      {isFetchingMore && (\n        <Flex justifyContent=\"center\" padding={4}>\n          <Loader>\n            {formatMessage({\n              id: getTranslationKey('list.assets.loading-more'),\n              defaultMessage: 'Loading more assets...',\n            })}\n          </Loader>\n        </Flex>\n      )}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n  display: flex;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral800};\n  cursor: pointer;\n  font-size: ${({ theme }) => theme.fontSizes[1]};\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n  &:hover {\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n\n  &[data-state='on'] {\n    background: ${({ theme }) => theme.colors.neutral150};\n  }\n\n  svg {\n    width: 1.6rem;\n    height: 1.6rem;\n  }\n`;\n\nconst HeaderWrapper = styled.div`\n  [data-strapi-header] {\n    background: ${({ theme }) => theme.colors.neutral0};\n\n    h1 {\n      font-size: 1.8rem;\n    }\n  }\n`;\n\nexport const AssetsPage = () => {\n  const { formatMessage } = useIntl();\n\n  const { currentFolderId } = useFolderNavigation();\n  const { title, itemCount } = useFolderInfo(currentFolderId);\n  const itemCountLabel = formatMessage(\n    {\n      id: getTranslationKey('header.content.item-count'),\n      defaultMessage: '{count, plural, =1 {# item} other {# items}}',\n    },\n    { count: itemCount }\n  );\n\n  // View state\n  const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n  const isGridView = view === viewOptions.GRID;\n\n  // Refs\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n  // Upload handlers\n  const [uploadFilesStream] = useUploadFilesStreamMutation();\n\n  const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n    if (files.length === 0) return;\n\n    const formData = new FormData();\n    const fileInfoArray: UploadFileInfo[] = [];\n\n    files.forEach((file) => {\n      formData.append('files', file);\n      fileInfoArray.push({\n        name: file.name,\n        caption: null,\n        alternativeText: null,\n        folder: folderId,\n      });\n    });\n\n    formData.append('fileInfo', JSON.stringify(fileInfoArray));\n    try {\n      await uploadFilesStream({ formData, totalFiles: files.length }).unwrap();\n    } catch (error) {\n      // Error is already dispatched to store from the API queryFn\n    }\n  };\n\n  const handleFileSelect = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files;\n    if (files && files.length > 0) {\n      await uploadFilesToFolder(Array.from(files), currentFolderId);\n    }\n    e.target.value = '';\n  };\n\n  const handleDrop = async (files: globalThis.File[]) => {\n    await uploadFilesToFolder(files, currentFolderId);\n  };\n\n  return (\n    <UploadDropZoneProvider onDrop={handleDrop}>\n      <Box ref={uploadDropZoneRef}>\n        <Layouts.Root minHeight=\"100vh\" background=\"neutral0\">\n          <VisuallyHidden>\n            <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n          </VisuallyHidden>\n\n          <HeaderWrapper>\n            <Layouts.Header\n              title={`${title} (${itemCountLabel})`}\n              primaryAction={\n                <SimpleMenu\n                  popoverPlacement=\"bottom-end\"\n                  variant=\"default\"\n                  endIcon={<ChevronDown />}\n                  label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n                >\n                  <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n                    {formatMessage({\n                      id: getTranslationKey('import-files'),\n                      defaultMessage: 'Import files',\n                    })}\n                  </MenuItem>\n                </SimpleMenu>\n              }\n              subtitle={\n                <Flex justifyContent=\"space-between\" alignItems=\"center\" gap={4} width=\"100%\">\n                  <Flex gap={4} alignItems=\"center\">\n                    TODO: Filters and search\n                  </Flex>\n\n                  <Flex gap={4} alignItems=\"center\">\n                    <Box>TODO: Sort</Box>\n                    <StyledToggleGroup\n                      type=\"single\"\n                      value={isGridView ? 'grid' : 'table'}\n                      onValueChange={(value) =>\n                        value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n                      }\n                      aria-label={formatMessage({\n                        id: getTranslationKey('view.switch.label'),\n                        defaultMessage: 'View options',\n                      })}\n                    >\n                      <StyledToggleItem\n                        value=\"table\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      >\n                        <List />\n                        {formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      </StyledToggleItem>\n                      <StyledToggleItem\n                        value=\"grid\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      >\n                        <GridIcon />\n                        {formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      </StyledToggleItem>\n                    </StyledToggleGroup>\n                  </Flex>\n                </Flex>\n              }\n            />\n          </HeaderWrapper>\n\n          <Layouts.Content>\n            <DropZoneWithOverlay>\n              <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} folderName={title} />\n              <AssetsView view={view} folderId={currentFolderId} />\n            </DropZoneWithOverlay>\n          </Layouts.Content>\n        </Layouts.Root>\n      </Box>\n    </UploadDropZoneProvider>\n  );\n};\n"],"names":["INTERSECTION_OPTIONS","threshold","AssetsView","view","folderId","formatMessage","useIntl","assets","isLoading","isLoadingAssets","isFetchingMore","hasNextPage","fetchNextPage","error","useInfiniteAssets","folder","data","folders","isLoadingFolders","useGetFoldersQuery","parentId","isGridView","viewOptions","GRID","loadMoreRef","useElementOnScreen","useCallback","isVisible","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","length","_jsxs","_Fragment","AssetsGrid","AssetsTable","div","ref","style","height","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","primary100","neutral150","HeaderWrapper","AssetsPage","currentFolderId","useFolderNavigation","title","itemCount","useFolderInfo","itemCountLabel","count","setView","usePersistentState","localStorageKeys","fileInputRef","useRef","uploadDropZoneRef","uploadFilesStream","useUploadFilesStreamMutation","uploadFilesToFolder","files","formData","FormData","fileInfoArray","forEach","file","append","push","name","caption","alternativeText","JSON","stringify","totalFiles","unwrap","handleFileSelect","current","click","handleFileChange","e","target","Array","from","value","handleDrop","UploadDropZoneProvider","onDrop","Layouts","minHeight","background","VisuallyHidden","input","type","onChange","multiple","Header","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","subtitle","alignItems","gap","width","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay","DropFilesMessage","folderName"],"mappings":"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"}

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

@@ -7,21 +7,30 @@ import { ChevronDown, Files, List, GridFour } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { useUploadFilesStreamMutation } from '../../services/api.mjs';
+import { useGetFoldersQuery } from '../../services/folders.mjs';
 import { getTranslationKey } from '../../utils/translations.mjs';
 import { AssetsGrid } from './components/AssetsGrid.mjs';
 import { AssetsTable } from './components/AssetsTable.mjs';
 import { DropZoneWithOverlay, DropFilesMessage } from './components/DropZone/UploadDropZone.mjs';
 import { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext.mjs';
 import { localStorageKeys, viewOptions } from './constants.mjs';
+import { useFolderInfo } from './hooks/useFolderInfo.mjs';
+import { useFolderNavigation } from './hooks/useFolderNavigation.mjs';
 import { useInfiniteAssets } from './hooks/useInfiniteAssets.mjs';
 
 const INTERSECTION_OPTIONS = {
     threshold: 0.1
 };
-const AssetsView = ({ view })=>{
+const AssetsView = ({ view, folderId })=>{
     const { formatMessage } = useIntl();
-    const { assets, isLoading, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets();
+    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;
     const loadMoreRef = useElementOnScreen(useCallback((isVisible)=>{
         if (isVisible && hasNextPage && !isFetchingMore) {
             fetchNextPage();
@@ -55,12 +64,26 @@ const AssetsView = ({ view })=>{
             })
         });
     }
+    if (folders.length === 0 && assets.length === 0) {
+        return /*#__PURE__*/ jsx(Box, {
+            padding: 8,
+            children: /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: 'app.components.EmptyStateLayout.content-document',
+                    defaultMessage: 'No content found'
+                })
+            })
+        });
+    }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             isGridView ? /*#__PURE__*/ jsx(AssetsGrid, {
+                folders: folders,
                 assets: assets
             }) : /*#__PURE__*/ jsx(AssetsTable, {
-                assets: assets
+                assets: assets,
+                folders: folders
             }),
             /*#__PURE__*/ jsx("div", {
                 ref: loadMoreRef,
@@ -102,7 +125,7 @@ const StyledToggleItem = styled(ToggleGroup.Item)`
   font-weight: ${({ theme })=>theme.fontWeights.semiBold};
 
   &:hover {
-    background: ${({ theme })=>theme.colors.neutral100};
+    background: ${({ theme })=>theme.colors.primary100};
   }
 
   &[data-state='on'] {
@@ -125,6 +148,14 @@ const HeaderWrapper = styled.div`
 `;
 const AssetsPage = ()=>{
     const { formatMessage } = useIntl();
+    const { currentFolderId } = useFolderNavigation();
+    const { title, itemCount } = useFolderInfo(currentFolderId);
+    const itemCountLabel = formatMessage({
+        id: getTranslationKey('header.content.item-count'),
+        defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+    }, {
+        count: itemCount
+    });
     // View state
     const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
     const isGridView = view === viewOptions.GRID;
@@ -162,12 +193,12 @@ const AssetsPage = ()=>{
     const handleFileChange = async (e)=>{
         const files = e.target.files;
         if (files && files.length > 0) {
-            await uploadFilesToFolder(Array.from(files), null);
+            await uploadFilesToFolder(Array.from(files), currentFolderId);
         }
         e.target.value = '';
     };
     const handleDrop = async (files)=>{
-        await uploadFilesToFolder(files, null);
+        await uploadFilesToFolder(files, currentFolderId);
     };
     return /*#__PURE__*/ jsx(UploadDropZoneProvider, {
         onDrop: handleDrop,
@@ -187,7 +218,7 @@ const AssetsPage = ()=>{
                     }),
                     /*#__PURE__*/ jsx(HeaderWrapper, {
                         children: /*#__PURE__*/ jsx(Layouts.Header, {
-                            title: "TODO: Folder name",
+                            title: `${title} (${itemCountLabel})`,
                             primaryAction: /*#__PURE__*/ jsx(SimpleMenu, {
                                 popoverPlacement: "bottom-end",
                                 variant: "default",
@@ -272,10 +303,12 @@ const AssetsPage = ()=>{
                         children: /*#__PURE__*/ jsxs(DropZoneWithOverlay, {
                             children: [
                                 /*#__PURE__*/ jsx(DropFilesMessage, {
-                                    uploadDropZoneRef: uploadDropZoneRef
+                                    uploadDropZoneRef: uploadDropZoneRef,
+                                    folderName: title
                                 }),
                                 /*#__PURE__*/ jsx(AssetsView, {
-                                    view: view
+                                    view: view,
+                                    folderId: currentFolderId
                                 })
                             ]
                         })

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsPage.mjs","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useRef, useCallback, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport { Layouts, useElementOnScreen, usePersistentState } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  Loader,\n  MenuItem,\n  SimpleMenu,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, GridFour as GridIcon, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useUploadFilesStreamMutation } from '../../services/api';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { DropFilesMessage, DropZoneWithOverlay } from './components/DropZone/UploadDropZone';\nimport { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext';\nimport { localStorageKeys, viewOptions } from './constants';\nimport { useInfiniteAssets } from './hooks/useInfiniteAssets';\n\nconst INTERSECTION_OPTIONS: IntersectionObserverInit = { threshold: 0.1 };\n\nimport type { UploadFileInfo } from '../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsView\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsViewProps {\n  view: number;\n}\n\nconst AssetsView = ({ view }: AssetsViewProps) => {\n  const { formatMessage } = useIntl();\n  const { assets, isLoading, isFetchingMore, hasNextPage, fetchNextPage, error } =\n    useInfiniteAssets();\n\n  const isGridView = view === viewOptions.GRID;\n\n  const loadMoreRef = useElementOnScreen<HTMLDivElement>(\n    useCallback(\n      (isVisible) => {\n        if (isVisible && hasNextPage && !isFetchingMore) {\n          fetchNextPage();\n        }\n      },\n      [hasNextPage, isFetchingMore, fetchNextPage]\n    ),\n    INTERSECTION_OPTIONS\n  );\n\n  if (isLoading) {\n    return (\n      <Flex justifyContent=\"center\" padding={8}>\n        <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n      </Flex>\n    );\n  }\n\n  if (error) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"danger600\">\n          {formatMessage({\n            id: getTranslationKey('list.assets.error'),\n            defaultMessage: 'An error occurred while fetching assets.',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      {isGridView ? <AssetsGrid assets={assets} /> : <AssetsTable assets={assets} />}\n      <div ref={loadMoreRef} style={{ height: 1 }} />\n      {isFetchingMore && (\n        <Flex justifyContent=\"center\" padding={4}>\n          <Loader>\n            {formatMessage({\n              id: getTranslationKey('list.assets.loading-more'),\n              defaultMessage: 'Loading more assets...',\n            })}\n          </Loader>\n        </Flex>\n      )}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n  display: flex;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral800};\n  cursor: pointer;\n  font-size: ${({ theme }) => theme.fontSizes[1]};\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n  &:hover {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &[data-state='on'] {\n    background: ${({ theme }) => theme.colors.neutral150};\n  }\n\n  svg {\n    width: 1.6rem;\n    height: 1.6rem;\n  }\n`;\n\nconst HeaderWrapper = styled.div`\n  [data-strapi-header] {\n    background: ${({ theme }) => theme.colors.neutral0};\n\n    h1 {\n      font-size: 1.8rem;\n    }\n  }\n`;\n\nexport const AssetsPage = () => {\n  const { formatMessage } = useIntl();\n\n  // View state\n  const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n  const isGridView = view === viewOptions.GRID;\n\n  // Refs\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n  // Upload handlers\n  const [uploadFilesStream] = useUploadFilesStreamMutation();\n\n  const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n    if (files.length === 0) return;\n\n    const formData = new FormData();\n    const fileInfoArray: UploadFileInfo[] = [];\n\n    files.forEach((file) => {\n      formData.append('files', file);\n      fileInfoArray.push({\n        name: file.name,\n        caption: null,\n        alternativeText: null,\n        folder: folderId,\n      });\n    });\n\n    formData.append('fileInfo', JSON.stringify(fileInfoArray));\n    try {\n      await uploadFilesStream({ formData, totalFiles: files.length }).unwrap();\n    } catch (error) {\n      // Error is already dispatched to store from the API queryFn\n    }\n  };\n\n  const handleFileSelect = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files;\n    if (files && files.length > 0) {\n      await uploadFilesToFolder(Array.from(files), null);\n    }\n    e.target.value = '';\n  };\n\n  const handleDrop = async (files: globalThis.File[]) => {\n    await uploadFilesToFolder(files, null);\n  };\n\n  return (\n    <UploadDropZoneProvider onDrop={handleDrop}>\n      <Box ref={uploadDropZoneRef}>\n        <Layouts.Root minHeight=\"100vh\" background=\"neutral0\">\n          <VisuallyHidden>\n            <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n          </VisuallyHidden>\n\n          <HeaderWrapper>\n            <Layouts.Header\n              title=\"TODO: Folder name\"\n              primaryAction={\n                <SimpleMenu\n                  popoverPlacement=\"bottom-end\"\n                  variant=\"default\"\n                  endIcon={<ChevronDown />}\n                  label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n                >\n                  <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n                    {formatMessage({\n                      id: getTranslationKey('import-files'),\n                      defaultMessage: 'Import files',\n                    })}\n                  </MenuItem>\n                </SimpleMenu>\n              }\n              subtitle={\n                <Flex justifyContent=\"space-between\" alignItems=\"center\" gap={4} width=\"100%\">\n                  <Flex gap={4} alignItems=\"center\">\n                    TODO: Filters and search\n                  </Flex>\n\n                  <Flex gap={4} alignItems=\"center\">\n                    <Box>TODO: Sort</Box>\n                    <StyledToggleGroup\n                      type=\"single\"\n                      value={isGridView ? 'grid' : 'table'}\n                      onValueChange={(value) =>\n                        value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n                      }\n                      aria-label={formatMessage({\n                        id: getTranslationKey('view.switch.label'),\n                        defaultMessage: 'View options',\n                      })}\n                    >\n                      <StyledToggleItem\n                        value=\"table\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      >\n                        <List />\n                        {formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      </StyledToggleItem>\n                      <StyledToggleItem\n                        value=\"grid\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      >\n                        <GridIcon />\n                        {formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      </StyledToggleItem>\n                    </StyledToggleGroup>\n                  </Flex>\n                </Flex>\n              }\n            />\n          </HeaderWrapper>\n\n          <Layouts.Content>\n            <DropZoneWithOverlay>\n              <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} />\n              <AssetsView view={view} />\n            </DropZoneWithOverlay>\n          </Layouts.Content>\n        </Layouts.Root>\n      </Box>\n    </UploadDropZoneProvider>\n  );\n};\n"],"names":["INTERSECTION_OPTIONS","threshold","AssetsView","view","formatMessage","useIntl","assets","isLoading","isFetchingMore","hasNextPage","fetchNextPage","error","useInfiniteAssets","isGridView","viewOptions","GRID","loadMoreRef","useElementOnScreen","useCallback","isVisible","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","_jsxs","_Fragment","AssetsGrid","AssetsTable","div","ref","style","height","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","neutral100","neutral150","HeaderWrapper","AssetsPage","setView","usePersistentState","localStorageKeys","fileInputRef","useRef","uploadDropZoneRef","uploadFilesStream","useUploadFilesStreamMutation","uploadFilesToFolder","files","folderId","length","formData","FormData","fileInfoArray","forEach","file","append","push","name","caption","alternativeText","folder","JSON","stringify","totalFiles","unwrap","handleFileSelect","current","click","handleFileChange","e","target","Array","from","value","handleDrop","UploadDropZoneProvider","onDrop","Layouts","minHeight","background","VisuallyHidden","input","type","onChange","multiple","Header","title","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","subtitle","alignItems","gap","width","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay","DropFilesMessage"],"mappings":"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"}
+{"version":3,"file":"AssetsPage.mjs","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useRef, useCallback, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport { Layouts, useElementOnScreen, usePersistentState } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  Loader,\n  MenuItem,\n  SimpleMenu,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, GridFour as GridIcon, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useUploadFilesStreamMutation } from '../../services/api';\nimport { useGetFoldersQuery } from '../../services/folders';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { DropFilesMessage, DropZoneWithOverlay } from './components/DropZone/UploadDropZone';\nimport { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext';\nimport { localStorageKeys, viewOptions } from './constants';\nimport { useFolderInfo } from './hooks/useFolderInfo';\nimport { useFolderNavigation } from './hooks/useFolderNavigation';\nimport { useInfiniteAssets } from './hooks/useInfiniteAssets';\n\nimport type { UploadFileInfo } from '../../../../../shared/contracts/files';\n\nconst INTERSECTION_OPTIONS: IntersectionObserverInit = { threshold: 0.1 };\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsView\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsViewProps {\n  view: number;\n  folderId: number | null;\n}\n\nconst AssetsView = ({ view, folderId }: AssetsViewProps) => {\n  const { formatMessage } = useIntl();\n  const {\n    assets,\n    isLoading: isLoadingAssets,\n    isFetchingMore,\n    hasNextPage,\n    fetchNextPage,\n    error,\n  } = useInfiniteAssets({ folder: folderId });\n  const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({\n    parentId: folderId,\n  });\n\n  const isGridView = view === viewOptions.GRID;\n  const isLoading = isLoadingAssets || isLoadingFolders;\n\n  const loadMoreRef = useElementOnScreen<HTMLDivElement>(\n    useCallback(\n      (isVisible) => {\n        if (isVisible && hasNextPage && !isFetchingMore) {\n          fetchNextPage();\n        }\n      },\n      [hasNextPage, isFetchingMore, fetchNextPage]\n    ),\n    INTERSECTION_OPTIONS\n  );\n\n  if (isLoading) {\n    return (\n      <Flex justifyContent=\"center\" padding={8}>\n        <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n      </Flex>\n    );\n  }\n\n  if (error) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"danger600\">\n          {formatMessage({\n            id: getTranslationKey('list.assets.error'),\n            defaultMessage: 'An error occurred while fetching assets.',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n\n  if (folders.length === 0 && assets.length === 0) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"neutral600\">\n          {formatMessage({\n            id: 'app.components.EmptyStateLayout.content-document',\n            defaultMessage: 'No content found',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n  return (\n    <>\n      {isGridView ? (\n        <AssetsGrid folders={folders} assets={assets} />\n      ) : (\n        <AssetsTable assets={assets} folders={folders} />\n      )}\n      <div ref={loadMoreRef} style={{ height: 1 }} />\n      {isFetchingMore && (\n        <Flex justifyContent=\"center\" padding={4}>\n          <Loader>\n            {formatMessage({\n              id: getTranslationKey('list.assets.loading-more'),\n              defaultMessage: 'Loading more assets...',\n            })}\n          </Loader>\n        </Flex>\n      )}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n  display: flex;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral800};\n  cursor: pointer;\n  font-size: ${({ theme }) => theme.fontSizes[1]};\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n  &:hover {\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n\n  &[data-state='on'] {\n    background: ${({ theme }) => theme.colors.neutral150};\n  }\n\n  svg {\n    width: 1.6rem;\n    height: 1.6rem;\n  }\n`;\n\nconst HeaderWrapper = styled.div`\n  [data-strapi-header] {\n    background: ${({ theme }) => theme.colors.neutral0};\n\n    h1 {\n      font-size: 1.8rem;\n    }\n  }\n`;\n\nexport const AssetsPage = () => {\n  const { formatMessage } = useIntl();\n\n  const { currentFolderId } = useFolderNavigation();\n  const { title, itemCount } = useFolderInfo(currentFolderId);\n  const itemCountLabel = formatMessage(\n    {\n      id: getTranslationKey('header.content.item-count'),\n      defaultMessage: '{count, plural, =1 {# item} other {# items}}',\n    },\n    { count: itemCount }\n  );\n\n  // View state\n  const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n  const isGridView = view === viewOptions.GRID;\n\n  // Refs\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n  // Upload handlers\n  const [uploadFilesStream] = useUploadFilesStreamMutation();\n\n  const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n    if (files.length === 0) return;\n\n    const formData = new FormData();\n    const fileInfoArray: UploadFileInfo[] = [];\n\n    files.forEach((file) => {\n      formData.append('files', file);\n      fileInfoArray.push({\n        name: file.name,\n        caption: null,\n        alternativeText: null,\n        folder: folderId,\n      });\n    });\n\n    formData.append('fileInfo', JSON.stringify(fileInfoArray));\n    try {\n      await uploadFilesStream({ formData, totalFiles: files.length }).unwrap();\n    } catch (error) {\n      // Error is already dispatched to store from the API queryFn\n    }\n  };\n\n  const handleFileSelect = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files;\n    if (files && files.length > 0) {\n      await uploadFilesToFolder(Array.from(files), currentFolderId);\n    }\n    e.target.value = '';\n  };\n\n  const handleDrop = async (files: globalThis.File[]) => {\n    await uploadFilesToFolder(files, currentFolderId);\n  };\n\n  return (\n    <UploadDropZoneProvider onDrop={handleDrop}>\n      <Box ref={uploadDropZoneRef}>\n        <Layouts.Root minHeight=\"100vh\" background=\"neutral0\">\n          <VisuallyHidden>\n            <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n          </VisuallyHidden>\n\n          <HeaderWrapper>\n            <Layouts.Header\n              title={`${title} (${itemCountLabel})`}\n              primaryAction={\n                <SimpleMenu\n                  popoverPlacement=\"bottom-end\"\n                  variant=\"default\"\n                  endIcon={<ChevronDown />}\n                  label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n                >\n                  <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n                    {formatMessage({\n                      id: getTranslationKey('import-files'),\n                      defaultMessage: 'Import files',\n                    })}\n                  </MenuItem>\n                </SimpleMenu>\n              }\n              subtitle={\n                <Flex justifyContent=\"space-between\" alignItems=\"center\" gap={4} width=\"100%\">\n                  <Flex gap={4} alignItems=\"center\">\n                    TODO: Filters and search\n                  </Flex>\n\n                  <Flex gap={4} alignItems=\"center\">\n                    <Box>TODO: Sort</Box>\n                    <StyledToggleGroup\n                      type=\"single\"\n                      value={isGridView ? 'grid' : 'table'}\n                      onValueChange={(value) =>\n                        value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n                      }\n                      aria-label={formatMessage({\n                        id: getTranslationKey('view.switch.label'),\n                        defaultMessage: 'View options',\n                      })}\n                    >\n                      <StyledToggleItem\n                        value=\"table\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      >\n                        <List />\n                        {formatMessage({\n                          id: getTranslationKey('view.table'),\n                          defaultMessage: 'Table view',\n                        })}\n                      </StyledToggleItem>\n                      <StyledToggleItem\n                        value=\"grid\"\n                        aria-label={formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      >\n                        <GridIcon />\n                        {formatMessage({\n                          id: getTranslationKey('view.grid'),\n                          defaultMessage: 'Grid view',\n                        })}\n                      </StyledToggleItem>\n                    </StyledToggleGroup>\n                  </Flex>\n                </Flex>\n              }\n            />\n          </HeaderWrapper>\n\n          <Layouts.Content>\n            <DropZoneWithOverlay>\n              <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} folderName={title} />\n              <AssetsView view={view} folderId={currentFolderId} />\n            </DropZoneWithOverlay>\n          </Layouts.Content>\n        </Layouts.Root>\n      </Box>\n    </UploadDropZoneProvider>\n  );\n};\n"],"names":["INTERSECTION_OPTIONS","threshold","AssetsView","view","folderId","formatMessage","useIntl","assets","isLoading","isLoadingAssets","isFetchingMore","hasNextPage","fetchNextPage","error","useInfiniteAssets","folder","data","folders","isLoadingFolders","useGetFoldersQuery","parentId","isGridView","viewOptions","GRID","loadMoreRef","useElementOnScreen","useCallback","isVisible","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","length","_jsxs","_Fragment","AssetsGrid","AssetsTable","div","ref","style","height","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","primary100","neutral150","HeaderWrapper","AssetsPage","currentFolderId","useFolderNavigation","title","itemCount","useFolderInfo","itemCountLabel","count","setView","usePersistentState","localStorageKeys","fileInputRef","useRef","uploadDropZoneRef","uploadFilesStream","useUploadFilesStreamMutation","uploadFilesToFolder","files","formData","FormData","fileInfoArray","forEach","file","append","push","name","caption","alternativeText","JSON","stringify","totalFiles","unwrap","handleFileSelect","current","click","handleFileChange","e","target","Array","from","value","handleDrop","UploadDropZoneProvider","onDrop","Layouts","minHeight","background","VisuallyHidden","input","type","onChange","multiple","Header","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","subtitle","alignItems","gap","width","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay","DropFilesMessage","folderName"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,oBAAiD,GAAA;IAAEC,SAAW,EAAA;AAAI,CAAA;AAWxE,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;IACrD,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EACJC,MAAM,EACNC,SAAAA,EAAWC,eAAe,EAC1BC,cAAc,EACdC,WAAW,EACXC,aAAa,EACbC,KAAK,EACN,GAAGC,iBAAkB,CAAA;QAAEC,MAAQX,EAAAA;AAAS,KAAA,CAAA;IACzC,MAAM,EAAEY,MAAMC,OAAU,GAAA,EAAE,EAAET,SAAWU,EAAAA,gBAAgB,EAAE,GAAGC,kBAAmB,CAAA;QAC7EC,QAAUhB,EAAAA;AACZ,KAAA,CAAA;IAEA,MAAMiB,UAAAA,GAAalB,IAASmB,KAAAA,WAAAA,CAAYC,IAAI;AAC5C,IAAA,MAAMf,YAAYC,eAAmBS,IAAAA,gBAAAA;IAErC,MAAMM,WAAAA,GAAcC,kBAClBC,CAAAA,WAAAA,CACE,CAACC,SAAAA,GAAAA;QACC,IAAIA,SAAAA,IAAahB,WAAe,IAAA,CAACD,cAAgB,EAAA;AAC/CE,YAAAA,aAAAA,EAAAA;AACF;KAEF,EAAA;AAACD,QAAAA,WAAAA;AAAaD,QAAAA,cAAAA;AAAgBE,QAAAA;KAAc,CAE9CZ,EAAAA,oBAAAA,CAAAA;AAGF,IAAA,IAAIQ,SAAW,EAAA;AACb,QAAA,qBACEoB,GAACC,CAAAA,IAAAA,EAAAA;YAAKC,cAAe,EAAA,QAAA;YAASC,OAAS,EAAA,CAAA;AACrC,YAAA,QAAA,gBAAAH,GAACI,CAAAA,MAAAA,EAAAA;0BAAQ3B,aAAc,CAAA;oBAAE4B,EAAI,EAAA,aAAA;oBAAeC,cAAgB,EAAA;AAAa,iBAAA;;;AAG/E;AAEA,IAAA,IAAIrB,KAAO,EAAA;AACT,QAAA,qBACEe,GAACO,CAAAA,GAAAA,EAAAA;YAAIJ,OAAS,EAAA,CAAA;AACZ,YAAA,QAAA,gBAAAH,GAACQ,CAAAA,UAAAA,EAAAA;gBAAWC,SAAU,EAAA,WAAA;0BACnBhC,aAAc,CAAA;AACb4B,oBAAAA,EAAAA,EAAIK,iBAAkB,CAAA,mBAAA,CAAA;oBACtBJ,cAAgB,EAAA;AAClB,iBAAA;;;AAIR;AAEA,IAAA,IAAIjB,QAAQsB,MAAM,KAAK,KAAKhC,MAAOgC,CAAAA,MAAM,KAAK,CAAG,EAAA;AAC/C,QAAA,qBACEX,GAACO,CAAAA,GAAAA,EAAAA;YAAIJ,OAAS,EAAA,CAAA;AACZ,YAAA,QAAA,gBAAAH,GAACQ,CAAAA,UAAAA,EAAAA;gBAAWC,SAAU,EAAA,YAAA;0BACnBhC,aAAc,CAAA;oBACb4B,EAAI,EAAA,kDAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA;;;AAIR;IACA,qBACEM,IAAA,CAAAC,QAAA,EAAA;;AACGpB,YAAAA,UAAAA,iBACCO,GAACc,CAAAA,UAAAA,EAAAA;gBAAWzB,OAASA,EAAAA,OAAAA;gBAASV,MAAQA,EAAAA;+BAEtCqB,GAACe,CAAAA,WAAAA,EAAAA;gBAAYpC,MAAQA,EAAAA,MAAAA;gBAAQU,OAASA,EAAAA;;0BAExCW,GAACgB,CAAAA,KAAAA,EAAAA;gBAAIC,GAAKrB,EAAAA,WAAAA;gBAAasB,KAAO,EAAA;oBAAEC,MAAQ,EAAA;AAAE;;AACzCrC,YAAAA,cAAAA,kBACCkB,GAACC,CAAAA,IAAAA,EAAAA;gBAAKC,cAAe,EAAA,QAAA;gBAASC,OAAS,EAAA,CAAA;AACrC,gBAAA,QAAA,gBAAAH,GAACI,CAAAA,MAAAA,EAAAA;8BACE3B,aAAc,CAAA;AACb4B,wBAAAA,EAAAA,EAAIK,iBAAkB,CAAA,0BAAA,CAAA;wBACtBJ,cAAgB,EAAA;AAClB,qBAAA;;;;;AAMZ,CAAA;AAEA;;AAEkG,qGAElG,MAAMc,iBAAoBC,GAAAA,MAAAA,CAAOC,WAAYC,CAAAA,IAAI,CAAC;;oBAE9B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AAC5C,iBAAA,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMG,YAAY,CAAC;;AAErD,CAAC;AAED,MAAMC,gBAAmBP,GAAAA,MAAAA,CAAOC,WAAYO,CAAAA,IAAI,CAAC;;;OAG1C,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMM,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,WAAA,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMM,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAEN,KAAAA,CAAMM,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;cAEtD,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACM,QAAQ,CAAC;SAC5C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;aAErC,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMS,CAAAA,SAAS,CAAC,CAAA,CAAE,CAAC;eAClC,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,QAAQ,CAAC;;;gBAG3C,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACW,UAAU,CAAC;;;;gBAIzC,EAAE,CAAC,EAAEZ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACY,UAAU,CAAC;;;;;;;AAOzD,CAAC;AAED,MAAMC,aAAAA,GAAgBjB,MAAOL,CAAAA,GAAG;;gBAEhB,EAAE,CAAC,EAAEQ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACM,QAAQ,CAAC;;;;;;AAMvD,CAAC;MAEYQ,UAAa,GAAA,IAAA;IACxB,MAAM,EAAE9D,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,MAAM,EAAE8D,eAAe,EAAE,GAAGC,mBAAAA,EAAAA;AAC5B,IAAA,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,aAAcJ,CAAAA,eAAAA,CAAAA;AAC3C,IAAA,MAAMK,iBAAiBpE,aACrB,CAAA;AACE4B,QAAAA,EAAAA,EAAIK,iBAAkB,CAAA,2BAAA,CAAA;QACtBJ,cAAgB,EAAA;KAElB,EAAA;QAAEwC,KAAOH,EAAAA;AAAU,KAAA,CAAA;;IAIrB,MAAM,CAACpE,MAAMwE,OAAQ,CAAA,GAAGC,mBAAmBC,gBAAiB1E,CAAAA,IAAI,EAAEmB,WAAAA,CAAYC,IAAI,CAAA;IAClF,MAAMF,UAAAA,GAAalB,IAASmB,KAAAA,WAAAA,CAAYC,IAAI;;AAG5C,IAAA,MAAMuD,eAAeC,MAAyB,CAAA,IAAA,CAAA;AAC9C,IAAA,MAAMC,oBAAoBD,MAAuB,CAAA,IAAA,CAAA;;IAGjD,MAAM,CAACE,kBAAkB,GAAGC,4BAAAA,EAAAA;IAE5B,MAAMC,mBAAAA,GAAsB,OAAOC,KAA0BhF,EAAAA,QAAAA,GAAAA;QAC3D,IAAIgF,KAAAA,CAAM7C,MAAM,KAAK,CAAG,EAAA;AAExB,QAAA,MAAM8C,WAAW,IAAIC,QAAAA,EAAAA;AACrB,QAAA,MAAMC,gBAAkC,EAAE;QAE1CH,KAAMI,CAAAA,OAAO,CAAC,CAACC,IAAAA,GAAAA;YACbJ,QAASK,CAAAA,MAAM,CAAC,OAASD,EAAAA,IAAAA,CAAAA;AACzBF,YAAAA,aAAAA,CAAcI,IAAI,CAAC;AACjBC,gBAAAA,IAAAA,EAAMH,KAAKG,IAAI;gBACfC,OAAS,EAAA,IAAA;gBACTC,eAAiB,EAAA,IAAA;gBACjB/E,MAAQX,EAAAA;AACV,aAAA,CAAA;AACF,SAAA,CAAA;AAEAiF,QAAAA,QAAAA,CAASK,MAAM,CAAC,UAAYK,EAAAA,IAAAA,CAAKC,SAAS,CAACT,aAAAA,CAAAA,CAAAA;QAC3C,IAAI;AACF,YAAA,MAAMN,iBAAkB,CAAA;AAAEI,gBAAAA,QAAAA;AAAUY,gBAAAA,UAAAA,EAAYb,MAAM7C;AAAO,aAAA,CAAA,CAAG2D,MAAM,EAAA;AACxE,SAAA,CAAE,OAAOrF,KAAO,EAAA;;AAEhB;AACF,KAAA;AAEA,IAAA,MAAMsF,gBAAmB,GAAA,IAAA;AACvBrB,QAAAA,YAAAA,CAAasB,OAAO,EAAEC,KAAAA,EAAAA;AACxB,KAAA;AAEA,IAAA,MAAMC,mBAAmB,OAAOC,CAAAA,GAAAA;AAC9B,QAAA,MAAMnB,KAAQmB,GAAAA,CAAAA,CAAEC,MAAM,CAACpB,KAAK;AAC5B,QAAA,IAAIA,KAASA,IAAAA,KAAAA,CAAM7C,MAAM,GAAG,CAAG,EAAA;AAC7B,YAAA,MAAM4C,mBAAoBsB,CAAAA,KAAAA,CAAMC,IAAI,CAACtB,KAAQhB,CAAAA,EAAAA,eAAAA,CAAAA;AAC/C;QACAmC,CAAEC,CAAAA,MAAM,CAACG,KAAK,GAAG,EAAA;AACnB,KAAA;AAEA,IAAA,MAAMC,aAAa,OAAOxB,KAAAA,GAAAA;AACxB,QAAA,MAAMD,oBAAoBC,KAAOhB,EAAAA,eAAAA,CAAAA;AACnC,KAAA;AAEA,IAAA,qBACExC,GAACiF,CAAAA,sBAAAA,EAAAA;QAAuBC,MAAQF,EAAAA,UAAAA;AAC9B,QAAA,QAAA,gBAAAhF,GAACO,CAAAA,GAAAA,EAAAA;YAAIU,GAAKmC,EAAAA,iBAAAA;oCACRxC,IAAA,CAACuE,QAAQ5D,IAAI,EAAA;gBAAC6D,SAAU,EAAA,OAAA;gBAAQC,UAAW,EAAA,UAAA;;kCACzCrF,GAACsF,CAAAA,cAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAtF,GAACuF,CAAAA,OAAAA,EAAAA;4BAAMC,IAAK,EAAA,MAAA;4BAAOvE,GAAKiC,EAAAA,YAAAA;4BAAcuC,QAAUf,EAAAA,gBAAAA;4BAAkBgB,QAAQ,EAAA;;;kCAG5E1F,GAACsC,CAAAA,aAAAA,EAAAA;gDACCtC,GAAA,CAACmF,QAAQQ,MAAM,EAAA;AACbjD,4BAAAA,KAAAA,EAAO,GAAGA,KAAM,CAAA,EAAE,EAAEG,cAAAA,CAAe,CAAC,CAAC;AACrC+C,4BAAAA,aAAAA,gBACE5F,GAAC6F,CAAAA,UAAAA,EAAAA;gCACCC,gBAAiB,EAAA,YAAA;gCACjBC,OAAQ,EAAA,SAAA;AACRC,gCAAAA,OAAAA,gBAAShG,GAACiG,CAAAA,WAAAA,EAAAA,EAAAA,CAAAA;AACVC,gCAAAA,KAAAA,EAAOzH,aAAc,CAAA;AAAE4B,oCAAAA,EAAAA,EAAIK,iBAAkB,CAAA,KAAA,CAAA;oCAAQJ,cAAgB,EAAA;AAAM,iCAAA,CAAA;AAE3E,gCAAA,QAAA,gBAAAN,GAACmG,CAAAA,QAAAA,EAAAA;oCAASC,QAAU7B,EAAAA,gBAAAA;AAAkB8B,oCAAAA,SAAAA,gBAAWrG,GAACsG,CAAAA,KAAAA,EAAAA,EAAAA,CAAAA;8CAC/C7H,aAAc,CAAA;AACb4B,wCAAAA,EAAAA,EAAIK,iBAAkB,CAAA,cAAA,CAAA;wCACtBJ,cAAgB,EAAA;AAClB,qCAAA;;;AAINiG,4BAAAA,QAAAA,gBACE3F,IAACX,CAAAA,IAAAA,EAAAA;gCAAKC,cAAe,EAAA,eAAA;gCAAgBsG,UAAW,EAAA,QAAA;gCAASC,GAAK,EAAA,CAAA;gCAAGC,KAAM,EAAA,MAAA;;kDACrE1G,GAACC,CAAAA,IAAAA,EAAAA;wCAAKwG,GAAK,EAAA,CAAA;wCAAGD,UAAW,EAAA,QAAA;AAAS,wCAAA,QAAA,EAAA;;kDAIlC5F,IAACX,CAAAA,IAAAA,EAAAA;wCAAKwG,GAAK,EAAA,CAAA;wCAAGD,UAAW,EAAA,QAAA;;0DACvBxG,GAACO,CAAAA,GAAAA,EAAAA;AAAI,gDAAA,QAAA,EAAA;;0DACLK,IAACQ,CAAAA,iBAAAA,EAAAA;gDACCoE,IAAK,EAAA,QAAA;AACLT,gDAAAA,KAAAA,EAAOtF,aAAa,MAAS,GAAA,OAAA;gDAC7BkH,aAAe,EAAA,CAAC5B,KACdA,GAAAA,KAAAA,IAAShC,OAAQgC,CAAAA,KAAAA,KAAU,SAASrF,WAAYC,CAAAA,IAAI,GAAGD,WAAAA,CAAYkH,KAAK,CAAA;AAE1EC,gDAAAA,YAAAA,EAAYpI,aAAc,CAAA;AACxB4B,oDAAAA,EAAAA,EAAIK,iBAAkB,CAAA,mBAAA,CAAA;oDACtBJ,cAAgB,EAAA;AAClB,iDAAA,CAAA;;kEAEAM,IAACgB,CAAAA,gBAAAA,EAAAA;wDACCmD,KAAM,EAAA,OAAA;AACN8B,wDAAAA,YAAAA,EAAYpI,aAAc,CAAA;AACxB4B,4DAAAA,EAAAA,EAAIK,iBAAkB,CAAA,YAAA,CAAA;4DACtBJ,cAAgB,EAAA;AAClB,yDAAA,CAAA;;0EAEAN,GAAC8G,CAAAA,IAAAA,EAAAA,EAAAA,CAAAA;4DACArI,aAAc,CAAA;AACb4B,gEAAAA,EAAAA,EAAIK,iBAAkB,CAAA,YAAA,CAAA;gEACtBJ,cAAgB,EAAA;AAClB,6DAAA;;;kEAEFM,IAACgB,CAAAA,gBAAAA,EAAAA;wDACCmD,KAAM,EAAA,MAAA;AACN8B,wDAAAA,YAAAA,EAAYpI,aAAc,CAAA;AACxB4B,4DAAAA,EAAAA,EAAIK,iBAAkB,CAAA,WAAA,CAAA;4DACtBJ,cAAgB,EAAA;AAClB,yDAAA,CAAA;;0EAEAN,GAAC+G,CAAAA,QAAAA,EAAAA,EAAAA,CAAAA;4DACAtI,aAAc,CAAA;AACb4B,gEAAAA,EAAAA,EAAIK,iBAAkB,CAAA,WAAA,CAAA;gEACtBJ,cAAgB,EAAA;AAClB,6DAAA;;;;;;;;;;;AASd,kCAAAN,GAAA,CAACmF,QAAQ6B,OAAO,EAAA;AACd,wBAAA,QAAA,gBAAApG,IAACqG,CAAAA,mBAAAA,EAAAA;;8CACCjH,GAACkH,CAAAA,gBAAAA,EAAAA;oCAAiB9D,iBAAmBA,EAAAA,iBAAAA;oCAAmB+D,UAAYzE,EAAAA;;8CACpE1C,GAAC1B,CAAAA,UAAAA,EAAAA;oCAAWC,IAAMA,EAAAA,IAAAA;oCAAMC,QAAUgE,EAAAA;;;;;;;;;AAOhD;;;;"}

package/dist/admin/future/pages/Assets/components/AssetsGrid.js

@@ -9,6 +9,7 @@ var enums = require('../../../enums.js');
 var files = require('../../../utils/files.js');
 var getAssetIcon = require('../../../utils/getAssetIcon.js');
 var translations = require('../../../utils/translations.js');
+var useFolderNavigation = require('../hooks/useFolderNavigation.js');
 
 /* -------------------------------------------------------------------------------------------------
  * AssetsGrid
@@ -17,6 +18,70 @@ var translations = require('../../../utils/translations.js');
   border-radius: 8px;
   overflow: hidden;
 `;
+/* -------------------------------------------------------------------------------------------------
+ * FolderCard
+ * -----------------------------------------------------------------------------------------------*/ const FoldersRow = styledComponents.styled(designSystem.Box)`
+  grid-column: 1 / -1;
+`;
+const StyledFolderCard = styledComponents.styled(designSystem.Flex)`
+  width: 100%;
+  padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[3]}`}; // 8px 12px
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[2]}; // 8px
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral0};
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: 2px;
+  }
+`;
+const FolderIconContainer = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+  color: ${({ theme })=>theme.colors.neutral600};
+`;
+const FolderName = styledComponents.styled(designSystem.Typography)`
+  flex: 1;
+  min-width: 0;
+`;
+const FolderCard = ({ folder })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { navigateToFolder } = useFolderNavigation.useFolderNavigation();
+    return /*#__PURE__*/ jsxRuntime.jsxs(StyledFolderCard, {
+        onClick: ()=>navigateToFolder(folder),
+        role: "button",
+        tabIndex: 0,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(FolderIconContainer, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
+                    width: 20,
+                    height: 20
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(FolderName, {
+                textColor: "neutral800",
+                ellipsis: true,
+                children: folder.name
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                label: formatMessage({
+                    id: translations.getTranslationKey('control-card.more-actions'),
+                    defaultMessage: 'More actions'
+                }),
+                variant: "ghost",
+                onClick: (e)=>e.stopPropagation(),
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.More, {})
+            })
+        ]
+    });
+};
 /* -------------------------------------------------------------------------------------------------
  * AssetPreview
  * -----------------------------------------------------------------------------------------------*/ const PreviewContainer = styledComponents.styled(designSystem.Box)`
@@ -130,9 +195,10 @@ const AssetCard = ({ asset })=>{
         ]
     });
 };
-const AssetsGrid = ({ assets })=>{
+const AssetsGrid = ({ assets, folders = [] })=>{
     const { formatMessage } = reactIntl.useIntl();
-    if (assets.length === 0) {
+    const totalItems = folders.length + assets.length;
+    if (totalItems === 0) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
             padding: 8,
             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
@@ -144,19 +210,35 @@ const AssetsGrid = ({ assets })=>{
             })
         });
     }
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
         gap: 4,
-        children: assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
-                col: 3,
-                m: 4,
-                s: 6,
-                xs: 12,
-                direction: "column",
-                alignItems: "stretch",
-                children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard, {
-                    asset: asset
+        children: [
+            folders.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(FoldersRow, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                    gap: 4,
+                    children: folders.map((folder)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                            col: 3,
+                            m: 4,
+                            s: 6,
+                            xs: 12,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(FolderCard, {
+                                folder: folder
+                            })
+                        }, `folder-${folder.id}`))
                 })
-            }, asset.id))
+            }),
+            assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                    col: 3,
+                    m: 4,
+                    s: 6,
+                    xs: 12,
+                    direction: "column",
+                    alignItems: "stretch",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard, {
+                        asset: asset
+                    })
+                }, asset.id))
+        ]
     });
 };