feat(subsonic): per-server music folder filter and sidebar picker (#125)

Adds library scoping per server: users can select one Navidrome music
folder or 'All' from a new sidebar dropdown. Choice is persisted per
server ID in localStorage. A musicLibraryFilterVersion counter triggers
refetches across browsing pages when the scope changes.

- getMusicFolders() + libraryFilterParams() in subsonic.ts
- New fields in authStore: musicFolders, musicLibraryFilterByServer,
  musicLibraryFilterVersion, setMusicFolders, setMusicLibraryFilter
- Sidebar dropdown via createPortal; collapses to icon in narrow mode
- API scoping applied to: getAlbumList2, getRandomSongs, getArtists,
  getStarred2, search3
- Full i18n coverage (en, de, fr, nl, zh, nb, ru)

Review fixes applied (co-authored):
- Sidebar: title={} → data-tooltip + data-tooltip-pos='right'
- authStore: setMusicFolders merged into single set() call
- Locales: removed dead libraryScopeHint key from all 7 files
- Genres.tsx: removed musicLibraryFilterVersion dep (getGenres unscoped)

Co-authored-by: cucadmuh <cucadmuh@users.noreply.github.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/Hero.tsx

@@ -7,6 +7,7 @@ import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 import { playAlbum } from '../utils/playAlbum';
 import { useIsMobile } from '../hooks/useIsMobile';
+import { useAuthStore } from '../store/authStore';
 
 const INTERVAL_MS = 10000;
 
@@ -52,6 +53,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const isMobile = useIsMobile();
+  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [activeIdx, setActiveIdx] = useState(0);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -59,7 +61,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
   useEffect(() => {
     if (albumsProp?.length) { setAlbums(albumsProp); return; }
     getRandomAlbums(8).then(a => { if (a.length) setAlbums(a); }).catch(() => {});
-  }, [albumsProp]);
+  }, [albumsProp, musicLibraryFilterVersion]);
 
   // Start / restart auto-advance timer
   const startTimer = useCallback((len: number) => {

src/components/LiveSearch.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Search, Disc3, Users, Music, SlidersHorizontal } from 'lucide-react';
 import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useAuthStore } from '../store/authStore';
 import { useTranslation } from 'react-i18next';
 
 function debounce(fn: (q: string) => void, ms: number): (q: string) => void {
@@ -24,6 +25,7 @@ export default function LiveSearch() {
   const playTrack = usePlayerStore(state => state.playTrack);
   const ref = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
 
   const doSearch = useCallback(
     debounce(async (q: string) => {
@@ -37,7 +39,7 @@ export default function LiveSearch() {
         setLoading(false);
       }
     }, 300),
-    []
+    [musicLibraryFilterVersion]
   );
 
   useEffect(() => { doSearch(query); setActiveIndex(-1); }, [query, doSearch]);

src/components/MobileSearchOverlay.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { X, Search, Disc3, Users, Music, Music2, Clock, ChevronRight } from 'lucide-react';
 import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useAuthStore } from '../store/authStore';
 import { useTranslation } from 'react-i18next';
 
 const STORAGE_KEY = 'psysonic_recent_searches';
@@ -34,6 +35,7 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
   const [loading, setLoading] = useState(false);
   const [recentSearches, setRecentSearches] = useState<string[]>(loadRecent);
   const inputRef = useRef<HTMLInputElement>(null);
+  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
 
   useEffect(() => { inputRef.current?.focus(); }, []);
 
@@ -50,7 +52,7 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
       try { setResults(await search(q)); }
       finally { setLoading(false); }
     }, 300),
-    []
+    [musicLibraryFilterVersion]
   );
 
   useEffect(() => { doSearch(query); }, [query, doSearch]);

src/components/Sidebar.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { usePlayerStore } from '../store/playerStore';
 import { useOfflineStore } from '../store/offlineStore';
 import { useAuthStore } from '../store/authStore';
@@ -7,7 +8,8 @@ import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle,
-  PanelLeftClose, PanelLeft, HelpCircle, Dices, AudioLines, HardDriveDownload, Tags, ListMusic, Cast
+  PanelLeftClose, PanelLeft, HelpCircle, Dices, AudioLines, HardDriveDownload, Tags, ListMusic, Cast,
+  ChevronDown, Check, Music2,
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
@@ -44,8 +46,70 @@ export default function Sidebar({
   const activeJobs = offlineJobs.filter(j => j.status === 'queued' || j.status === 'downloading');
   const offlineAlbums = useOfflineStore(s => s.albums);
   const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const isLoggedIn = useAuthStore(s => s.isLoggedIn);
+  const musicFolders = useAuthStore(s => s.musicFolders);
+  const musicLibraryFilterByServer = useAuthStore(s => s.musicLibraryFilterByServer);
+  const setMusicLibraryFilter = useAuthStore(s => s.setMusicLibraryFilter);
   const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
   const sidebarItems = useSidebarStore(s => s.items);
+  const [libraryDropdownOpen, setLibraryDropdownOpen] = useState(false);
+  const [dropdownRect, setDropdownRect] = useState({ top: 0, left: 0, width: 0 });
+  const libraryTriggerRef = useRef<HTMLButtonElement>(null);
+  const showLibraryPicker = !isCollapsed && isLoggedIn && musicFolders.length > 1;
+
+  const filterId = serverId ? (musicLibraryFilterByServer[serverId] ?? 'all') : 'all';
+  const selectedFolderName =
+    filterId === 'all' ? null : musicFolders.find(f => f.id === filterId)?.name ?? null;
+  const libraryTriggerPlain = filterId === 'all';
+
+  const updateDropdownPosition = useCallback(() => {
+    const el = libraryTriggerRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setDropdownRect({
+      top: r.bottom + 4,
+      left: r.left,
+      width: r.width,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!libraryDropdownOpen) return;
+    updateDropdownPosition();
+    const onWin = () => updateDropdownPosition();
+    window.addEventListener('resize', onWin);
+    window.addEventListener('scroll', onWin, true);
+    return () => {
+      window.removeEventListener('resize', onWin);
+      window.removeEventListener('scroll', onWin, true);
+    };
+  }, [libraryDropdownOpen, updateDropdownPosition]);
+
+  useEffect(() => {
+    if (!libraryDropdownOpen) return;
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (libraryTriggerRef.current?.contains(t)) return;
+      const panel = document.querySelector('.nav-library-dropdown-panel');
+      if (panel?.contains(t)) return;
+      setLibraryDropdownOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setLibraryDropdownOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [libraryDropdownOpen]);
+
+  const pickLibrary = (id: 'all' | string) => {
+    setMusicLibraryFilter(id);
+    setLibraryDropdownOpen(false);
+  };
+
   // Resolve ordered, visible items per section from store config
   const visibleLibrary = sidebarItems
     .filter(cfg => cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'library')
@@ -73,8 +137,81 @@ export default function Sidebar({
         {isCollapsed ? <PanelLeft size={14} /> : <PanelLeftClose size={14} />}
       </button>
 
-      <nav className="sidebar-nav" aria-label="Hauptnavigation">
-        {!isCollapsed && <span className="nav-section-label">{t('sidebar.library')}</span>}
+      <nav className="sidebar-nav" aria-label="Main navigation">
+        {!isCollapsed && (showLibraryPicker ? (
+          <>
+            <button
+              ref={libraryTriggerRef}
+              type="button"
+              className={`nav-library-scope-trigger ${libraryTriggerPlain ? 'nav-library-scope-trigger--plain' : ''} ${libraryDropdownOpen ? 'nav-library-scope-trigger--open' : ''}`}
+              onClick={() => {
+                setLibraryDropdownOpen(o => !o);
+              }}
+              aria-label={t('sidebar.libraryScope')}
+              aria-expanded={libraryDropdownOpen}
+              aria-haspopup="listbox"
+              data-tooltip={libraryDropdownOpen ? undefined : t('sidebar.libraryScope')}
+              data-tooltip-pos="bottom"
+            >
+              {!libraryTriggerPlain ? (
+                <Music2 size={16} className="nav-library-scope-icon" strokeWidth={2} aria-hidden />
+              ) : null}
+              <div className="nav-library-scope-text">
+                <span className="nav-library-scope-title">{t('sidebar.library')}</span>
+                {selectedFolderName ? (
+                  <span className="nav-library-scope-subtitle" data-tooltip={selectedFolderName} data-tooltip-pos="right">
+                    {selectedFolderName}
+                  </span>
+                ) : null}
+              </div>
+              <ChevronDown size={16} strokeWidth={2.25} className="nav-library-scope-chevron" aria-hidden />
+            </button>
+            {libraryDropdownOpen &&
+              createPortal(
+                <div
+                  className={`nav-library-dropdown-panel${musicFolders.length > 10 ? ' nav-library-dropdown-panel--many-libraries' : ''}`}
+                  role="listbox"
+                  aria-label={t('sidebar.libraryScope')}
+                  style={{
+                    position: 'fixed',
+                    top: dropdownRect.top,
+                    left: dropdownRect.left,
+                    width: dropdownRect.width,
+                    minWidth: dropdownRect.width,
+                    maxWidth: dropdownRect.width,
+                    boxSizing: 'border-box',
+                  }}
+                >
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={filterId === 'all'}
+                    className={`nav-library-dropdown-item ${filterId === 'all' ? 'nav-library-dropdown-item--selected' : ''}`}
+                    onClick={() => pickLibrary('all')}
+                  >
+                    <span className="nav-library-dropdown-item-label">{t('sidebar.allLibraries')}</span>
+                    {filterId === 'all' ? <Check size={16} className="nav-library-dropdown-check" strokeWidth={2.5} /> : <span className="nav-library-dropdown-check-spacer" />}
+                  </button>
+                  {musicFolders.map(f => (
+                    <button
+                      key={f.id}
+                      type="button"
+                      role="option"
+                      aria-selected={filterId === f.id}
+                      className={`nav-library-dropdown-item ${filterId === f.id ? 'nav-library-dropdown-item--selected' : ''}`}
+                      onClick={() => pickLibrary(f.id)}
+                    >
+                      <span className="nav-library-dropdown-item-label">{f.name}</span>
+                      {filterId === f.id ? <Check size={16} className="nav-library-dropdown-check" strokeWidth={2.5} /> : <span className="nav-library-dropdown-check-spacer" />}
+                    </button>
+                  ))}
+                </div>,
+                document.body
+              )}
+          </>
+        ) : (
+          <span className="nav-section-label">{t('sidebar.library')}</span>
+        ))}
         {visibleLibrary.map(item => (
           <NavLink
             key={item.to}
@@ -117,7 +254,7 @@ export default function Sidebar({
         )}
 
         {visibleSystem.length > 0 && !isCollapsed && <span className="nav-section-label">{t('sidebar.system')}</span>}
-{visibleSystem.map(item => (
+        {visibleSystem.map(item => (
           <NavLink
             key={item.to}
             to={item.to}

src/components/TooltipPortal.tsx

@@ -35,13 +35,20 @@ export default function TooltipPortal() {
       const target = (e.target as HTMLElement).closest('[data-tooltip]');
       if (!target) setTooltip(null);
     };
+    /** Clicking a tooltip anchor (e.g. opening a dropdown) keeps the cursor inside the element, so mouseout never runs — hide immediately. */
+    const onDown = (e: MouseEvent) => {
+      const t = (e.target as HTMLElement).closest('[data-tooltip]');
+      if (t) setTooltip(null);
+    };
     document.addEventListener('mouseover', onOver);
     document.addEventListener('mouseout', onOut);
     document.addEventListener('mousemove', onMove, { passive: true });
+    document.addEventListener('mousedown', onDown, true);
     return () => {
       document.removeEventListener('mouseover', onOver);
       document.removeEventListener('mouseout', onOut);
       document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mousedown', onDown, true);
     };
   }, []);