[ENG-1195] Hide folder size in Ephemeral locations (#1446)

* Update GridView.tsx

* Update grid and list view for hiding sizes in ephemeral locations

* Clearer function instead of variable

* Update GridView.tsx

* Update GridView.tsx

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 (
-		<ViewItem data={data} className="h-full w-full">
+		<ViewItem data={data} className="w-full h-full">
 			<div
 				className={clsx('mb-1 aspect-square rounded-lg', selected && 'bg-app-selectedItem')}
 			>
@@ -45,7 +55,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
 
 			<div className="flex flex-col justify-center">
 				<RenamableItemText item={data} style={{ maxHeight: gridItemSize / 3 }} />
-				{showSize && filePathData?.size_in_bytes_bytes && (
+				{shouldShowSize() && filePathData?.size_in_bytes_bytes && (
 					<span
 						className={clsx(
 							'cursor-default truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull '

interface/app/$libraryId/Explorer/View/ListView/util/table.tsx

@@ -8,6 +8,7 @@ import {
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { useEffect, useMemo, useState } from 'react';
+import { useMatch } from 'react-router';
 import { stringify } from 'uuid';
 import {
 	byteSize,
@@ -33,6 +34,7 @@ export const useTable = () => {
 
 	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
 	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+	const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId');
 
 	const columns = useMemo<ColumnDef<ExplorerItem>[]>(
 		() => [
@@ -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);
 				}
 			},
 			{