till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 00:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(storage): show real storage usage stats in settings

Browse source 
Fetch actual file count, total size, and favorites from /files/stats
endpoint. Replace hardcoded 2.5GB/10GB placeholder with real data
and animated progress bar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-26 13:20:54 +01:00
parent 8692b0824e
commit 9611544ffc
2 changed files with 38 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
apps/storage/apps/web/src/lib/api/client.ts
View file

@ -148,6 +148,13 @@ export interface Tag {
createdAt: string;
}
export interface StorageStats {
totalFiles: number;
totalSize: number;
favoriteCount: number;
recentFiles: StorageFile[];
}
// Files API
export const filesApi = {
list: (folderId?: string) =>
@ -155,6 +162,8 @@ export const filesApi = {
get: (id: string) => request<StorageFile>(`/files/${id}`),
stats: () => request<StorageStats>('/files/stats'),
upload: async (file: File, folderId?: string): Promise<ApiResponse<StorageFile>> => {
const formData = new FormData();
formData.append('file', file);

32
apps/storage/apps/web/src/routes/settings/+page.svelte
View file

@ -4,6 +4,8 @@
import { userSettings } from '$lib/stores/user-settings.svelte';
import { THEME_DEFINITIONS } from '@manacore/shared-theme';
import { APP_VERSION } from '$lib/version';
import { filesApi } from '$lib/api/client';
import type { StorageStats } from '$lib/api/client';
import {
SettingsPage,
SettingsSection,
@ -12,8 +14,23 @@
GlobalSettingsSection,
} from '@manacore/shared-ui';
let stats = $state<StorageStats | null>(null);
let maxStorage = 10 * 1024 * 1024 * 1024; // 10 GB
let usagePercent = $derived(stats ? Math.min(100, (stats.totalSize / maxStorage) * 100) : 0);
function formatSize(bytes: number): string {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}
onMount(async () => {
await userSettings.load();
const result = await filesApi.stats();
if (result.data) stats = result.data;
});
</script>
@ -92,11 +109,20 @@
<SettingsCard>
<div class="px-5 py-4">
<p class="font-medium text-[hsl(var(--foreground))] mb-2">Speicherplatz</p>
<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">Dein genutzter Speicherplatz</p>
<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">
{stats
? `${stats.totalFiles} Dateien, ${stats.favoriteCount} Favoriten`
: 'Wird geladen...'}
</p>
<div class="w-full h-2 bg-[hsl(var(--muted))] rounded-full overflow-hidden mb-2">
<div class="h-full bg-[hsl(var(--primary))] rounded-full" style="width: 25%"></div>
<div
class="h-full bg-[hsl(var(--primary))] rounded-full transition-all duration-500"
style="width: {usagePercent}%"
></div>
</div>
<p class="text-sm text-[hsl(var(--muted-foreground))]">2.5 GB von 10 GB verwendet</p>
<p class="text-sm text-[hsl(var(--muted-foreground))]">
{stats ? formatSize(stats.totalSize) : '...'} von {formatSize(maxStorage)} verwendet
</p>
</div>
</SettingsCard>
</SettingsSection>