🚀 Add Storage Amount Loader
This step adds a visual in the UI to show the user how much of their storage quota they have used.
→ In the AI Studio "Code assistant" prompt box, enter the following instructions:
Above user profile display the storage space amount loader e.g. KB/MB/GB. All users have 5 GB of storage. Count up the taken storage using the "size" field from all files in the user's /files collection. When a user uploads or deletes a file, update the loader.
To add the storage usage indicator, I will update App.tsx. The logic for calculating usedStorage and storagePercentage is already present in your code. I will simply render a progress bar and the text formatted with formatBytes in the sidebar above the user profile section.
→ Send the prompt to the AI assistant.
Test the Storage Loader
- Check the UI:
- After the app updates, log in.
- In the bottom-left corner, above your profile icon, you will now see a "Storage" bar (e.g., "3.53 MB used of 5 GB" with a 0% progress bar).
- Test Upload:
- Click "+ New Upload" and upload a new file.
- Result: As the file uploads, the storage bar will update in real-time to show the new total used space and the percentage bar will fill up (e.g., "22.68 MB used... 0%").
- Test Deletion:
- Click on a file to select it.
- Click the "Delete File" button (trash can icon) in the file details pane.
- Confirm the deletion.
- Result: The storage bar will update again, showing the new, lower total used space.
Your app now correctly calculates and displays the user's used storage.