fixed delete

src/routes/settings/profile/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { page } from '$app/stores';
+import { onMount } from 'svelte';
 let email = '';
 let currentPassword = '';
 let newPassword = '';
@@ -8,6 +9,30 @@ let confirmPassword = '';
 // Use $page as a reactive value
 $: fullName = $page.data?.user?.username || '';
 
+let storageUsed = 0;
+const MAX_STORAGE = 1024 * 1024 * 1024; // 1GB in bytes
+let loadingStorage = true;
+
+onMount(async () => {
+  loadingStorage = true;
+  try {
+    const res = await fetch('/api/user-storage');
+    if (res.ok) {
+      const data = await res.json();
+      storageUsed = data.usage;
+    }
+  } finally {
+    loadingStorage = false;
+  }
+});
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
 function handleEmailChange(e: Event) {
   e.preventDefault();
   alert('Email change submitted (dummy)');
@@ -25,6 +50,24 @@ function handlePasswordChange(e: Event) {
 
 <h1 class="text-2xl font-bold mb-4">Profile</h1>
 
+<!-- Storage Usage Bar -->
+<div class="mb-8 p-4 bg-muted rounded">
+  <div class="font-medium mb-2">Storage Usage</div>
+  {#if loadingStorage}
+    <div>Loading...</div>
+  {:else}
+    <div class="flex items-center gap-2 mb-1">
+      <div class="flex-1 h-4 bg-gray-200 rounded overflow-hidden">
+        <div class="h-4 bg-primary" style="width: {Math.min(100, (storageUsed / MAX_STORAGE) * 100)}%"></div>
+      </div>
+      <div class="text-sm text-muted-foreground whitespace-nowrap">{formatBytes(storageUsed)} / 1 GB</div>
+    </div>
+    {#if storageUsed > MAX_STORAGE}
+      <div class="text-red-600 text-xs mt-1">You have exceeded your storage limit!</div>
+    {/if}
+  {/if}
+</div>
+
 <div class="mb-8 p-4 bg-muted rounded">
   <div class="font-medium">Full Name</div>
   <div class="text-lg">{fullName}</div>