feat(ui): medya öğelerini kenar çubuğunda ayrı bölüme taşı

Medya içeriklerini (Filmler, Diziler, Müzik) kenar çubuğunda "Media" başlığı altında ayrı bir menü bölümünde grupla. Medya içeriği varsa sadece bu bölümü göstererek gezinme hiyerarşisini iyileştir.

client/src/components/Sidebar.svelte

@@ -17,6 +17,8 @@ let hasMusic = false;
   import { writable } from 'svelte/store';
   const diskSpaceStore = writable({ totalGB: '0', usedGB: '0', usedPercent: 0 });
  let diskSpace;
+  let hasMedia = false;
+  $: hasMedia = hasMovies || hasShows || hasMusic;
   
   // Store subscription'ı temizlemek için
   let unsubscribeDiskSpace;
@@ -133,7 +135,7 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
 <div class="sidebar" class:open={menuOpen}>
   <div class="logo">du.pe</div>
 
-  <div class="menu">
+  <div class="menu primary-menu">
     <Link
       to="/"
       class="item"
@@ -146,6 +148,41 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
       Files
     </Link>
 
+    <Link
+      to="/transfers"
+      class="item"
+      getProps={({ isCurrent }) => ({
+        class: isCurrent ? "item active" : "item",
+      })}
+      on:click={handleLinkClick}
+    >
+      <i class="fa-solid fa-arrow-down icon"></i>
+      Transfers
+    </Link>
+
+    <Link
+      to="/trash"
+      class="item"
+      getProps={({ isCurrent }) => ({
+        class: isCurrent ? "item active" : "item",
+      })}
+      on:click={handleLinkClick}
+    >
+      <i class="fa-solid fa-trash icon"></i>
+      Trash
+      {#if hasTrash}
+        <span class="badge">{$trashCount}</span>
+      {/if}
+    </Link>
+  </div>
+  
+  {#if hasMedia}
+    <div class="menu media-menu">
+      <div class="menu-header">
+        <span class="menu-label">Media</span>
+      </div>
+      <div class="menu-divider"></div>
+
       {#if hasMovies}
         <Link
           to="/movies"
@@ -187,34 +224,8 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
           Music
         </Link>
       {/if}
-
-    <Link
-      to="/transfers"
-      class="item"
-      getProps={({ isCurrent }) => ({
-        class: isCurrent ? "item active" : "item",
-      })}
-      on:click={handleLinkClick}
-    >
-      <i class="fa-solid fa-arrow-down icon"></i>
-      Transfers
-    </Link>
-
-    <Link
-      to="/trash"
-      class="item"
-      getProps={({ isCurrent }) => ({
-        class: isCurrent ? "item active" : "item",
-      })}
-      on:click={handleLinkClick}
-    >
-      <i class="fa-solid fa-trash icon"></i>
-      Trash
-      {#if hasTrash}
-        <span class="badge">{$trashCount}</span>
-      {/if}
-    </Link>
     </div>
+  {/if}
 
   <!-- Disk Space Alanı - Sidebar'ın en altında -->
   <div class="disk-space">
@@ -240,8 +251,40 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
           ></div>
         </div>
         </div>
+    </div>
+  </div>
+</div>
 
 <style>
+  .menu {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .menu.media-menu {
+    margin-top: 10px;
+    padding-top: 0;
+  }
+
+  .menu-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 10px;
+    color: #8d93a1;
+    font-size: 11px;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  .menu-divider {
+    height: 1px;
+    margin: 1px 1px 1px;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
   .badge {
     display: inline-flex;
     align-items: center;
@@ -258,6 +301,3 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
     line-height: 1;
   }
 </style>
-    </div>
-  </div>
-</div>

client/src/styles/main.css

@@ -63,7 +63,6 @@ body,
 
 .sidebar .menu {
   padding-top: 6px;
-  flex: 1;
 }
 
 .sidebar .menu .item {
@@ -618,6 +617,11 @@ img.thumb.loaded {
   border-top: 1px solid var(--border);
 }
 
+/* Media menüsünün disk space'den önce olmasını sağla */
+.sidebar .media-menu {
+  margin-top: 10px;
+}
+
 .sidebar .disk-space-header {
   display: flex;
   align-items: center;