client/src/routes/Music.svelte

@@ -20,8 +20,22 @@
   let progressInterval;
 
   // View mode
+  const VIEW_MODE_STORAGE_KEY = "musicViewMode";
   let viewMode = "list"; // "list" or "grid"
 
+  function loadViewMode() {
+    if (typeof localStorage === "undefined") return;
+    const saved = localStorage.getItem(VIEW_MODE_STORAGE_KEY);
+    if (saved === "list" || saved === "grid") {
+      viewMode = saved;
+    }
+  }
+
+  function persistViewMode(mode) {
+    if (typeof localStorage === "undefined") return;
+    localStorage.setItem(VIEW_MODE_STORAGE_KEY, mode);
+  }
+
   async function loadMusic() {
     loading = true;
     error = null;
@@ -185,7 +199,13 @@
     }, 100);
   }
 
+  function setViewMode(mode) {
+    viewMode = mode;
+    persistViewMode(mode);
+  }
+
   onMount(() => {
+    loadViewMode();
     loadMusic();
     startProgressInterval();
 
@@ -212,14 +232,14 @@
       <div class="view-toggle">
         <button
           class="view-btn {viewMode === 'list' ? 'active' : ''}"
-          on:click={() => (viewMode = "list")}
+          on:click={() => setViewMode("list")}
           title="Liste görünümü"
         >
           <i class="fa-solid fa-list"></i>
         </button>
         <button
           class="view-btn {viewMode === 'grid' ? 'active' : ''}"
-          on:click={() => (viewMode = "grid")}
+          on:click={() => setViewMode("grid")}
           title="Grid görünümü"
         >
           <i class="fa-solid fa-border-all"></i>