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,48 +148,6 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
       Files
     </Link>
 
-    {#if hasMovies}
-      <Link
-        to="/movies"
-        class="item"
-        getProps={({ isCurrent }) => ({
-          class: isCurrent ? "item active" : "item",
-        })}
-        on:click={handleLinkClick}
-      >
-        <i class="fa-solid fa-film icon"></i>
-        Movies
-      </Link>
-    {/if}
-
-    {#if hasShows}
-      <Link
-        to="/tv"
-        class="item"
-        getProps={({ isCurrent }) => ({
-          class: isCurrent ? "item active" : "item",
-        })}
-        on:click={handleLinkClick}
-      >
-        <i class="fa-solid fa-tv icon"></i>
-        Tv Shows
-      </Link>
-    {/if}
-
-    {#if hasMusic}
-      <Link
-        to="/music"
-        class="item"
-        getProps={({ isCurrent }) => ({
-          class: isCurrent ? "item active" : "item",
-        })}
-        on:click={handleLinkClick}
-      >
-        <i class="fa-solid fa-music icon"></i>
-        Music
-      </Link>
-    {/if}
-
     <Link
       to="/transfers"
       class="item"
@@ -215,6 +175,57 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
       {/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"
+          class="item"
+          getProps={({ isCurrent }) => ({
+            class: isCurrent ? "item active" : "item",
+          })}
+          on:click={handleLinkClick}
+        >
+          <i class="fa-solid fa-film icon"></i>
+          Movies
+        </Link>
+      {/if}
+
+      {#if hasShows}
+        <Link
+          to="/tv"
+          class="item"
+          getProps={({ isCurrent }) => ({
+            class: isCurrent ? "item active" : "item",
+          })}
+          on:click={handleLinkClick}
+        >
+          <i class="fa-solid fa-tv icon"></i>
+          Tv Shows
+        </Link>
+      {/if}
+
+      {#if hasMusic}
+        <Link
+          to="/music"
+          class="item"
+          getProps={({ isCurrent }) => ({
+            class: isCurrent ? "item active" : "item",
+          })}
+          on:click={handleLinkClick}
+        >
+          <i class="fa-solid fa-music icon"></i>
+          Music
+        </Link>
+      {/if}
+    </div>
+  {/if}
   
   <!-- Disk Space Alanı - Sidebar'ın en altında -->
   <div class="disk-space">
@@ -241,23 +252,56 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
         </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>
+
+<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;
+    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>

client/src/styles/main.css

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