From be16444e93263f836aec056c593b68cd3876311b Mon Sep 17 00:00:00 2001
From: Syco21 <davhv12@gmail.com>
Date: Sat, 16 May 2026 18:11:49 +0200
Subject: [PATCH] Add refresh button to Docker widget with server cache bust

---
 server/routes/updates.ts                      | 10 +++--
 .../widgets/DockerUpdatesWidget.tsx           | 39 ++++++++++++++-----
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/server/routes/updates.ts b/server/routes/updates.ts
index af4b64d..adfadb3 100644
--- a/server/routes/updates.ts
+++ b/server/routes/updates.ts
@@ -123,15 +123,19 @@ async function getLscrLatestDigest(image: string, tag: string): Promise<string |
   return getGenericRegistryDigest('lscr.io', image, tag, process.env.GITHUB_TOKEN)
 }
 
-router.get('/docker', async (_req, res) => {
+router.get('/docker', async (req, res) => {
   const host = process.env.PORTAINER_HOST
   if (!host) {
     res.status(503).json({ error: 'PORTAINER_HOST not configured' })
     return
   }
 
-  const cached = fromCache<{ containers: ContainerInfo[] }>('docker:full', HUB_TTL)
-  if (cached) { res.json(cached); return }
+  if (!req.query.refresh) {
+    const cached = fromCache<{ containers: ContainerInfo[] }>('docker:full', HUB_TTL)
+    if (cached) { res.json(cached); return }
+  } else {
+    delete cache['docker:full']
+  }
 
   try {
     const headers = portainerHeaders()
diff --git a/src/components/widgets/DockerUpdatesWidget.tsx b/src/components/widgets/DockerUpdatesWidget.tsx
index 103ab26..9492006 100644
--- a/src/components/widgets/DockerUpdatesWidget.tsx
+++ b/src/components/widgets/DockerUpdatesWidget.tsx
@@ -15,14 +15,20 @@ export function DockerUpdatesWidget() {
   const [containers, setContainers] = useState<ContainerInfo[]>([])
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
+  const [refreshing, setRefreshing] = useState(false)
 
-  useEffect(() => {
-    fetch('/api/updates/docker')
+  const load = (bust = false) => {
+    if (bust) setRefreshing(true)
+    else setLoading(true)
+    setError(null)
+    fetch(`/api/updates/docker${bust ? '?refresh=1' : ''}`)
       .then(r => r.json())
       .then(d => { if (d.error) setError(d.error); else setContainers(d.containers) })
       .catch(() => setError('Failed to connect'))
-      .finally(() => setLoading(false))
-  }, [])
+      .finally(() => { setLoading(false); setRefreshing(false) })
+  }
+
+  useEffect(() => { load() }, [])
 
   const outdated    = containers.filter(c => c.upToDate === false)
   const upToDate    = containers.filter(c => c.upToDate === true)
@@ -36,11 +42,26 @@ export function DockerUpdatesWidget() {
     <div className="card">
       <div className="widget-header">
         <div className="widget-title"><span className="dot" />Docker</div>
-        {!loading && !error && (
-          <span className="widget-badge" style={outdated.length > 0 ? { background: 'rgba(248,113,113,0.15)', color: 'var(--red)' } : {}}>
-            {outdated.length > 0 ? `${outdated.length} outdated` : 'all current'}
-          </span>
-        )}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          {!loading && !error && (
+            <span className="widget-badge" style={outdated.length > 0 ? { background: 'rgba(248,113,113,0.15)', color: 'var(--red)' } : {}}>
+              {outdated.length > 0 ? `${outdated.length} outdated` : 'all current'}
+            </span>
+          )}
+          <button
+            onClick={() => load(true)}
+            disabled={refreshing || loading}
+            title="Re-check all images"
+            style={{
+              background: 'none', border: '1px solid var(--border)', borderRadius: 6,
+              color: 'var(--muted)', cursor: 'pointer', padding: '2px 6px', fontSize: 11,
+              lineHeight: 1, transition: 'color 0.15s',
+              opacity: refreshing || loading ? 0.4 : 1,
+            }}
+          >
+            {refreshing ? '…' : '↺'}
+          </button>
+        </div>
       </div>
 
       {loading && <div className="widget-loading">Checking images…</div>}