From 28fb1c47c299b78fc6b2c64d4d1063c58a167cb7 Mon Sep 17 00:00:00 2001
From: Stefan Hacker <duffy@debian-linux-terminal.local>
Date: Sun, 12 Apr 2026 10:21:00 +0200
Subject: [PATCH] feat: Web-GUI Live-Refresh via SSE

FilesView abonniert beim Mount die SSE-Events des Backends. Lock/
Unlock, Create, Update oder Delete durch andere Clients loest einen
debounced Reload der aktuellen Ordner-Ansicht aus. EventSource
reconnected automatisch; wird beim Unmount sauber geschlossen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/FilesView.vue | 33 +++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/FilesView.vue b/frontend/src/views/FilesView.vue
index 87cc0b6..c3deefa 100644
--- a/frontend/src/views/FilesView.vue
+++ b/frontend/src/views/FilesView.vue
@@ -241,7 +241,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { useFilesStore } from '../stores/files'
@@ -718,8 +718,39 @@ watch(() => route.params.folderId, () => {
   filesStore.loadFiles(currentParentId())
 })
 
+// Live updates: subscribe to server-sent events so that lock changes /
+// uploads / deletions by other users or clients refresh the current
+// folder automatically.
+let eventSource = null
+let reloadDebounce = null
+
+function scheduleReload() {
+  if (reloadDebounce) return
+  reloadDebounce = setTimeout(() => {
+    reloadDebounce = null
+    filesStore.loadFiles(currentParentId())
+  }, 300)
+}
+
 onMounted(() => {
   filesStore.loadFiles(currentParentId())
+
+  if (auth.accessToken) {
+    const url = `/api/sync/events?token=${encodeURIComponent(auth.accessToken)}`
+    try {
+      eventSource = new EventSource(url)
+      // Lock/unlock/create/update/delete all warrant a refresh of the list
+      const handler = () => scheduleReload()
+      eventSource.addEventListener('file', handler)
+      eventSource.addEventListener('message', handler)
+      eventSource.onerror = () => { /* browser auto-reconnects */ }
+    } catch { /* SSE not available - fall back to manual refresh */ }
+  }
+})
+
+onUnmounted(() => {
+  if (reloadDebounce) { clearTimeout(reloadDebounce); reloadDebounce = null }
+  if (eventSource) { eventSource.close(); eventSource = null }
 })
 </script>