0) || (activeTab === 'artists' && artistViewMode === 'sidepanel')} bind:this={scrollContainer}>
{#if customIconSrc} Custom Icon {:else if favoritesPreferences.custom_icon_preset} {#if favoritesPreferences.custom_icon_preset === 'heart'} {:else if favoritesPreferences.custom_icon_preset === 'star'} {:else if favoritesPreferences.custom_icon_preset === 'music'} {:else if favoritesPreferences.custom_icon_preset === 'folder'} {:else if favoritesPreferences.custom_icon_preset === 'disc'} {:else if favoritesPreferences.custom_icon_preset === 'library'} {/if} {:else} {/if}

{$t('favorites.title')}

{#if activeTab === 'tracks' && !loading && filteredTracks.length > 0}
{#if showTracksContextMenu}
showTracksContextMenu = false} role="presentation">
{/if}
{/if}
{#each favoritesPreferences.tab_order as tab} {/each}
{#if !searchExpanded} {:else}
setCurrentSearchValue(e.currentTarget.value)} class="search-input-inline" autofocus /> {#if getCurrentSearchValue()} {/if}
{/if}
{#if activeTab === 'albums'}
{#if showAlbumGroupMenu}
{/if}
{#if showAlbumSortMenu}
{#each albumSortOptions as option} {/each}
{/if}
{:else if activeTab === 'tracks'}
{#if showTrackGroupMenu}
{/if}
{:else if activeTab === 'artists'}
{#if artistViewMode === 'grid'}
{#if showArtistGroupMenu}
{/if}
{/if}
{/if} {#if activeTab === 'artists' && artistViewMode === 'sidepanel' && filteredArtists.length > 0} {@const groupedArtistsForIndex = groupArtists(filteredArtists)} {@const artistAlphaGroupsForIndex = new Set(groupedArtistsForIndex.map(group => group.key))}
{#each alphaIndexLetters as letter} {/each}
{/if} {#if activeTab === 'tracks' && !loading && trackGroupingEnabled && (trackGroupMode === 'name' || trackGroupMode === 'artist')} {@const groupedTracks = groupTracks(filteredTracks, trackGroupMode)} {@const trackIndexTargets = trackGroupMode === 'artist' ? (() => { const map = new Map(); for (const group of groupedTracks) { const letter = alphaGroupKey(group.title); if (!map.has(letter)) { map.set(letter, group.id); } } return map; })() : new Map()} {@const trackAlphaGroups = trackGroupMode === 'name' ? new Set(groupedTracks.map(group => group.key)) : new Set(trackIndexTargets.keys())}
{#each alphaIndexLetters as letter} {/each}
{/if} {#if activeTab === 'tracks'} {filteredTracks.length}{trackSearch ? ` / ${favoriteTracks.length}` : ''} tracks {:else if activeTab === 'albums'} {filteredAlbums.length}{albumSearch ? ` / ${favoriteAlbums.length}` : ''} albums {:else if activeTab === 'artists'} {filteredArtists.length}{artistSearch ? ` / ${favoriteArtists.length}` : ''} artists {:else} {filteredPlaylists.length}{playlistSearch ? ` / ${favoritePlaylists.length}` : ''} playlists {/if}
{#if loading} {#key activeTab}

{$t('favorites.loadingFavorites')}

 {/key} {:else if error}

{$t('favorites.failedLoadFavorites')}

{error}

{:else if activeTab === 'tracks'} {#if favoriteTracks.length === 0}

{$t('favorites.noFavoriteTracks')}

{$t('favorites.likeTracksHint')}

{:else if filteredTracks.length === 0}

{$t('favorites.noTracksMatch', { values: { query: trackSearch } })}

{:else} {@const groupedTracks = trackGroupingEnabled ? groupTracks(filteredTracks, trackGroupMode) : [{ key: '', id: 'ungrouped', title: '', tracks: filteredTracks }]}
onTrackPlayNext(buildDisplayTrackFromFavorite(t)) : undefined} onTrackPlayLater={onTrackPlayLater ? (t) => onTrackPlayLater(buildDisplayTrackFromFavorite(t)) : undefined} onTrackAddToPlaylist={onTrackAddToPlaylist} getTrackId={getFavoriteTrackId} getTrackNumber={getFavoriteTrackNumber} getTrackTitle={getFavoriteTrackTitle} getTrackArtist={getFavoriteTrackArtist} getTrackDuration={getFavoriteTrackDuration} getTrackAlbumKey={getFavoriteTrackAlbumKey} getTrackAlbum={getFavoriteTrackAlbum} showAlbum={!trackGroupingEnabled || trackGroupMode !== 'album'} getArtistId={getFavoriteArtistId} getAlbumId={getFavoriteAlbumId} isLocal={false} hideDownload={false} hideFavorite={false} isFavoriteOverride={true} getOfflineCacheStatus={getTrackOfflineCacheStatus} onDownload={onTrackDownload ? (t) => onTrackDownload(buildDisplayTrackFromFavorite(t)) : undefined} onRemoveDownload={onTrackRemoveDownload} onShareQobuz={onTrackShareQobuz} onShareSonglink={onTrackShareSonglink ? (t) => onTrackShareSonglink(buildDisplayTrackFromFavorite(t)) : undefined} onGoToAlbum={onTrackGoToAlbum} onGoToArtist={onTrackGoToArtist} onShowInfo={onTrackShowInfo} onReDownload={onTrackReDownload ? (t) => onTrackReDownload(buildDisplayTrackFromFavorite(t)) : undefined} />
{/if} {:else if activeTab === 'albums'} {#if favoriteAlbums.length === 0}

{$t('favorites.noFavoriteAlbums')}

{$t('favorites.likeAlbumsHint')}

{:else if filteredAlbums.length === 0}

{$t('favorites.noAlbumsMatch', { values: { query: albumSearch } })}

{:else if albumGroupingEnabled} {@const groupedAlbums = groupAlbums(filteredAlbums, albumGroupMode)} {@const alphaGroups = albumGroupMode === 'alpha' ? new Set(groupedAlbums.map(group => group.key)) : new Set()}
{#each groupedAlbums as group (group.id)}
{group.key} {group.albums.length}
{#if albumViewMode === 'grid'}
{#each group.albums as album (album.id)} onAlbumPlay(album.id) : undefined} onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined} onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined} onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined} onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined} onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} {downloadStateVersion} onclick={() => { onAlbumClick?.(album.id); loadAlbumOfflineCacheStatus(album.id); }} /> {/each}
{:else}
{#each group.albums as album (album.id)}
onAlbumClick?.(album.id)}>
{#if album.image?.thumbnail || album.image?.small || album.image?.large} {album.title} {:else}
{/if}
{album.title}
{album.artist.name} {#if getAlbumYear(album)}{getAlbumYear(album)}{/if}
{/each}
{/if}
{/each}
{#if albumGroupMode === 'alpha'}
{#each alphaIndexLetters as letter} {/each}
{/if}
{:else} {#if albumViewMode === 'grid'}
{#each filteredAlbums as album (album.id)} onAlbumPlay(album.id) : undefined} onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined} onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined} onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined} onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined} onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} {downloadStateVersion} onclick={() => { onAlbumClick?.(album.id); loadAlbumOfflineCacheStatus(album.id); }} /> {/each}
{:else}
{#each filteredAlbums as album (album.id)}
onAlbumClick?.(album.id)}>
{#if album.image?.thumbnail || album.image?.small || album.image?.large} {album.title} {:else}
{/if}
{album.title}
{album.artist.name} {#if getAlbumYear(album)}{getAlbumYear(album)}{/if}
{/each}
{/if} {/if} {:else if activeTab === 'artists'} {#if favoriteArtists.length === 0}

{$t('favorites.noFavoriteArtists')}

{$t('favorites.likeArtistsHint')}

{:else if filteredArtists.length === 0}

{$t('favorites.noArtistsMatch', { values: { query: artistSearch } })}

{:else if artistViewMode === 'sidepanel'} {@const groupedArtistsSidepanel = groupArtists(filteredArtists)}
{#each groupedArtistsSidepanel as group (group.id)}
{group.key}
{#each group.artists as artist (artist.id)} {@const hasOverflow = artistNameOverflows.has(artist.id)} {@const isHovered = hoveredArtistId === artist.id} {/each} {/each}
{#if !selectedFavoriteArtist}

{$t('favorites.selectArtistHint')}

{:else if loadingArtistAlbums}
{:else if artistAlbumsError}

{$t('favorites.failedLoadAlbums')}

{artistAlbumsError}

{:else if totalDisplayedAlbums === 0}

{$t('favorites.noAlbumsFound')}

{:else}
{#if sortedDiscography.length > 0}
{$t('artist.discography')} {$t('library.albumCount', { values: { count: sortedDiscography.length } })}
{#if showDiscographySortMenu} {/if}
{#each sortedDiscography as album (album.id)} onAlbumClick?.(album.id)} onPlay={() => onAlbumPlay?.(album.id)} onPlayNext={() => onAlbumPlayNext?.(album.id)} onPlayLater={() => onAlbumPlayLater?.(album.id)} onShareQobuz={() => onAlbumShareQobuz?.(album.id)} onShareSonglink={() => onAlbumShareSonglink?.(album.id)} onDownload={() => onAlbumDownload?.(album.id)} /> {/each}
{/if} {#if sortedEpsSingles.length > 0}
{$t('artist.epsSingles')} {sortedEpsSingles.length}
{#if showEpsSinglesSortMenu} {/if}
{#each sortedEpsSingles as album (album.id)} onAlbumClick?.(album.id)} onPlay={() => onAlbumPlay?.(album.id)} onPlayNext={() => onAlbumPlayNext?.(album.id)} onPlayLater={() => onAlbumPlayLater?.(album.id)} onShareQobuz={() => onAlbumShareQobuz?.(album.id)} onShareSonglink={() => onAlbumShareSonglink?.(album.id)} onDownload={() => onAlbumDownload?.(album.id)} /> {/each}
{/if} {#if sortedLiveAlbums.length > 0}
{$t('artist.liveAlbums')} {sortedLiveAlbums.length}
{#if showLiveAlbumsSortMenu} {/if}
{#each sortedLiveAlbums as album (album.id)} onAlbumClick?.(album.id)} onPlay={() => onAlbumPlay?.(album.id)} onPlayNext={() => onAlbumPlayNext?.(album.id)} onPlayLater={() => onAlbumPlayLater?.(album.id)} onShareQobuz={() => onAlbumShareQobuz?.(album.id)} onShareSonglink={() => onAlbumShareSonglink?.(album.id)} onDownload={() => onAlbumDownload?.(album.id)} /> {/each}
{/if}

To view compilations and other content,

{/if}
{:else if artistGroupingEnabled} {@const groupedArtists = groupArtists(filteredArtists)} {@const artistAlphaGroups = new Set(groupedArtists.map(group => group.key))}
{#each groupedArtists as group (group.id)}
{group.key} {group.artists.length}
{#each group.artists as artist (artist.id)} {/each}
{/each}
{#each alphaIndexLetters as letter} {/each}
{:else}
{#each filteredArtists as artist (artist.id)} {/each}
{/if} {:else if activeTab === 'playlists'} {#if loadingPlaylists} {#key activeTab}

{$t('favorites.loadingPlaylists')}

 {/key} {:else} {#if favoritePlaylists.length === 0}

{$t('favorites.noFavoritePlaylists')}

{$t('favorites.likePlaylistsHint')}

{:else if filteredPlaylists.length === 0}

{$t('favorites.noPlaylistsMatch', { values: { query: playlistSearch } })}

{:else}
{#each filteredPlaylists as playlist (playlist.id)} onPlaylistSelect?.(playlist.id)} onPlay={() => onPlaylistPlay?.(playlist.id)} onPlayNext={() => onPlaylistPlayNext?.(playlist.id)} onPlayLater={() => onPlaylistPlayLater?.(playlist.id)} onRemoveFavorite={() => onPlaylistRemoveFavorite?.(playlist.id)} onShareQobuz={() => onPlaylistShareQobuz?.(playlist.id)} /> {/each}
{/if} {/if} {/if}
editModalOpen = false} onSave={handlePreferencesSaved} initialPreferences={favoritesPreferences} />