feat: add multi-selection and context menu for playlist management

src/components/Sidebar.tsx

@@ -10,10 +10,11 @@ import { useTranslation } from 'react-i18next';
 import {
   Disc3, Users, Music4, Radio, Settings, Heart, BarChart3,
   PanelLeftClose, PanelLeft, HelpCircle, AudioLines, HardDriveDownload, Tags, ListMusic, Cast,
-  ChevronDown, Check, Music2, TrendingUp, FolderOpen, X, Wand2,
+  ChevronDown, Check, Music2, TrendingUp, FolderOpen, X, Wand2, ChevronRight, PlayCircle,
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
+import { getPlaylists, SubsonicPlaylist } from '../api/subsonic';
 
 // All configurable nav items — order and visibility controlled by sidebarStore.
 // Exported so Settings can render the same item metadata.
@@ -56,6 +57,9 @@ export default function Sidebar({
   const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
   const sidebarItems = useSidebarStore(s => s.items);
   const [libraryDropdownOpen, setLibraryDropdownOpen] = useState(false);
+  const [playlistsExpanded, setPlaylistsExpanded] = useState(false);
+  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
+  const [playlistsLoading, setPlaylistsLoading] = useState(false);
   const [dropdownRect, setDropdownRect] = useState({ top: 0, left: 0, width: 0 });
   const libraryTriggerRef = useRef<HTMLButtonElement>(null);
   const showLibraryPicker = !isCollapsed && isLoggedIn && musicFolders.length > 1;
@@ -113,6 +117,16 @@ export default function Sidebar({
     setLibraryDropdownOpen(false);
   };
 
+  // Fetch playlists when expanded
+  useEffect(() => {
+    if (!playlistsExpanded || !isLoggedIn) return;
+    setPlaylistsLoading(true);
+    getPlaylists()
+      .then(setPlaylists)
+      .catch(() => {})
+      .finally(() => setPlaylistsLoading(false));
+  }, [playlistsExpanded, isLoggedIn]);
+
   // Resolve ordered, visible items per section from store config
   const visibleLibrary = sidebarItems
     .filter(cfg => cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'library')
@@ -216,17 +230,69 @@ export default function Sidebar({
           <span className="nav-section-label">{t('sidebar.library')}</span>
         ))}
         {visibleLibrary.map(item => (
-          <NavLink
-            key={item.to}
-            to={item.to}
-            end={item.to === '/'}
-            className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-            data-tooltip={isCollapsed ? t(item.labelKey) : undefined}
-            data-tooltip-pos="bottom"
-          >
-            <item.icon size={isCollapsed ? 22 : 18} />
-            {!isCollapsed && <span>{t(item.labelKey)}</span>}
-          </NavLink>
+          item.to === '/playlists' ? (
+            // Playlists item with expand button
+            <div key={item.to} className="sidebar-playlists-wrapper">
+              <div className="sidebar-playlists-header-row">
+                <NavLink
+                  to={item.to}
+                  className={({ isActive }) => `nav-link sidebar-playlists-main-link ${isActive ? 'active' : ''}`}
+                  data-tooltip={isCollapsed ? t(item.labelKey) : undefined}
+                  data-tooltip-pos="bottom"
+                >
+                  <item.icon size={isCollapsed ? 22 : 18} />
+                  {!isCollapsed && <span>{t(item.labelKey)}</span>}
+                </NavLink>
+                {!isCollapsed && (
+                  <button
+                    className={`sidebar-playlists-toggle ${playlistsExpanded ? 'expanded' : ''}`}
+                    onClick={() => setPlaylistsExpanded(!playlistsExpanded)}
+                    aria-expanded={playlistsExpanded}
+                    aria-label={playlistsExpanded ? 'Colapsar listas' : 'Expandir listas'}
+                    title={playlistsExpanded ? 'Colapsar listas' : 'Expandir listas'}
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                )}
+              </div>
+              {!isCollapsed && playlistsExpanded && (
+                <div className="sidebar-playlists-list">
+                  {playlistsLoading ? (
+                    <div className="sidebar-playlists-loading">
+                      <div className="spinner" style={{ width: 14, height: 14 }} />
+                    </div>
+                  ) : playlists.length === 0 ? (
+                    <div className="sidebar-playlists-empty">{t('playlists.empty')}</div>
+                  ) : (
+                    playlists.map(pl => (
+                      <NavLink
+                        key={pl.id}
+                        to={`/playlists/${pl.id}`}
+                        className={({ isActive }) => `nav-link sidebar-playlist-item ${isActive ? 'active' : ''}`}
+                        data-tooltip={isCollapsed ? pl.name : undefined}
+                        data-tooltip-pos="bottom"
+                      >
+                        <PlayCircle size={12} />
+                        <span>{pl.name}</span>
+                      </NavLink>
+                    ))
+                  )}
+                </div>
+              )}
+            </div>
+          ) : (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+              data-tooltip={isCollapsed ? t(item.labelKey) : undefined}
+              data-tooltip-pos="bottom"
+            >
+              <item.icon size={isCollapsed ? 22 : 18} />
+              {!isCollapsed && <span>{t(item.labelKey)}</span>}
+            </NavLink>
+          )
         ))}
 
         {/* Now Playing — fixed, always visible */}