Add playlist and favorites commands, update sidebar

Backend:
- Add playlist.rs commands: get_user_playlists, get_playlist, search_playlists
- Add favorites.rs commands: get_favorites, add_favorite, remove_favorite
- Add API client methods: search_playlists, add_favorite, remove_favorite

Frontend:
- Remove Radio and New from sidebar (no API support)
- Sidebar now loads and displays user playlists dynamically
- Add playlist and favorites views (placeholder for now)
- Pass selectedPlaylistId and onPlaylistSelect to Sidebar

src/lib/components/Sidebar.svelte

@@ -1,24 +1,65 @@
 <script lang="ts">
-  import { Search, Home, Radio, Clock, Music, Disc3, Mic2, Plus, MoreVertical, ChevronDown, Heart } from 'lucide-svelte';
+  import { Search, Home, Clock, Music, Disc3, Mic2, Plus, MoreVertical, ChevronDown, Heart, ListMusic } from 'lucide-svelte';
+  import { invoke } from '@tauri-apps/api/core';
+  import { onMount } from 'svelte';
   import NavigationItem from './NavigationItem.svelte';
   import UserCard from './UserCard.svelte';
 
+  interface Playlist {
+    id: number;
+    name: string;
+    tracks_count: number;
+  }
+
   interface Props {
     activeView: string;
+    selectedPlaylistId?: number | null;
     onNavigate: (view: string) => void;
+    onPlaylistSelect?: (playlistId: number) => void;
     onSettingsClick?: () => void;
     onLogout?: () => void;
     userName?: string;
     subscription?: string;
   }
 
-  let { activeView, onNavigate, onSettingsClick, onLogout, userName = 'User', subscription = 'Qobuz' }: Props = $props();
+  let {
+    activeView,
+    selectedPlaylistId = null,
+    onNavigate,
+    onPlaylistSelect,
+    onSettingsClick,
+    onLogout,
+    userName = 'User',
+    subscription = 'Qobuz'
+  }: Props = $props();
+
+  let userPlaylists = $state<Playlist[]>([]);
+  let playlistsLoading = $state(false);
+
+  onMount(() => {
+    loadUserPlaylists();
+  });
+
+  async function loadUserPlaylists() {
+    playlistsLoading = true;
+    try {
+      const playlists = await invoke<Playlist[]>('get_user_playlists');
+      userPlaylists = playlists;
+    } catch (err) {
+      console.error('Failed to load playlists:', err);
+    } finally {
+      playlistsLoading = false;
+    }
+  }
 
   function handleViewChange(view: string) {
-    console.log('Sidebar: handleViewChange called with view:', view);
-    console.log('Sidebar: onNavigate function exists:', !!onNavigate);
     onNavigate(view);
-    console.log('Sidebar: onNavigate called');
+  }
+
+  function handlePlaylistClick(playlist: Playlist) {
+    if (onPlaylistSelect) {
+      onPlaylistSelect(playlist.id);
+    }
   }
 </script>
 
@@ -47,20 +88,6 @@
       >
         {#snippet icon()}<Home size={18} />{/snippet}
       </NavigationItem>
-      <NavigationItem
-        label="New"
-        active={activeView === 'new'}
-        onclick={() => handleViewChange('new')}
-      >
-        {#snippet icon()}<Radio size={18} />{/snippet}
-      </NavigationItem>
-      <NavigationItem
-        label="Radio"
-        active={activeView === 'radio'}
-        onclick={() => handleViewChange('radio')}
-      >
-        {#snippet icon()}<Radio size={18} />{/snippet}
-      </NavigationItem>
     </nav>
 
     <!-- Library Section -->
@@ -101,20 +128,12 @@
       <div class="playlists-header">
         <div class="section-header">Playlists</div>
         <div class="header-actions">
-          <button class="icon-btn">
+          <button class="icon-btn" onclick={loadUserPlaylists} title="Refresh playlists">
             <MoreVertical size={14} />
           </button>
-          <button class="icon-btn">
-            <ChevronDown size={14} />
-          </button>
         </div>
       </div>
 
-      <button class="create-btn">
-        <Plus size={18} />
-        <span>Create New...</span>
-      </button>
-
       <NavigationItem
         label="Favorites"
         active={activeView === 'favorites'}
@@ -122,6 +141,22 @@
       >
         {#snippet icon()}<Heart size={18} />{/snippet}
       </NavigationItem>
+
+      {#if playlistsLoading}
+        <div class="playlists-loading">Loading...</div>
+      {:else if userPlaylists.length > 0}
+        {#each userPlaylists as playlist (playlist.id)}
+          <NavigationItem
+            label={playlist.name}
+            active={activeView === 'playlist' && selectedPlaylistId === playlist.id}
+            onclick={() => handlePlaylistClick(playlist)}
+          >
+            {#snippet icon()}<ListMusic size={18} />{/snippet}
+          </NavigationItem>
+        {/each}
+      {:else}
+        <div class="no-playlists">No playlists yet</div>
+      {/if}
     </div>
   </div>
 
@@ -246,28 +281,11 @@
     color: var(--text-primary);
   }
 
-  .create-btn {
-    width: 100%;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 0 12px;
-    border-radius: 8px;
-    border: none;
-    background: transparent;
+  .playlists-loading,
+  .no-playlists {
+    font-size: 13px;
     color: var(--text-muted);
-    cursor: pointer;
-    transition: background-color 150ms ease;
-  }
-
-  .create-btn:hover {
-    background-color: var(--bg-hover);
-  }
-
-  .create-btn span {
-    font-size: 14px;
-    font-weight: 400;
+    padding: 8px 12px;
   }
 
   .user-section {

src/routes/+page.svelte

@@ -119,10 +119,11 @@
   let userInfo = $state<{ userName: string; subscription: string } | null>(null);
 
   // View State
-  type ViewType = 'home' | 'search' | 'library' | 'settings' | 'album';
+  type ViewType = 'home' | 'search' | 'library' | 'settings' | 'album' | 'playlist' | 'favorites';
   let activeView = $state<ViewType>('home');
   let viewHistory = $state<ViewType[]>(['home']);
   let selectedAlbum = $state<AlbumDetail | null>(null);
+  let selectedPlaylistId = $state<number | null>(null);
 
   // Overlay States
   let isQueueOpen = $state(false);
@@ -166,9 +167,17 @@
       if (activeView !== 'album') {
         selectedAlbum = null;
       }
+      if (activeView !== 'playlist') {
+        selectedPlaylistId = null;
+      }
     }
   }
 
+  function handlePlaylistSelect(playlistId: number) {
+    selectedPlaylistId = playlistId;
+    navigateTo('playlist');
+  }
+
   async function handleAlbumClick(albumId: string) {
     try {
       showToast('Loading album...', 'info');
@@ -760,7 +769,9 @@
     <!-- Sidebar -->
     <Sidebar
       {activeView}
+      {selectedPlaylistId}
       onNavigate={navigateTo}
+      onPlaylistSelect={handlePlaylistSelect}
       onSettingsClick={() => navigateTo('settings')}
       onLogout={handleLogout}
       userName={userInfo?.userName || 'User'}
@@ -794,6 +805,18 @@
           <h1>Library</h1>
           <p>Your library will appear here...</p>
         </div>
+      {:else if activeView === 'playlist' && selectedPlaylistId}
+        <div class="placeholder-view">
+          <h1>Playlist</h1>
+          <p>Playlist view coming soon... (ID: {selectedPlaylistId})</p>
+          <button class="back-btn" onclick={goBack}>Go Back</button>
+        </div>
+      {:else if activeView === 'favorites'}
+        <div class="placeholder-view">
+          <h1>Favorites</h1>
+          <p>Your favorite tracks and albums will appear here...</p>
+          <button class="back-btn" onclick={goBack}>Go Back</button>
+        </div>
       {/if}
     </main>