@strapi/upload 5.51.2 → 5.52.1

package/dist/admin/future/pages/Assets/components/{CreateFolderDialog.mjs → FolderFormDialog.mjs}

@@ -1,28 +1,42 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useNotification } from '@strapi/admin/strapi-admin';
 import { Modal, Field, TextInput, Flex, Button } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
-import { useCreateFolderMutation } from '../../../services/folders.mjs';
+import { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking.mjs';
+import { useCreateFolderMutation, useUpdateFolderMutation } from '../../../services/folders.mjs';
 import { getTranslationKey } from '../../../utils/translations.mjs';
 
 const StyledModalContent = styled(Modal.Content)`
   max-width: 51.6rem;
 `;
-const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
+const FolderFormDialog = (props)=>{
+    const { open, parentFolderId, onClose, mode } = props;
+    const initialName = props.mode === 'rename' ? props.initialName : '';
     const { formatMessage } = useIntl();
     const { toggleNotification } = useNotification();
-    const [name, setName] = useState('');
+    const { trackUsage } = useTracking();
+    const [name, setName] = useState(initialName);
     const [fieldError, setFieldError] = useState();
-    const [createFolder, { isLoading }] = useCreateFolderMutation();
+    const inputRef = useRef(null);
+    const [createFolder, { isLoading: isCreating }] = useCreateFolderMutation();
+    const [updateFolder, { isLoading: isUpdating }] = useUpdateFolderMutation();
+    const isLoading = mode === 'rename' ? isUpdating : isCreating;
     useEffect(()=>{
         if (open) {
-            setName('');
+            setName(initialName);
             setFieldError(undefined);
+            // Renaming starts from the current name, so select it: typing replaces
+            // the whole thing, as in Finder / VS Code / GitHub.
+            if (mode === 'rename') {
+                inputRef.current?.select();
+            }
         }
     }, [
-        open
+        open,
+        initialName,
+        mode
     ]);
     const handleSubmit = async (e)=>{
         e.preventDefault();
@@ -35,13 +49,34 @@ const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
             return;
         }
         try {
-            await createFolder({
-                name: trimmedName,
-                parent: parentFolderId
-            }).unwrap();
+            if (props.mode === 'rename') {
+                await updateFolder({
+                    id: props.folderId,
+                    name: trimmedName,
+                    parent: parentFolderId
+                }).unwrap();
+                // Matches the legacy folder-edit payload. This dialog only renames
+                // (parent is fixed), so the location never changes here.
+                trackUsage('didEditMediaLibraryElements', {
+                    location: MEDIA_LIBRARY_LOCATION,
+                    type: 'folder',
+                    changeLocation: false
+                });
+            } else {
+                await createFolder({
+                    name: trimmedName,
+                    parent: parentFolderId
+                }).unwrap();
+                trackUsage('didAddMediaLibraryFolders', {
+                    location: MEDIA_LIBRARY_LOCATION
+                });
+            }
             toggleNotification({
                 type: 'success',
-                message: formatMessage({
+                message: mode === 'rename' ? formatMessage({
+                    id: getTranslationKey('folder.rename.success'),
+                    defaultMessage: 'Folder has been renamed'
+                }) : formatMessage({
                     id: getTranslationKey('folder.create.success'),
                     defaultMessage: 'Folder has been created'
                 })
@@ -54,7 +89,10 @@ const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
             } else {
                 toggleNotification({
                     type: 'danger',
-                    message: formatMessage({
+                    message: mode === 'rename' ? formatMessage({
+                        id: getTranslationKey('folder.rename.form.error.unknown'),
+                        defaultMessage: 'An error occurred while renaming the folder'
+                    }) : formatMessage({
                         id: getTranslationKey('folder.create.form.error.unknown'),
                         defaultMessage: 'An error occurred while creating the folder'
                     })
@@ -69,11 +107,14 @@ const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
             children: [
                 /*#__PURE__*/ jsx(Modal.Header, {
                     children: /*#__PURE__*/ jsx(Modal.Title, {
-                        children: formatMessage({
+                        children: props.mode === 'rename' ? formatMessage({
+                            id: getTranslationKey('folder.rename.title'),
+                            defaultMessage: 'Rename folder'
+                        }) : formatMessage({
                             id: getTranslationKey('folder.create.title-in'),
                             defaultMessage: 'New folder in {folderName}'
                         }, {
-                            folderName
+                            folderName: props.parentFolderName
                         })
                     })
                 }),
@@ -93,6 +134,7 @@ const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
                                         })
                                     }),
                                     /*#__PURE__*/ jsx(TextInput, {
+                                        ref: inputRef,
                                         value: name,
                                         onChange: (e)=>{
                                             setName(e.target.value);
@@ -122,7 +164,11 @@ const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
                                     /*#__PURE__*/ jsx(Button, {
                                         type: "submit",
                                         loading: isLoading,
-                                        children: formatMessage({
+                                        disabled: mode === 'rename' && name.trim() === initialName.trim(),
+                                        children: mode === 'rename' ? formatMessage({
+                                            id: getTranslationKey('folder.rename.submit'),
+                                            defaultMessage: 'Save'
+                                        }) : formatMessage({
                                             id: getTranslationKey('folder.create.submit'),
                                             defaultMessage: 'Create folder'
                                         })
@@ -137,5 +183,5 @@ const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
     });
 };
 
-export { CreateFolderDialog };
-//# sourceMappingURL=CreateFolderDialog.mjs.map
+export { FolderFormDialog };
+//# sourceMappingURL=FolderFormDialog.mjs.map

package/dist/admin/future/pages/Assets/components/FolderFormDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderFormDialog.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/FolderFormDialog.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useNotification } from '@strapi/admin/strapi-admin';\nimport { Button, Field, Flex, Modal, TextInput } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking';\nimport { useCreateFolderMutation, useUpdateFolderMutation } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\ninterface FolderFormDialogBaseProps {\n  open: boolean;\n  onClose: () => void;\n  /** Sent as `parent`. Create: the folder being created in. Rename: the folder's existing parent. */\n  parentFolderId: number | null;\n}\n\ntype FolderFormDialogProps = FolderFormDialogBaseProps &\n  (\n    | { mode: 'create'; parentFolderName: string }\n    | { mode: 'rename'; folderId: number; initialName: string }\n  );\n\nconst StyledModalContent = styled(Modal.Content)`\n  max-width: 51.6rem;\n`;\n\nexport const FolderFormDialog = (props: FolderFormDialogProps) => {\n  const { open, parentFolderId, onClose, mode } = props;\n  const initialName = props.mode === 'rename' ? props.initialName : '';\n\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { trackUsage } = useTracking();\n  const [name, setName] = useState(initialName);\n  const [fieldError, setFieldError] = useState<string | undefined>();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [createFolder, { isLoading: isCreating }] = useCreateFolderMutation();\n  const [updateFolder, { isLoading: isUpdating }] = useUpdateFolderMutation();\n\n  const isLoading = mode === 'rename' ? isUpdating : isCreating;\n\n  useEffect(() => {\n    if (open) {\n      setName(initialName);\n      setFieldError(undefined);\n\n      // Renaming starts from the current name, so select it: typing replaces\n      // the whole thing, as in Finder / VS Code / GitHub.\n      if (mode === 'rename') {\n        inputRef.current?.select();\n      }\n    }\n  }, [open, initialName, mode]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    const trimmedName = name.trim();\n\n    if (!trimmedName) {\n      setFieldError(\n        formatMessage({\n          id: getTranslationKey('folder.create.form.error.name-required'),\n          defaultMessage: 'Name is required',\n        })\n      );\n      return;\n    }\n\n    try {\n      if (props.mode === 'rename') {\n        await updateFolder({\n          id: props.folderId,\n          name: trimmedName,\n          parent: parentFolderId,\n        }).unwrap();\n        // Matches the legacy folder-edit payload. This dialog only renames\n        // (parent is fixed), so the location never changes here.\n        trackUsage('didEditMediaLibraryElements', {\n          location: MEDIA_LIBRARY_LOCATION,\n          type: 'folder',\n          changeLocation: false,\n        });\n      } else {\n        await createFolder({ name: trimmedName, parent: parentFolderId }).unwrap();\n        trackUsage('didAddMediaLibraryFolders', { location: MEDIA_LIBRARY_LOCATION });\n      }\n\n      toggleNotification({\n        type: 'success',\n        message:\n          mode === 'rename'\n            ? formatMessage({\n                id: getTranslationKey('folder.rename.success'),\n                defaultMessage: 'Folder has been renamed',\n              })\n            : formatMessage({\n                id: getTranslationKey('folder.create.success'),\n                defaultMessage: 'Folder has been created',\n              }),\n      });\n\n      onClose();\n    } catch (err) {\n      const apiError = err as { message?: string };\n\n      if (apiError?.message) {\n        setFieldError(apiError.message);\n      } else {\n        toggleNotification({\n          type: 'danger',\n          message:\n            mode === 'rename'\n              ? formatMessage({\n                  id: getTranslationKey('folder.rename.form.error.unknown'),\n                  defaultMessage: 'An error occurred while renaming the folder',\n                })\n              : formatMessage({\n                  id: getTranslationKey('folder.create.form.error.unknown'),\n                  defaultMessage: 'An error occurred while creating the folder',\n                }),\n        });\n      }\n    }\n  };\n\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <StyledModalContent>\n        <Modal.Header>\n          <Modal.Title>\n            {props.mode === 'rename'\n              ? formatMessage({\n                  id: getTranslationKey('folder.rename.title'),\n                  defaultMessage: 'Rename folder',\n                })\n              : formatMessage(\n                  {\n                    id: getTranslationKey('folder.create.title-in'),\n                    defaultMessage: 'New folder in {folderName}',\n                  },\n                  { folderName: props.parentFolderName }\n                )}\n          </Modal.Title>\n        </Modal.Header>\n        <form onSubmit={handleSubmit}>\n          <Modal.Body>\n            <Field.Root error={fieldError} name=\"name\" required>\n              <Field.Label>\n                {formatMessage({\n                  id: getTranslationKey('folder.form.name.label'),\n                  defaultMessage: 'Folder name',\n                })}\n              </Field.Label>\n              <TextInput\n                ref={inputRef}\n                value={name}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                  setName(e.target.value);\n                  setFieldError(undefined);\n                }}\n                autoFocus\n              />\n              <Field.Error />\n            </Field.Root>\n          </Modal.Body>\n          <Modal.Footer>\n            <Flex gap={2} justifyContent=\"space-between\" width=\"100%\">\n              <Button variant=\"tertiary\" onClick={onClose} type=\"button\">\n                {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n              </Button>\n              <Button\n                type=\"submit\"\n                loading={isLoading}\n                disabled={mode === 'rename' && name.trim() === initialName.trim()}\n              >\n                {mode === 'rename'\n                  ? formatMessage({\n                      id: getTranslationKey('folder.rename.submit'),\n                      defaultMessage: 'Save',\n                    })\n                  : formatMessage({\n                      id: getTranslationKey('folder.create.submit'),\n                      defaultMessage: 'Create folder',\n                    })}\n              </Button>\n            </Flex>\n          </Modal.Footer>\n        </form>\n      </StyledModalContent>\n    </Modal.Root>\n  );\n};\n"],"names":["StyledModalContent","styled","Modal","Content","FolderFormDialog","props","open","parentFolderId","onClose","mode","initialName","formatMessage","useIntl","toggleNotification","useNotification","trackUsage","useTracking","name","setName","useState","fieldError","setFieldError","inputRef","useRef","createFolder","isLoading","isCreating","useCreateFolderMutation","updateFolder","isUpdating","useUpdateFolderMutation","useEffect","undefined","current","select","handleSubmit","e","preventDefault","trimmedName","trim","id","getTranslationKey","defaultMessage","folderId","parent","unwrap","location","MEDIA_LIBRARY_LOCATION","type","changeLocation","message","err","apiError","_jsx","Root","onOpenChange","_jsxs","Header","Title","folderName","parentFolderName","form","onSubmit","Body","Field","error","required","Label","TextInput","ref","value","onChange","target","autoFocus","Error","Footer","Flex","gap","justifyContent","width","Button","variant","onClick","loading","disabled"],"mappings":"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"}

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

@@ -2,15 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
+var TruncatedText = require('../../../../components/TruncatedText.js');
 var folders = require('../../../../services/folders.js');
 var translations = require('../../../../utils/translations.js');
 var AssetsDndProvider = require('../Dnd/AssetsDndProvider.js');
 var useFolderTreeDroppable = require('../Dnd/useFolderTreeDroppable.js');
-var filterFolderTree = require('./filterFolderTree.js');
 var useSpringLoadedExpand = require('./useSpringLoadedExpand.js');
 
 /* -------------------------------------------------------------------------------------------------
@@ -151,47 +152,28 @@ const useExpandedFolders = (folderStructure, currentFolderId)=>{
         expandFolder
     };
 };
-/* -------------------------------------------------------------------------------------------------
- * TruncatedFolderName — tooltip when the label is ellipsized
- * -----------------------------------------------------------------------------------------------*/ const TruncatedFolderName = ({ name, isActive })=>{
-    const textRef = React.useRef(null);
-    const [isTruncated, setIsTruncated] = React.useState(false);
-    React.useLayoutEffect(()=>{
-        const el = textRef.current;
-        if (!el) {
-            return;
-        }
-        const checkTruncation = ()=>{
-            setIsTruncated(el.scrollWidth > el.clientWidth);
-        };
-        checkTruncation();
-        const observer = new ResizeObserver(checkTruncation);
-        observer.observe(el);
-        return ()=>observer.disconnect();
-    }, [
-        name
-    ]);
-    const label = /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-        ref: textRef,
-        variant: "omega",
-        fontWeight: isActive ? 'semiBold' : 'regular',
-        ellipsis: true,
-        children: name
-    });
-    if (isTruncated) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-            label: name,
-            children: label
-        });
-    }
-    return label;
-};
 /* -------------------------------------------------------------------------------------------------
  * NavList — unstyled list for tree rows
  * -----------------------------------------------------------------------------------------------*/ const NavList = styledComponents.styled.ul`
   list-style: none;
   margin: 0;
   padding: 0;
+
+  /* Grid rather than block, and load-bearing despite rendering a single column:
+     a minmax(0, 1fr) track contributes a minimum of 0, which is what stops each
+     row propagating the min-content width of its own label.
+
+     Folder names ellipsize, and text-overflow needs white-space: nowrap — so a
+     label's min-content width is the entire name, and no box lays out narrower
+     than its min-content. In block flow that floor travels up to the SubNav
+     ScrollArea, which widens the rail and shows a horizontal scrollbar instead of
+     truncating the name. Nesting makes it worse: the indent is spent before the
+     label is measured, so shorter names trigger it the deeper you go.
+
+     Measured in Chromium — dropping either declaration brings the scrollbar
+     back, and neither min-width nor overflow on the row is a substitute. */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
 `;
 /* -------------------------------------------------------------------------------------------------
  * FolderTreeItem — single tree row (internal)
@@ -263,9 +245,10 @@ const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId,
                             onClick: ()=>onSelect(id),
                             "data-testid": `folder-tree-node-${id}`,
                             "data-folder-id": id,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(TruncatedFolderName, {
-                                name: name,
-                                isActive: isActive
+                            children: /*#__PURE__*/ jsxRuntime.jsx(TruncatedText.TruncatedText, {
+                                variant: "omega",
+                                fontWeight: isActive ? 'semiBold' : 'regular',
+                                children: name
                             })
                         })
                     })
@@ -298,27 +281,6 @@ const FolderTreeItem = ({ node, ...props })=>{
         folderChildren: node.children ?? []
     });
 };
-/* -------------------------------------------------------------------------------------------------
- * FolderTree — public sidebar component
- * -----------------------------------------------------------------------------------------------*/ const SidebarNav = styledComponents.styled(designSystem.Flex)`
-  /* TODO: reconcile 25.6rem (Figma) with admin WIDTH_SIDE_NAVIGATION (23.2rem) */
-  width: 25.6rem;
-  height: 100%;
-  min-height: 100%;
-  background: ${({ theme })=>theme.colors.neutral0};
-  flex-shrink: 0;
-  flex-direction: column;
-  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
-`;
-const SidebarHeader = styledComponents.styled(designSystem.Box)`
-  flex-shrink: 0;
-  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
-`;
-const SidebarBody = styledComponents.styled(designSystem.Flex)`
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-`;
 /**
  * Left-rail navigation for the Media Library. Fetches folder structure internally
  * and renders:
@@ -336,31 +298,12 @@ const SidebarBody = styledComponents.styled(designSystem.Flex)`
  * via `onSelectFolder` so the URL stays the single source of truth (see
  * `useFolderNavigation`).
  */ const FolderTree = ({ currentFolderId, showActiveFolder = true, onSelectFolder })=>{
-    const { formatMessage, locale } = reactIntl.useIntl();
+    const { formatMessage } = reactIntl.useIntl();
     const { data: folderStructure = [], isLoading, isError } = folders.useGetFolderStructureQuery();
     const { isExpanded, toggleExpanded, expandFolder } = useExpandedFolders(folderStructure, currentFolderId);
     const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
         isMovePending: false
     };
-    const [treeFilter, setTreeFilter] = React.useState('');
-    const { contains } = designSystem.useFilter(locale, {
-        sensitivity: 'base'
-    });
-    const trimmedFilter = treeFilter.trim();
-    const { nodes: visibleNodes, expandedIds: filterExpandedIds } = React.useMemo(()=>trimmedFilter ? filterFolderTree.filterFolderTree(folderStructure, (name)=>contains(name, trimmedFilter)) : {
-            nodes: folderStructure,
-            expandedIds: []
-        }, [
-        folderStructure,
-        trimmedFilter,
-        contains
-    ]);
-    // An override layered on top of the user's own expansion rather than written
-    // into it, so clearing the filter restores exactly what they had open.
-    const isExpandedForRender = React.useCallback((id)=>filterExpandedIds.includes(id) || isExpanded(id), [
-        filterExpandedIds,
-        isExpanded
-    ]);
     const isHomeActive = showActiveFolder && currentFolderId == null;
     const homeLabel = formatMessage({
         id: translations.getTranslationKey('sidebar.home'),
@@ -370,171 +313,131 @@ const SidebarBody = styledComponents.styled(designSystem.Flex)`
         id: null,
         name: homeLabel
     });
-    return /*#__PURE__*/ jsxRuntime.jsxs(SidebarNav, {
-        direction: "column",
-        alignItems: "stretch",
-        tag: "nav",
+    return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.SubNav.Main, {
         "aria-label": formatMessage({
             id: translations.getTranslationKey('sidebar.tree.aria-label'),
             defaultMessage: 'Media library folders'
         }),
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(SidebarHeader, {
-                paddingTop: 4,
-                paddingBottom: 4,
-                paddingLeft: 5,
-                paddingRight: 5,
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Header, {
+                label: formatMessage({
+                    id: translations.getTranslationKey('sidebar.title'),
+                    defaultMessage: 'Media library'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Content, {
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                     direction: "column",
                     alignItems: "stretch",
-                    gap: 4,
+                    gap: 1,
+                    padding: 3,
                     children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                            variant: "beta",
-                            tag: "h2",
-                            children: formatMessage({
-                                id: translations.getTranslationKey('sidebar.title'),
-                                defaultMessage: 'Media library'
-                            })
+                        /*#__PURE__*/ jsxRuntime.jsxs(RowButton, {
+                            ref: setHomeDropRef,
+                            type: "button",
+                            $isActive: isHomeActive,
+                            $isValidDropTarget: showHomeValidDropHighlight,
+                            $isInvalidDropCursor: showHomeInvalidDropCursor,
+                            $isMovePending: isMovePending,
+                            "aria-current": isHomeActive ? 'page' : undefined,
+                            onClick: ()=>onSelectFolder(null),
+                            "data-testid": "folder-tree-home",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(icons.House, {
+                                    "aria-hidden": true,
+                                    width: "1.6rem",
+                                    height: "1.6rem"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    variant: "omega",
+                                    fontWeight: isHomeActive ? 'semiBold' : 'regular',
+                                    children: homeLabel
+                                })
+                            ]
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
-                            name: "search-folders",
-                            value: treeFilter,
-                            onChange: (event)=>setTreeFilter(event.target.value),
-                            onClear: ()=>setTreeFilter(''),
-                            clearLabel: formatMessage({
-                                id: 'clearLabel',
-                                defaultMessage: 'Clear'
-                            }),
-                            placeholder: formatMessage({
-                                id: translations.getTranslationKey('sidebar.search.placeholder'),
-                                defaultMessage: 'Search folders'
-                            }),
-                            size: "S",
-                            children: formatMessage({
-                                id: translations.getTranslationKey('sidebar.search.label'),
-                                defaultMessage: 'Search folders'
-                            })
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs(SidebarBody, {
-                direction: "column",
-                alignItems: "stretch",
-                gap: 1,
-                padding: 3,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsxs(RowButton, {
-                        ref: setHomeDropRef,
-                        type: "button",
-                        $isActive: isHomeActive,
-                        $isValidDropTarget: showHomeValidDropHighlight,
-                        $isInvalidDropCursor: showHomeInvalidDropCursor,
-                        $isMovePending: isMovePending,
-                        "aria-current": isHomeActive ? 'page' : undefined,
-                        onClick: ()=>onSelectFolder(null),
-                        "data-testid": "folder-tree-home",
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(icons.House, {
-                                "aria-hidden": true,
-                                width: "1.6rem",
-                                height: "1.6rem"
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                variant: "omega",
-                                fontWeight: isHomeActive ? 'semiBold' : 'regular',
-                                children: homeLabel
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
-                        marginTop: 4,
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                alignItems: "center",
-                                gap: 1,
-                                paddingTop: 1,
-                                paddingBottom: 1,
-                                paddingLeft: 2,
-                                paddingRight: 2,
-                                marginBottom: 2,
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
-                                        "aria-hidden": true,
-                                        width: "1.6rem",
-                                        height: "1.6rem",
-                                        fill: "neutral500"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                        variant: "sigma",
-                                        textColor: "neutral600",
-                                        style: {
-                                            textTransform: 'uppercase'
-                                        },
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                            marginTop: 4,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    alignItems: "center",
+                                    gap: 1,
+                                    paddingTop: 1,
+                                    paddingBottom: 1,
+                                    paddingLeft: 2,
+                                    paddingRight: 2,
+                                    marginBottom: 2,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
+                                            "aria-hidden": true,
+                                            width: "1.6rem",
+                                            height: "1.6rem",
+                                            fill: "neutral500"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            variant: "sigma",
+                                            textColor: "neutral600",
+                                            style: {
+                                                textTransform: 'uppercase'
+                                            },
+                                            children: formatMessage({
+                                                id: translations.getTranslationKey('sidebar.folders'),
+                                                defaultMessage: 'Folders'
+                                            })
+                                        })
+                                    ]
+                                }),
+                                isLoading ? // TODO: revisit loading state before revamp GA
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                    justifyContent: "center",
+                                    padding: 1,
+                                    paddingTop: 2,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
                                         children: formatMessage({
-                                            id: translations.getTranslationKey('sidebar.folders'),
-                                            defaultMessage: 'Folders'
+                                            id: translations.getTranslationKey('sidebar.tree.loading'),
+                                            defaultMessage: 'Loading folders...'
                                         })
                                     })
-                                ]
-                            }),
-                            isLoading ? // TODO: revisit loading state before revamp GA
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                justifyContent: "center",
-                                padding: 1,
-                                paddingTop: 2,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
-                                    children: formatMessage({
-                                        id: translations.getTranslationKey('sidebar.tree.loading'),
-                                        defaultMessage: 'Loading folders...'
-                                    })
-                                })
-                            }) : isError ? // TODO: revisit error state before revamp GA
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                padding: 1,
-                                paddingTop: 2,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                    variant: "pi",
-                                    textColor: "danger600",
-                                    children: formatMessage({
-                                        id: translations.getTranslationKey('sidebar.tree.error'),
-                                        defaultMessage: 'Could not load folders.'
+                                }) : isError ? // TODO: revisit error state before revamp GA
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    padding: 1,
+                                    paddingTop: 2,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "pi",
+                                        textColor: "danger600",
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('sidebar.tree.error'),
+                                            defaultMessage: 'Could not load folders.'
+                                        })
                                     })
-                                })
-                            }) : visibleNodes.length === 0 ? // TODO: revisit empty state before revamp GA
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                padding: 1,
-                                paddingTop: 2,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                    variant: "pi",
-                                    textColor: "neutral500",
-                                    children: trimmedFilter ? formatMessage({
-                                        id: translations.getTranslationKey('sidebar.tree.no-results'),
-                                        defaultMessage: 'No folders match "{query}"'
-                                    }, {
-                                        query: trimmedFilter
-                                    }) : formatMessage({
-                                        id: translations.getTranslationKey('sidebar.tree.empty'),
-                                        defaultMessage: 'No folders yet'
+                                }) : folderStructure.length === 0 ? // TODO: revisit empty state before revamp GA
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    padding: 1,
+                                    paddingTop: 2,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "pi",
+                                        textColor: "neutral500",
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('sidebar.tree.empty'),
+                                            defaultMessage: 'No folders yet'
+                                        })
                                     })
+                                }) : /*#__PURE__*/ jsxRuntime.jsx(NavList, {
+                                    children: folderStructure.map((node)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
+                                            node: node,
+                                            level: 0,
+                                            currentFolderId: currentFolderId,
+                                            showActiveFolder: showActiveFolder,
+                                            isExpanded: isExpanded,
+                                            onToggle: toggleExpanded,
+                                            onExpand: expandFolder,
+                                            onSelect: onSelectFolder,
+                                            isMovePending: isMovePending
+                                        }, node.id ?? node.name))
                                 })
-                            }) : /*#__PURE__*/ jsxRuntime.jsx(NavList, {
-                                children: visibleNodes.map((node)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
-                                        node: node,
-                                        level: 0,
-                                        currentFolderId: currentFolderId,
-                                        showActiveFolder: showActiveFolder,
-                                        isExpanded: isExpandedForRender,
-                                        onToggle: toggleExpanded,
-                                        onExpand: expandFolder,
-                                        onSelect: onSelectFolder,
-                                        isMovePending: isMovePending
-                                    }, node.id ?? node.name))
-                            })
-                        ]
-                    })
-                ]
+                            ]
+                        })
+                    ]
+                })
             })
         ]
     });