add new storage usage column

src/routes/(console)/project-[region]-[project]/storage/store.ts

@@ -3,7 +3,8 @@ import { writable } from 'svelte/store';
 
 export const columns = writable<Column[]>([
     { id: '$id', title: 'Bucket ID', type: 'string', width: 200 },
-    { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+    { id: 'name', title: 'Name', type: 'string', width: { min: 200 } },
+    { id: 'storageUsage', title: 'Storage usage', type: 'integer', width: 220 },
     { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } },
     { id: '$updatedAt', title: 'Updated', type: 'datetime', width: { min: 120 } }
 ]);

src/routes/(console)/project-[region]-[project]/storage/table.svelte

@@ -8,6 +8,7 @@
     import { Table, Badge, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
     import { goto } from '$app/navigation';
     import Link from '$lib/elements/link.svelte';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
 
     export let data: PageData;
 
@@ -48,8 +49,10 @@
                             </Id>
                         {/key}
                     {:else if column.id === 'name'}
+                        {bucket.name}
+                    {:else if column.id === 'storageUsage'}
                         <Layout.Stack direction="row" gap="s" alignItems="center">
-                            <span>{bucket.name}</span>
+                            <span>{calculateSize(0)}</span>
                             {#if bucket.transformations}
                                 <Popover let:show let:hide placement="bottom-start" portal>
                                     <span