Trash eklendi

client/src/components/Sidebar.svelte

@@ -1,14 +1,16 @@
 <script>
-  import { Link } from "svelte-routing";
-  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";
+ import { Link } from "svelte-routing";
+ import { createEventDispatcher, onDestroy, onMount, tick } from "svelte";
+ import { movieCount } from "../stores/movieStore.js";
+ import { tvShowCount } from "../stores/tvStore.js";
+ import { trashCount } from "../stores/trashStore.js";
+ import { apiFetch } from "../utils/api.js";
   
   export let menuOpen = false;
   const dispatch = createEventDispatcher();
   let hasMovies = false;
   let hasShows = false;
+  let hasTrash = false;
   // Svelte store kullanarak reaktivite sağla
   import { writable } from 'svelte/store';
   const diskSpaceStore = writable({ totalGB: '0', usedGB: '0', usedPercent: 0 });
@@ -37,9 +39,14 @@
     hasShows = (count ?? 0) > 0;
   });
   
+  const unsubscribeTrash = trashCount.subscribe((count) => {
+    hasTrash = (count ?? 0) > 0;
+  });
+  
   onDestroy(() => {
     unsubscribeMovie();
     unsubscribeTv();
+    unsubscribeTrash();
     if (unsubscribeDiskSpace) {
       unsubscribeDiskSpace();
     }
@@ -182,6 +189,9 @@
     >
       <i class="fa-solid fa-trash icon"></i>
       Trash
+      {#if hasTrash}
+        <span class="badge">{$trashCount}</span>
+      {/if}
     </Link>
   </div>
   
@@ -208,7 +218,25 @@
             style="width: {diskSpace.usedPercent}%"
           ></div>
         </div>
-      </div>
+        </div>
+        
+        <style>
+          .badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 18px;
+            height: 18px;
+            padding: 0 5px;
+            margin-left: 8px;
+            background: #f44336;
+            color: white;
+            font-size: 11px;
+            font-weight: 600;
+            border-radius: 9px;
+            line-height: 1;
+          }
+        </style>
     </div>
   </div>
 </div>