Add refresh button for updating usage data in Settings (#1760)

2026-01-06 05:00:29 -06:00 · 2025-10-15 23:42:18 -07:00
parent aca1292886
commit 61fbc45e3c
3 changed files with 120 additions and 47 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -891,6 +891,7 @@
      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.3",
@@ -3032,6 +3033,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.22.12.tgz",
      "integrity": "sha512-xcmww1O/JFP2MrlGUMd3Q78S3Qu6W3mYTXYuIqFq33EorgYHV/HqymHfXy9GjiCJ7OI+7lWx6nYFOzU7M4rd1Q==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/core": "^0.22.12"
      }
@@ -3068,6 +3070,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.22.12.tgz",
      "integrity": "sha512-xslz2ZoFZOPLY8EZ4dC29m168BtDx95D6K80TzgUi8gqT7LY6CsajWO0FAxDwHz6h0eomHMfyGX0stspBrTKnQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/utils": "^0.22.12"
      },
@@ -3080,6 +3083,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.22.12.tgz",
      "integrity": "sha512-S0vJADTuh1Q9F+cXAwFPlrKWzDj2F9t/9JAbUvaaDuivpyWuImEKXVz5PUZw2NbpuSHjwssbTpOZ8F13iJX4uw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/utils": "^0.22.12"
      },
@@ -3104,6 +3108,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.22.12.tgz",
      "integrity": "sha512-xImhTE5BpS8xa+mAN6j4sMRWaUgUDLoaGHhJhpC+r7SKKErYDR0WQV4yCE4gP+N0gozD0F3Ka1LUSaMXrn7ZIA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/utils": "^0.22.12",
        "tinycolor2": "^1.6.0"
@@ -3147,6 +3152,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.22.12.tgz",
      "integrity": "sha512-FNuUN0OVzRCozx8XSgP9MyLGMxNHHJMFt+LJuFjn1mu3k0VQxrzqbN06yIl46TVejhyAhcq5gLzqmSCHvlcBVw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/utils": "^0.22.12"
      },
@@ -3270,6 +3276,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.22.12.tgz",
      "integrity": "sha512-3NyTPlPbTnGKDIbaBgQ3HbE6wXbAlFfxHVERmrbqAi8R3r6fQPxpCauA8UVDnieg5eo04D0T8nnnNIX//i/sXg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/utils": "^0.22.12"
      },
@@ -3282,6 +3289,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.22.12.tgz",
      "integrity": "sha512-9YNEt7BPAFfTls2FGfKBVgwwLUuKqy+E8bDGGEsOqHtbuhbshVGxN2WMZaD4gh5IDWvR+emmmPPWGgaYNYt1gA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/utils": "^0.22.12"
      },
@@ -3297,6 +3305,7 @@
      "resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.22.12.tgz",
      "integrity": "sha512-dghs92qM6MhHj0HrV2qAwKPMklQtjNpoYgAB94ysYpsXslhRTiPisueSIELRwZGEr0J0VUxpUY7HgJwlSIgGZw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@jimp/utils": "^0.22.12"
      },
@@ -3604,6 +3613,7 @@
      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz",
      "integrity": "sha512-O2yRJce1GOc6PAy3QxFM4NzFiWzvScDC1/5ihYBL6BUEVdq0XMWN01sppE+H6bBXbaFYipjwFLEWLg5PaSOThA==",
      "license": "Apache-2.0",
+      "peer": true,
      "engines": {
        "node": ">=8.0.0"
      }
@@ -3613,6 +3623,7 @@
      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.49.1.tgz",
      "integrity": "sha512-kaNl/T7WzyMUQHQlVq7q0oV4Kev6+0xFwqzofryC66jgGMacd0QH5TwfpbUwSTby+SdAdprAe5UKMvBw4tKS5Q==",
      "license": "Apache-2.0",
+      "peer": true,
      "dependencies": {
        "@opentelemetry/api": "^1.0.0"
      },
@@ -7312,6 +7323,7 @@
      "integrity": "sha512-6JSSaBZmsKvEkbRUkf7Zj7dru/8ZCrJxAqArcLaVMee5907JdtEbKGsZ7zNiIm/UAkpGUkaSMZEXShnN2D1HZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.46.1",
        "@typescript-eslint/types": "8.46.1",
@@ -7854,7 +7866,8 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/@xtuc/ieee754": {
      "version": "1.2.0",
@@ -7904,6 +7917,7 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -8584,6 +8598,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.9",
        "caniuse-lite": "^1.0.30001746",
@@ -8816,6 +8831,7 @@
      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "assertion-error": "^2.0.1",
        "check-error": "^2.1.1",
@@ -10533,6 +10549,7 @@
      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
      "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -15988,6 +16005,7 @@
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
      "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@@ -16188,6 +16206,7 @@
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "fast-uri": "^3.0.1",
@@ -17777,6 +17796,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -17997,6 +18017,7 @@
      "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.5.0",
@@ -18262,6 +18283,7 @@
      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz",
      "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/eslint-scope": "^3.7.7",
        "@types/estree": "^1.0.8",
@@ -18311,6 +18333,7 @@
      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@discoveryjs/json-ext": "^0.5.0",
        "@webpack-cli/configtest": "^2.1.1",
@@ -18542,6 +18565,7 @@
      "resolved": "https://registry.npmjs.org/winston/-/winston-3.18.3.tgz",
      "integrity": "sha512-NoBZauFNNWENgsnC9YpgyYwOVrl2m58PpQ8lNHjV3kosGs7KJ7Npk9pCUE+WJlawVSe8mykWDKWFSVfs3QO9ww==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@colors/colors": "^1.6.0",
        "@dabh/diagnostics": "^2.0.8",
@@ -18746,6 +18770,7 @@
      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=10.0.0"
      },
@@ -19079,6 +19104,7 @@
      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
@@ -19286,6 +19312,7 @@
      "version": "3.29.5",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "rollup": "dist/bin/rollup"
      },
@@ -20013,6 +20040,7 @@
      "version": "3.29.5",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "rollup": "dist/bin/rollup"
      },
@@ -20175,6 +20203,7 @@
      "version": "3.29.5",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "rollup": "dist/bin/rollup"
      },
--- a/src/gui/src/UI/Settings/UITabUsage.js
+++ b/src/gui/src/UI/Settings/UITabUsage.js
@@ -24,7 +24,7 @@ export default {
    icon: 'speedometer-outline.svg',
    html: () => {
        return `
-            <h1>${i18n('usage')}</h1>
+            <h1>${i18n('usage')}<button class="update-usage-details" style="float:right;"><svg class="update-usage-details-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/> <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/> </svg></button></h1>
            <div class="driver-usage">
                <div class="driver-usage-header">
                    <h3 style="margin:0; font-size: 14px; flex-grow: 1;">${i18n('storage_usage')}</h3>
@@ -64,49 +64,9 @@ export default {
            </div>`;
    },
    init: ($el_window) => {
-        puter.auth.getMonthlyUsage().then(res => {
-            let monthlyAllowance = res.allowanceInfo?.monthUsageAllowance;
-            let remaining = res.allowanceInfo?.remaining;
-            let totalUsage = monthlyAllowance - remaining;
-            let totalUsagePercentage = (totalUsage / monthlyAllowance * 100).toFixed(0);
-
-            $('#total-usage').html(window.number_format(totalUsage / 100_000_000, { decimals: 2, prefix: '$' }));
-            $('#total-capacity').html(window.number_format(monthlyAllowance / 100_000_000, { decimals: 2, prefix: '$' }));
-            $('.usage-progbar-percent').html(totalUsagePercentage + '%');
-            $('.usage-progbar').css('width', totalUsagePercentage + '%');
-            
-        });
-
-        puter.fs.space().then(res => {
-            let usage_percentage = (res.used / res.capacity * 100).toFixed(0);
-            usage_percentage = usage_percentage > 100 ? 100 : usage_percentage;
-
-            let general_used = res.used;
-
-            let host_usage_percentage = 0;
-            if ( res.host_used ) {
-                $('#storage-puter-used').html(window.byte_format(res.used));
-                $('#storage-puter-used-w').show();
-
-                general_used = res.host_used;
-                host_usage_percentage = ((res.host_used - res.used) / res.capacity * 100).toFixed(0);
-            }
-
-            $('#storage-used').html(window.byte_format(general_used));
-            $('#storage-capacity').html(window.byte_format(res.capacity));
-            $('#storage-used-percent').html(
-                usage_percentage + '%' +
-                (host_usage_percentage > 0
-                    ? ' / ' + host_usage_percentage + '%' : '')
-            );
-            $('#storage-bar').css('width', usage_percentage + '%');
-            $('#storage-bar-host').css('width', host_usage_percentage + '%');
-            if (usage_percentage >= 100) {
-                $('#storage-bar').css({
-                    'border-top-right-radius': '3px',
-                    'border-bottom-right-radius': '3px',
-                });
-            }
+        update_usage_details($el_window);
+        $($el_window).find('.update-usage-details').on('click', function() {
+            update_usage_details($el_window);
        });
    },
 };
@@ -121,8 +81,25 @@ $(document).on('click', '.driver-usage-details', function() {
    }else{
        $('.driver-usage-details-text').text('View usage details');
    }
+});

-    puter.auth.getMonthlyUsage().then(res => {
+async function update_usage_details($el_window){
+    // Add spinning animation and record start time
+    const startTime = Date.now();
+    $($el_window).find('.update-usage-details-icon').css('animation', 'spin 1s linear infinite');
+    
+    const monthlyUsagePromise = puter.auth.getMonthlyUsage().then(res => {
+        let monthlyAllowance = res.allowanceInfo?.monthUsageAllowance;
+        let remaining = res.allowanceInfo?.remaining;
+        let totalUsage = monthlyAllowance - remaining;
+        let totalUsagePercentage = (totalUsage / monthlyAllowance * 100).toFixed(0);
+
+        $('#total-usage').html(window.number_format(totalUsage / 100_000_000, { decimals: 2, prefix: '$' }));
+        $('#total-capacity').html(window.number_format(monthlyAllowance / 100_000_000, { decimals: 2, prefix: '$' }));
+        $('.usage-progbar-percent').html(totalUsagePercentage + '%');
+        $('.usage-progbar').css('width', totalUsagePercentage + '%');
+        
+        // build the table for the usage details
        let h = '<table class="driver-usage-details-content-table">';

        h += `<thead>
@@ -151,4 +128,49 @@ $(document).on('click', '.driver-usage-details', function() {

        $('.driver-usage-details-content').html(h);
    });
-});
+
+    const spacePromise = puter.fs.space().then(res => {
+        let usage_percentage = (res.used / res.capacity * 100).toFixed(0);
+        usage_percentage = usage_percentage > 100 ? 100 : usage_percentage;
+
+        let general_used = res.used;
+
+        let host_usage_percentage = 0;
+        if ( res.host_used ) {
+            $('#storage-puter-used').html(window.byte_format(res.used));
+            $('#storage-puter-used-w').show();
+
+            general_used = res.host_used;
+            host_usage_percentage = ((res.host_used - res.used) / res.capacity * 100).toFixed(0);
+        }
+
+        $('#storage-used').html(window.byte_format(general_used));
+        $('#storage-capacity').html(window.byte_format(res.capacity));
+        $('#storage-used-percent').html(
+            usage_percentage + '%' +
+            (host_usage_percentage > 0
+                ? ' / ' + host_usage_percentage + '%' : '')
+        );
+        $('#storage-bar').css('width', usage_percentage + '%');
+        $('#storage-bar-host').css('width', host_usage_percentage + '%');
+        if (usage_percentage >= 100) {
+            $('#storage-bar').css({
+                'border-top-right-radius': '3px',
+                'border-bottom-right-radius': '3px',
+            });
+        }
+    });
+
+    // Wait for both promises to complete
+    await Promise.all([monthlyUsagePromise, spacePromise]);
+    
+    // Ensure spinning continues for at least 1 second
+    const elapsed = Date.now() - startTime;
+    const minDuration = 1000; // 1 second
+    if (elapsed < minDuration) {
+        await new Promise(resolve => setTimeout(resolve, minDuration - elapsed));
+    }
+    
+    // Remove spinning animation
+    $($el_window).find('.update-usage-details-icon').css('animation', '');
+}
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -5389,4 +5389,26 @@ fieldset[name=number-code] {
    width: 30px;
    height: 30px;
    z-index: 5;
+}
+
+.update-usage-details{
+    float: right;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+    width: 30px;
+    border-radius: 5px;
+}
+
+.update-usage-details:hover{
+    background: #f0f0f0;
+}
+
+.update-usage-details svg{
+    width: 20px;
+    height: 20px;
 }