💄Feat show the size of file and prepare for subsequent upload restrictions

src/lib/components/common/FileItem.svelte

@@ -15,6 +15,21 @@
 
 	export let name: string;
 	export let type: string;
+	export let size: number;
+
+	function formatSize(size) {
+		if (size == null) return 'Unknown size';
+		if (typeof size !== 'number' || size < 0) return 'Invalid size';
+		if (size === 0) return '0 B';
+		const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+		let unitIndex = 0;
+
+		while (size >= 1024 && unitIndex < units.length - 1) {
+			size /= 1024;
+			unitIndex++;
+		}
+		return `${size.toFixed(1)} ${units[unitIndex]}`;
+	}
 </script>
 
 <div class="relative group">
@@ -93,11 +108,11 @@
 		</div>
 
 		<div class="flex flex-col justify-center -space-y-0.5 pl-1.5 pr-4 w-full">
-			<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
+			<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
 				{name}
 			</div>
 
-			<div class=" text-gray-500 text-xs">
+			<div class=" flex justify-between text-gray-500 text-xs">
 				{#if type === 'file'}
 					{$i18n.t('File')}
 				{:else if type === 'doc'}
@@ -107,6 +122,9 @@
 				{:else}
 					<span class=" capitalize">{type}</span>
 				{/if}
+				{#if size}
+					<span class="capitalize">{formatSize(size)}</span>
+				{/if}
 			</div>
 		</div>
 	</button>