fix: simplify storage UI to show only disk usage

Remove confusing drive usage display due to deduplication causing
drive size to be larger than actual disk usage, which resulted in
NaN calculations. Now shows clean disk usage with proper formatting.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

1 files changed, 13 insertions, 25 deletions

diff --git a/frontend/components/drive/StorageUsage.tsx b/frontend/components/drive/StorageUsage.tsx
index 1f963ce..2cb5d5d 100644
--- a/frontend/components/drive/StorageUsage.tsx
+++ b/frontend/components/drive/StorageUsage.tsx
@@ -18,7 +18,7 @@ export function StorageUsage({ data }: StorageUsageProps) {
     return (
       <div className="bg-card rounded-lg border p-4">
         <div className="flex items-center justify-between mb-2">
-          <span className="text-sm font-medium">Storage Usage</span>
+          <span className="text-sm font-medium">Disk Usage</span>
           <span className="text-sm text-muted-foreground">Loading...</span>
         </div>
         <div className="w-full h-2 bg-gray-200 rounded-full" />
@@ -26,47 +26,35 @@ export function StorageUsage({ data }: StorageUsageProps) {
     )
   }
 
-  const { activeDriveUsage, totalDiskCapacity, totalDiskUsed } = data
+  const { totalDiskCapacity, totalDiskUsed } = data
   
-  // Calculate percentages based on total disk capacity
-  const activeDrivePercentage = totalDiskCapacity > 0 ? (activeDriveUsage / totalDiskCapacity) * 100 : 0
-  const totalUsedPercentage = totalDiskCapacity > 0 ? (totalDiskUsed / totalDiskCapacity) * 100 : 0
+  // Calculate percentage of disk used
+  const diskUsedPercentage = totalDiskCapacity > 0 ? (totalDiskUsed / totalDiskCapacity) * 100 : 0
+  const availableSpace = totalDiskCapacity - totalDiskUsed
   
   return (
     <div className="bg-card rounded-lg border p-4">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-sm font-medium">Storage Usage</span>
+        <span className="text-sm font-medium">Disk Usage</span>
         <span className="text-sm text-muted-foreground">
-          {formatFileSize(activeDriveUsage)} active / {formatFileSize(totalDiskUsed)} total of {formatFileSize(totalDiskCapacity)}
+          {formatFileSize(totalDiskUsed)} used of {formatFileSize(totalDiskCapacity)}
         </span>
       </div>
       
-      {/* Custom two-color progress bar */}
+      {/* Simple progress bar showing disk usage */}
       <div className="relative w-full h-2 bg-gray-200 rounded-full overflow-hidden">
-        {/* Total disk usage (gray background layer) */}
-        <div 
-          className="absolute top-0 left-0 h-full bg-gray-400 rounded-full transition-all duration-300"
-          style={{ width: `${Math.min(totalUsedPercentage, 100)}%` }}
-        />
-        {/* Active drive usage (blue foreground layer) */}
         <div 
           className="absolute top-0 left-0 h-full bg-blue-600 rounded-full transition-all duration-300"
-          style={{ width: `${Math.min(activeDrivePercentage, 100)}%` }}
+          style={{ width: `${Math.min(diskUsedPercentage, 100)}%` }}
         />
       </div>
       
       <div className="flex justify-between text-xs text-muted-foreground mt-2">
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-1">
-            <div className="w-2 h-2 bg-blue-600 rounded-full" />
-            <span>Active Drive: {formatFileSize(activeDriveUsage)}</span>
-          </div>
-          <div className="flex items-center gap-1">
-            <div className="w-2 h-2 bg-gray-400 rounded-full" />
-            <span>Other Usage: {formatFileSize(totalDiskUsed - activeDriveUsage)}</span>
-          </div>
+        <div className="flex items-center gap-1">
+          <div className="w-2 h-2 bg-blue-600 rounded-full" />
+          <span>Used: {formatFileSize(totalDiskUsed)}</span>
         </div>
-        <span>{formatFileSize(totalDiskCapacity - totalDiskUsed)} available</span>
+        <span>{formatFileSize(availableSpace)} available</span>
       </div>
     </div>
   )