✨ Added not about storage usage

frontend/src/lib/i18n/locales/en.json

@@ -411,7 +411,8 @@
         "delete_image": "Delete image",
         "edit_the_image": "Edit the image",
         "filename_word": "Filename",
-        "alt_text": "Alt(ernate) text / Caption"
+        "alt_text": "Alt(ernate) text / Caption",
+        "storage_usage": "You've used {{used}} Mib out of {{total}} MiB of storage. That's equivalent to {{percent}}% of your storage."
     },
     "video_uploader": {
         "time_elapsed": "Time elapsed",

frontend/src/routes/edit/files/+page.svelte

@@ -12,6 +12,7 @@
 	import { onMount } from 'svelte';
 	import Uploader from './uploader.svelte';
 	import { getLocalization } from '$lib/i18n';
+
 	const { t } = getLocalization();
 
 	export let data: PageData;
@@ -49,6 +50,13 @@
 </script>
 
 <div>
+	<h2 class="text-center text-4xl">
+		{$t('file_dashboard.storage_usage', {
+			used: (data.storage_usage.used / (1024 * 1024)).toFixed(2),
+			total: (data.storage_usage.limit / (1024 * 1024)).toFixed(0),
+			percent: ((data.storage_usage.used / data.storage_usage.limit) * 100).toFixed(0)
+		})}
+	</h2>
 	<Uploader />
 	<div class="grid grid-cols-1 lg:grid-cols-2 p-4 gap-4">
 		{#each images as image}

frontend/src/routes/edit/files/+page.ts

@@ -8,8 +8,12 @@ import type { PrivateImageData } from '$lib/quiz_types';
 
 export const load = (async ({ fetch }) => {
 	const res = await fetch('/api/v1/storage/list');
+	const res2 = await fetch('/api/v1/storage/limit');
 	const json: PrivateImageData[] = await res.json();
+	const storage_usage: { limit: number; limit_reached: boolean; used: number } =
+		await res2.json();
 	return {
-		images: json
+		images: json,
+		storage_usage
 	};
 }) satisfies PageLoad;