From f356ff02ba63bd643c5d1834bb917cf8650ca109 Mon Sep 17 00:00:00 2001
From: szbk <wisecolt@gmail.com>
Date: Sun, 14 Dec 2025 14:25:42 +0300
Subject: [PATCH] =?UTF-8?q?feat(ui):=20medya=20=C3=B6=C4=9Felerini=20kenar?=
 =?UTF-8?q?=20=C3=A7ubu=C4=9Funda=20ayr=C4=B1=20b=C3=B6l=C3=BCme=20ta?=
 =?UTF-8?q?=C5=9F=C4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 164 +++++++++++++++++----------
 client/src/styles/main.css           |   3 +-
 2 files changed, 105 insertions(+), 62 deletions(-)

diff --git a/client/src/components/Sidebar.svelte b/client/src/components/Sidebar.svelte
index 4eb8fd7..38ee8b6 100644
--- a/client/src/components/Sidebar.svelte
+++ b/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>
diff --git a/client/src/styles/main.css b/client/src/styles/main.css
index 186b9a3..0962c24 100644
--- a/client/src/styles/main.css
+++ b/client/src/styles/main.css
@@ -62,8 +62,7 @@ body,
 }
 
 .sidebar .menu {
-  padding-top: 6px;
-  flex: 1;
+  padding-top: 8px;
 }
 
 .sidebar .menu .item {