UI(storage): display per-folder storage usage in Paths widget

src/apps/dashboard/features/storage/api/useSystemStorage.ts

@@ -9,21 +9,25 @@
     api: Api,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getSystemApi(api)
-        .getSystemStorage(options);
+    const response = await getSystemApi(api).getSystemStorage(options);
     return response.data;
 };
 
-const getSystemStorageQuery = (
-    api?: Api
-) => queryOptions({
-    queryKey: [ 'SystemStorage' ],
-    queryFn: ({ signal }) => fetchSystemStorage(api!, { signal }),
-    enabled: !!api,
-    refetchOnWindowFocus: false
-});
+const getSystemStorageQuery = (api?: Api) =>
+    queryOptions({
+        queryKey: ['SystemStorage'],
+        queryFn: ({ signal }) => fetchSystemStorage(api!, { signal }),
+        enabled: !!api,
+        refetchOnWindowFocus: false,
+    });
 
 export const useSystemStorage = () => {
     const { api } = useApi();
-    return useQuery(getSystemStorageQuery(api));
+    const query = useQuery(getSystemStorageQuery(api));
+
+    if (query.data) {
+        console.log('📦 System Storage API response:', query.data);
+    }
+
+    return query;
 };

src/apps/dashboard/features/storage/components/StorageListItem.tsx

@@ -28,11 +28,9 @@
 
 const getStorageTypeText = (type?: string | null) => {
     if (!type) return undefined;
-
     if (Object.keys(StorageType).includes(type)) {
         return globalize.translate(`StorageType.${type}`);
     }
-
     return type;
 };
 
@@ -43,10 +41,16 @@
     const readableUsedSpace = (typeof folder?.UsedSpace === 'undefined' || folder.UsedSpace < 0) ?
         '?' : getReadableSize(folder.UsedSpace);
     const totalSpace = calculateTotal(folder);
     const readableTotalSpace = (totalSpace < 0) ? '?' : getReadableSize(totalSpace);
     const usedPercentage = calculateUsedPercentage(folder);
     const statusColor = folder ? getStatusColor(usedPercentage) : 'primary';
 
+    const folderSize = (folder as any)?.FolderSizeBytes ?? (folder as any)?.SizeBytes ?? (folder as any)?.Size;
+    const hasFolderSize = typeof folderSize === 'number' && folderSize >= 0;
+    const driveTotal = (folder as any)?.DriveTotalBytes ?? (folder as any)?.DriveCapacity;
+    const readableFolderSize = hasFolderSize ? getReadableSize(folderSize) : undefined;
+    const readableDriveTotal = typeof driveTotal === 'number' && driveTotal >= 0 ? getReadableSize(driveTotal) : undefined;
+
     return (
         <ListItem>
             <ListItemIcon title={getStorageTypeText(folder?.StorageType)}>
@@ -70,24 +74,33 @@
                                 lineBreak: 'anywhere'
                             }}
                         >
-                            {folder ? folder.Path : (
-                                <Skeleton />
-                            )}
-                        </Typography>
-                        <LinearProgress
-                            variant={folder ? 'determinate' : 'indeterminate'}
-                            color={statusColor}
-                            value={usedPercentage}
-                        />
-                        <Typography
-                            variant='body2'
-                            color='textSecondary'
-                            sx={{
-                                textAlign: 'end'
-                            }}
-                        >
-                            {`${readableUsedSpace} / ${readableTotalSpace}`}
+                            {folder ? folder.Path : <Skeleton />}
                         </Typography>
+
+                        {hasFolderSize ? (
+                            <>
+                                <LinearProgress
+                                    variant='determinate'
+                                    color={statusColor}
+                                    value={usedPercentage}
+                                />
+                                <Typography
+                                    variant='body2'
+                                    color='textSecondary'
+                                    sx={{ textAlign: 'end' }}
+                                >
+                                    {`${readableFolderSize}${readableDriveTotal ? ` / ${readableDriveTotal}` : ''}`}
+                                </Typography>
+                            </>
+                        ) : (
+                            <Typography
+                                variant='body2'
+                                color='textSecondary'
+                                sx={{ textAlign: 'end' }}
+                            >
+                                {readableUsedSpace === '?' ? '' : `${readableUsedSpace}`}
+                            </Typography>
+                        )}
                     </>
                 }
                 slots={{

src/apps/dashboard/features/storage/utils/space.ts

@@ -1,20 +1,31 @@
 import type { FolderStorageDto } from '@jellyfin/sdk/lib/generated-client/models/folder-storage-dto';
 
 export const calculateTotal = (folder?: FolderStorageDto) => {
-    if (typeof folder?.UsedSpace === 'undefined' || folder.UsedSpace < 0) {
-        return -1;
-    }
+    if (!folder) return -1;
+
+    const folderSize = (folder as any)?.FolderSizeBytes ?? (folder as any)?.SizeBytes ?? (folder as any)?.Size;
+    if (typeof folderSize === 'number' && folderSize >= 0) return folderSize;
+
+    if (typeof folder?.UsedSpace === 'undefined' || folder.UsedSpace < 0) return -1;
 
     const freeSpace = Math.max(0, folder.FreeSpace || 0);
     const usedSpace = Math.max(0, folder.UsedSpace);
     return freeSpace + usedSpace;
 };
 
 export const calculateUsedPercentage = (folder?: FolderStorageDto) => {
-    const totalSpace = calculateTotal(folder);
-    if (totalSpace <= 0) return 0;
+    if (!folder) return 0;
 
-    const usedSpace = folder?.UsedSpace || 0;
+    const used = Math.max(0, folder.UsedSpace || 0);
 
-    return Math.min(100, (usedSpace / totalSpace) * 100);
-};
+    const driveTotal = (folder as any)?.DriveTotalBytes ?? (folder as any)?.DriveCapacity;
+    const folderTotal = (folder as any)?.FolderSizeBytes ?? (folder as any)?.SizeBytes ?? (folder as any)?.Size;
+
+    const total = (typeof driveTotal === 'number' && driveTotal > 0) ? driveTotal
+        : (typeof folderTotal === 'number' && folderTotal > 0) ? folderTotal
+        : calculateTotal(folder);
+
+    if (total <= 0) return 0;
+
+    return Math.min(100, (used / total) * 100);
+};