[ENG-1135] Locations: Total size query and return to Frontend (#1366)

* Done

* Fix size text to take its space

---------

Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>

interface/app/$libraryId/settings/library/locations/ListItem.tsx

@@ -2,10 +2,15 @@ import { Repeat, Trash } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { arraysEqual, Location, useLibraryMutation, useOnlineLocations } from '@sd/client';
+import {
+	arraysEqual,
+	byteSize,
+	Location,
+	useLibraryMutation,
+	useOnlineLocations
+} from '@sd/client';
 import { Button, Card, dialogManager, Tooltip } from '@sd/ui';
 import { Folder } from '~/components';
-import { useIsDark } from '~/hooks';
 
 import DeleteDialog from './DeleteDialog';
 
@@ -34,6 +39,7 @@ export default ({ location }: Props) => {
 			<Folder className="mr-3 h-10 w-10 self-center" />
 			<div className="grid min-w-[110px] grid-cols-1">
 				<h1 className="truncate pt-0.5 text-sm font-semibold">{location.name}</h1>
+
 				<p className="mt-0.5 select-text truncate text-sm text-ink-dull">
 					{/* // TODO: This is ephemeral so it should not come from the DB. Eg. a external USB can move between nodes */}
 					{/* {location.node && (
@@ -45,9 +51,8 @@ export default ({ location }: Props) => {
 				</p>
 			</div>
 			<div className="flex grow" />
-			<div className="flex h-[45px] space-x-2 p-2">
+			<div className="flex h-[45px] w-full max-w-fit space-x-2 p-2">
 				{/* This is a fake button, do not add disabled prop pls */}
-
 				<Button
 					onClick={(e: { stopPropagation: () => void }) => {
 						e.stopPropagation();
@@ -65,6 +70,18 @@ export default ({ location }: Props) => {
 						{online ? 'Online' : 'Offline'}
 					</span>
 				</Button>
+				<Button
+					onClick={(e: { stopPropagation: () => void }) => {
+						e.stopPropagation();
+					}}
+					variant="gray"
+					className="pointer-events-none flex !px-2 !py-1.5"
+				>
+					<p className="text-ink-dull">Size:</p>
+					<span className="ml-1.5 text-xs text-ink-dull">{`${byteSize(
+						location.size_in_bytes
+					)}`}</span>
+				</Button>
 				<Button
 					variant="gray"
 					className="!p-1.5"