From 656faacc76bdc59c06b46c416866c22050d5472c Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 22 Sep 2025 12:22:32 +0200
Subject: [PATCH] Use Pankow ProgressBar for DiskUsageItem

---
 dashboard/src/components/DiskUsageItem.vue | 29 +++-------------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/dashboard/src/components/DiskUsageItem.vue b/dashboard/src/components/DiskUsageItem.vue
index e8a4beb02..cb552fe6b 100644
--- a/dashboard/src/components/DiskUsageItem.vue
+++ b/dashboard/src/components/DiskUsageItem.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, onUnmounted } from 'vue';
-import { Button } from '@cloudron/pankow';
+import { Button, ProgressBar } from '@cloudron/pankow';
 import { prettyDecimalSize } from '@cloudron/pankow/utils';
 import AppsModel from '../models/AppsModel.js';
 import VolumesModel from '../models/VolumesModel.js';
@@ -137,10 +137,8 @@ onUnmounted(() => {
       <div v-if="speed !== -1">I/O Rate: {{ prettyDecimalSize(speed * 1000 * 1000) }}/sec</div>
     </div>
     <div v-if="isExpanded" @mouseout="highlight = null">
-      <div class="disk-size" v-if="percent < 100">
-        <div class="disk-used disk-used-busy"></div>
-      </div>
-      <div class="disk-size" style="overflow: visible;" v-else>
+      <ProgressBar v-if="percent < 100" mode="indeterminate" :show-label="false"/>
+      <div v-else class="disk-size" style="overflow: visible;">
         <div class="disk-used" v-for="content in contents" :key="content.id" v-tooltip="content.id" @mouseover="highlight = content.id" :style="{ 'background-color': content.color, width: 100*content.usage/filesystem.size + '%' }" :class="{ highlight: highlight === content.id }"></div>
       </div>
 
@@ -156,9 +154,7 @@ onUnmounted(() => {
       </div>
     </div>
     <div v-else>
-      <div class="disk-size">
-        <div class="disk-used" :style="{ width: parseInt(filesystem.capacity*100) + '%' }"></div>
-      </div>
+      <ProgressBar :value="parseInt(filesystem.capacity*100)" :show-label="false"/>
       <div style="text-align: center">
         <Button plain @click="onExpand()">Details</Button>
       </div>
@@ -227,23 +223,6 @@ onUnmounted(() => {
   transform: scaleY(2);
 }
 
-.disk-used-busy {
-  min-width: 0;
-}
-
-.disk-used-busy::after {
-  content: '';
-  width: 90%;
-  height: 100%;
-  background: var(--pankow-color-primary);
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
-  border-radius: calc(var(--pankow-border-radius) / 1.5);
-}
-
 .content-legend-item {
   display: flex;
   align-items: center;