diff --git a/public/css/style.css b/public/css/style.css index 9748e43..b7020a4 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -328,6 +328,35 @@ body { transform: rotate(30deg); } +/* ---- Global Refresh Button ---- */ +.btn-refresh-global { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + color: var(--text-secondary); + cursor: pointer; + transition: all 0.25s ease; + margin-left: 4px; + padding: 0; +} + +.btn-refresh-global:hover { + border-color: var(--border-hover); + color: var(--accent-emerald); + background: rgba(16, 185, 129, 0.08); + transform: translateY(-1px); +} + +.btn-refresh-global svg { + width: 16px; + height: 16px; +} + /* ---- Theme Switch ---- */ .theme-switch-wrapper { display: flex; diff --git a/public/js/app.js b/public/js/app.js index 670dfa8..d8a4fd9 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -803,9 +803,30 @@
`; document.getElementById('btnLogout').addEventListener('click', handleLogout); + document.getElementById('btnGlobalRefresh').addEventListener('click', async () => { + const btn = document.getElementById('btnGlobalRefresh'); + const icon = btn.querySelector('svg'); + if (icon) icon.style.animation = 'spin 0.8s ease-in-out'; + + await Promise.all([ + fetchNetworkHistory(true), + fetchMetrics(true) + ]); + + if (icon) { + setTimeout(() => { + icon.style.animation = ''; + }, 800); + } + }); } else { user = null; dom.btnSettings.style.display = 'none';