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>

client/src/styles/main.css

@@ -31,13 +31,14 @@ body,
 .app {
   display: grid;
   grid-template-columns: 220px 1fr;
-  height: 100%;
+  height: 100vh;
 }
 
 .content {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 100vh;
+  overflow-y: auto;
 }
 
 /* =======================================================
@@ -48,6 +49,9 @@ body,
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
+  height: 100vh;
+  position: sticky;
+  top: 0;
 }
 
 .sidebar .logo {
@@ -59,6 +63,7 @@ body,
 
 .sidebar .menu {
   padding-top: 6px;
+  flex: 1;
 }
 
 .sidebar .menu .item {
@@ -603,3 +608,85 @@ img.thumb.loaded {
     gap: 6px;
   }
 }
+
+/* =======================================================
+   💾 DISK SPACE
+   ======================================================= */
+.sidebar .disk-space {
+  margin-top: auto;
+  padding: 16px;
+  border-top: 1px solid var(--border);
+}
+
+.sidebar .disk-space-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+  color: #222;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.sidebar .disk-space-header .icon {
+  width: 16px;
+  text-align: center;
+  color: #333;
+}
+
+.sidebar .disk-space-title {
+  flex: 1;
+}
+
+.sidebar .disk-space-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sidebar .disk-space-text {
+  font-size: 12px;
+  color: #666;
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.sidebar .disk-space-values {
+  font-weight: 500;
+  color: #333;
+}
+
+.sidebar .disk-space-bar-container {
+  width: 100%;
+  height: 8px;
+  background: #e5e5e5;
+  border-radius: 99px;
+  overflow: hidden;
+}
+
+.sidebar .disk-space-bar {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.sidebar .disk-space-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #f5b333 0%, #e2a62f 100%);
+  border-radius: 99px;
+  transition: width 0.3s ease;
+}
+
+/* Disk space renkleri - kullanım oranına göre */
+.sidebar .disk-space-bar-fill.low {
+  background: linear-gradient(90deg, #4caf50 0%, #388e3c 100%);
+}
+
+.sidebar .disk-space-bar-fill.medium {
+  background: linear-gradient(90deg, #ff9800 0%, #f57c00 100%);
+}
+
+.sidebar .disk-space-bar-fill.high {
+  background: linear-gradient(90deg, #f44336 0%, #d32f2f 100%);
+}