From 343fe4739b335abc8a96edc187308cea942673b3 Mon Sep 17 00:00:00 2001
From: szbk <wisecolt@gmail.com>
Date: Fri, 24 Oct 2025 21:11:38 +0300
Subject: [PATCH] Thumbnail fade effect and sync thumbnail loading.

---
 client/src/routes/Files.svelte | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/client/src/routes/Files.svelte b/client/src/routes/Files.svelte
index 6a64d32..ac310ba 100644
--- a/client/src/routes/Files.svelte
+++ b/client/src/routes/Files.svelte
@@ -225,6 +225,24 @@
 
   onMount(() => {
     loadFiles();
+
+    // 🔄 WebSocket ile anlık dosya güncellemelerini dinle
+    const token = localStorage.getItem("token");
+    const wsUrl = `${API.replace("http", "ws")}?token=${token}`;
+    const ws = new WebSocket(wsUrl);
+
+    ws.onmessage = async (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.type === "fileUpdate") {
+          console.log("📸 Yeni thumbnail bildirimi alındı:", msg.path);
+          await loadFiles(); // 🔄 anında dosya listesini yenile
+        }
+      } catch (err) {
+        console.warn("WebSocket mesajı çözümlenemedi:", err);
+      }
+    };
+
     // ✅ Tek event handler içinde hem Esc hem ok tuşlarını kontrol et
     function handleKey(e) {
       if (e.key === "Escape") {
@@ -262,6 +280,7 @@
               src={`${API}${f.thumbnail}?token=${localStorage.getItem("token")}`}
               alt={f.name}
               class="thumb"
+              on:load={(e) => e.target.classList.add("loaded")}
             />
           {:else}
             <div class="thumb placeholder">