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

@@ -16,7 +16,9 @@ let hasMusic = false;
   // Svelte store kullanarak reaktivite sağla
   import { writable } from 'svelte/store';
   const diskSpaceStore = writable({ totalGB: '0', usedGB: '0', usedPercent: 0 });
-  let diskSpace;
+ 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"
@@ -216,6 +176,57 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
     </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">
     <div class="disk-space-header">
@@ -240,24 +251,53 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
           ></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>
+
+<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;
+    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

@@ -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;