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

Medya içeriği olan kullanıcılar için menü yapılandırmasını iyileştir.
Artık Movies, TV Shows ve Music bağlantıları "Media" başlıklı ayrı bir
bölümde gruplandırılarak daha düzenli bir gezinme deneyimi sunuluyor.
Medya içeriği yoksa bu bölüm görünmez.

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">
@@ -241,7 +252,43 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
         </div>
         </div>
         
-        <style>
+    </div>
+  </div>
+</div>
+
+<style>
+  .menu {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .menu.primary-menu {
+    padding-top: 3px;
+  }
+
+  .menu.media-menu {
+    margin-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: 2px 10px;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
   .badge {
     display: inline-flex;
     align-items: center;
@@ -257,7 +304,4 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
     border-radius: 9px;
     line-height: 1;
   }
-        </style>
-    </div>
-  </div>
-</div>
+</style>

client/src/styles/main.css

@@ -62,8 +62,7 @@ body,
 }
 
 .sidebar .menu {
-  padding-top: 6px;
-  flex: 1;
+  padding-top: 8px;
 }
 
 .sidebar .menu .item {