Add DiskSpaceService and DiskSpaceBar component for monitoring disk usage

Implement DiskSpaceService to provide snapshots of disk space usage, including total, free, and used bytes, as well as human-readable formats. Create DiskSpaceBar component to display disk usage information in the UI, including a progress bar that visually represents used space. Update app layout to include the DiskSpaceBar and add tests to ensure functionality of the disk space service and its integration in the layout.
2026-08-12 16:33:57 +02:00
parent 1dcdfc0ed0
commit 352b564f3a
5 changed files with 217 additions and 0 deletions
@@ -0,0 +1,29 @@
+@php
+    /** @var array{used_percent: float, free_percent: float, free_human: string, total_human: string, used_human: string} $disk */
+@endphp
+<div class="border-b border-stone-200 bg-white">
+    <div class="mx-auto max-w-5xl px-4 py-2 sm:px-6">
+        <div class="flex items-center justify-between gap-3 text-xs text-stone-600">
+            <span class="font-medium text-stone-700">Disk space</span>
+            <span class="tabular-nums">
+                {{ $disk['free_human'] }} free
+                <span class="text-stone-400">·</span>
+                {{ $disk['used_percent'] }}% used of {{ $disk['total_human'] }}
+            </span>
+        </div>
+        <div
+            class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-stone-200"
+            role="progressbar"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow="{{ (int) round($disk['used_percent']) }}"
+            aria-label="Disk space used"
+            title="{{ $disk['free_human'] }} free of {{ $disk['total_human'] }}"
+        >
+            <div
+                class="h-full rounded-full transition-[width] duration-300 {{ $barColor }}"
+                style="width: {{ min(100, max(0, $disk['used_percent'])) }}%"
+            ></div>
+        </div>
+    </div>
+</div>
@@ -7,6 +7,8 @@
    @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
 <body class="min-h-screen bg-stone-100 text-stone-900 antialiased">
+    <x-disk-space-bar />
+
    <header class="border-b border-stone-200 bg-white">
        <div class="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
            <a href="{{ route('recordings.index') }}" class="text-lg font-semibold tracking-tight text-teal-800">