Disk Space alanı eklendi.

client/src/components/Sidebar.svelte

@@ -1,31 +1,119 @@
 <script>
   import { Link } from "svelte-routing";
-  import { createEventDispatcher, onDestroy } from "svelte";
+  import { createEventDispatcher, onDestroy, onMount, tick } from "svelte";
   import { movieCount } from "../stores/movieStore.js";
   import { tvShowCount } from "../stores/tvStore.js";
-
+  import { apiFetch } from "../utils/api.js";
+  
   export let menuOpen = false;
   const dispatch = createEventDispatcher();
   let hasMovies = false;
   let hasShows = false;
-
+  // Svelte store kullanarak reaktivite sağla
+  import { writable } from 'svelte/store';
+  const diskSpaceStore = writable({ totalGB: '0', usedGB: '0', usedPercent: 0 });
+  let diskSpace;
+  
+  // Store subscription'ı temizlemek için
+  let unsubscribeDiskSpace;
+  
+  // Store'u değişkene bağla
+  unsubscribeDiskSpace = diskSpaceStore.subscribe(value => {
+    diskSpace = value;
+    console.log('🔄 Disk space updated from store:', diskSpace);
+  });
+  
+  // Disk space'i reaktif olarak güncellemek için bir fonksiyon
+  function updateDiskSpace(newData) {
+    diskSpaceStore.update(current => Object.assign({}, current, newData));
+    console.log('🔄 Disk space update called with:', newData);
+  }
+  
   const unsubscribeMovie = movieCount.subscribe((count) => {
     hasMovies = (count ?? 0) > 0;
   });
-
+  
   const unsubscribeTv = tvShowCount.subscribe((count) => {
     hasShows = (count ?? 0) > 0;
   });
-
+  
   onDestroy(() => {
     unsubscribeMovie();
     unsubscribeTv();
+    if (unsubscribeDiskSpace) {
+      unsubscribeDiskSpace();
+    }
   });
-
+  
   // Menü öğesine tıklanınca sidebar'ı kapat
   function handleLinkClick() {
     dispatch("closeMenu");
   }
+  
+  // Disk space bilgilerini al
+  async function fetchDiskSpace() {
+    try {
+      const response = await apiFetch('/api/disk-space');
+      if (response.ok) {
+        const data = await response.json();
+        console.log('Disk space data received:', data);
+        updateDiskSpace(data);
+      } else {
+        console.error('Disk space API error:', response.status, response.statusText);
+      }
+    } catch (error) {
+      console.error('Disk space fetch error:', error);
+    }
+  }
+  
+  // Component yüklendiğinde disk space bilgilerini al
+  onMount(() => {
+    console.log('🔌 Sidebar component mounted');
+    fetchDiskSpace();
+    
+    // WebSocket bağlantısı kur
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    // Server port'unu doğru almak için
+    const currentHost = window.location.host;
+    // Eğer client farklı portta çalışıyorsa, server port'unu manuel belirt
+    const wsHost = currentHost.includes(':3000') ? currentHost.replace(':3000', ':3001') : currentHost;
+    const wsUrl = `${wsProtocol}//${wsHost}`;
+    console.log('🔌 Connecting to WebSocket at:', wsUrl);
+    
+    // WebSocket bağlantısını global olarak saklayalım
+    window.diskSpaceWs = new WebSocket(wsUrl);
+    
+    window.diskSpaceWs.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log('WebSocket message received:', data);
+        if (data.type === 'diskSpace') {
+          console.log('Disk space update received:', data.data);
+          updateDiskSpace(data.data);
+        }
+      } catch (err) {
+        console.error('WebSocket message parse error:', err);
+      }
+    };
+    
+    window.diskSpaceWs.onopen = () => {
+      console.log('WebSocket connected for disk space updates');
+    };
+    
+    window.diskSpaceWs.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+    
+    window.diskSpaceWs.onclose = () => {
+      console.log('WebSocket disconnected');
+    };
+    
+    onDestroy(() => {
+      if (window.diskSpaceWs && (window.diskSpaceWs.readyState === WebSocket.OPEN || window.diskSpaceWs.readyState === WebSocket.CONNECTING)) {
+        window.diskSpaceWs.close();
+      }
+    });
+  });
 </script>
 
 <div class="sidebar" class:open={menuOpen}>
@@ -108,4 +196,31 @@
       Trash
     </Link>
   </div>
+  
+  <!-- Disk Space Alanı - Sidebar'ın en altında -->
+  <div class="disk-space">
+    <div class="disk-space-header">
+      <i class="fa-solid fa-hard-drive icon"></i>
+      <span class="disk-space-title">Disk Space</span>
+    </div>
+    <div class="disk-space-info">
+      <div class="disk-space-text">
+        <span class="disk-space-values">
+          {#if diskSpace.usedFormatted && diskSpace.totalFormatted}
+            {diskSpace.usedFormatted} / {diskSpace.totalFormatted}
+          {:else}
+            {diskSpace.usedGB} GB / {diskSpace.totalGB} GB
+          {/if}
+        </span>
+      </div>
+      <div class="disk-space-bar-container">
+        <div class="disk-space-bar">
+          <div
+            class="disk-space-bar-fill {diskSpace.usedPercent < 50 ? 'low' : diskSpace.usedPercent < 80 ? 'medium' : 'high'}"
+            style="width: {diskSpace.usedPercent}%"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>