diff --git a/interface/app/$libraryId/Explorer/View/GridView.tsx b/interface/app/$libraryId/Explorer/View/GridView.tsx index 46f2d08e3..77bfb0c3c 100644 --- a/interface/app/$libraryId/Explorer/View/GridView.tsx +++ b/interface/app/$libraryId/Explorer/View/GridView.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; import { memo } from 'react'; +import { useMatch } from 'react-router'; import { byteSize, getItemFilePath, getItemLocation, type ExplorerItem } from '@sd/client'; import { useExplorerContext } from '../Context'; @@ -22,15 +23,24 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp const filePathData = getItemFilePath(data); const location = getItemLocation(data); + const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId'); + const isFolder = 'is_dir' in data.item ? data.item.is_dir || data.type === 'Location' : false; - const showSize = - !filePathData?.is_dir && - !location && - showBytesInGridView && - (!isRenaming || (isRenaming && !selected)); + //do not refactor please - this has been done for readability + + const shouldShowSize = () => { + if (isEphemeralLocation) return false; + if (isFolder) return false; + if (!filePathData?.is_dir && !location) return false; + if (showBytesInGridView) return true; + if (isRenaming) return false; + if (!selected) return false; + + return true; + }; return ( - +
@@ -45,7 +55,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
- {showSize && filePathData?.size_in_bytes_bytes && ( + {shouldShowSize() && filePathData?.size_in_bytes_bytes && ( { const [columnSizing, setColumnSizing] = useState({}); const [columnVisibility, setColumnVisibility] = useState({}); + const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId'); const columns = useMemo[]>( () => [ @@ -79,10 +81,14 @@ export const useTable = () => { id: 'sizeInBytes', header: 'Size', accessorFn: (file) => { + const isFolder = + isEphemeralLocation && 'is_dir' in file.item + ? file.item.is_dir || file.type === 'Location' + : false; const file_path = getItemFilePath(file); if (!file_path || !file_path.size_in_bytes_bytes) return; - return byteSize(file_path.size_in_bytes_bytes); + return isFolder ? '-' : byteSize(file_path.size_in_bytes_bytes); } }, {