add image column playback, revert to single song playback on song list click

The CommandPalette component was being rendered twice when in mobile view:
1. In ResponsiveLayout via LayoutHotkeys (which handles all layouts)
2. In MobileLayout directly

This caused two overlapping command menus to open when pressing Ctrl+K
in mobile view, with keyboard input going to the background menu.

The fix removes the duplicate CommandPalette from MobileLayout since
LayoutHotkeys already provides it for all layouts (both desktop and mobile).

Fixes #1666

Co-authored-by: Kai Gritun <kai@kaigritun.com>

.github/workflows/publish-alpha.yml

@@ -0,0 +1,200 @@
+# Alpha builds published to Cloudflare R2 with date versioning (e.g. 1.0.0-alpha-20260205).
+# Required repo secrets: R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY (from R2 API token in Cloudflare dashboard).
+name: Publish Alpha
+
+on:
+    workflow_dispatch:
+        inputs:
+            version:
+                description: 'Semantic version number (e.g., 1.0.0) - alpha suffix will be added automatically'
+                required: false
+                type: string
+    schedule:
+        # Run at 3:00 AM PST daily (11:00 UTC; PST = UTC-8)
+        - cron: '0 11 * * *'
+
+jobs:
+    check-new-commits:
+        runs-on: ubuntu-latest
+        outputs:
+            has_new_commits: ${{ steps.manual.outputs.has_new_commits || steps.check.outputs['has-new-commits'] }}
+        steps:
+            - name: Set has new commits (manual trigger)
+              id: manual
+              if: github.event_name == 'workflow_dispatch'
+              run: echo "has_new_commits=true" >> "$GITHUB_OUTPUT"
+
+            - name: Check for new commits (24 hr interval)
+              id: check
+              if: github.event_name != 'workflow_dispatch'
+              uses: adriangl/check-new-commits-action@v1
+              with:
+                  token: ${{ secrets.GITHUB_TOKEN }}
+                  seconds: 86400
+
+    prepare:
+        needs: check-new-commits
+        if: needs.check-new-commits.outputs.has_new_commits == 'true'
+        runs-on: ubuntu-latest
+        outputs:
+            version: ${{ steps.version.outputs.version }}
+        steps:
+            - name: Checkout git repo
+              uses: actions/checkout@v1
+
+            - name: Install Node and PNPM
+              uses: pnpm/action-setup@v4.1.0
+              with:
+                  version: 9
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Set date-based alpha version
+              id: version
+              shell: pwsh
+              run: |
+                  $inputVersion = "${{ github.event.inputs.version }}"
+                  Write-Host "Input version: $inputVersion"
+
+                  if ($inputVersion -eq "" -or $inputVersion -eq "null") {
+                      # No input version provided (scheduled run or manual without input), auto-increment patch version
+                      Write-Host "No version provided, auto-incrementing patch version..."
+
+                      $currentVersion = (Get-Content package.json | ConvertFrom-Json).version
+                      Write-Host "Current version: $currentVersion"
+
+                      $cleanVersion = $currentVersion -replace '-.*$', ''
+                      $versionParts = $cleanVersion.Split('.')
+                      if ($versionParts.Length -ne 3) {
+                          Write-Error "Current version format is invalid: $cleanVersion"
+                          exit 1
+                      }
+
+                      $major = [int]$versionParts[0]
+                      $minor = [int]$versionParts[1]
+                      $patch = [int]$versionParts[2]
+                      $newPatch = $patch + 1
+                      $inputVersion = "$major.$minor.$newPatch"
+                      Write-Host "Auto-generated version: $inputVersion"
+                  } else {
+                      # Validate semantic version format (major.minor.patch)
+                      $versionPattern = '^\d+\.\d+\.\d+$'
+                      if ($inputVersion -notmatch $versionPattern) {
+                          Write-Error "Invalid version format. Expected semantic version (e.g., 1.0.0), got: $inputVersion"
+                          exit 1
+                      }
+                  }
+
+                  # Date in YYYYMMDD (PST / America/Los_Angeles)
+                  $pst = [TimeZoneInfo]::FindSystemTimeZoneById('America/Los_Angeles')
+                  $dateInPst = [TimeZoneInfo]::ConvertTimeFromUtc([DateTime]::UtcNow, $pst)
+                  $dateStr = $dateInPst.ToString("yyyyMMdd")
+                  $alphaVersion = "$inputVersion-alpha-$dateStr"
+                  Write-Host "Alpha version: $alphaVersion"
+
+                  # Update package.json
+                  $packageJson = Get-Content package.json | ConvertFrom-Json
+                  $packageJson.version = $alphaVersion
+                  $packageJson | ConvertTo-Json -Depth 10 | Set-Content package.json
+
+                  echo "version=$alphaVersion" >> $env:GITHUB_OUTPUT
+
+    cleanup:
+        needs: prepare
+        runs-on: ubuntu-latest
+        env:
+            AWS_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
+            AWS_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
+            R2_ENDPOINT_URL: ${{ secrets.R2_ENDPOINT_URL }}
+        steps:
+            - name: Delete all objects in R2 bucket
+              run: |
+                  aws s3 rm s3://feishin-nightly --recursive --endpoint-url $R2_ENDPOINT_URL
+
+    publish:
+        needs: [prepare, cleanup]
+        runs-on: ${{ matrix.os }}
+        env:
+            AWS_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
+            AWS_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
+
+        strategy:
+            matrix:
+                os: [windows-latest, macos-latest, ubuntu-latest]
+
+        steps:
+            - name: Checkout git repo
+              uses: actions/checkout@v1
+
+            - name: Install Node and PNPM
+              uses: pnpm/action-setup@v4.1.0
+              with:
+                  version: 9
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Set version from prepare job
+              shell: pwsh
+              run: |
+                  $version = "${{ needs.prepare.outputs.version }}"
+                  Write-Host "Setting version: $version"
+                  $packageJson = Get-Content package.json | ConvertFrom-Json
+                  $packageJson.version = $version
+                  $packageJson | ConvertTo-Json -Depth 10 | Set-Content package.json
+
+            - name: Build and Publish to R2 (Windows)
+              if: matrix.os == 'windows-latest'
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win:alpha
+                  on_retry_command: pnpm cache delete
+
+            - name: Build and Publish to R2 (Windows ARM64)
+              if: matrix.os == 'windows-latest'
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64:alpha
+                  on_retry_command: pnpm cache delete
+
+            - name: Build and Publish to R2 (macOS)
+              if: matrix.os == 'macos-latest'
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:mac:alpha
+                  on_retry_command: pnpm cache delete
+
+            - name: Build and Publish to R2 (Linux)
+              if: matrix.os == 'ubuntu-latest'
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:linux:alpha
+                  on_retry_command: pnpm cache delete
+
+            - name: Build and Publish to R2 (Linux ARM64)
+              if: matrix.os == 'ubuntu-latest'
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:linux-arm64:alpha
+                  on_retry_command: pnpm cache delete

.github/workflows/publish-beta.yml

@@ -155,6 +155,19 @@ jobs:
                       pnpm run publish:win:beta
                   on_retry_command: pnpm cache delete
 
+            - name: Build and Publish releases (Windows ARM64)
+              if: matrix.os == 'windows-latest'
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64:beta
+                  on_retry_command: pnpm cache delete
+
             - name: Build and Publish releases (macOS)
               if: matrix.os == 'macos-latest'
               env:

.github/workflows/publish-pr.yml

@@ -50,6 +50,16 @@ jobs:
                   command: |
                       pnpm run package:win:pr
 
+            - name: Build for Windows (ARM64)
+              if: ${{ matrix.os == 'windows-latest' }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run package:win-arm64:pr
+
             - name: Build for Linux
               if: ${{ matrix.os == 'ubuntu-latest' }}
               uses: nick-invision/retry@v2.8.2

.github/workflows/publish-windows.yml

@@ -33,3 +33,15 @@ jobs:
                   command: |
                       pnpm run publish:win
                   on_retry_command: pnpm cache delete
+
+            - name: Build and Publish releases (ARM64)
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64
+                  on_retry_command: pnpm cache delete

.github/workflows/publish-winget.yml

@@ -16,6 +16,5 @@ jobs:
       - uses: vedantmgoyal9/winget-releaser@main
         with:
           identifier: jeffvli.Feishin
-          installers-regex: 'Feishin-*-win-x64\.exe'
+          installers-regex: 'Feishin-*-win-(x64|arm64)\.exe'
           token: ${{ secrets.WINGET_ACC_TOKEN }}
-          

.github/workflows/publish.yml

@@ -35,6 +35,19 @@ jobs:
                       pnpm run publish:win
                   on_retry_command: pnpm cache delete
 
+            - name: Build and Publish releases (Windows ARM64)
+              if: matrix.os == 'windows-latest'
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64
+                  on_retry_command: pnpm cache delete
+
             - name: Build and Publish releases (macOS)
               if: matrix.os == 'macos-latest'
               env:

electron-builder-alpha.yml

@@ -0,0 +1,59 @@
+appId: org.jeffvli.feishin
+productName: Feishin
+artifactName: ${productName}-${version}-${os}-${arch}.${ext}
+electronVersion: 39.4.0
+directories:
+    buildResources: assets
+files:
+    - 'out/**/*'
+    - 'package.json'
+extraResources:
+    - assets/**
+asarUnpack:
+    - resources/**
+win:
+    target:
+        - zip
+        - nsis
+    icon: assets/icons/icon.png
+
+nsis:
+    allowToChangeInstallationDirectory: true
+    oneClick: false
+    shortcutName: ${productName}
+    uninstallDisplayName: ${productName}
+    createDesktopShortcut: always
+
+mac:
+    target:
+        target: default
+        arch:
+            - arm64
+            - x64
+    icon: assets/icons/icon.icns
+    type: distribution
+    hardenedRuntime: true
+    entitlements: assets/entitlements.mac.plist
+    entitlementsInherit: assets/entitlements.mac.plist
+    gatekeeperAssess: false
+    notarize: false
+
+dmg:
+    contents: [{ x: 130, y: 220 }, { x: 410, y: 220, type: link, path: /Applications }]
+
+linux:
+    target:
+        - AppImage
+        - deb
+        - tar.xz
+    category: AudioVideo;Audio;Player
+    icon: assets/icons/icon.png
+    artifactName: ${productName}-${os}-${arch}.${ext}
+
+npmRebuild: false
+
+publish:
+    provider: s3
+    bucket: feishin-nightly
+    channel: alpha
+    endpoint: https://065f090c64de2dc707dd70ac72db9669.r2.cloudflarestorage.com

package.json

@@ -1,6 +1,6 @@
 {
     "name": "feishin",
-    "version": "1.4.0",
+    "version": "1.4.2",
     "description": "A modern self-hosted music player.",
     "keywords": [
         "subsonic",
@@ -30,7 +30,7 @@
         "dev:watch": "electron-vite dev --watch",
         "i18next": "i18next -c src/i18n/i18next-parser.config.js",
         "postinstall": "electron-builder install-app-deps",
-        "lint": "pnpm run lint-code && pnpm run lint-styles",
+        "lint": "pnpm run typecheck && pnpm run lint-code && pnpm run lint-styles",
         "lint-code": "eslint --max-warnings=0 --cache .",
         "lint-code:fix": "eslint --cache --fix .",
         "lint-styles": "stylelint --max-warnings=0 'src/**/*.{css,scss}'",
@@ -44,14 +44,22 @@
         "package:mac": "pnpm run build && electron-builder --mac",
         "package:mac:pr": "pnpm run build && electron-builder --mac --publish never",
         "package:win": "pnpm run build && electron-builder --win",
+        "package:win-arm64:pr": "pnpm run build && electron-builder --win --arm64 --publish never",
         "package:win:pr": "pnpm run build && electron-builder --win --publish never",
         "publish:linux": "pnpm run build && electron-builder --publish always --linux",
         "publish:linux-arm64": "pnpm run build && electron-builder --publish always --linux --arm64",
+        "publish:linux-arm64:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --linux --arm64",
         "publish:linux-arm64:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --linux --arm64",
+        "publish:linux:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --linux",
         "publish:linux:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --linux",
         "publish:mac": "pnpm run build && electron-builder --publish always --mac",
+        "publish:mac:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --mac",
         "publish:mac:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --mac",
         "publish:win": "pnpm run build && electron-builder --publish always --win",
+        "publish:win-arm64": "pnpm run build && electron-builder --publish always --win --arm64",
+        "publish:win-arm64:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --win --arm64",
+        "publish:win-arm64:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --win --arm64",
+        "publish:win:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --win",
         "publish:win:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --win",
         "start": "electron-vite preview",
         "typecheck": "pnpm run typecheck:node && pnpm run typecheck:web",

src/i18n/locales/en.json

@@ -418,13 +418,17 @@
         "albumArtistDetail": {
             "about": "About {{artist}}",
             "appearsOn": "appears on",
+            "favoriteSongs": "favorite songs",
             "groupingTypeAll": "all release types",
             "groupingTypePrimary": "primary release types",
             "recentReleases": "recent releases",
             "viewDiscography": "view discography",
             "relatedArtists": "related $t(entity.artist, {\"count\": 2})",
             "topSongs": "top songs",
+            "topSongsCommunity": "community",
             "topSongsFrom": "top songs from {{title}}",
+            "topSongsPersonal": "personal",
+            "favoriteSongsFrom": "favorite songs from {{title}}",
             "viewAll": "view all",
             "viewAllTracks": "view all $t(entity.track, {\"count\": 2})"
         },
@@ -444,6 +448,11 @@
         "radioList": {
             "title": "radio stations"
         },
+        "releasenotes": {
+            "commitsSinceStable": "commits since {{stable}}",
+            "noNewCommits": "no new commits in this range",
+            "noStableReleaseToCompare": "no stable release available to compare with"
+        },
         "favorites": {
             "title": "$t(entity.favorite, {\"count\": 2})"
         },
@@ -741,10 +750,11 @@
         "customFontPath_description": "sets the path to the custom font to use for the application",
         "customFontPath": "custom font path",
         "disableAutomaticUpdates": "disable automatic updates",
+        "releaseChannel_optionAlpha": "alpha (nightly)",
         "releaseChannel_optionBeta": "beta",
         "releaseChannel_optionLatest": "latest",
         "releaseChannel": "release channel",
-        "releaseChannel_description": "choose between stable releases or beta releases for automatic updates",
+        "releaseChannel_description": "choose between stable, beta, or alpha (nightly) releases for automatic updates",
         "disableLibraryUpdateOnStartup": "disable checking for new versions on startup",
         "discordApplicationId_description": "the application id for {{discord}} rich presence (defaults to {{defaultId}})",
         "discordApplicationId": "{{discord}} application id",
@@ -932,6 +942,8 @@
         "showLyricsInSidebar": "show lyrics in player sidebar",
         "showRatings_description": "controls if the star ratings feature shows up in the interface",
         "showRatings": "show star ratings",
+        "blurExplicitImages": "blur explicit images",
+        "blurExplicitImages_description": "album and song artwork tagged as explicit will be blurred",
         "enableGridMultiSelect": "enable grid multi-select",
         "enableGridMultiSelect_description": "when enabled, allows selecting multiple items in grid views. when disabled, clicking grid item images will navigate to the item page",
         "showVisualizerInSidebar_description": "a panel will be added to the player sidebar that displays the visualizer",
@@ -1133,6 +1145,7 @@
                 "year": "$t(common.year)"
             },
             "view": {
+                "detail": "detail",
                 "grid": "grid",
                 "list": "list",
                 "table": "table"

src/i18n/locales/pl.json

@@ -162,7 +162,8 @@
         "mood": "nastrój",
         "example": "przykład",
         "filter_multiple": "multi",
-        "filter_single": "single"
+        "filter_single": "single",
+        "rename": "zmień nazwę"
     },
     "entity": {
         "genre_one": "gatunek",
@@ -512,7 +513,8 @@
             "shared": "udostępniono $t(entity.playlist, {\"count\": 2})",
             "myLibrary": "Moja biblioteka",
             "favorites": "$t(entity.favorite, {\"count\": 2})",
-            "radio": "$t(entity.radioStation, {\"count\": 2})"
+            "radio": "$t(entity.radioStation, {\"count\": 2})",
+            "collections": "kolekcje"
         },
         "home": {
             "mostPlayed": "najczęściej odtwarzane",
@@ -601,6 +603,14 @@
         },
         "radioList": {
             "title": "stacje radiowe"
+        },
+        "windowBar": {
+            "paused": "(Wstrzymane) ",
+            "privateMode": "(Tryb prywatny)"
+        },
+        "collections": {
+            "overrideExisting": "nadpisz istniejące",
+            "saveAsCollection": "zapisz jako kolekcję"
         }
     },
     "player": {
@@ -984,7 +994,10 @@
         "enableGridMultiSelect_description": "gdy włączone, pozwala na wybieranie wielu elementów w widokach siatki, gdy wyłączone, klikanie obrazów elementów siatki będzie przenosić na stronę elementu",
         "enableGridMultiSelect": "wybieranie wielu w siatce",
         "sidebarPlaylistSorting_description": "pozwala na ręczne sortowanie playlist w bocznym pasku używając przeciągania i upuszczania zamiast używania domyślnej kolejności serwera",
-        "sidebarPlaylistSorting": "sortowanie playlist w bocznym pasku"
+        "sidebarPlaylistSorting": "sortowanie playlist w bocznym pasku",
+        "sidebarPlaylistListFilterRegex_description": "ukryj playlisty w pasku bocznym pasujące do wyrażenia regularnego",
+        "sidebarPlaylistListFilterRegex_placeholder": "np. ^Miks codzienny.^",
+        "sidebarPlaylistListFilterRegex": "filtr playlist regex"
     },
     "table": {
         "config": {

src/i18n/locales/zh-Hans.json

@@ -150,7 +150,12 @@
         "tableColumns": "表格列",
         "itemsMore": "{{count}} 更多",
         "countSelected": "已选择{{count}}项",
-        "retry": "重试"
+        "retry": "重试",
+        "example": "示例",
+        "filter_single": "单项",
+        "mood": "氛围",
+        "rename": "重命名",
+        "filter_multiple": "多项"
     },
     "entity": {
         "albumArtist_other": "专辑艺术家",
@@ -170,7 +175,9 @@
         "genreWithCount_other": "{{count}} 种流派",
         "trackWithCount_other": "{{count}} 首曲目",
         "play_other": "{{count}} 次播放",
-        "song_other": "歌曲"
+        "song_other": "歌曲",
+        "radioStation_other": "广播电台",
+        "radioStationWithCount_other": "{{count}} 个广播电台"
     },
     "player": {
         "repeat_all": "循环全部",
@@ -187,7 +194,7 @@
         "shuffle": "播放（随机）",
         "playbackFetchNoResults": "未找到歌曲",
         "playbackFetchInProgress": "正在加载歌曲…",
-        "addNext": "下一首播放",
+        "addNext": "下一个",
         "playbackFetchCancel": "请稍等…关闭通知以取消操作",
         "play": "播放",
         "repeat_off": "循环关闭",
@@ -197,7 +204,7 @@
         "queue_moveToTop": "将所选项移至底部",
         "queue_moveToBottom": "将所选项移至顶部",
         "shuffle_off": "禁用随机播放",
-        "addLast": "上一曲",
+        "addLast": "最后",
         "mute": "静音",
         "skip_forward": "向前跳过",
         "playbackSpeed": "播放速度",
@@ -206,7 +213,12 @@
         "viewQueue": "查看播放队列",
         "saveQueueToServer": "将播放队列保存到服务器",
         "restoreQueueFromServer": "从服务器恢复播放队列",
-        "lyrics": "歌词"
+        "lyrics": "歌词",
+        "addLastShuffled": "最后（随机）",
+        "addNextShuffled": "下一个（随机）",
+        "artistRadio": "艺术家电台",
+        "holdToShuffle": "按住即可随机",
+        "trackRadio": "追踪广播"
     },
     "setting": {
         "crossfadeStyle_description": "选择用于音频播放器的淡入淡出风格",
@@ -333,7 +345,7 @@
         "useSystemTheme_description": "使用系统定义的浅色或深色主题",
         "playButtonBehavior_optionAddNext": "$t(player.addNext)",
         "lyricFetch_description": "从多个互联网源获取歌词",
-        "lyricFetchProvider_description": "选择歌词源。 歌词源顺序与查询顺序一致",
+        "lyricFetchProvider_description": "选择要从中获取歌词的提供商",
         "sidePlayQueueStyle_optionDetached": "不吸附",
         "hotkey_zoomOut": "缩小",
         "hotkey_unfavoriteCurrentSong": "取消收藏$t(common.currentSong)",
@@ -454,7 +466,7 @@
         "releaseChannel": "发布通道",
         "releaseChannel_description": "选择稳定版本或测试版以进行自动更新",
         "mediaSession": "启用媒体会话",
-        "mediaSession_description": "启用 Windows 媒体会话集成，在系统音量覆盖和锁定屏幕中显示媒体控件和元数据（仅限 Windows）",
+        "mediaSession_description": "启用媒体会话集成，在系统音量叠加层和锁屏界面显示媒体控件和元数据",
         "exportImportSettings_control_description": "通过 JSON 导出和导入设置",
         "exportImportSettings_control_exportText": "导出设置",
         "exportImportSettings_control_importText": "导入设置",
@@ -515,7 +527,43 @@
         "playerbarWaveformAlign": "波形对齐方式",
         "playerbarWaveformBarWidth": "波形宽度",
         "playerbarWaveformGap": "波形间距",
-        "transcode": "启用转码功能"
+        "transcode": "启用转码功能",
+        "useThemeAccentColor_description": "使用所选主题中定义的主色，而不是自定义强调色",
+        "homeFeatureStyle_optionSingle": "单项",
+        "autoDJ": "自动DJ",
+        "autoDJ_itemCount": "项目数量",
+        "autoDJ_itemCount_description": "启用自动 DJ 功能后，尝试添加到队列中的项目数",
+        "autoDJ_timing": "定时",
+        "autoDJ_timing_description": "自动 DJ 触发前队列中剩余的歌曲数量",
+        "crossfadeStyle": "交叉渐变风格",
+        "discordRichPresence": "{{discord}} rich presence",
+        "homeFeatureStyle_description": "控制首页特色轮播图的样式",
+        "homeFeatureStyle": "首页特色旋转样式",
+        "homeFeatureStyle_optionMultiple": "多样",
+        "hotkey_listNavigateToPage": "列表导航至项目页面",
+        "hotkey_listPlayDefault": "播放列表",
+        "hotkey_listPlayLast": "播放列表最后",
+        "hotkey_listPlayNext": "播放列表下一个",
+        "hotkey_listPlayNow": "播放列表现在",
+        "pathReplace": "文件路径替换",
+        "pathReplace_description": "替换服务器的默认文件路径",
+        "pathReplace_optionRemovePrefix": "移除前缀",
+        "pathReplace_optionAddPrefix": "添加前缀",
+        "playerFilters": "从队列中筛选歌曲",
+        "playerFilters_description": "根据以下条件，忽略添加到队列中的歌曲",
+        "artistRadioCount_description": "设置艺术家电台和曲目电台要获取的歌曲数量",
+        "artistRadioCount": "艺术家/曲目电台数量",
+        "imageResolution_optionItemCard": "项目卡",
+        "playerbarWaveformRadius": "波形半径",
+        "enableGridMultiSelect": "启用网格多选",
+        "enableGridMultiSelect_description": "启用后，允许在网格视图中选择多个项目。禁用后，点击网格项目图像将跳转到项目页面",
+        "sidebarPlaylistSorting_description": "允许在侧边栏中使用拖放操作手动对播放列表进行排序，而不是使用默认的服务器顺序",
+        "sidebarPlaylistSorting": "侧边栏播放列表排序",
+        "sidebarPlaylistListFilterRegex_description": "隐藏侧边栏中与此正则表达式匹配的播放列表",
+        "sidebarPlaylistListFilterRegex_placeholder": "例如：^每日精选*",
+        "sidebarPlaylistListFilterRegex": "播放列表筛选正则表达式",
+        "queryBuilder": "查询构建器",
+        "queryBuilderCustomFields": "自定义字段"
     },
     "error": {
         "remotePortWarning": "重启服务器使新端口生效",
@@ -568,7 +616,7 @@
         "biography": "个人简介",
         "songCount": "歌曲数量",
         "random": "随机",
-        "lastPlayed": "上次播放过",
+        "lastPlayed": "最后播放",
         "toYear": "截止年份",
         "fromYear": "起始年份",
         "criticRating": "评论家评分",
@@ -582,7 +630,7 @@
         "recentlyUpdated": "最近更新",
         "isRated": "已评分",
         "isRecentlyPlayed": "最近播放过",
-        "channels": "$t(common.channel_other)",
+        "channels": "$t(common.channel, {\"count\": 2})",
         "owner": "$t(common.owner)",
         "genre": "$t(entity.genre, {\"count\": 1})",
         "note": "注释",
@@ -591,7 +639,8 @@
         "disc": "碟片",
         "duration": "时长",
         "album": "$t(entity.album, {\"count\": 1})",
-        "explicitStatus": "$t(common.explicitStatus)"
+        "explicitStatus": "$t(common.explicitStatus)",
+        "sortName": "排序名称"
     },
     "page": {
         "sidebar": {
@@ -609,7 +658,8 @@
             "shared": "共享$t(entity.playlist, {\"count\": 2})",
             "myLibrary": "我的媒体库",
             "favorites": "$t(entity.favorite, {\"count\": 2})",
-            "radio": "$t(entity.radioStation, {\"count\": 2})"
+            "radio": "$t(entity.radioStation, {\"count\": 2})",
+            "collections": "合集"
         },
         "fullscreenPlayer": {
             "config": {
@@ -649,7 +699,8 @@
             "privateModeOn": "开启私人模式",
             "multipleMusicFolders": "已选择{{count}}个媒体库",
             "noMusicFolder": "未选择任何音乐库",
-            "selectMusicFolder": "选择媒体库"
+            "selectMusicFolder": "选择媒体库",
+            "commandPalette": "打开命令面板"
         },
         "home": {
             "mostPlayed": "最多播放",
@@ -687,7 +738,8 @@
             "discord": "Discord",
             "logger": "日志记录器",
             "queryBuilder": "查询构建器",
-            "lyricsDisplay": "歌词显示"
+            "lyricsDisplay": "歌词显示",
+            "playerFilters": "播放筛选器"
         },
         "globalSearch": {
             "commands": {
@@ -756,7 +808,8 @@
             "about": "关于{{artist}}",
             "appearsOn": "出现在",
             "viewAll": "查看全部",
-            "groupingTypeAll": "所有发行类型"
+            "groupingTypeAll": "所有发行类型",
+            "groupingTypePrimary": "首选发布类型"
         },
         "itemDetail": {
             "copyPath": "将路径复制到剪贴板",
@@ -779,6 +832,17 @@
         },
         "folderList": {
             "title": "$t(entity.folder, {\"count\": 2})"
+        },
+        "radioList": {
+            "title": "广播电台"
+        },
+        "windowBar": {
+            "paused": "(暂停) ",
+            "privateMode": "(私人模式)"
+        },
+        "collections": {
+            "overrideExisting": "覆盖现有",
+            "saveAsCollection": "保存为集合"
         }
     },
     "form": {
@@ -801,9 +865,9 @@
             "input_url": "url",
             "input_preferInstantMixDescription": "仅使用即时混音来获取类似的歌曲。如果您有修改此行为的插件，则很有用",
             "input_preferInstantMix": "首选即时混音",
-            "input_preferRemoteUrl": "首选公共 URL",
-            "input_remoteUrl": "公共 URL",
-            "input_remoteUrlPlaceholder": "可选：对外功能的公共 URL"
+            "input_preferRemoteUrl": "首选公共 url",
+            "input_remoteUrl": "公共 url",
+            "input_remoteUrlPlaceholder": "可选：对外功能的公共 url"
         },
         "addToPlaylist": {
             "success": "添加$t(entity.trackWithCount, {\"count\": {{message}} })到$t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
@@ -865,7 +929,9 @@
         "createRadioStation": {
             "input_homepageUrl": "首页地址",
             "input_name": "名称",
-            "input_streamUrl": "串流地址"
+            "input_streamUrl": "串流地址",
+            "success": "电台创建成功",
+            "title": "创建广播电台"
         },
         "lyricsExport": {
             "export": "导出歌词",
@@ -882,7 +948,9 @@
             "input_maxYear": "截止年份",
             "input_minYear": "起始年份",
             "input_played_optionUnplayed": "仅未播放的曲目",
-            "input_played_optionPlayed": "仅已播放的曲目"
+            "input_played_optionPlayed": "仅已播放的曲目",
+            "input_limit": "有多少首歌？",
+            "input_played": "播放筛选器"
         }
     },
     "table": {
@@ -916,7 +984,8 @@
                 "advancedSettings": "高级设置",
                 "autosize": "自动调整大小",
                 "horizontalBorders": "行边框",
-                "verticalBorders": "列边框"
+                "verticalBorders": "列边框",
+                "showHeader": "显示标题"
             },
             "view": {
                 "table": "表格",
@@ -940,10 +1009,10 @@
                 "biography": "$t(common.biography)",
                 "owner": "$t(common.owner)",
                 "path": "$t(common.path)",
-                "channels": "$t(common.channel_other)",
+                "channels": "$t(common.channel, {\"count\": 2})",
                 "playCount": "播放次数",
                 "bitrate": "$t(common.bitrate)",
-                "actions": "$t(common.action_other)",
+                "actions": "$t(common.action, {\"count\": 2})",
                 "genre": "$t(entity.genre, {\"count\": 1})",
                 "discNumber": "碟片编号",
                 "favorite": "$t(common.favorite)",
@@ -956,7 +1025,9 @@
                 "image": "图片",
                 "bitDepth": "$t(common.bitDepth)",
                 "sampleRate": "$t(common.sampleRate)",
-                "genreBadge": "$t(entity.genre, {\"count\": 1})（徽章）"
+                "genreBadge": "$t(entity.genre, {\"count\": 1})（徽章）",
+                "composer": "作曲家",
+                "titleArtist": "$t(common.title) (艺术家)"
             }
         },
         "column": {
@@ -980,7 +1051,7 @@
             "genre": "$t(entity.genre, {\"count\": 1})",
             "albumArtist": "专辑艺术家",
             "path": "路径",
-            "channels": "$t(common.channel_other)",
+            "channels": "$t(common.channel, {\"count\": 2})",
             "discNumber": "碟片",
             "size": "$t(common.size)",
             "codec": "$t(common.codec)",
@@ -1011,7 +1082,10 @@
             "mixtape": "混音专辑",
             "remix": "再混音（Remix）",
             "soundtrack": "原声带",
-            "audioDrama": "广播剧"
+            "audioDrama": "广播剧",
+            "djMix": "DJ混音",
+            "fieldRecording": "现场录制",
+            "spokenWord": "访谈"
         }
     },
     "filterOperator": {
@@ -1032,7 +1106,8 @@
         "notContains": "不包含",
         "startsWith": "以…开头",
         "inTheRangeDate": "在（日期）范围内",
-        "notInPlaylist": "不在…中"
+        "notInPlaylist": "不在…中",
+        "notInTheLast": "不在最后"
     },
     "datetime": {
         "minuteShort": "分",
@@ -1085,6 +1160,85 @@
         "builtIn": "内置",
         "colors": "颜色",
         "gradient": "渐变",
-        "miscellaneousSettings": "杂项设置"
+        "miscellaneousSettings": "杂项设置",
+        "options": {
+            "channelLayout": {
+                "single": "单项"
+            },
+            "mode": {
+                "0": "[0] 离散频率"
+            },
+            "colorMode": {
+                "gradient": "渐变"
+            },
+            "gradient": {
+                "classic": "经典",
+                "prism": "棱镜",
+                "rainbow": "彩虹"
+            },
+            "frequencyScale": {
+                "none": "无"
+            },
+            "weightingFilter": {
+                "none": "无",
+                "a": "A",
+                "b": "B",
+                "c": "C",
+                "d": "D",
+                "z": "Z"
+            }
+        },
+        "cyclePresets": "循环预设",
+        "includeAllPresets": "包含所有预设",
+        "ignoredPresets": "忽略预设",
+        "selectedPresets": "已选预设",
+        "randomizeNextPreset": "随机化下一个预设",
+        "blendTime": "混合时间",
+        "barSpace": "住间距",
+        "colorStops": "颜色停止",
+        "level": "等级",
+        "colorMode": "颜色模式",
+        "gradientLeft": "左侧渐变",
+        "gradientRight": "右侧渐变",
+        "fft": "FFT",
+        "fftSize": "FFT 大小",
+        "smoothing": "平滑",
+        "frequencyRangeAndScaling": "频率范围和缩放",
+        "minimumFrequency": "最低频率",
+        "maximumFrequency": "最大频率",
+        "frequencyScale": "频率尺度",
+        "sensitivity": "灵敏度",
+        "weightingFilter": "加权滤波器",
+        "minimumDecibels": "最低分贝",
+        "maximumDecibels": "最大分贝",
+        "linearAmplitude": "线性振幅",
+        "linearBoost": "线性增强",
+        "peakBehavior": "峰值行为",
+        "showPeaks": "显示峰值",
+        "fadePeaks": "峰值淡出",
+        "peakLine": "峰值线条",
+        "gravity": "重力",
+        "peakFadeTime": "峰值淡出时间（毫秒）",
+        "peakHoldTime": "峰值保持时间（毫秒）",
+        "radialSpectrum": "圆形频谱",
+        "radial": "径向",
+        "radialInvert": "径向反转",
+        "spinSpeed": "旋转速度",
+        "radius": "半径",
+        "reflexMirror": "反射镜",
+        "reflexFit": "反射贴合",
+        "reflexRatio": "反射比率",
+        "reflexAlpha": "反射Alpha",
+        "reflexBrightness": "反射亮度",
+        "mirror": "镜像",
+        "lowResolution": "低分辨率",
+        "splitGradient": "渐变分割",
+        "showScaleX": "显示比例尺 X",
+        "noteLabels": "笔记标签",
+        "showScaleY": "显示比例尺 Y"
+    },
+    "queryBuilder": {
+        "standardTags": "标准标签",
+        "customTags": "自定义标签"
     }
 }

src/i18n/locales/zh-Hant.json

@@ -20,7 +20,7 @@
         "ascending": "升冪",
         "disable": "禁用",
         "disc": "光碟",
-        "dismiss": "忽略",
+        "dismiss": "不再顯示",
         "duration": "時長",
         "edit": "編輯",
         "enable": "啟用",
@@ -113,7 +113,9 @@
         "mood": "情緒",
         "view": "查看",
         "rename": "重新命名",
-        "itemsMore": "{{count}} 更多"
+        "itemsMore": "{{count}} 更多",
+        "filter_single": "單選",
+        "filter_multiple": "複選"
     },
     "error": {
         "endpointNotImplementedError": "{{serverType}} 尚未實現端點 {{endpoint}}",
@@ -338,6 +340,9 @@
         },
         "radioList": {
             "title": "電台"
+        },
+        "windowBar": {
+            "paused": "(暫停) "
         }
     },
     "player": {
@@ -490,7 +495,7 @@
         "scrobble_description": "在你的媒體伺服器中記錄播放資訊",
         "showSkipButton": "顯示跳過按鈕",
         "showSkipButton_description": "在播放條上顯示/隱藏跳過按鈕",
-        "sidebarPlaylistList": "側邊欄歌單清單",
+        "sidebarPlaylistList": "側邊欄播放清單列表",
         "sidebarCollapsedNavigation": "側邊欄（已折疊）導航",
         "sidebarCollapsedNavigation_description": "在折疊的側邊欄中顯示或隱藏導航",
         "sidebarConfiguration": "側邊欄設定",
@@ -709,7 +714,8 @@
         "pathReplace": "檔案路徑替換",
         "pathReplace_description": "替換您伺服器的預設檔案路徑",
         "pathReplace_optionRemovePrefix": "移除前綴",
-        "pathReplace_optionAddPrefix": "增加前綴"
+        "pathReplace_optionAddPrefix": "增加前綴",
+        "sidebarPlaylistSorting": "側邊欄播放清單排序"
     },
     "table": {
         "config": {
@@ -1049,7 +1055,8 @@
             "live": "Live",
             "mixtape": "混音帶",
             "remix": "Remix",
-            "soundtrack": "原聲帶"
+            "soundtrack": "原聲帶",
+            "spokenWord": "訪談"
         }
     },
     "dragDropZone": {

src/main/index.ts

@@ -18,7 +18,7 @@ import {
 } from 'electron';
 import electronLocalShortcut from 'electron-localshortcut';
 import log from 'electron-log/main';
-import { autoUpdater } from 'electron-updater';
+import { AppImageUpdater, autoUpdater, MacUpdater, NsisUpdater } from 'electron-updater';
 import { access, constants } from 'fs';
 import path, { join } from 'path';
 
@@ -40,40 +40,111 @@ import './features';
 
 import { PlayerType, TitleTheme } from '/@/shared/types/types';
 
-export default class AppUpdater {
+const ALPHA_UPDATER_CONFIG: {
+    bucket: string;
+    channel: string;
+    endpoint: string;
+    provider: 's3';
+} = {
+    bucket: '',
+    channel: 'alpha',
+    endpoint: 'https://feishin-nightly-bucket.jeffvli.org',
+    provider: 's3',
+};
+
+type UpdaterInstance = AppImageUpdater | MacUpdater | NsisUpdater | typeof autoUpdater;
+
+class AlphaAppUpdater {
     constructor() {
+        const updater = createAlphaUpdaterInstance();
         log.transports.file.level = 'info';
-        autoUpdater.logger = autoUpdaterLogInterface;
+        updater.logger = autoUpdaterLogInterface;
+        updater.channel = ALPHA_UPDATER_CONFIG.channel;
+        updater.allowPrerelease = true;
+        updater.disableDifferentialDownload = true;
+        updater.allowDowngrade = true;
+        updater.autoInstallOnAppQuit = true;
+        updater.autoRunAppAfterInstall = true;
+        updater.checkForUpdatesAndNotify();
+    }
+}
 
-        const isBetaVersion = packageJson.version.includes('-beta');
-        const releaseChannel = store.get('release_channel');
-        const isNotConfigured = !releaseChannel;
-
-        console.log('Release channel: ', releaseChannel);
-        console.log('Is beta version: ', isBetaVersion);
-
-        if (isNotConfigured) {
-            console.log(
-                'Release channel not configured, setting to ',
-                isBetaVersion ? 'beta' : 'latest',
-            );
-            store.set('release_channel', isBetaVersion ? 'beta' : 'latest');
-        }
-
-        if (releaseChannel === 'beta') {
-            autoUpdater.channel = 'beta';
-            autoUpdater.allowPrerelease = true;
-            autoUpdater.disableDifferentialDownload = true;
-        } else if (releaseChannel === 'latest') {
-            autoUpdater.channel = 'latest';
-            autoUpdater.allowDowngrade = true;
-            autoUpdater.allowPrerelease = false;
+class AppUpdater {
+    constructor() {
+        const effectiveChannel = store.get('release_channel') as string;
+        console.log('Effective update channel:', effectiveChannel);
+        if (effectiveChannel === 'alpha') {
+            return new AlphaAppUpdater();
         }
 
+        configureAndGetUpdater();
         autoUpdater.checkForUpdatesAndNotify();
     }
 }
 
+function configureAndGetUpdater(): UpdaterInstance {
+    const isBetaVersion = packageJson.version.includes('-beta');
+    const isAlphaVersion = packageJson.version.includes('-alpha');
+    let releaseChannel = store.get('release_channel');
+    const isNotConfigured = !releaseChannel;
+
+    console.log('Release channel:', releaseChannel);
+    console.log('Is beta version:', isBetaVersion);
+    console.log('Is alpha version:', isAlphaVersion);
+    console.log('Is not configured:', isNotConfigured);
+
+    if (isNotConfigured) {
+        console.log('Release channel not configured, setting default channel');
+        const defaultChannel = isAlphaVersion ? 'alpha' : isBetaVersion ? 'beta' : 'latest';
+        store.set('release_channel', defaultChannel);
+        releaseChannel = defaultChannel;
+    }
+
+    const effectiveChannel = store.get('release_channel') as string;
+
+    if (effectiveChannel === 'alpha') {
+        const updater = createAlphaUpdaterInstance();
+        log.transports.file.level = 'info';
+        updater.logger = autoUpdaterLogInterface;
+        updater.channel = ALPHA_UPDATER_CONFIG.channel;
+        updater.allowPrerelease = true;
+        updater.disableDifferentialDownload = true;
+        updater.allowDowngrade = true;
+        updater.autoInstallOnAppQuit = true;
+        updater.autoRunAppAfterInstall = true;
+        return updater;
+    }
+
+    log.transports.file.level = 'info';
+    autoUpdater.logger = autoUpdaterLogInterface;
+    autoUpdater.autoInstallOnAppQuit = true;
+    autoUpdater.autoRunAppAfterInstall = true;
+
+    if (effectiveChannel === 'beta') {
+        autoUpdater.channel = 'beta';
+        autoUpdater.allowPrerelease = true;
+        autoUpdater.disableDifferentialDownload = true;
+    } else {
+        autoUpdater.channel = 'latest';
+        autoUpdater.allowDowngrade = true;
+        autoUpdater.allowPrerelease = false;
+    }
+
+    return autoUpdater;
+}
+
+function createAlphaUpdaterInstance(): AppImageUpdater | MacUpdater | NsisUpdater {
+    if (isMacOS()) {
+        return new MacUpdater(ALPHA_UPDATER_CONFIG);
+    }
+
+    if (isLinux()) {
+        return new AppImageUpdater(ALPHA_UPDATER_CONFIG);
+    }
+
+    return new NsisUpdater(ALPHA_UPDATER_CONFIG);
+}
+
 protocol.registerSchemesAsPrivileged([{ privileges: { bypassCSP: true }, scheme: 'feishin' }]);
 
 process.on('uncaughtException', (error: any) => {
@@ -359,6 +430,36 @@ async function createWindow(first = true): Promise<void> {
         return mainWindow?.webContents.session.clearCache();
     });
 
+    ipcMain.handle(
+        'app-check-for-updates',
+        async (): Promise<{ updateAvailable: boolean; version?: string }> => {
+            if (disableAutoUpdates()) {
+                console.log('Auto updates are disabled');
+                return { updateAvailable: false };
+            }
+
+            try {
+                console.log('Checking for updates');
+                const updater = configureAndGetUpdater();
+                const result = await updater.checkForUpdates();
+                const updateAvailable = result?.isUpdateAvailable ?? false;
+                console.log('Update available:', updateAvailable);
+                if (updateAvailable && store.get('disable_auto_updates') !== true) {
+                    console.log('Downloading update');
+                    updater.downloadUpdate();
+                }
+
+                return {
+                    updateAvailable,
+                    version: result?.updateInfo?.version,
+                };
+            } catch {
+                console.log('Error checking for updates');
+                return { updateAvailable: false };
+            }
+        },
+    );
+
     ipcMain.on('app-restart', () => {
         // Fix for .AppImage
         if (process.env.APPIMAGE) {

src/main/menu.ts

@@ -21,6 +21,14 @@ export default class MenuBuilder {
                     selector: 'orderFrontStandardAboutPanel:',
                 },
                 { type: 'separator' },
+                {
+                    accelerator: 'Command+,',
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-open-settings');
+                    },
+                    label: 'Settings',
+                },
+                { type: 'separator' },
                 { label: 'Services', submenu: [] },
                 { type: 'separator' },
                 {
@@ -151,8 +159,8 @@ export default class MenuBuilder {
         return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
     }
 
-    buildDefaultTemplate() {
-        const templateDefault = [
+    buildDefaultTemplate(): MenuItemConstructorOptions[] {
+        const templateDefault: MenuItemConstructorOptions[] = [
             {
                 label: '&File',
                 submenu: [
@@ -160,6 +168,14 @@ export default class MenuBuilder {
                         accelerator: 'Ctrl+O',
                         label: '&Open',
                     },
+                    {
+                        accelerator: 'Ctrl+,',
+                        click: () => {
+                            this.mainWindow.webContents.send('renderer-open-settings');
+                        },
+                        label: '&Settings...',
+                    },
+                    { type: 'separator' },
                     {
                         accelerator: 'Ctrl+W',
                         click: () => {

src/preload/utils.ts

@@ -39,6 +39,10 @@ const download = (url: string) => {
     ipcRenderer.send('download-url', url);
 };
 
+const checkForUpdates = (): Promise<{ updateAvailable: boolean; version?: string }> => {
+    return ipcRenderer.invoke('app-check-for-updates');
+};
+
 const forceGarbageCollection = (): boolean => {
     try {
         if (typeof global.gc === 'function') {
@@ -57,7 +61,12 @@ const forceGarbageCollection = (): boolean => {
     }
 };
 
+const rendererOpenSettings = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-open-settings', cb);
+};
+
 export const utils = {
+    checkForUpdates,
     disableAutoUpdates,
     download,
     forceGarbageCollection,
@@ -69,6 +78,7 @@ export const utils = {
     openApplicationDirectory,
     openItem,
     playerErrorListener,
+    rendererOpenSettings,
 };
 
 export type Utils = typeof utils;

src/renderer/api/jellyfin/jellyfin-api.ts

@@ -137,7 +137,7 @@ export const contract = c.router({
     },
     getInstantMix: {
         method: 'GET',
-        path: 'songs/:itemId/InstantMix',
+        path: 'items/:itemId/InstantMix',
         query: jfType._parameters.similarSongs,
         responses: {
             200: jfType._response.songList,

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -38,6 +38,10 @@ const formatCommaDelimitedString = (value: string[]) => {
 // not the POST body
 const MAX_ITEMS_PER_PLAYLIST_ADD = 50;
 
+// Defining a re-usable Collator instance for performance reasons.
+const numericSortCollator = new Intl.Collator(undefined, { numeric: true });
+const collator = new Intl.Collator();
+
 const VERSION_INFO: VersionInfo = [
     [
         '10.9.0',
@@ -49,6 +53,18 @@ const VERSION_INFO: VersionInfo = [
     ['10.0.0', { [ServerFeature.TAGS]: [1] }],
 ];
 
+const JF_FIELDS = {
+    ALBUM_ARTIST_DETAIL: 'Genres, Overview, SortName, ProviderIds',
+    ALBUM_ARTIST_LIST: 'Genres, DateCreated, ExternalUrls, Overview, SortName, ProviderIds',
+    ALBUM_DETAIL: 'Genres, DateCreated, ChildCount, People, Tags, ProviderIds',
+    ALBUM_LIST: 'People, Tags, Studios, SortName, UserData, ProviderIds, ChildCount',
+    FOLDER: 'Genres, DateCreated, MediaSources, UserData, ParentId',
+    GENRE: 'ItemCounts',
+    PLAYLIST_DETAIL: 'Genres, DateCreated, MediaSources, ChildCount, ParentId, SortName',
+    PLAYLIST_LIST: 'ChildCount, Genres, DateCreated, ParentId, Overview',
+    SONG: 'Genres, DateCreated, MediaSources, ParentId, People, Tags, SortName, UserData, ProviderIds',
+} as const;
+
 export const JellyfinController: InternalControllerEndpoint = {
     addToPlaylist: async (args) => {
         const { apiClientProps, body, query } = args;
@@ -226,7 +242,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                     userId: apiClientProps.server?.userId,
                 },
                 query: {
-                    Fields: 'Genres, Overview, SortName',
+                    Fields: JF_FIELDS.ALBUM_ARTIST_DETAIL,
                 },
             }),
             jfApiClient(apiClientProps).getSimilarArtistList({
@@ -253,7 +269,7 @@ export const JellyfinController: InternalControllerEndpoint = {
 
         const res = await jfApiClient(apiClientProps).getAlbumArtistList({
             query: {
-                Fields: 'Genres, DateCreated, ExternalUrls, Overview, SortName',
+                Fields: JF_FIELDS.ALBUM_ARTIST_LIST,
                 ImageTypeLimit: 1,
                 Limit: query.limit,
                 ParentId: getLibraryId(query.musicFolderId),
@@ -296,7 +312,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId: apiClientProps.server.userId,
             },
             query: {
-                Fields: 'Genres, DateCreated, ChildCount, People, Tags',
+                Fields: JF_FIELDS.ALBUM_DETAIL,
             },
         });
 
@@ -305,7 +321,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId: apiClientProps.server.userId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, ParentId, People, Tags, SortName',
+                Fields: JF_FIELDS.SONG,
                 IncludeItemTypes: 'Audio',
                 ParentId: query.id,
                 SortBy: 'ParentIndexNumber,IndexNumber,SortName',
@@ -363,7 +379,7 @@ export const JellyfinController: InternalControllerEndpoint = {
             },
             query: {
                 ...artistQuery,
-                Fields: 'People, Tags, Studios, SortName',
+                Fields: JF_FIELDS.ALBUM_LIST,
                 GenreIds: query.genreIds ? query.genreIds.join(',') : undefined,
                 IncludeItemTypes: 'MusicAlbum',
                 IsFavorite: query.favorite,
@@ -399,7 +415,7 @@ export const JellyfinController: InternalControllerEndpoint = {
 
         const res = await jfApiClient(apiClientProps).getArtistList({
             query: {
-                Fields: 'Genres, DateCreated, ExternalUrls, Overview, SortName',
+                Fields: JF_FIELDS.ALBUM_ARTIST_LIST,
                 ImageTypeLimit: 1,
                 Limit: query.limit,
                 ParentId: getLibraryId(query.musicFolderId),
@@ -438,7 +454,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 itemId: query.artistId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, ParentId, SortName',
+                Fields: JF_FIELDS.SONG,
                 Limit: query.count,
                 UserId: apiClientProps.server?.userId || undefined,
             },
@@ -563,7 +579,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, UserData, ParentId',
+                Fields: JF_FIELDS.FOLDER,
                 ParentId: query.id,
                 SortBy: query.sortBy
                     ? (songListSortMap.jellyfin[query.sortBy] as string) || 'SortName'
@@ -592,7 +608,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                         userId,
                     },
                     query: {
-                        Fields: 'Genres, DateCreated, MediaSources, UserData, ParentId',
+                        Fields: JF_FIELDS.FOLDER,
                         ParentId: parentId,
                     },
                 });
@@ -679,7 +695,7 @@ export const JellyfinController: InternalControllerEndpoint = {
         const res = await jfApiClient(apiClientProps).getGenreList({
             query: {
                 EnableTotalRecordCount: true,
-                Fields: 'ItemCounts',
+                Fields: JF_FIELDS.GENRE,
                 Limit: query.limit === -1 ? undefined : query.limit,
                 ParentId: getLibraryId(query.musicFolderId),
                 Recursive: true,
@@ -794,7 +810,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId: apiClientProps.server?.userId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, ChildCount, ParentId, SortName',
+                Fields: JF_FIELDS.PLAYLIST_DETAIL,
                 Ids: query.id,
             },
         });
@@ -817,7 +833,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId: apiClientProps.server?.userId,
             },
             query: {
-                Fields: 'ChildCount, Genres, DateCreated, ParentId, Overview',
+                Fields: JF_FIELDS.PLAYLIST_LIST,
                 IncludeItemTypes: 'Playlist',
                 Limit: query.limit,
                 Recursive: true,
@@ -855,7 +871,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 id: query.id,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, UserData, ParentId, People, Tags, SortName',
+                Fields: JF_FIELDS.SONG,
                 IncludeItemTypes: 'Audio',
                 UserId: apiClientProps.server?.userId,
             },
@@ -902,7 +918,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId: apiClientProps.server?.userId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, ParentId, People, Tags, SortName',
+                Fields: JF_FIELDS.SONG,
                 GenreIds: query.genre ? query.genre : undefined,
                 IncludeItemTypes: 'Audio',
                 IsPlayed:
@@ -974,7 +990,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                     itemId: query.songId,
                 },
                 query: {
-                    Fields: 'Genres, DateCreated, MediaSources, ParentId, SortName',
+                    Fields: JF_FIELDS.SONG,
                     Limit: query.count,
                     UserId: apiClientProps.server?.userId || undefined,
                 },
@@ -1007,7 +1023,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 itemId: query.songId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, ParentId, SortName',
+                Fields: JF_FIELDS.SONG,
                 Limit: query.count,
                 UserId: apiClientProps.server?.userId || undefined,
             },
@@ -1092,11 +1108,11 @@ export const JellyfinController: InternalControllerEndpoint = {
                     query: {
                         AlbumIds: albumIdsFilter,
                         ArtistIds: artistIdsFilter,
-                        Fields: 'Genres, DateCreated, MediaSources, ParentId, People, Tags, SortName',
+                        Fields: JF_FIELDS.SONG,
                         GenreIds: query.genreIds?.join(','),
                         IncludeItemTypes: 'Audio',
                         IsFavorite: query.favorite,
-                        Limit: query.limit,
+                        Limit: query.limit === -1 ? undefined : query.limit,
                         ParentId: getLibraryId(query.musicFolderId),
                         Recursive: true,
                         SearchTerm: query.searchTerm,
@@ -1127,11 +1143,11 @@ export const JellyfinController: InternalControllerEndpoint = {
                 query: {
                     AlbumIds: albumIdsFilter,
                     ArtistIds: artistIdsFilter,
-                    Fields: 'Genres, DateCreated, MediaSources, ParentId, People, Tags, SortName',
+                    Fields: JF_FIELDS.SONG,
                     GenreIds: query.genreIds?.join(','),
                     IncludeItemTypes: 'Audio',
                     IsFavorite: query.favorite,
-                    Limit: query.limit,
+                    Limit: query.limit === -1 ? undefined : query.limit,
                     ParentId: getLibraryId(query.musicFolderId),
                     Recursive: true,
                     SearchTerm: query.searchTerm,
@@ -1250,11 +1266,12 @@ export const JellyfinController: InternalControllerEndpoint = {
         if (res.body.Tags?.length) {
             tags.push({
                 name: 'Tags',
-                options: res.body.Tags.sort((a, b) =>
-                    a
-                        .toLocaleLowerCase()
-                        .localeCompare(b.toLocaleLowerCase(), undefined, { numeric: true }),
-                ).map((tag) => ({ id: tag, name: tag })),
+                options: res.body.Tags.sort((a, b) => {
+                    return numericSortCollator.compare(
+                        a.toLocaleLowerCase(),
+                        b.toLocaleLowerCase(),
+                    );
+                }).map((tag) => ({ id: tag, name: tag })),
             });
         }
 
@@ -1262,7 +1279,7 @@ export const JellyfinController: InternalControllerEndpoint = {
             tags.push({
                 name: 'Studios',
                 options: studioRes.body.Items.sort((a, b) =>
-                    a.Name.toLocaleLowerCase().localeCompare(b.Name.toLocaleLowerCase()),
+                    collator.compare(a.Name.toLocaleLowerCase(), b.Name.toLocaleLowerCase()),
                 ).map((option) => ({ id: option.Name, name: option.Name })),
             });
         }
@@ -1276,17 +1293,22 @@ export const JellyfinController: InternalControllerEndpoint = {
             throw new Error('No userId found');
         }
 
+        const type = query.type === 'personal' ? 'personal' : 'community';
+
         const res = await jfApiClient(apiClientProps).getTopSongsList({
             params: {
                 userId: apiClientProps.server?.userId,
             },
             query: {
                 ArtistIds: query.artistId,
-                Fields: 'Genres, DateCreated, MediaSources, ParentId, SortName',
+                Fields: JF_FIELDS.SONG,
                 IncludeItemTypes: 'Audio',
                 Limit: query.limit,
                 Recursive: true,
-                SortBy: 'CommunityRating,SortName',
+                SortBy:
+                    type === 'personal'
+                        ? JFSongListSort.PLAY_COUNT
+                        : JFSongListSort.COMMUNITY_RATING,
                 SortOrder: 'Descending',
                 UserId: apiClientProps.server?.userId,
             },
@@ -1296,15 +1318,31 @@ export const JellyfinController: InternalControllerEndpoint = {
             throw new Error('Failed to get top song list');
         }
 
-        return {
-            items: res.body.Items.map((item) =>
-                jfNormalize.song(
-                    item,
-                    apiClientProps.server,
-                    args.context?.pathReplace,
-                    args.context?.pathReplaceWith,
-                ),
+        const items = res.body.Items.map((item) =>
+            jfNormalize.song(
+                item,
+                apiClientProps.server,
+                args.context?.pathReplace,
+                args.context?.pathReplaceWith,
             ),
+        );
+
+        if (type === 'personal') {
+            const sorted = orderBy(
+                items,
+                ['playCount', 'albumId', 'trackNumber'],
+                ['desc', 'asc', 'asc'],
+            );
+
+            return {
+                items: sorted,
+                startIndex: 0,
+                totalRecordCount: res.body.TotalRecordCount,
+            };
+        }
+
+        return {
+            items,
             startIndex: 0,
             totalRecordCount: res.body.TotalRecordCount,
         };
@@ -1378,7 +1416,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 id: query.id,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, UserData, ParentId, People, Tags, SortName',
+                Fields: JF_FIELDS.SONG,
                 IncludeItemTypes: 'Audio',
                 UserId: apiClientProps.server?.userId,
             },
@@ -1404,7 +1442,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId: apiClientProps.server?.userId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, ChildCount, ParentId, SortName',
+                Fields: JF_FIELDS.PLAYLIST_DETAIL,
                 Ids: query.id,
             },
         });
@@ -1562,7 +1600,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 },
                 query: {
                     EnableTotalRecordCount: true,
-                    Fields: 'People, Tags, SortName',
+                    Fields: JF_FIELDS.ALBUM_LIST,
                     ImageTypeLimit: 1,
                     IncludeItemTypes: 'MusicAlbum',
                     Limit: query.albumLimit,
@@ -1585,7 +1623,7 @@ export const JellyfinController: InternalControllerEndpoint = {
             const res = await jfApiClient(apiClientProps).getAlbumArtistList({
                 query: {
                     EnableTotalRecordCount: true,
-                    Fields: 'Genres, DateCreated, ExternalUrls, Overview',
+                    Fields: JF_FIELDS.ALBUM_ARTIST_LIST,
                     ImageTypeLimit: 1,
                     IncludeArtists: true,
                     Limit: query.albumArtistLimit,
@@ -1610,7 +1648,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 },
                 query: {
                     EnableTotalRecordCount: true,
-                    Fields: 'Genres, DateCreated, MediaSources, ParentId, People, Tags, SortName',
+                    Fields: JF_FIELDS.SONG,
                     IncludeItemTypes: 'Audio',
                     Limit: query.songLimit,
                     Recursive: true,

src/renderer/api/navidrome/navidrome-controller.ts

@@ -1,4 +1,5 @@
 import { set } from 'idb-keyval';
+import orderBy from 'lodash/orderBy';
 
 import { ndApiClient } from '/@/renderer/api/navidrome/navidrome-api';
 import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
@@ -17,7 +18,9 @@ import {
     PlaylistSongListArgs,
     PlaylistSongListResponse,
     ServerListItemWithCredential,
+    SongListSort,
     songListSortMap,
+    SortOrder,
     sortOrderMap,
     tagListSortMap,
     userListSortMap,
@@ -71,6 +74,10 @@ const EXCLUDED_ALBUM_TAGS = new Set<string>([
 
 const EXCLUDED_SONG_TAGS = new Set<string>(['disctotal', 'tracktotal']);
 
+// Defining a re-usable Collator instance for performance reasons.
+const numericSortCollator = new Intl.Collator(undefined, { numeric: true });
+const collator = new Intl.Collator();
+
 // Tags that use IDs as values as opposed to the tag value
 const ID_TAGS = new Set<string>(['albumversion', 'mood']);
 
@@ -780,16 +787,17 @@ export const NavidromeController: InternalControllerEndpoint = {
             .map((data) => ({
                 name: data[0],
                 options: data[1]
-                    .sort((a, b) =>
-                        a.name
-                            .toLocaleLowerCase()
-                            .localeCompare(b.name.toLocaleLowerCase(), undefined, {
-                                numeric: true,
-                            }),
-                    )
+                    .sort((a, b) => {
+                        return numericSortCollator.compare(
+                            a.name.toLocaleLowerCase(),
+                            b.name.toLocaleLowerCase(),
+                        );
+                    })
                     .map((option) => ({ id: option.id, name: option.name })),
             }))
-            .sort((a, b) => a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()));
+            .sort((a, b) =>
+                collator.compare(a.name.toLocaleLowerCase(), b.name.toLocaleLowerCase()),
+            );
 
         const excludedAlbumTags = Array.from(EXCLUDED_ALBUM_TAGS.values());
         const excludedSongTags = Array.from(EXCLUDED_SONG_TAGS.values());
@@ -802,7 +810,59 @@ export const NavidromeController: InternalControllerEndpoint = {
             tags,
         };
     },
-    getTopSongs: SubsonicController.getTopSongs,
+    getTopSongs: async (args) => {
+        const { apiClientProps, query } = args;
+
+        const type = query.type === 'personal' ? 'personal' : 'community';
+
+        if (type === 'community') {
+            const res = await ssApiClient(apiClientProps).getTopSongsList({
+                query: {
+                    artist: query.artist,
+                    count: query.limit,
+                },
+            });
+
+            if (res.status !== 200) {
+                throw new Error('Failed to get top songs');
+            }
+
+            return {
+                items: (res.body.topSongs?.song || []).map((song) =>
+                    ssNormalize.song(
+                        song,
+                        apiClientProps.server,
+                        args.context?.pathReplace,
+                        args.context?.pathReplaceWith,
+                    ),
+                ),
+                startIndex: 0,
+                totalRecordCount: res.body.topSongs?.song?.length || 0,
+            };
+        }
+
+        const res = await NavidromeController.getSongList({
+            apiClientProps,
+            query: {
+                artistIds: [query.artistId],
+                sortBy: SongListSort.PLAY_COUNT,
+                sortOrder: SortOrder.DESC,
+                startIndex: 0,
+            },
+        });
+
+        const songsWithPlayCount = orderBy(
+            res.items.filter((song) => song.playCount > 0),
+            ['playCount', 'albumId', 'trackNumber'],
+            ['desc', 'asc', 'asc'],
+        );
+
+        return {
+            items: songsWithPlayCount,
+            startIndex: 0,
+            totalRecordCount: res.totalRecordCount,
+        };
+    },
     getUserInfo: SubsonicController.getUserInfo,
     getUserList: async (args) => {
         const { apiClientProps, query } = args;

src/renderer/api/query-keys.ts

@@ -73,6 +73,13 @@ export const queryKeys: Record<
 
             return [serverId, 'albumArtists', 'detail'] as const;
         },
+        favoriteSongs: (serverId: string, artistId?: string) => {
+            if (artistId) {
+                return [serverId, 'albumArtists', 'favoriteSongs', artistId] as const;
+            }
+
+            return [serverId, 'albumArtists', 'favoriteSongs'] as const;
+        },
         infiniteList: (serverId: string, query?: AlbumArtistListQuery) => {
             const { filter, pagination } = splitPaginatedQuery(query);
             if (query && pagination) {

src/renderer/api/subsonic/subsonic-controller.ts

@@ -1361,7 +1361,7 @@ export const SubsonicController: InternalControllerEndpoint = {
                 throw new Error('Failed to get song list');
             }
 
-            const allResults =
+            let allResults =
                 (res.body.starred?.song || []).map((song) =>
                     ssNormalize.song(
                         song,
@@ -1371,6 +1371,15 @@ export const SubsonicController: InternalControllerEndpoint = {
                     ),
                 ) || [];
 
+            const filterArtistIds = query.albumArtistIds || query.artistIds;
+
+            if (filterArtistIds?.length) {
+                const idSet = new Set(filterArtistIds);
+                allResults = allResults.filter((song) =>
+                    song.albumArtists?.some((aa) => idSet.has(aa.id)),
+                );
+            }
+
             return sortAndPaginate(allResults, {
                 limit: query.limit,
                 sortBy: query.sortBy,
@@ -1794,29 +1803,54 @@ export const SubsonicController: InternalControllerEndpoint = {
     getTopSongs: async (args) => {
         const { apiClientProps, context, query } = args;
 
-        const res = await ssApiClient(apiClientProps).getTopSongsList({
-            query: {
-                artist: query.artist,
-                count: query.limit,
-            },
-        });
+        const type = query.type === 'personal' ? 'personal' : 'community';
 
-        if (res.status !== 200) {
-            throw new Error('Failed to get top songs');
-        }
+        if (type === 'community') {
+            const res = await ssApiClient(apiClientProps).getTopSongsList({
+                query: {
+                    artist: query.artist,
+                    count: query.limit,
+                },
+            });
 
-        return {
-            items:
-                res.body.topSongs?.song?.map((song) =>
+            if (res.status !== 200) {
+                throw new Error('Failed to get top songs');
+            }
+
+            return {
+                items: (res.body.topSongs?.song || []).map((song) =>
                     ssNormalize.song(
                         song,
                         apiClientProps.server,
                         context?.pathReplace,
                         context?.pathReplaceWith,
                     ),
-                ) || [],
+                ),
+                startIndex: 0,
+                totalRecordCount: res.body.topSongs?.song?.length || 0,
+            };
+        }
+
+        const res = await SubsonicController.getSongList({
+            apiClientProps,
+            query: {
+                artistIds: [query.artistId],
+                sortBy: SongListSort.PLAY_COUNT,
+                sortOrder: SortOrder.DESC,
+                startIndex: 0,
+            },
+        });
+
+        const songsWithPlayCount = orderBy(
+            res.items.filter((song) => song.playCount > 0),
+            ['playCount', 'albumId', 'trackNumber'],
+            ['desc', 'asc', 'asc'],
+        );
+
+        return {
+            items: songsWithPlayCount,
             startIndex: 0,
-            totalRecordCount: res.body.topSongs?.song?.length || 0,
+            totalRecordCount: res.totalRecordCount,
         };
     },
     getUserInfo: async (args) => {

src/renderer/api/utils-list-count.ts

@@ -62,7 +62,11 @@ export const getOptimizedListCount = async <
         query: pageQuery,
     });
 
-    client.setQueryData(pageQueryKey, pageResult);
+    const keyContainsRandom = JSON.stringify(pageQueryKey).toLowerCase().includes('random');
+
+    if (!keyContainsRandom) {
+        client.setQueryData(pageQueryKey, pageResult);
+    }
 
     return pageResult.totalRecordCount ?? 0;
 };

src/renderer/app.tsx

@@ -10,7 +10,9 @@ import isElectron from 'is-electron';
 import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 
 import i18n from '/@/i18n/i18n';
+import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
+import { useCheckForUpdates } from '/@/renderer/hooks/use-check-for-updates';
 import { useSyncSettingsToMain } from '/@/renderer/hooks/use-sync-settings-to-main';
 import { AppRouter } from '/@/renderer/router/app-router';
 import { useCssSettings, useHotkeySettings, useLanguage } from '/@/renderer/store';
@@ -38,6 +40,7 @@ export const App = () => {
     const cssRef = useRef<HTMLStyleElement | null>(null);
 
     useSyncSettingsToMain();
+    useCheckForUpdates();
 
     const [webAudio, setWebAudio] = useState<WebAudio>();
 
@@ -77,6 +80,19 @@ export const App = () => {
         }
     }, [language]);
 
+    useEffect(() => {
+        if (isElectron()) {
+            window.api.utils.rendererOpenSettings(() => {
+                openSettingsModal();
+            });
+
+            return () => {
+                ipc?.removeAllListeners('renderer-open-settings');
+            };
+        }
+        return undefined;
+    }, []);
+
     const notificationStyles = useMemo(
         () => ({
             root: {

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -121,6 +121,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
                             containerClassName={styles.albumImageContainer}
                             enableDebounce={false}
                             enableViewport={false}
+                            explicitStatus={album.explicitStatus}
                             fetchPriority="high"
                             id={album.imageId}
                             itemType={LibraryItem.ALBUM}

src/renderer/components/feature-carousel/single-feature-carousel.tsx

@@ -118,6 +118,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
                             containerClassName={styles.albumImageContainer}
                             enableDebounce={false}
                             enableViewport={false}
+                            explicitStatus={album.explicitStatus}
                             fetchPriority="high"
                             id={album.imageId}
                             itemType={LibraryItem.ALBUM}

src/renderer/components/item-card/item-card.module.css

@@ -34,6 +34,7 @@
         position: absolute;
         top: 0;
         left: 0;
+        z-index: 5;
         width: 100%;
         height: 100%;
         pointer-events: none;

src/renderer/components/item-card/item-card.tsx

@@ -28,6 +28,7 @@ import {
     formatRating,
 } from '/@/renderer/utils/format';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Separator } from '/@/shared/components/separator/separator';
@@ -361,6 +362,9 @@ const CompactItemCard = ({
                             [styles.isRound]: isRound,
                         })}
                         enableDebounce={false}
+                        explicitStatus={
+                            'explicitStatus' in data && data ? data.explicitStatus : null
+                        }
                         id={data?.imageId}
                         itemType={itemType}
                         src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
@@ -595,6 +599,9 @@ const DefaultItemCard = ({
                     <ItemImage
                         className={clsx(styles.image, { [styles.isRound]: isRound })}
                         enableDebounce={false}
+                        explicitStatus={
+                            'explicitStatus' in data && data ? data.explicitStatus : null
+                        }
                         id={data?.imageId}
                         itemType={itemType}
                         src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
@@ -892,6 +899,9 @@ const PosterItemCard = ({
                     <ItemImage
                         className={clsx(styles.image, { [styles.isRound]: isRound })}
                         enableDebounce={false}
+                        explicitStatus={
+                            'explicitStatus' in data && data ? data.explicitStatus : null
+                        }
                         id={(data as { imageId: string })?.imageId}
                         itemType={itemType}
                         src={(data as { imageUrl: string })?.imageUrl}
@@ -1010,6 +1020,7 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
     return [
         {
             format: (data) => {
+                const explicitStatus = 'explicitStatus' in data ? data.explicitStatus : null;
                 if ('name' in data && data.name) {
                     if ('id' in data && data.id) {
                         if ('_itemType' in data) {
@@ -1022,6 +1033,7 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
                                                 albumId: data.id,
                                             })}
                                         >
+                                            <ExplicitIndicator explicitStatus={explicitStatus} />
                                             {data.name}
                                         </Link>
                                     );
@@ -1036,6 +1048,7 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
                                                 },
                                             )}
                                         >
+                                            <ExplicitIndicator explicitStatus={explicitStatus} />
                                             {data.name}
                                         </Link>
                                     );
@@ -1062,11 +1075,21 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
                                         </Link>
                                     );
                                 default:
-                                    return data.name;
+                                    return (
+                                        <>
+                                            <ExplicitIndicator explicitStatus={explicitStatus} />
+                                            {data.name}
+                                        </>
+                                    );
                             }
                         }
                     }
-                    return data.name;
+                    return (
+                        <>
+                            <ExplicitIndicator explicitStatus={explicitStatus} />
+                            {data.name}
+                        </>
+                    );
                 }
                 return '';
             },

src/renderer/components/item-detail/item-detail.module.css

@@ -1,84 +0,0 @@
-.container {
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: auto minmax(0, 1fr);
-    gap: var(--theme-spacing-sm);
-    width: 100%;
-    height: 100%;
-    padding: var(--theme-spacing-sm);
-    container-type: inline-size;
-    background: var(--theme-colors-surface);
-    border-radius: var(--theme-radius-md);
-
-    @container (min-width: 500px) {
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-
-.image-container {
-    position: relative;
-    display: none;
-    height: 100%;
-    min-height: 0;
-    aspect-ratio: 1/1;
-
-    &::before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: '';
-        background-color: rgb(0 0 0);
-        opacity: 0;
-        transition: all 0.2s ease-in-out;
-    }
-
-    &:hover {
-        &::before {
-            opacity: 0.6;
-        }
-    }
-
-    @container (min-width: 500px) {
-        display: block;
-    }
-}
-
-.image {
-    aspect-ratio: 1/1;
-}
-
-.metadata-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--theme-spacing-sm);
-    width: 100%;
-    height: 100%;
-    padding: var(--theme-spacing-xs) 0;
-    overflow: hidden;
-}
-
-.metadata-container .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: 600;
-    line-height: 1.2;
-}
-
-.metadata-container .header .title {
-    max-width: 70%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.metadata-container .content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--theme-spacing-xs);
-}
-
-.metadata-container .content .tags {
-}

src/renderer/components/item-detail/item-detail.tsx

@@ -1,146 +0,0 @@
-// import { AnimatePresence } from 'motion/react';
-// import { MouseEvent, useMemo, useState } from 'react';
-// import { Link } from 'react-router';
-
-// import styles from './item-detail.module.css';
-
-// import { ItemCardControls } from '/@/renderer/components/item-card/item-card-controls';
-// import { useFastAverageColor } from '/@/renderer/hooks';
-// import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
-// import { Badge } from '/@/shared/components/badge/badge';
-// import { Divider } from '/@/shared/components/divider/divider';
-// import { Group } from '/@/shared/components/group/group';
-// import { Image } from '/@/shared/components/image/image';
-// import { Rating } from '/@/shared/components/rating/rating';
-// import { Text } from '/@/shared/components/text/text';
-// import {
-//     Album,
-//     AlbumArtist,
-//     Artist,
-//     LibraryItem,
-//     Playlist,
-//     Song,
-// } from '/@/shared/types/domain-types';
-// import { stringToColor } from '/@/shared/utils/string-to-color';
-
-// interface ItemDetailProps {
-//     data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
-//     itemHeight: number;
-//     itemType: LibraryItem;
-//     onClick?: (e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => void;
-//     withControls?: boolean;
-// }
-
-// export const ItemDetail = ({ data, itemType, onClick, withControls }: ItemDetailProps) => {
-//     const imageUrl = getImageUrl(data);
-
-//     const [showControls, setShowControls] = useState(false);
-
-//     const { background } = useFastAverageColor({
-//         algorithm: 'simple',
-//         src: imageUrl,
-//         srcLoaded: false,
-//     });
-
-//     // const tags = [...(data?.genres ?? [])];
-
-//     const tags = useMemo(() => {
-//         if (!data) {
-//             return [];
-//         }
-
-//         const items: {
-//             color?: string;
-//             id: string;
-//             isLight?: boolean;
-//             itemType: LibraryItem;
-//             name: string;
-//         }[] = [];
-
-//         if ('albumArtists' in data && Array.isArray(data.albumArtists)) {
-//             data.albumArtists?.forEach((tag: { id: string; name: string }) => {
-//                 items.push({ id: tag.id, itemType: LibraryItem.ALBUM_ARTIST, name: tag.name });
-//             });
-//         }
-
-//         if ('genres' in data && Array.isArray(data.genres)) {
-//             data.genres?.forEach((tag: { id: string; itemType: LibraryItem; name: string }) => {
-//                 const { color, isLight } = stringToColor(tag.name);
-//                 items.push({ ...tag, color, isLight });
-//             });
-//         }
-
-//         // if ('tags' in data && typeof data.tags === 'object') {
-//         //     console.log('data.tags :>> ', data.tags);
-//         //     Object.entries(data.tags).forEach(([key, value]) => {
-//         //         items.push({ id: key, itemType: LibraryItem.TAG, name: value });
-//         //     });
-//         // }
-
-//         return items;
-//     }, [data]);
-
-//     return (
-//         <div
-//             className={styles.container}
-//             onClick={(e) => onClick?.(e, data, itemType)}
-//             style={{ backgroundColor: background }}
-//         >
-//             <div
-//                 className={styles.imageContainer}
-//                 onMouseEnter={() => withControls && setShowControls(true)}
-//                 onMouseLeave={() => withControls && setShowControls(false)}
-//             >
-//                 <Image alt={data?.name} src={imageUrl} />
-//                 <AnimatePresence>
-//                     {withControls && showControls && <ItemCardControls type="compact" />}
-//                 </AnimatePresence>
-//             </div>
-//             <div className={styles.metadataContainer}>
-//                 <div className={styles.header}>
-//                     <Text className={styles.title} component={Link} isLink size="lg" weight={500}>
-//                         {data?.name}
-//                     </Text>
-//                     <Group>
-//                         {data && 'userRating' in data && (
-//                             <Rating size="xs" value={data?.userRating ?? 0} />
-//                         )}
-//                         {data && 'userFavorite' in data && (
-//                             <ActionIcon
-//                                 icon="favorite"
-//                                 iconProps={{
-//                                     fill: data?.userFavorite ? 'primary' : 'default',
-//                                 }}
-//                                 size="xs"
-//                             />
-//                         )}
-//                     </Group>
-//                 </div>
-//                 <Divider />
-//                 <div className={styles.content}>
-//                     <Group className={styles.tags} gap="xs">
-//                         {tags.map((tag) => (
-//                             <Badge
-//                                 key={tag.id}
-//                                 style={{
-//                                     backgroundColor: tag.color,
-//                                     color: tag.isLight ? 'black' : 'white',
-//                                 }}
-//                             >
-//                                 {tag.name}
-//                             </Badge>
-//                         ))}
-//                     </Group>
-//                 </div>
-//             </div>
-//         </div>
-//     );
-// };
-
-// const getImageUrl = (data: Album | AlbumArtist | Artist | Playlist | Song | undefined) => {
-//     if (data && 'imageUrl' in data) {
-//         return data.imageUrl || undefined;
-//     }
-
-//     return undefined;
-// };

src/renderer/components/item-image/item-image.tsx

@@ -7,11 +7,12 @@ import {
     getServerById,
     useAuthStore,
     useCurrentServerId,
+    useGeneralSettings,
     useImageRes,
     useSettingsStore,
 } from '/@/renderer/store';
 import { BaseImage, ImageProps } from '/@/shared/components/image/image';
-import { LibraryItem } from '/@/shared/types/domain-types';
+import { ExplicitStatus, LibraryItem } from '/@/shared/types/domain-types';
 
 const getUnloaderIcon = (itemType: LibraryItem) => {
     switch (itemType) {
@@ -34,6 +35,7 @@ const getUnloaderIcon = (itemType: LibraryItem) => {
 
 const BaseItemImage = (
     props: Omit<ImageProps, 'id' | 'src'> & {
+        explicitStatus?: ExplicitStatus | null;
         id?: null | string;
         itemType: LibraryItem;
         serverId?: null | string;
@@ -41,7 +43,8 @@ const BaseItemImage = (
         type?: keyof z.infer<typeof GeneralSettingsSchema>['imageRes'];
     },
 ) => {
-    const { serverId, src, ...rest } = props;
+    const { explicitStatus, serverId, src, ...rest } = props;
+    const { blurExplicitImages } = useGeneralSettings();
 
     const imageUrl = useItemImageUrl({
         id: props.id,
@@ -51,8 +54,11 @@ const BaseItemImage = (
         type: props.type,
     });
 
+    const isExplicit = blurExplicitImages && explicitStatus === ExplicitStatus.EXPLICIT;
+
     return (
         <BaseImage
+            isExplicit={isExplicit}
             src={imageUrl}
             unloaderIcon={getUnloaderIcon(props.itemType)}
             {...rest}

src/renderer/components/item-list/helpers/item-list-controls.ts

@@ -192,9 +192,10 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                 onColumnReordered?.(columnIdFrom, columnIdTo, edge);
             },
 
-            onColumnResized: ({ columnId, width }: { columnId: TableColumn; width: number }) => {
-                onColumnResized?.(columnId, width);
-            },
+            onColumnResized: onColumnResized
+                ? ({ columnId, width }: { columnId: TableColumn; width: number }) =>
+                      onColumnResized(columnId, width)
+                : undefined,
 
             onDoubleClick: ({ internalState, item, itemType, meta }: DefaultItemControlProps) => {
                 if (!item || !internalState) {
@@ -241,11 +242,13 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                     }
 
                     const playType = (meta?.playType as Play) || Play.NOW;
+                    const singleSongOnly = meta?.singleSongOnly === true;
 
-                    // For NEXT, LAST, NEXT_SHUFFLE, and LAST_SHUFFLE, only add the clicked song
-                    // For NOW and SHUFFLE, add a range of songs around the clicked song
+                    // For single-song actions (e.g. image play button), or NEXT/LAST/..., only add the clicked song
+                    // For row double-click with NOW/SHUFFLE, add a range of songs around the clicked song
                     let songsToAdd: Song[];
                     if (
+                        singleSongOnly ||
                         playType === Play.NEXT ||
                         playType === Play.LAST ||
                         playType === Play.NEXT_SHUFFLE ||

src/renderer/components/item-list/helpers/item-list-infinite-loader.ts

@@ -1,4 +1,5 @@
 import {
+    useMutation,
     useQuery,
     useQueryClient,
     useSuspenseQuery,
@@ -11,6 +12,7 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { useListContext } from '/@/renderer/context/list-context';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
+import { getListRefreshMutationKey } from '/@/renderer/features/shared/components/list-refresh-button';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 export const getListQueryKeyName = (itemType: LibraryItem): string => {
@@ -293,10 +295,10 @@ export const useItemListInfiniteLoader = ({
         [onRangeChangedBase],
     );
 
-    const refresh = useCallback(
-        async (force?: boolean) => {
+    const refreshMutation = useMutation({
+        mutationFn: async (force?: boolean) => {
             // Invalidate all queries to ensure fresh data
-            await queryClient.invalidateQueries();
+            queryClient.invalidateQueries();
 
             // Reset the infinite list data
             const currentData = queryClient.getQueryData<{
@@ -320,7 +322,7 @@ export const useItemListInfiniteLoader = ({
             }
 
             // Add a delay to make the refresh visually clear
-            await new Promise((resolve) => setTimeout(resolve, 150));
+            // await new Promise((resolve) => setTimeout(resolve, 150));
 
             // Determine which page to refetch based on current visible range
             let pageToFetch = 0;
@@ -344,7 +346,12 @@ export const useItemListInfiniteLoader = ({
                 stopIndex,
             });
         },
-        [queryClient, itemsPerPage, onRangeChangedBase, dataQueryKey, totalItemCount, fetchPage],
+        mutationKey: getListRefreshMutationKey(eventKey),
+    });
+
+    const refresh = useCallback(
+        async (force?: boolean) => refreshMutation.mutateAsync(force),
+        [refreshMutation],
     );
 
     const updateItems = useCallback(
@@ -376,7 +383,7 @@ export const useItemListInfiniteLoader = ({
                 return;
             }
 
-            return refresh(true);
+            refreshMutation.mutate(true);
         };
 
         eventEmitter.on('ITEM_LIST_REFRESH', handleRefresh);
@@ -384,7 +391,7 @@ export const useItemListInfiniteLoader = ({
         return () => {
             eventEmitter.off('ITEM_LIST_REFRESH', handleRefresh);
         };
-    }, [eventKey, refresh]);
+    }, [eventKey, refreshMutation]);
 
     useEffect(() => {
         const handleFavorite = (payload: UserFavoriteEventPayload) => {

src/renderer/components/item-list/helpers/item-list-paginated-loader.ts

@@ -1,4 +1,5 @@
 import {
+    useMutation,
     useQuery,
     useQueryClient,
     useSuspenseQuery,
@@ -10,6 +11,7 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { useListContext } from '/@/renderer/context/list-context';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
+import { getListRefreshMutationKey } from '/@/renderer/features/shared/components/list-refresh-button';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const getQueryKeyName = (itemType: LibraryItem): string => {
@@ -83,7 +85,7 @@ export const useItemListPaginatedLoader = ({
         [itemsPerPage, startIndex, query],
     );
 
-    const { data, refetch: queryRefetch } = useQuery({
+    const { data } = useQuery({
         gcTime: 1000 * 15,
         placeholderData: { items: getInitialData(itemsPerPage) },
         queryFn: async ({ signal }) => {
@@ -98,22 +100,20 @@ export const useItemListPaginatedLoader = ({
         staleTime: 1000 * 15,
     });
 
-    const refresh = useCallback(
-        async (force?: boolean) => {
+    const refreshMutation = useMutation({
+        mutationFn: async (force?: boolean) => {
             const queryKey = queryKeys[getQueryKeyName(itemType)].list(serverId, queryParams);
 
-            await queryClient.invalidateQueries();
-
             if (force) {
                 queryClient.setQueryData(queryKey, {
                     items: getInitialData(itemsPerPage),
                 });
             }
 
-            return queryRefetch();
+            await queryClient.invalidateQueries();
         },
-        [queryClient, queryRefetch, queryParams, serverId, itemType, itemsPerPage],
-    );
+        mutationKey: getListRefreshMutationKey(eventKey ?? 'paginated'),
+    });
 
     const updateItems = useCallback(
         (indexes: number[], value: object) => {
@@ -153,7 +153,7 @@ export const useItemListPaginatedLoader = ({
                 return;
             }
 
-            return refresh(true);
+            refreshMutation.mutate(true);
         };
 
         const handleFavorite = (payload: UserFavoriteEventPayload) => {
@@ -220,7 +220,7 @@ export const useItemListPaginatedLoader = ({
             eventEmitter.off('USER_FAVORITE', handleFavorite);
             eventEmitter.off('USER_RATING', handleRating);
         };
-    }, [data, eventKey, itemType, serverId, refresh, updateItems]);
+    }, [data, eventKey, itemType, refreshMutation, serverId, updateItems]);
 
     return { data: data?.items || [], pageCount, totalItemCount };
 };

src/renderer/components/item-list/helpers/item-list-state.ts

@@ -109,6 +109,7 @@ export interface ItemListStateItem {
     _itemType: LibraryItem;
     _serverId: string;
     id: string;
+    imageId: null | string;
 }
 
 export type ItemListStateItemWithRequiredProperties = Record<string, unknown> & {

src/renderer/components/item-list/helpers/use-item-list-column-reorder.ts

@@ -7,14 +7,19 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
 
 interface UseItemListColumnReorderProps {
     itemListKey: ItemListKey;
+    tableKey?: 'detail' | 'main';
 }
 
-export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReorderProps) => {
+export const useItemListColumnReorder = ({
+    itemListKey,
+    tableKey = 'main',
+}: UseItemListColumnReorderProps) => {
     const { setList } = useSettingsStoreActions();
 
     const handleColumnReordered = useCallback(
         (columnIdFrom: TableColumn, columnIdTo: TableColumn, edge: Edge | null) => {
-            const columns = useSettingsStore.getState().lists[itemListKey]?.table.columns;
+            const list = useSettingsStore.getState().lists[itemListKey];
+            const columns = tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
 
             if (!columns) {
                 return;
@@ -83,13 +88,20 @@ export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReord
             // Insert the column at the new position
             newColumns.splice(newIndex, 0, updatedMovedColumn);
 
-            setList(itemListKey, {
-                table: {
-                    columns: newColumns,
-                },
-            });
+            if (tableKey === 'detail') {
+                type SetListData = Parameters<
+                    ReturnType<typeof useSettingsStoreActions>['setList']
+                >[1];
+                setList(itemListKey, { detail: { columns: newColumns } } as SetListData);
+            } else {
+                setList(itemListKey, {
+                    table: {
+                        columns: newColumns,
+                    },
+                });
+            }
         },
-        [itemListKey, setList],
+        [itemListKey, setList, tableKey],
     );
 
     return { handleColumnReordered };

src/renderer/components/item-list/helpers/use-item-list-column-resize.ts

@@ -5,11 +5,18 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
 
 interface UseItemListColumnResizeProps {
     itemListKey: ItemListKey;
+    tableKey?: 'detail' | 'main';
 }
 
-export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResizeProps) => {
+export const useItemListColumnResize = ({
+    itemListKey,
+    tableKey = 'main',
+}: UseItemListColumnResizeProps) => {
     const { setList } = useSettingsStoreActions();
-    const columns = useSettingsStore((state) => state.lists[itemListKey]?.table.columns);
+    const columns = useSettingsStore((state) => {
+        const list = state.lists[itemListKey];
+        return tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
+    });
 
     const handleColumnResized = useCallback(
         (columnId: TableColumn, width: number) => {
@@ -19,13 +26,20 @@ export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResize
                 column.id === columnId ? { ...column, width } : column,
             );
 
-            setList(itemListKey, {
-                table: {
-                    columns: updatedColumns,
-                },
-            });
+            if (tableKey === 'detail') {
+                type SetListData = Parameters<
+                    ReturnType<typeof useSettingsStoreActions>['setList']
+                >[1];
+                setList(itemListKey, { detail: { columns: updatedColumns } } as SetListData);
+            } else {
+                setList(itemListKey, {
+                    table: {
+                        columns: updatedColumns,
+                    },
+                });
+            }
         },
-        [columns, itemListKey, setList],
+        [columns, itemListKey, setList, tableKey],
     );
 
     return { handleColumnResized };

src/renderer/components/item-list/helpers/use-item-list-scroll-persist.ts

@@ -1,26 +1,29 @@
 import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
+import { useLocation, useNavigationType } from 'react-router';
 
-import { parseIntParam, setSearchParam } from '/@/renderer/utils/query-params';
+import { useScrollStore } from '/@/renderer/store/scroll.store';
 
 interface UseItemListScrollPersistProps {
     enabled: boolean;
 }
 
 export const useItemListScrollPersist = ({ enabled }: UseItemListScrollPersistProps) => {
-    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigationType = useNavigationType();
+    const setOffset = useScrollStore((s) => s.setOffset);
+    const getOffset = useScrollStore((s) => s.getOffset);
 
-    const scrollOffset = useMemo(() => parseIntParam(searchParams, 'scrollOffset'), [searchParams]);
+    const scrollOffset = useMemo(() => {
+        if (navigationType !== 'POP') return undefined;
+        return getOffset(location.key);
+    }, [getOffset, location.key, navigationType]);
 
     const handleOnScrollEnd = useCallback(
         (offset: number) => {
             if (!enabled) return;
-
-            setSearchParams((prev) => setSearchParam(prev, 'scrollOffset', offset), {
-                replace: true,
-            });
+            setOffset(location.key, offset);
         },
-        [enabled, setSearchParams],
+        [enabled, location.key, setOffset],
     );
 
     return { handleOnScrollEnd, scrollOffset };

src/renderer/components/item-list/item-detail-list/columns/actions-column.tsx

@@ -0,0 +1,38 @@
+import { ItemDetailListCellProps } from './types';
+
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const ActionsColumn = ({ controls, internalState, song }: ItemDetailListCellProps) => {
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const index = internalState?.findItemIndex(song.id) ?? -1;
+        controls?.onMore?.({
+            event,
+            index,
+            internalState: internalState ?? undefined,
+            item: song,
+            itemType: LibraryItem.SONG,
+        });
+    };
+
+    const handleDoubleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+
+    return (
+        <ActionIcon
+            icon="ellipsisHorizontal"
+            iconProps={{
+                color: 'muted',
+                size: 'xs',
+            }}
+            onClick={handleClick}
+            onDoubleClick={handleDoubleClick}
+            size="xs"
+            variant="subtle"
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx

@@ -0,0 +1,23 @@
+import { ItemDetailListCellProps } from './types';
+
+import {
+    JOINED_ARTISTS_MUTED_PROPS,
+    JoinedArtists,
+} from '/@/renderer/features/albums/components/joined-artists';
+
+export const AlbumArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const name = song.albumArtistName?.trim() ?? '';
+    const hasArtists = name.length > 0 || (song.albumArtists?.length ?? 0) > 0;
+
+    if (!hasArtists) return <>&nbsp;</>;
+
+    return (
+        <JoinedArtists
+            artistName={song.albumArtistName ?? ''}
+            artists={song.albumArtists ?? []}
+            linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps}
+            readOnly={!isRowHovered}
+            rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps}
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/album-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const AlbumColumn = ({ song }: ItemDetailListCellProps) => song.album ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx

@@ -0,0 +1,23 @@
+import { ItemDetailListCellProps } from './types';
+
+import {
+    JOINED_ARTISTS_MUTED_PROPS,
+    JoinedArtists,
+} from '/@/renderer/features/albums/components/joined-artists';
+
+export const ArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const name = song.artistName?.trim() ?? '';
+    const hasArtists = name.length > 0 || (song.artists?.length ?? 0) > 0;
+
+    if (!hasArtists) return <>&nbsp;</>;
+
+    return (
+        <JoinedArtists
+            artistName={song.artistName ?? ''}
+            artists={song.artists ?? []}
+            linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps}
+            readOnly={!isRowHovered}
+            rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps}
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/bit-depth-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const BitDepthColumn = ({ song }: ItemDetailListCellProps) => song.bitDepth;

src/renderer/components/item-list/item-detail-list/columns/bit-rate-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const BitRateColumn = ({ song }: ItemDetailListCellProps) =>
+    song.bitRate != null ? `${song.bitRate} kbps` : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/bpm-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const BpmColumn = ({ song }: ItemDetailListCellProps) => song.bpm ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/channels-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const ChannelsColumn = ({ song }: ItemDetailListCellProps) =>
+    song.channels != null ? String(song.channels) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/codec-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const CodecColumn = ({ song }: ItemDetailListCellProps) => song.container ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/comment-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const CommentColumn = ({ song }: ItemDetailListCellProps) => song.comment ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/composer-column.tsx

@@ -0,0 +1,7 @@
+import { ItemDetailListCellProps } from './types';
+
+export const ComposerColumn = ({ song }: ItemDetailListCellProps) => {
+    const composers = song.participants?.composer;
+    if (!composers?.length) return <>&nbsp;</>;
+    return composers.map((a) => a.name).join(', ');
+};

src/renderer/components/item-list/item-detail-list/columns/date-added-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatDateAbsolute } from '/@/renderer/utils/format';
+
+export const DateAddedColumn = ({ song }: ItemDetailListCellProps) =>
+    song.createdAt ? formatDateAbsolute(song.createdAt) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/default-column.tsx

@@ -0,0 +1,11 @@
+import { ItemDetailListCellProps } from './types';
+
+interface DefaultColumnProps extends ItemDetailListCellProps {
+    columnId: string;
+}
+
+export const DefaultColumn = ({ columnId, song }: DefaultColumnProps) => {
+    const raw = (song as Record<string, unknown>)[columnId];
+    if (raw === undefined || raw === null || typeof raw === 'object') return <>&nbsp;</>;
+    return String(raw);
+};

src/renderer/components/item-list/item-detail-list/columns/disc-number-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const DiscNumberColumn = ({ song }: ItemDetailListCellProps) => String(song.discNumber ?? 1);

src/renderer/components/item-list/item-detail-list/columns/duration-column.tsx

@@ -0,0 +1,5 @@
+import formatDuration from 'format-duration';
+
+import { ItemDetailListCellProps } from './types';
+
+export const DurationColumn = ({ song }: ItemDetailListCellProps) => formatDuration(song.duration);

src/renderer/components/item-list/item-detail-list/columns/favorite-column.tsx

@@ -0,0 +1,54 @@
+import { ItemDetailListCellProps } from './types';
+
+import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
+import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const FavoriteColumn = ({
+    controls,
+    internalState,
+    isMutatingFavorite,
+    onFavoriteClick,
+    song,
+}: ItemDetailListCellProps) => {
+    const isMutatingCreateFavorite = useIsMutatingCreateFavorite();
+    const isMutatingDeleteFavorite = useIsMutatingDeleteFavorite();
+    const isMutating = isMutatingFavorite ?? (isMutatingCreateFavorite || isMutatingDeleteFavorite);
+    const isFavorite = song.userFavorite ?? false;
+
+    return (
+        <ActionIcon
+            disabled={isMutating}
+            icon="favorite"
+            iconProps={{
+                color: isFavorite ? 'primary' : 'muted',
+                fill: isFavorite ? 'primary' : undefined,
+                size: 'xs',
+            }}
+            onClick={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                const index = internalState?.findItemIndex(song.id) ?? -1;
+                if (controls?.onFavorite) {
+                    controls.onFavorite({
+                        event,
+                        favorite: !isFavorite,
+                        index,
+                        internalState: internalState ?? undefined,
+                        item: song,
+                        itemType: LibraryItem.SONG,
+                    });
+                } else {
+                    onFavoriteClick?.(song);
+                }
+            }}
+            onDoubleClick={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }}
+            size="xs"
+            variant="subtle"
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/genre-badge-column.module.css

@@ -0,0 +1,12 @@
+.group {
+    flex-wrap: nowrap;
+    gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
+    min-width: 0;
+    padding: var(--theme-spacing-xs) 0;
+    overflow: hidden;
+}
+
+.group a {
+    cursor: pointer;
+    user-select: none;
+}

src/renderer/components/item-list/item-detail-list/columns/genre-badge-column.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import styles from './genre-badge-column.module.css';
+import { ItemDetailListCellProps } from './types';
+
+import { AppRoute } from '/@/renderer/router/routes';
+import { Badge } from '/@/shared/components/badge/badge';
+import { Group } from '/@/shared/components/group/group';
+import { stringToColor } from '/@/shared/utils/string-to-color';
+
+const MAX_GENRES = 4;
+
+export const GenreBadgeColumn = ({ song }: ItemDetailListCellProps) => {
+    const genres = song.genres;
+
+    const genresWithStyle = useMemo(() => {
+        if (!genres) return [];
+        return genres.slice(0, MAX_GENRES).map((genre) => {
+            const { color, isLight } = stringToColor(genre.name);
+            const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: genre.id });
+            return { ...genre, color, isLight, path };
+        });
+    }, [genres]);
+
+    if (!genresWithStyle.length) return <>&nbsp;</>;
+
+    return (
+        <Group className={styles.group} wrap="nowrap">
+            {genresWithStyle.map((genre) => (
+                <Badge
+                    component={Link}
+                    key={genre.id}
+                    state={{ item: genre }}
+                    style={{
+                        backgroundColor: genre.color,
+                        color: genre.isLight ? 'black' : 'white',
+                    }}
+                    to={genre.path}
+                >
+                    {genre.name}
+                </Badge>
+            ))}
+        </Group>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/genre-column.tsx

@@ -0,0 +1,40 @@
+import { Fragment } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Text } from '/@/shared/components/text/text';
+
+const TEXT_PROPS = { isMuted: true, isNoSelect: true, size: 'sm' as const } as const;
+
+export const GenreColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const genres = song.genres ?? [];
+    if (!genres.length) return <>&nbsp;</>;
+
+    return (
+        <>
+            {genres.map((genre, index) => (
+                <Fragment key={genre.id}>
+                    {isRowHovered ? (
+                        <Text
+                            component={Link}
+                            isLink
+                            state={{ item: genre }}
+                            to={generatePath(AppRoute.LIBRARY_GENRES_DETAIL, {
+                                genreId: genre.id,
+                            })}
+                            {...TEXT_PROPS}
+                        >
+                            {genre.name}
+                        </Text>
+                    ) : (
+                        <Text component="span" {...TEXT_PROPS}>
+                            {genre.name}
+                        </Text>
+                    )}
+                    {index < genres.length - 1 && ', '}
+                </Fragment>
+            ))}
+        </>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/image-column.module.css

@@ -0,0 +1,50 @@
+.image-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.compact-container {
+    flex: 1 1 0;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+    max-height: 100%;
+    aspect-ratio: unset;
+    padding-top: var(--theme-spacing-xs);
+    padding-bottom: var(--theme-spacing-xs);
+    overflow: hidden;
+    border-radius: var(--theme-radius-md);
+}
+
+.play-button-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 10;
+    opacity: 0.6;
+    transform: translate(-50%, -50%);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.play-button-overlay:hover {
+    opacity: 1;
+}
+
+.play-button-overlay button {
+    width: 24px;
+    height: 24px;
+}
+
+.compact-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: var(--theme-radius-md);
+}

src/renderer/components/item-list/item-detail-list/columns/image-column.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+
+import styles from './image-column.module.css';
+import { ItemDetailListCellProps } from './types';
+
+import { ItemImage } from '/@/renderer/components/item-image/item-image';
+import { PlayButton } from '/@/renderer/features/shared/components/play-button';
+import {
+    LONG_PRESS_PLAY_BEHAVIOR,
+    PlayTooltip,
+} from '/@/renderer/features/shared/components/play-button-group';
+import { usePlayButtonBehavior } from '/@/renderer/store';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
+
+export const ImageColumn = ({
+    controls,
+    internalState,
+    rowIndex = 0,
+    song,
+}: ItemDetailListCellProps) => {
+    const playButtonBehavior = usePlayButtonBehavior();
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handlePlay = (playType: Play) => {
+        if (!song || !controls?.onDoubleClick) {
+            return;
+        }
+
+        controls.onDoubleClick({
+            event: null,
+            index: rowIndex,
+            internalState,
+            item: song,
+            itemType: LibraryItem.SONG,
+            meta: { playType, singleSongOnly: true },
+        });
+    };
+
+    return (
+        <div
+            className={styles.imageContainer}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            <ItemImage
+                className={styles.compactImage}
+                containerClassName={styles.compactContainer}
+                explicitStatus={song.explicitStatus}
+                id={song.imageId}
+                itemType={LibraryItem.SONG}
+                serverId={song._serverId}
+                type="table"
+            />
+            {isHovered && (
+                <div className={clsx(styles.playButtonOverlay)}>
+                    <PlayTooltip disabled={false} type={playButtonBehavior}>
+                        <PlayButton
+                            fill
+                            onClick={() => handlePlay(playButtonBehavior)}
+                            onLongPress={() =>
+                                handlePlay(LONG_PRESS_PLAY_BEHAVIOR[playButtonBehavior])
+                            }
+                        />
+                    </PlayTooltip>
+                </div>
+            )}
+        </div>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/index.ts

@@ -0,0 +1,127 @@
+import React, { type ReactNode } from 'react';
+
+import type { ItemDetailListCellProps } from './types';
+
+import { ActionsColumn } from './actions-column';
+import { AlbumArtistColumn } from './album-artist-column';
+import { AlbumColumn } from './album-column';
+import { ArtistColumn } from './artist-column';
+import { BitDepthColumn } from './bit-depth-column';
+import { BitRateColumn } from './bit-rate-column';
+import { BpmColumn } from './bpm-column';
+import { ChannelsColumn } from './channels-column';
+import { CodecColumn } from './codec-column';
+import { CommentColumn } from './comment-column';
+import { ComposerColumn } from './composer-column';
+import { DateAddedColumn } from './date-added-column';
+import { DefaultColumn } from './default-column';
+import { DiscNumberColumn } from './disc-number-column';
+import { DurationColumn } from './duration-column';
+import { FavoriteColumn } from './favorite-column';
+import { GenreBadgeColumn } from './genre-badge-column';
+import { GenreColumn } from './genre-column';
+import { ImageColumn } from './image-column';
+import { LastPlayedColumn } from './last-played-column';
+import { PathColumn } from './path-column';
+import { PlayCountColumn } from './play-count-column';
+import { RatingColumn } from './rating-column';
+import { ReleaseDateColumn } from './release-date-column';
+import { RowIndexColumn } from './row-index-column';
+import { SampleRateColumn } from './sample-rate-column';
+import { SizeColumn } from './size-column';
+import { TitleArtistColumn } from './title-artist-column';
+import { TitleColumn } from './title-column';
+import { TitleCombinedColumn } from './title-combined-column';
+import { TrackNumberColumn } from './track-number-column';
+import { YearColumn } from './year-column';
+
+import { TableColumn } from '/@/shared/types/types';
+
+type CellComponent = (props: ItemDetailListCellProps) => ReactNode;
+
+const COLUMN_MAP: Partial<Record<TableColumn, CellComponent>> = {
+    [TableColumn.ACTIONS]: ActionsColumn,
+    [TableColumn.ALBUM]: AlbumColumn,
+    [TableColumn.ALBUM_ARTIST]: AlbumArtistColumn,
+    [TableColumn.ARTIST]: ArtistColumn,
+    [TableColumn.BIT_DEPTH]: BitDepthColumn,
+    [TableColumn.BIT_RATE]: BitRateColumn,
+    [TableColumn.BPM]: BpmColumn,
+    [TableColumn.CHANNELS]: ChannelsColumn,
+    [TableColumn.CODEC]: CodecColumn,
+    [TableColumn.COMMENT]: CommentColumn,
+    [TableColumn.COMPOSER]: ComposerColumn,
+    [TableColumn.DATE_ADDED]: DateAddedColumn,
+    [TableColumn.DISC_NUMBER]: DiscNumberColumn,
+    [TableColumn.DURATION]: DurationColumn,
+    [TableColumn.GENRE]: GenreColumn,
+    [TableColumn.GENRE_BADGE]: GenreBadgeColumn,
+    [TableColumn.IMAGE]: ImageColumn,
+    [TableColumn.LAST_PLAYED]: LastPlayedColumn,
+    [TableColumn.PATH]: PathColumn,
+    [TableColumn.PLAY_COUNT]: PlayCountColumn,
+    [TableColumn.RELEASE_DATE]: ReleaseDateColumn,
+    [TableColumn.ROW_INDEX]: RowIndexColumn,
+    [TableColumn.SAMPLE_RATE]: SampleRateColumn,
+    [TableColumn.SIZE]: SizeColumn,
+    [TableColumn.TITLE]: TitleColumn,
+    [TableColumn.TITLE_ARTIST]: TitleArtistColumn,
+    [TableColumn.TITLE_COMBINED]: TitleCombinedColumn,
+    [TableColumn.TRACK_NUMBER]: TrackNumberColumn,
+    [TableColumn.USER_FAVORITE]: FavoriteColumn,
+    [TableColumn.USER_RATING]: RatingColumn,
+    [TableColumn.YEAR]: YearColumn,
+};
+
+export type DetailListCellComponentProps = ItemDetailListCellProps & { columnId?: string };
+
+export function getDetailListCellComponent(
+    columnId: string | TableColumn,
+): (props: DetailListCellComponentProps) => ReactNode {
+    const Component = COLUMN_MAP[columnId as TableColumn];
+    if (Component) {
+        return Component as (props: DetailListCellComponentProps) => ReactNode;
+    }
+    return (props: DetailListCellComponentProps) =>
+        React.createElement(DefaultColumn, {
+            columnId: props.columnId ?? (columnId as string),
+            song: props.song,
+        });
+}
+
+export type { ItemDetailListCellProps } from './types';
+
+export {
+    ActionsColumn,
+    AlbumArtistColumn,
+    AlbumColumn,
+    ArtistColumn,
+    BitDepthColumn,
+    BitRateColumn,
+    BpmColumn,
+    ChannelsColumn,
+    CodecColumn,
+    CommentColumn,
+    ComposerColumn,
+    DateAddedColumn,
+    DefaultColumn,
+    DiscNumberColumn,
+    DurationColumn,
+    FavoriteColumn,
+    GenreBadgeColumn,
+    GenreColumn,
+    ImageColumn,
+    LastPlayedColumn,
+    PathColumn,
+    PlayCountColumn,
+    RatingColumn,
+    ReleaseDateColumn,
+    RowIndexColumn,
+    SampleRateColumn,
+    SizeColumn,
+    TitleArtistColumn,
+    TitleColumn,
+    TitleCombinedColumn,
+    TrackNumberColumn,
+    YearColumn,
+};

src/renderer/components/item-list/item-detail-list/columns/last-played-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatDateRelative } from '/@/renderer/utils/format';
+
+export const LastPlayedColumn = ({ song }: ItemDetailListCellProps) =>
+    song.lastPlayedAt ? formatDateRelative(song.lastPlayedAt) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/path-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const PathColumn = ({ song }: ItemDetailListCellProps) => song.path ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/play-count-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const PlayCountColumn = ({ song }: ItemDetailListCellProps) =>
+    song.playCount ? String(song.playCount) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/rating-column.tsx

@@ -0,0 +1,29 @@
+import { ItemDetailListCellProps } from './types';
+
+import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
+import { Rating } from '/@/shared/components/rating/rating';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const RatingColumn = ({ controls, internalState, song }: ItemDetailListCellProps) => {
+    const isMutatingRating = useIsMutatingRating();
+    const value = song.userRating ?? 0;
+
+    return (
+        <Rating
+            onChange={(rating) => {
+                const index = internalState?.findItemIndex(song.id) ?? -1;
+                controls?.onRating?.({
+                    event: null,
+                    index,
+                    internalState: internalState ?? undefined,
+                    item: song,
+                    itemType: LibraryItem.SONG,
+                    rating,
+                });
+            }}
+            readOnly={isMutatingRating}
+            size="xs"
+            value={value}
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/release-date-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatDateAbsoluteUTC } from '/@/renderer/utils/format';
+
+export const ReleaseDateColumn = ({ song }: ItemDetailListCellProps) =>
+    song.releaseDate ? formatDateAbsoluteUTC(song.releaseDate) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/row-index-column.module.css

@@ -0,0 +1,5 @@
+.icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/renderer/components/item-list/item-detail-list/columns/row-index-column.tsx

@@ -0,0 +1,23 @@
+import styles from './row-index-column.module.css';
+import { ItemDetailListCellProps } from './types';
+
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { usePlayerStatus } from '/@/renderer/store';
+import { Icon } from '/@/shared/components/icon/icon';
+import { PlayerStatus } from '/@/shared/types/types';
+
+export const RowIndexColumn = ({ rowIndex, song }: ItemDetailListCellProps) => {
+    const status = usePlayerStatus();
+    const { isActive } = useIsCurrentSong(song);
+    const isPlaying = isActive && status === PlayerStatus.PLAYING;
+
+    if (isActive) {
+        return (
+            <div className={styles.iconWrapper}>
+                <Icon fill="primary" icon={isPlaying ? 'mediaPlay' : 'mediaPause'} />
+            </div>
+        );
+    }
+
+    return <>{String((rowIndex ?? 0) + 1)}</>;
+};

src/renderer/components/item-list/item-detail-list/columns/sample-rate-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const SampleRateColumn = ({ song }: ItemDetailListCellProps) =>
+    song.sampleRate ? `${song.sampleRate} Hz` : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/size-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatSizeString } from '/@/renderer/utils/format';
+
+export const SizeColumn = ({ song }: ItemDetailListCellProps) =>
+    song.size ? formatSizeString(song.size) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/title-artist-column.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import styles from './title-column.module.css';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+
+export const TitleArtistColumn = ({ song }: ItemDetailListCellProps) => {
+    const { isActive } = useIsCurrentSong(song);
+
+    return (
+        <span className={clsx({ [styles.active]: isActive })}>
+            <ExplicitIndicator explicitStatus={song.explicitStatus} />
+            {[song.name, song.artistName].filter(Boolean).join(' — ') ?? <>&nbsp;</>}
+        </span>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/title-column.module.css

@@ -0,0 +1,3 @@
+.active {
+    color: var(--theme-colors-primary);
+}

src/renderer/components/item-list/item-detail-list/columns/title-column.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import styles from './title-column.module.css';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+
+export const TitleColumn = ({ song }: ItemDetailListCellProps) => {
+    const { isActive } = useIsCurrentSong(song);
+
+    return (
+        <span className={clsx({ [styles.active]: isActive })}>
+            <ExplicitIndicator explicitStatus={song.explicitStatus} />
+            {song.name ?? <>&nbsp;</>}
+        </span>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/title-combined-column.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import styles from './title-column.module.css';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+
+export const TitleCombinedColumn = ({ song }: ItemDetailListCellProps) => {
+    const { isActive } = useIsCurrentSong(song);
+
+    return (
+        <span className={clsx({ [styles.active]: isActive })}>
+            <ExplicitIndicator explicitStatus={song.explicitStatus} />
+            {[song.name, song.artistName].filter(Boolean).join(' — ') ?? <>&nbsp;</>}
+        </span>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/track-number-column.tsx

@@ -0,0 +1,7 @@
+import { ItemDetailListCellProps } from './types';
+
+export const TrackNumberColumn = ({ song }: ItemDetailListCellProps) => {
+    const disc = song.discNumber ?? 1;
+    const track = song.trackNumber.toString().padStart(2, '0');
+    return `${disc}-${track}`;
+};

src/renderer/components/item-list/item-detail-list/columns/types.ts

@@ -0,0 +1,14 @@
+import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { ItemControls } from '/@/renderer/components/item-list/types';
+import { Song } from '/@/shared/types/domain-types';
+
+export interface ItemDetailListCellProps {
+    controls?: ItemControls;
+    internalState?: ItemListStateActions;
+    isMutatingFavorite?: boolean;
+    isRowHovered?: boolean;
+    onFavoriteClick?: (song: Song) => void;
+    rowIndex?: number;
+    size?: 'compact' | 'default' | 'large';
+    song: Song;
+}

src/renderer/components/item-list/item-detail-list/columns/year-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const YearColumn = ({ song }: ItemDetailListCellProps) =>
+    song.releaseYear ? String(song.releaseYear) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/item-detail-list.module.css

@@ -0,0 +1,556 @@
+.container {
+    position: relative;
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 0;
+    overflow: auto;
+}
+
+.placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+.detail-list-header {
+    display: grid;
+    flex-shrink: 0;
+    grid-template-columns: 240px 1fr;
+    gap: var(--theme-spacing-md);
+    padding: 0 var(--theme-spacing-md);
+    font-size: var(--theme-font-size-sm);
+    user-select: none;
+    background-color: var(--theme-colors-background);
+    border-bottom: 1px solid var(--theme-colors-border);
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.header-left-album-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--theme-font-size-sm);
+    font-weight: 500;
+    color: var(--theme-colors-foreground);
+    white-space: nowrap;
+}
+
+.header-right {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.tracks-table-header {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+}
+
+.tracks-table-header-size-compact {
+    height: 32px;
+    min-height: 32px;
+}
+
+.tracks-table-header-size-default {
+    height: 40px;
+    min-height: 40px;
+}
+
+.tracks-table-header-size-large {
+    height: 48px;
+    min-height: 48px;
+}
+
+.track-header-cell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    min-height: 60%;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+    overflow: visible;
+}
+
+.track-header-cell-no-h-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.track-header-cell-with-vertical-border {
+    border-right: 1px solid var(--theme-colors-border);
+}
+
+.track-header-cell-dragging {
+    cursor: grabbing;
+    opacity: 0.5;
+}
+
+.track-header-cell-dragged-over-left::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    width: 3px;
+    content: '';
+    background-color: var(--theme-colors-primary);
+}
+
+.track-header-cell-dragged-over-right::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 3px;
+    content: '';
+    background-color: var(--theme-colors-primary);
+}
+
+.track-header-cell:hover .resize-handle {
+    opacity: 1;
+}
+
+.track-header-cell:hover .resize-handle::before {
+    background-color: var(--theme-colors-border);
+}
+
+.resize-handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 2px;
+    margin-right: -4px;
+    cursor: col-resize;
+    background: var(--theme-colors-border);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+/* .resize-handle::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 2px;
+    content: '';
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+} */
+
+.resize-handle-left {
+    left: 0;
+    margin-right: 0;
+    margin-left: -4px;
+}
+
+.resize-handle-left::before {
+    right: auto;
+    left: 0;
+}
+
+.resize-handle-right {
+    right: 0;
+    margin-right: 0;
+}
+
+.resize-handle-dragging {
+    opacity: 1;
+}
+
+.resize-handle:hover {
+    opacity: 1;
+}
+
+.row {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    gap: var(--theme-spacing-md);
+    padding: var(--theme-spacing-md);
+    border-bottom: 1px solid var(--theme-colors-border);
+}
+
+.skeleton-column-wrapper {
+    box-sizing: border-box;
+    min-width: 0;
+}
+
+.image-wrapper {
+    position: relative;
+    display: block;
+    width: 100%;
+    aspect-ratio: 1;
+    overflow: hidden;
+    color: inherit;
+    text-decoration: none;
+    border-radius: var(--theme-radius-md);
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        content: '';
+        background-color: rgb(0 0 0);
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover {
+        @mixin dark {
+            &::before {
+                opacity: 0.7;
+            }
+        }
+
+        @mixin light {
+            &::before {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    &:hover .favorite-badge,
+    &:hover .rating-badge {
+        opacity: 0;
+    }
+}
+
+.favorite-badge {
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    z-index: 1;
+    width: 80px;
+    height: 80px;
+    pointer-events: none;
+    background-color: var(--theme-colors-primary);
+    box-shadow: 0 0 10px 8px rgb(0 0 0 / 80%);
+    opacity: 1;
+    transform: rotate(-45deg);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.rating-badge {
+    position: absolute;
+    top: var(--theme-spacing-sm);
+    right: var(--theme-spacing-sm);
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
+    font-size: var(--theme-font-size-md);
+    font-weight: 600;
+    color: var(--theme-colors-foreground);
+    text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
+    pointer-events: none;
+    background-color: var(--theme-colors-primary);
+    border-radius: var(--theme-radius-md);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.row .image {
+    object-fit: var(--theme-image-fit);
+    border-radius: var(--theme-radius-md);
+}
+
+.row .metadata {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-xs);
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--theme-font-size-md);
+    text-align: center;
+}
+
+.row .title {
+    font-weight: 500;
+    color: inherit;
+    text-decoration: none;
+}
+
+.row .title:hover {
+    text-decoration: underline;
+}
+
+.row .artist {
+    font-size: var(--theme-font-size-sm);
+    color: var(--theme-colors-foreground-muted);
+    text-decoration: none;
+}
+
+.row .artist-plain-text:hover {
+    text-decoration: underline;
+}
+
+.row .metadata-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.row .metadata-link:hover {
+    color: var(--theme-colors-foreground);
+    text-decoration: underline;
+}
+
+.row .metadata-extra {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-xs);
+    align-items: center;
+    width: 100%;
+    font-size: var(--theme-font-size-sm);
+    color: var(--theme-colors-foreground-muted);
+    text-align: center;
+}
+
+.row .metadata-line {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap-style: balance;
+    white-space: nowrap;
+}
+
+.row .metadata-line-clamp-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+
+.row .right {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.row .tracks-table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-size: var(--theme-font-size-sm);
+}
+
+.row .track-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.row .track-header-cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.row .track-cell {
+    min-width: 0;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.row .track-row-size-compact {
+    height: 32px;
+    min-height: 32px;
+    max-height: 32px;
+}
+
+.row .track-row-size-default {
+    height: 40px;
+    min-height: 40px;
+    max-height: 40px;
+}
+
+.row .track-row-size-large {
+    height: 48px;
+    min-height: 48px;
+    max-height: 48px;
+}
+
+.row .track-cell-muted {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.row .track-cell-with-vertical-border {
+    border-right: 1px solid transparent;
+}
+
+.row .track-cell-vertical-border-visible {
+    border-right-color: var(--theme-colors-border);
+}
+
+.row .track-cell-image {
+    display: flex;
+    align-self: stretch;
+    min-height: 0;
+    max-height: 100%;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+    overflow: hidden;
+}
+
+.row .track-cell-no-h-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.track-row-dragging {
+    opacity: 0.5;
+}
+
+.track-row.track-row-alternate-even {
+    background-color: var(--theme-colors-background);
+}
+
+.track-row.track-row-alternate-odd {
+    @mixin dark {
+        background-color: darken(var(--theme-colors-background), 30%);
+    }
+
+    @mixin light {
+        background-color: darken(var(--theme-colors-background), 2%);
+    }
+}
+
+.track-row.track-row-selected {
+    @mixin dark {
+        background-color: lighten(var(--theme-colors-surface), 5%);
+    }
+
+    @mixin light {
+        background-color: darken(var(--theme-colors-surface), 5%);
+    }
+}
+
+.track-row.track-row-with-horizontal-border {
+    border-top: 1px solid transparent;
+}
+
+.track-row.track-row-horizontal-border-visible {
+    border-top-color: var(--theme-colors-border);
+}
+
+.track-row.track-row-hover-highlight-enabled {
+    position: relative;
+}
+
+.track-row.track-row-hover-highlight-enabled .track-cell {
+    position: relative;
+    z-index: 2;
+}
+
+.track-row.track-row-hover-highlight-enabled:hover::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background-color: var(--theme-colors-surface);
+    opacity: 0.7;
+}
+
+.skeleton-image-container {
+    justify-content: center;
+}
+
+.skeleton-image {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: var(--theme-radius-md);
+}
+
+.skeleton-title-container {
+    justify-content: center;
+}
+
+.skeleton-title {
+    width: 75%;
+    height: 1.25rem;
+}
+
+.skeleton-artist-container {
+    justify-content: center;
+}
+
+.skeleton-artist {
+    width: 50%;
+    height: 1rem;
+}
+
+.skeleton-tracks {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.skeleton-track-row {
+    display: grid;
+    grid-template-columns: 40px 1fr 8rem;
+    gap: var(--theme-spacing-sm);
+    align-items: center;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+}
+
+.skeleton-tracks-size-compact .skeleton-track-row {
+    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.skeleton-tracks-size-default .skeleton-track-row {
+    height: 40px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.skeleton-tracks-size-large .skeleton-track-row {
+    height: 48px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.skeleton-track-cell {
+    width: 100%;
+    height: 1rem;
+}
+
+.skeleton-track-cell-title {
+    width: 100%;
+    min-width: 0;
+    height: 1rem;
+}

src/renderer/components/item-list/item-detail-list/utils.ts

@@ -0,0 +1,65 @@
+import { TableColumn } from '/@/shared/types/types';
+
+const FIXED_TRACK_COLUMN_WIDTHS: Partial<Record<TableColumn, number>> = {
+    [TableColumn.ACTIONS]: 32,
+    [TableColumn.BIT_DEPTH]: 80,
+    [TableColumn.BIT_RATE]: 80,
+    [TableColumn.BPM]: 56,
+    [TableColumn.CHANNELS]: 80,
+    [TableColumn.CODEC]: 80,
+    [TableColumn.DATE_ADDED]: 128,
+    [TableColumn.DISC_NUMBER]: 36,
+    [TableColumn.DURATION]: 72,
+    [TableColumn.RELEASE_DATE]: 128,
+    [TableColumn.SAMPLE_RATE]: 90,
+    [TableColumn.TRACK_NUMBER]: 56,
+    [TableColumn.USER_FAVORITE]: 32,
+    [TableColumn.USER_RATING]: 64,
+    [TableColumn.YEAR]: 56,
+};
+
+const HOVER_ONLY_COLUMNS: TableColumn[] = [
+    TableColumn.ACTIONS,
+    TableColumn.USER_FAVORITE,
+    TableColumn.USER_RATING,
+];
+
+const NO_HORIZONTAL_PADDING_COLUMNS: TableColumn[] = [
+    TableColumn.ACTIONS,
+    TableColumn.USER_FAVORITE,
+    TableColumn.USER_RATING,
+];
+
+export function getTrackColumnFixed(columnId: TableColumn): {
+    fixedWidth: number;
+    isFixedColumn: boolean;
+} {
+    const width = FIXED_TRACK_COLUMN_WIDTHS[columnId];
+    return width !== undefined
+        ? { fixedWidth: width, isFixedColumn: true }
+        : { fixedWidth: 0, isFixedColumn: false };
+}
+
+export function isNoHorizontalPaddingColumn(columnId: TableColumn): boolean {
+    return NO_HORIZONTAL_PADDING_COLUMNS.includes(columnId);
+}
+
+export function isTrackColumnHoverOnly(columnId: TableColumn): boolean {
+    return HOVER_ONLY_COLUMNS.includes(columnId);
+}
+
+export function shouldShowHoverOnlyColumnContent(
+    columnId: TableColumn,
+    isRowHovered: boolean,
+    song: { userFavorite?: boolean | null; userRating?: null | number },
+): boolean {
+    if (!HOVER_ONLY_COLUMNS.includes(columnId)) {
+        return true;
+    }
+
+    return (
+        isRowHovered ||
+        (columnId === TableColumn.USER_FAVORITE && song.userFavorite !== false) ||
+        (columnId === TableColumn.USER_RATING && song.userRating != null)
+    );
+}

src/renderer/components/item-list/item-table-list/columns/image-column.tsx

@@ -54,6 +54,7 @@ const ImageColumnBase = (props: ItemTableListInnerColumn) => {
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;
@@ -90,6 +91,7 @@ const ImageColumnBase = (props: ItemTableListInnerColumn) => {
                         })}
                         enableDebounce={true}
                         enableViewport={false}
+                        explicitStatus={item?.explicitStatus}
                         id={item?.imageId}
                         itemType={item?._itemType}
                         src={item?.imageUrl}

src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx

@@ -13,6 +13,7 @@ import {
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
 import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
@@ -52,6 +53,7 @@ export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => {
                     })}
                 >
                     <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
+                        <ExplicitIndicator explicitStatus={item?.explicitStatus} />
                         {item.name as string}
                     </Text>
                     <div className={styles.artists}>
@@ -120,6 +122,7 @@ export const QueueSongTitleArtistColumn = (props: ItemTableListInnerColumn) => {
                         size="md"
                         {...titleLinkProps}
                     >
+                        <ExplicitIndicator explicitStatus={song?.explicitStatus} />
                         {row.name as string}
                         {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                             <Text

src/renderer/components/item-list/item-table-list/columns/title-column.tsx

@@ -11,6 +11,7 @@ import {
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
@@ -58,6 +59,7 @@ function DefaultTitleColumn(props: ItemTableListInnerColumn) {
                     isNoSelect
                     {...titleLinkProps}
                 >
+                    <ExplicitIndicator explicitStatus={item?.explicitStatus} />
                     {row}
                 </Text>
             </TableColumnContainer>
@@ -103,6 +105,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
                     isNoSelect
                     {...titleLinkProps}
                 >
+                    <ExplicitIndicator explicitStatus={song?.explicitStatus} />
                     {row}
                     {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                         <Text

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -20,6 +20,7 @@ import {
     PlayTooltip,
 } from '/@/renderer/features/shared/components/play-button-group';
 import { usePlayButtonBehavior } from '/@/renderer/store';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
 import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
@@ -57,6 +58,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;
@@ -105,6 +107,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                         containerClassName={styles.image}
                         enableDebounce={true}
                         enableViewport={false}
+                        explicitStatus={item?.explicitStatus}
                         id={item?.imageId}
                         itemType={item?._itemType}
                         src={item?.imageUrl}
@@ -140,6 +143,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                     })}
                 >
                     <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
+                        <ExplicitIndicator explicitStatus={item?.explicitStatus} />
                         {item.name as string}
                     </Text>
                     <div className={styles.artists}>
@@ -197,6 +201,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;
@@ -244,6 +249,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                 >
                     <ItemImage
                         containerClassName={styles.image}
+                        explicitStatus={item?.explicitStatus}
                         id={item?.imageId}
                         itemType={item?._itemType}
                         serverId={item?._serverId}
@@ -289,6 +295,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                         size="md"
                         {...titleLinkProps}
                     >
+                        <ExplicitIndicator explicitStatus={song?.explicitStatus} />
                         {row.name as string}
                         {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                             <Text

src/renderer/components/item-list/item-table-list/hooks/use-item-drag-drop-state.tsx

@@ -7,8 +7,8 @@ import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { Folder, LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { DragOperation, DragTarget, DragTargetMap } from '/@/shared/types/drag-and-drop';
 
-interface DragDropState {
-    dragRef: null | React.Ref<HTMLDivElement>;
+interface DragDropState<TElement extends HTMLElement = HTMLDivElement> {
+    dragRef: null | React.Ref<TElement>;
     isDraggedOver: 'bottom' | 'top' | null;
     isDragging: boolean;
 }
@@ -23,7 +23,7 @@ interface UseItemDragDropStateProps {
     playlistId?: string;
 }
 
-export const useItemDragDropState = ({
+export const useItemDragDropState = <TElement extends HTMLElement = HTMLDivElement>({
     enableDrag,
     internalState,
     isDataRow,
@@ -31,14 +31,14 @@ export const useItemDragDropState = ({
     itemType,
     playerContext,
     playlistId,
-}: UseItemDragDropStateProps): DragDropState => {
+}: UseItemDragDropStateProps): DragDropState<TElement> => {
     const shouldEnableDrag = enableDrag && isDataRow && !!item;
 
     const {
         isDraggedOver,
         isDragging: isDraggingLocal,
         ref: dragRef,
-    } = useDragDrop<HTMLDivElement>({
+    } = useDragDrop<TElement>({
         drag: {
             getId: () => {
                 if (!item || !isDataRow) {

src/renderer/components/item-list/item-table-list/hooks/use-table-imperative-handle.ts

@@ -1,6 +1,7 @@
 import { useEffect, useImperativeHandle, useMemo } from 'react';
 
-import { ItemListHandle, ItemListStateActions } from '/@/renderer/components/item-list/types';
+import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { ItemListHandle } from '/@/renderer/components/item-list/types';
 
 interface UseTableImperativeHandleProps {
     enableHeader: boolean;

src/renderer/components/item-list/item-table-list/item-table-list-column.module.css

@@ -26,6 +26,11 @@
     padding: var(--theme-spacing-xs) var(--theme-spacing-xl);
 }
 
+.container.no-horizontal-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
 .container.center {
     align-items: center;
     text-align: center;
@@ -205,6 +210,11 @@
     padding: 0 var(--theme-spacing-xl);
 }
 
+.header-container.no-horizontal-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
 .header-dragging {
     cursor: grabbing;
     opacity: 0.5;

src/renderer/components/item-list/item-table-list/item-table-list-column.tsx

@@ -26,6 +26,7 @@ import styles from './item-table-list-column.module.css';
 
 import i18n from '/@/i18n/i18n';
 import { useItemSelectionState } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { isNoHorizontalPaddingColumn } from '/@/renderer/components/item-list/item-detail-list/utils';
 import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
 import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
 import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
@@ -479,6 +480,7 @@ export const TableColumnTextContainer = (
                 [styles.dragging]: isDataRow && isDragging,
                 [styles.large]: props.size === 'large',
                 [styles.left]: props.columns[props.columnIndex].align === 'start',
+                [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
                 [styles.paddingLg]: props.cellPadding === 'lg',
                 [styles.paddingMd]: props.cellPadding === 'md',
                 [styles.paddingSm]: props.cellPadding === 'sm',
@@ -632,6 +634,7 @@ export const TableColumnContainer = (
                 [styles.dragging]: isDataRow && isDragging,
                 [styles.large]: props.size === 'large',
                 [styles.left]: props.columns[props.columnIndex].align === 'start',
+                [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
                 [styles.paddingLg]: props.cellPadding === 'lg',
                 [styles.paddingMd]: props.cellPadding === 'md',
                 [styles.paddingSm]: props.cellPadding === 'sm',
@@ -850,6 +853,7 @@ export const TableColumnHeaderContainer = (
                 [styles.headerDraggedOverLeft]: isDraggedOver === 'left',
                 [styles.headerDraggedOverRight]: isDraggedOver === 'right',
                 [styles.headerDragging]: isDragging,
+                [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
                 [styles.paddingLg]: props.cellPadding === 'lg',
                 [styles.paddingMd]: props.cellPadding === 'md',
                 [styles.paddingSm]: props.cellPadding === 'sm',
@@ -881,7 +885,7 @@ export const TableColumnHeaderContainer = (
     );
 };
 
-const columnLabelMap: Record<TableColumn, ReactNode | string> = {
+export const columnLabelMap: Record<TableColumn, ReactNode | string> = {
     [TableColumn.ACTIONS]: (
         <Flex className={styles.headerIconWrapper}>
             <Icon fill="default" icon="ellipsisHorizontal" />

src/renderer/components/item-list/types.ts

@@ -98,7 +98,7 @@ export interface ItemListTableComponentProps<TQuery> extends ItemListComponentPr
     enableRowHoverHighlight?: boolean;
     enableSelection?: boolean;
     enableVerticalBorders?: boolean;
-    size?: 'compact' | 'default';
+    size?: 'compact' | 'default' | 'large';
 }
 
 export interface ItemTableListColumnConfig {

src/renderer/features/albums/components/album-detail-content.tsx

@@ -22,7 +22,10 @@ import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumInfiniteCarousel } from '/@/renderer/features/albums/components/album-infinite-carousel';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
-import { ListSortByDropdownControlled } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
+import {
+    CLIENT_SIDE_SONG_FILTERS,
+    ListSortByDropdownControlled,
+} from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButtonControlled } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
 import { FILTER_KEYS, searchLibraryItems } from '/@/renderer/features/shared/utils';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -345,7 +348,6 @@ const AlbumMetadataExternalLinks = ({
                         }}
                         radius="md"
                         rel="noopener noreferrer"
-                        size="md"
                         target="_blank"
                         tooltip={{
                             label: t('action.openIn.musicbrainz'),
@@ -743,7 +745,8 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
                     value={searchTerm}
                 />
                 <ListSortByDropdownControlled
-                    itemType={LibraryItem.PLAYLIST_SONG}
+                    filters={CLIENT_SIDE_SONG_FILTERS}
+                    itemType={LibraryItem.SONG}
                     setSortBy={(value) => setSortBy(value as SongListSort)}
                     sortBy={sortBy}
                 />

src/renderer/features/albums/components/album-detail-header.tsx

@@ -220,6 +220,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
             <LibraryHeader
                 item={{
                     children: headerItem,
+                    explicitStatus: detailQuery?.data?.explicitStatus ?? null,
                     imageId: detailQuery?.data?.imageId,
                     imageUrl: detailQuery?.data?.imageUrl,
                     route: AppRoute.LIBRARY_ALBUMS,
@@ -232,8 +233,8 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
                         {metadataItems.map((item, index) => (
                             <Fragment key={item.id}>
                                 {index > 0 && (
-                                    <Text fw={400} isMuted isNoSelect>
-                                        •
+                                    <Text isMuted isNoSelect>
+                                        <Separator />
                                     </Text>
                                 )}
                                 <Text fw={400}>{item.value}</Text>

src/renderer/features/albums/components/album-list-content.tsx

@@ -36,6 +36,18 @@ const AlbumListPaginatedTable = lazy(() =>
     })),
 );
 
+const AlbumListInfiniteDetail = lazy(() =>
+    import('/@/renderer/features/albums/components/album-list-infinite-detail').then((module) => ({
+        default: module.AlbumListInfiniteDetail,
+    })),
+);
+
+const AlbumListPaginatedDetail = lazy(() =>
+    import('/@/renderer/features/albums/components/album-list-paginated-detail').then((module) => ({
+        default: module.AlbumListPaginatedDetail,
+    })),
+);
+
 const AlbumListFilters = () => {
     return (
         <ListWithSidebarContainer.SidebarPortal>
@@ -62,13 +74,16 @@ export const AlbumListContent = () => {
 };
 
 const AlbumListSuspenseContainer = () => {
-    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
+    const { detail, display, grid, itemsPerPage, pagination, table } = useListSettings(
+        ItemListKey.ALBUM,
+    );
 
     const { customFilters } = useListContext();
 
     return (
         <Suspense fallback={<Spinner container />}>
             <AlbumListView
+                detail={detail}
                 display={display}
                 grid={grid}
                 itemsPerPage={itemsPerPage}
@@ -83,13 +98,17 @@ const AlbumListSuspenseContainer = () => {
 export type OverrideAlbumListQuery = Omit<Partial<AlbumListQuery>, 'limit' | 'startIndex'>;
 
 export const AlbumListView = ({
+    detail,
     display,
     grid,
     itemsPerPage,
     overrideQuery,
     pagination,
     table,
-}: ItemListSettings & { overrideQuery?: OverrideAlbumListQuery }) => {
+}: ItemListSettings & {
+    detail?: ItemListSettings['detail'];
+    overrideQuery?: OverrideAlbumListQuery;
+}) => {
     const server = useCurrentServer();
     const { pageKey } = useListContext();
 
@@ -179,6 +198,32 @@ export const AlbumListView = ({
                     return null;
             }
         }
+        case ListDisplayType.DETAIL: {
+            switch (pagination) {
+                case ListPaginationType.INFINITE: {
+                    return (
+                        <AlbumListInfiniteDetail
+                            enableHeader={detail?.enableHeader}
+                            itemsPerPage={itemsPerPage}
+                            query={mergedQuery}
+                            serverId={server.id}
+                        />
+                    );
+                }
+                case ListPaginationType.PAGINATED: {
+                    return (
+                        <AlbumListPaginatedDetail
+                            enableHeader={detail?.enableHeader}
+                            itemsPerPage={itemsPerPage}
+                            query={mergedQuery}
+                            serverId={server.id}
+                        />
+                    );
+                }
+                default:
+                    return null;
+            }
+        }
     }
 
     return null;

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
+import {
+    ALBUM_TABLE_COLUMNS,
+    SONG_TABLE_COLUMNS,
+} from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
@@ -92,8 +95,15 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
                 <ListRefreshButton listKey={pageKey as ItemListKey} />
             </Group>
             <Group gap="sm" wrap="nowrap">
-                <ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
+                <ListDisplayTypeToggleButton enableDetail listKey={ItemListKey.ALBUM} />
                 <ListConfigMenu
+                    detailConfig={{
+                        optionsConfig: {
+                            autoFitColumns: { hidden: true },
+                        },
+                        tableColumnsData: SONG_TABLE_COLUMNS,
+                        tableKey: 'detail',
+                    }}
                     listKey={ItemListKey.ALBUM}
                     tableColumnsData={ALBUM_TABLE_COLUMNS}
                 />

src/renderer/features/albums/components/album-list-infinite-detail.tsx

@@ -0,0 +1,69 @@
+import { UseSuspenseQueryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
+import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
+import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
+import { ItemDetailList } from '/@/renderer/components/item-list/item-detail-list/item-detail-list';
+import { ItemListComponentProps } from '/@/renderer/components/item-list/types';
+import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import {
+    AlbumListQuery,
+    AlbumListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+interface AlbumListInfiniteDetailProps extends ItemListComponentProps<AlbumListQuery> {
+    enableHeader?: boolean;
+}
+
+export const AlbumListInfiniteDetail = ({
+    enableHeader = true,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    },
+    serverId,
+}: AlbumListInfiniteDetailProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { getItem, itemCount, loadedItems, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    return (
+        <ItemDetailList
+            data={loadedItems}
+            enableHeader={enableHeader}
+            getItem={getItem}
+            itemCount={itemCount}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+        />
+    );
+};

src/renderer/features/albums/components/album-list-paginated-detail.tsx

@@ -0,0 +1,80 @@
+import { UseSuspenseQueryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
+import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
+import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
+import { ItemDetailList } from '/@/renderer/components/item-list/item-detail-list/item-detail-list';
+import { ItemListWithPagination } from '/@/renderer/components/item-list/item-list-pagination/item-list-pagination';
+import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
+import { ItemListComponentProps } from '/@/renderer/components/item-list/types';
+import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import {
+    AlbumListQuery,
+    AlbumListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+interface AlbumListPaginatedDetailProps extends ItemListComponentProps<AlbumListQuery> {
+    enableHeader?: boolean;
+}
+
+export const AlbumListPaginatedDetail = ({
+    enableHeader = true,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    },
+    serverId,
+}: AlbumListPaginatedDetailProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemDetailList
+                currentPage={currentPage}
+                enableHeader={enableHeader}
+                items={data || []}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+            />
+        </ItemListWithPagination>
+    );
+};

src/renderer/features/albums/components/jellyfin-album-filters.tsx

@@ -52,9 +52,12 @@ export const JellyfinAlbumFilters = ({
         setMinYear,
     } = useAlbumListFilters();
 
-    // TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
     const genreListQuery = useQuery(
         genresQueries.list({
+            options: {
+                gcTime: 1000 * 60 * 2,
+                staleTime: 1000 * 60 * 1,
+            },
             query: {
                 sortBy: GenreListSort.NAME,
                 sortOrder: SortOrder.ASC,

src/renderer/features/albums/components/joined-artists.tsx

@@ -1,21 +1,28 @@
-import { Fragment } from 'react';
+import { Fragment, memo } from 'react';
 import { generatePath, Link } from 'react-router';
 
 import { AppRoute } from '/@/renderer/router/routes';
 import { Text, TextProps } from '/@/shared/components/text/text';
 import { AlbumArtist, RelatedAlbumArtist, RelatedArtist } from '/@/shared/types/domain-types';
 
+export const JOINED_ARTISTS_MUTED_PROPS = {
+    linkProps: { fw: 400, isMuted: true },
+    rootTextProps: { fw: 400, isMuted: true, size: 'sm' as const },
+} as const;
+
 interface JoinedArtistsProps {
     artistName: string;
     artists: AlbumArtist[] | RelatedAlbumArtist[] | RelatedArtist[];
     linkProps?: Partial<Omit<TextProps, 'children' | 'component' | 'to'>>;
+    readOnly?: boolean;
     rootTextProps?: Partial<Omit<TextProps, 'children' | 'component'>>;
 }
 
-export const JoinedArtists = ({
+const JoinedArtistsComponent = ({
     artistName,
     artists,
     linkProps,
+    readOnly = false,
     rootTextProps,
 }: JoinedArtistsProps) => {
     const parts: (
@@ -111,7 +118,7 @@ export const JoinedArtists = ({
                 {artists.map((artist, index) => (
                     <Fragment key={artist.id || `artist-${index}`}>
                         {index > 0 && ', '}
-                        {artist.id ? (
+                        {artist.id && !readOnly ? (
                             <Text
                                 component={Link}
                                 fw={500}
@@ -124,7 +131,7 @@ export const JoinedArtists = ({
                                 {artist.name}
                             </Text>
                         ) : (
-                            <Text fw={500} {...linkProps}>
+                            <Text component="span" fw={500} {...linkProps}>
                                 {artist.name}
                             </Text>
                         )}
@@ -152,7 +159,7 @@ export const JoinedArtists = ({
 
                 const { artist, text } = part;
 
-                if (artist.id) {
+                if (artist.id && !readOnly) {
                     return (
                         <Text
                             component={Link}
@@ -169,7 +176,7 @@ export const JoinedArtists = ({
                     );
                 }
                 return (
-                    <Text fw={500} key={`${artist.name}-${index}`} {...linkProps}>
+                    <Text component="span" fw={500} key={`${artist.name}-${index}`} {...linkProps}>
                         {text}
                     </Text>
                 );
@@ -180,7 +187,7 @@ export const JoinedArtists = ({
                     {unmatchedArtists.map((artist, index) => (
                         <Fragment key={artist.id}>
                             {index > 0 && ', '}
-                            {artist.id ? (
+                            {artist.id && !readOnly ? (
                                 <Text
                                     component={Link}
                                     fw={500}
@@ -192,6 +199,10 @@ export const JoinedArtists = ({
                                 >
                                     {artist.name}
                                 </Text>
+                            ) : artist.id ? (
+                                <Text component="span" fw={500} {...linkProps}>
+                                    {artist.name}
+                                </Text>
                             ) : (
                                 <Text component="span" isMuted>
                                     {artist.name}
@@ -205,6 +216,8 @@ export const JoinedArtists = ({
     );
 };
 
+export const JoinedArtists = memo(JoinedArtistsComponent);
+
 function escapeRegex(str: string): string {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
-import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
+import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
@@ -22,7 +22,12 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
 import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
-import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
+import {
+    AlbumArtistListSort,
+    GenreListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
 
 interface NavidromeAlbumFiltersProps {
     disableArtistFilter?: boolean;
@@ -54,7 +59,20 @@ export const NavidromeAlbumFilters = ({
         setRecentlyPlayed,
     } = useAlbumListFilters();
 
-    const genreListQuery = useGenreList();
+    const genreListQuery = useQuery(
+        genresQueries.list({
+            options: {
+                gcTime: 1000 * 60 * 2,
+                staleTime: 1000 * 60 * 1,
+            },
+            query: {
+                sortBy: GenreListSort.NAME,
+                sortOrder: SortOrder.ASC,
+                startIndex: 0,
+            },
+            serverId,
+        }),
+    );
 
     const genreList = useMemo(() => {
         if (!genreListQuery?.data) return [];
@@ -333,6 +351,7 @@ export const NavidromeAlbumFilters = ({
                     <VirtualMultiSelect
                         displayCountType="album"
                         height={220}
+                        isLoading={genreListQuery.isFetching}
                         label={genreFilterLabel}
                         onChange={handleGenreChange}
                         options={genreList}

src/renderer/features/albums/components/subsonic-album-filters.tsx

@@ -1,11 +1,11 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { ChangeEvent, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
-import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
+import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
@@ -21,7 +21,12 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
 import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
-import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
+import {
+    AlbumArtistListSort,
+    GenreListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
 
 interface SubsonicAlbumFiltersProps {
     disableArtistFilter?: boolean;
@@ -90,7 +95,20 @@ export const SubsonicAlbumFilters = ({
         [isArtistDisabled, setAlbumArtist],
     );
 
-    const genreListQuery = useGenreList();
+    const genreListQuery = useQuery(
+        genresQueries.list({
+            options: {
+                gcTime: 1000 * 60 * 2,
+                staleTime: 1000 * 60 * 1,
+            },
+            query: {
+                sortBy: GenreListSort.NAME,
+                sortOrder: SortOrder.ASC,
+                startIndex: 0,
+            },
+            serverId,
+        }),
+    );
 
     const genreList = useMemo(() => {
         if (!genreListQuery?.data) return [];
@@ -252,6 +270,7 @@ export const SubsonicAlbumFilters = ({
                         disabled={isArtistDisabled}
                         displayCountType="album"
                         height={300}
+                        isLoading={albumArtistListQuery.isFetching}
                         label={artistFilterLabel}
                         onChange={handleAlbumArtistFilter}
                         options={selectableAlbumArtists}
@@ -268,6 +287,7 @@ export const SubsonicAlbumFilters = ({
                         disabled={isGenreDisabled}
                         displayCountType="album"
                         height={220}
+                        isLoading={genreListQuery.isFetching}
                         label={genreFilterLabel}
                         onChange={handleGenresFilter}
                         options={genreList}

src/renderer/features/albums/context/album-list-context.tsx

@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import { ListKey } from '/@/renderer/store';
-
-export const AlbumListContext = createContext<{ id?: string; pageKey: ListKey }>({
-    pageKey: 'album',
-});
-
-export const useAlbumListContext = () => {
-    const ctxValue = useContext(AlbumListContext);
-    return ctxValue;
-};

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -127,6 +127,7 @@ const DummyAlbumDetailRoute = () => {
                     <LibraryHeader
                         imageUrl={imageUrl}
                         item={{
+                            explicitStatus: detailQuery?.data?.explicitStatus ?? null,
                             imageId: detailQuery?.data?.imageId,
                             imageUrl: detailQuery?.data?.imageUrl,
                             route: AppRoute.LIBRARY_SONGS,

src/renderer/features/artists/api/artists-api.ts

@@ -10,6 +10,8 @@ import {
     AlbumArtistListQuery,
     ArtistListQuery,
     ListCountQuery,
+    SongListSort,
+    SortOrder,
     TopSongListQuery,
 } from '/@/shared/types/domain-types';
 
@@ -120,6 +122,24 @@ export const artistsQueries = {
             ...args.options,
         });
     },
+    favoriteSongs: (args: QueryHookArgs<{ artistId: string }>) => {
+        return queryOptions({
+            queryFn: ({ signal }) => {
+                return api.controller.getSongList({
+                    apiClientProps: { serverId: args.serverId, signal },
+                    query: {
+                        artistIds: [args.query.artistId],
+                        favorite: true,
+                        limit: -1,
+                        sortBy: SongListSort.RELEASE_DATE,
+                        sortOrder: SortOrder.ASC,
+                        startIndex: 0,
+                    },
+                });
+            },
+            queryKey: queryKeys.albumArtists.favoriteSongs(args.serverId, args.query.artistId),
+        });
+    },
     topSongs: (args: QueryHookArgs<TopSongListQuery>) => {
         return queryOptions({
             queryFn: ({ signal }) => {

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -66,6 +66,7 @@ import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Grid } from '/@/shared/components/grid/grid';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
+import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Spoiler } from '/@/shared/components/spoiler/spoiler';
 import { Stack } from '/@/shared/components/stack/stack';
@@ -74,6 +75,7 @@ import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
 import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
+import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import {
     Album,
     AlbumArtist,
@@ -88,6 +90,8 @@ import {
 } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType, Play } from '/@/shared/types/types';
 
+const collator = new Intl.Collator();
+
 interface AlbumArtistActionButtonsProps {
     artistDiscographyLink: string;
     artistSongsLink: string;
@@ -234,6 +238,10 @@ const AlbumArtistMetadataTopSongsContent = ({
     const [searchTerm, setSearchTerm] = useState('');
     const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
     const [showAll, setShowAll] = useState(false);
+    const [topSongsQueryType, setTopSongsQueryType] = useLocalStorage<'community' | 'personal'>({
+        defaultValue: 'community',
+        key: 'album-artist-top-songs-query-type',
+    });
     const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.SONG]?.table);
     const currentSong = usePlayerSong();
     const player = usePlayer();
@@ -247,6 +255,7 @@ const AlbumArtistMetadataTopSongsContent = ({
             query: {
                 artist: detailQuery.data?.name || '',
                 artistId: routeId,
+                type: topSongsQueryType,
             },
             serverId: serverId,
         }),
@@ -293,41 +302,30 @@ const AlbumArtistMetadataTopSongsContent = ({
         };
     }, [player]);
 
-    if (topSongsQuery.isLoading || !topSongsQuery.data) {
-        return null;
-    }
+    const handlePlay = useCallback(
+        (playType: Play) => {
+            if (songs.length === 0) return;
+            player.addToQueueByData(songs, playType);
+        },
+        [songs, player],
+    );
 
-    if (!topSongsQuery?.data?.items?.length) return null;
+    const handlePlayNext = usePlayButtonClick({
+        onClick: () => handlePlay(Play.NEXT),
+        onLongPress: () => handlePlay(LONG_PRESS_PLAY_BEHAVIOR[Play.NEXT]),
+    });
+    const handlePlayNow = usePlayButtonClick({
+        onClick: () => handlePlay(Play.NOW),
+        onLongPress: () => handlePlay(LONG_PRESS_PLAY_BEHAVIOR[Play.NOW]),
+    });
+    const handlePlayLast = usePlayButtonClick({
+        onClick: () => handlePlay(Play.LAST),
+        onLongPress: () => handlePlay(LONG_PRESS_PLAY_BEHAVIOR[Play.LAST]),
+    });
 
-    if (!tableConfig || columns.length === 0) {
-        return (
-            <section>
-                <div className={styles.albumSectionTitle}>
-                    <TextTitle fw={700} order={3}>
-                        {t('page.albumArtistDetail.topSongs', {
-                            postProcess: 'sentenceCase',
-                        })}
-                    </TextTitle>
-                    <div className={styles.albumSectionDividerContainer}>
-                        <div className={styles.albumSectionDivider} />
-                        <Button
-                            component={Link}
-                            size="compact-md"
-                            to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS, {
-                                albumArtistId: routeId,
-                            })}
-                            uppercase
-                            variant="subtle"
-                        >
-                            {t('page.albumArtistDetail.viewAll', {
-                                postProcess: 'sentenceCase',
-                            })}
-                        </Button>
-                    </div>
-                </div>
-            </section>
-        );
-    }
+    const isLoading = topSongsQuery.isLoading || !topSongsQuery.data;
+
+    if (!isLoading && !tableConfig) return null;
 
     const currentSongId = currentSong?.id;
 
@@ -335,11 +333,14 @@ const AlbumArtistMetadataTopSongsContent = ({
         <section>
             <Stack gap="md">
                 <div className={styles.albumSectionTitle}>
-                    <TextTitle fw={700} order={3}>
-                        {t('page.albumArtistDetail.topSongs', {
-                            postProcess: 'sentenceCase',
-                        })}
-                    </TextTitle>
+                    <Group>
+                        <TextTitle fw={700} order={3}>
+                            {t('page.albumArtistDetail.topSongs', {
+                                postProcess: 'sentenceCase',
+                            })}
+                        </TextTitle>
+                        {!isLoading && <Badge>{songs.length}</Badge>}
+                    </Group>
                     <div className={styles.albumSectionDividerContainer}>
                         <div className={styles.albumSectionDivider} />
                         <Button
@@ -355,74 +356,140 @@ const AlbumArtistMetadataTopSongsContent = ({
                                 postProcess: 'sentenceCase',
                             })}
                         </Button>
+                        {songs.length > 0 && (
+                            <ActionIconGroup>
+                                <PlayTooltip type={Play.NOW}>
+                                    <ActionIcon
+                                        icon="mediaPlay"
+                                        iconProps={{ size: 'md' }}
+                                        size="xs"
+                                        variant="subtle"
+                                        {...handlePlayNow.handlers}
+                                        {...handlePlayNow.props}
+                                        disabled={isLoading}
+                                    />
+                                </PlayTooltip>
+                                <PlayTooltip type={Play.NEXT}>
+                                    <ActionIcon
+                                        icon="mediaPlayNext"
+                                        iconProps={{ size: 'md' }}
+                                        size="xs"
+                                        variant="subtle"
+                                        {...handlePlayNext.handlers}
+                                        {...handlePlayNext.props}
+                                        disabled={isLoading}
+                                    />
+                                </PlayTooltip>
+                                <PlayTooltip type={Play.LAST}>
+                                    <ActionIcon
+                                        icon="mediaPlayLast"
+                                        iconProps={{ size: 'md' }}
+                                        size="xs"
+                                        variant="subtle"
+                                        {...handlePlayLast.handlers}
+                                        {...handlePlayLast.props}
+                                        disabled={isLoading}
+                                    />
+                                </PlayTooltip>
+                            </ActionIconGroup>
+                        )}
                     </div>
                 </div>
-                <Group gap="sm" w="100%">
-                    <TextInput
-                        flex={1}
-                        leftSection={<Icon icon="search" />}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        placeholder={t('common.search', { postProcess: 'sentenceCase' })}
-                        radius="xl"
-                        rightSection={
-                            searchTerm ? (
-                                <ActionIcon
-                                    icon="x"
-                                    onClick={() => setSearchTerm('')}
-                                    size="sm"
-                                    variant="transparent"
-                                />
-                            ) : null
-                        }
-                        styles={{
-                            input: {
-                                background: 'transparent',
-                                border: '1px solid rgba(255, 255, 255, 0.05)',
-                            },
-                        }}
-                        value={searchTerm}
-                    />
-                    <ListConfigMenu
-                        displayTypes={[{ hidden: true, value: ListDisplayType.GRID }]}
-                        listKey={ItemListKey.SONG}
-                        optionsConfig={{
-                            table: {
-                                itemsPerPage: { hidden: true },
-                                pagination: { hidden: true },
-                            },
-                        }}
-                        tableColumnsData={SONG_TABLE_COLUMNS}
-                    />
-                </Group>
-                <ItemTableList
-                    activeRowId={currentSongId}
-                    autoFitColumns={tableConfig.autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={filteredSongs}
-                    enableAlternateRowColors={tableConfig.enableAlternateRowColors}
-                    enableDrag
-                    enableDragScroll={false}
-                    enableExpansion={false}
-                    enableHeader={tableConfig.enableHeader}
-                    enableHorizontalBorders={tableConfig.enableHorizontalBorders}
-                    enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
-                    enableSelection
-                    enableSelectionDialog={false}
-                    enableVerticalBorders={tableConfig.enableVerticalBorders}
-                    itemType={LibraryItem.SONG}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    overrideControls={overrideControls}
-                    size={tableConfig.size}
-                />
-                {!searchTerm.trim() && songs.length > 5 && !showAll && (
-                    <Group justify="center" w="100%">
-                        <Button onClick={() => setShowAll(true)} variant="subtle">
-                            {t('action.viewMore', { postProcess: 'sentenceCase' })}
-                        </Button>
+                {isLoading ? (
+                    <Group justify="center" py="md">
+                        <Spinner container />
                     </Group>
-                )}
+                ) : tableConfig ? (
+                    <>
+                        <Group gap="sm" w="100%">
+                            <TextInput
+                                flex={1}
+                                leftSection={<Icon icon="search" />}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                placeholder={t('common.search', { postProcess: 'sentenceCase' })}
+                                radius="xl"
+                                rightSection={
+                                    searchTerm ? (
+                                        <ActionIcon
+                                            icon="x"
+                                            onClick={() => setSearchTerm('')}
+                                            size="sm"
+                                            variant="transparent"
+                                        />
+                                    ) : null
+                                }
+                                styles={{
+                                    input: {
+                                        background: 'transparent',
+                                        border: '1px solid rgba(255, 255, 255, 0.05)',
+                                    },
+                                }}
+                                value={searchTerm}
+                            />
+                            <SegmentedControl
+                                data={[
+                                    {
+                                        label: t('page.albumArtistDetail.topSongsCommunity', {
+                                            postProcess: 'sentenceCase',
+                                        }),
+                                        value: 'community',
+                                    },
+                                    {
+                                        label: t('page.albumArtistDetail.topSongsPersonal', {
+                                            postProcess: 'sentenceCase',
+                                        }),
+                                        value: 'personal',
+                                    },
+                                ]}
+                                onChange={(value) =>
+                                    setTopSongsQueryType(value as 'community' | 'personal')
+                                }
+                                size="xs"
+                                value={topSongsQueryType}
+                            />
+                            <ListConfigMenu
+                                displayTypes={[{ hidden: true, value: ListDisplayType.GRID }]}
+                                listKey={ItemListKey.SONG}
+                                optionsConfig={{
+                                    table: {
+                                        itemsPerPage: { hidden: true },
+                                        pagination: { hidden: true },
+                                    },
+                                }}
+                                tableColumnsData={SONG_TABLE_COLUMNS}
+                            />
+                        </Group>
+                        <ItemTableList
+                            activeRowId={currentSongId}
+                            autoFitColumns={tableConfig.autoFitColumns}
+                            CellComponent={ItemTableListColumn}
+                            columns={columns}
+                            data={filteredSongs}
+                            enableAlternateRowColors={tableConfig.enableAlternateRowColors}
+                            enableDrag
+                            enableDragScroll={false}
+                            enableExpansion={false}
+                            enableHeader={tableConfig.enableHeader}
+                            enableHorizontalBorders={tableConfig.enableHorizontalBorders}
+                            enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
+                            enableSelection
+                            enableSelectionDialog={false}
+                            enableVerticalBorders={tableConfig.enableVerticalBorders}
+                            itemType={LibraryItem.SONG}
+                            onColumnReordered={handleColumnReordered}
+                            onColumnResized={handleColumnResized}
+                            overrideControls={overrideControls}
+                            size={tableConfig.size}
+                        />
+                        {!searchTerm.trim() && songs.length > 5 && !showAll && (
+                            <Group justify="center" w="100%">
+                                <Button onClick={() => setShowAll(true)} variant="subtle">
+                                    {t('action.viewMore', { postProcess: 'sentenceCase' })}
+                                </Button>
+                            </Group>
+                        )}
+                    </>
+                ) : null}
             </Stack>
         </section>
     );
@@ -448,6 +515,244 @@ const AlbumArtistMetadataTopSongs = ({
     );
 };
 
+interface AlbumArtistMetadataFavoriteSongsProps {
+    routeId: string;
+}
+
+const AlbumArtistMetadataFavoriteSongs = ({ routeId }: AlbumArtistMetadataFavoriteSongsProps) => {
+    const { t } = useTranslation();
+    const [searchTerm, setSearchTerm] = useState('');
+    const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
+    const [showAll, setShowAll] = useState(false);
+    const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.SONG]?.table);
+    const currentSong = usePlayerSong();
+    const player = usePlayer();
+    const serverId = useCurrentServerId();
+
+    const favoriteSongsQuery = useQuery({
+        ...artistsQueries.favoriteSongs({
+            query: {
+                artistId: routeId,
+            },
+            serverId: serverId,
+        }),
+    });
+
+    const songs = useMemo(
+        () => favoriteSongsQuery.data?.items || [],
+        [favoriteSongsQuery.data?.items],
+    );
+
+    const columns = useMemo(() => {
+        return tableConfig?.columns || [];
+    }, [tableConfig?.columns]);
+
+    const filteredSongs = useMemo(() => {
+        const filtered = searchLibraryItems(songs, debouncedSearchTerm, LibraryItem.SONG);
+        // When searching, show all results. Otherwise, limit to 5 if not showing all
+        if (debouncedSearchTerm?.trim() || showAll) {
+            return filtered;
+        }
+        return filtered.slice(0, 5);
+    }, [songs, debouncedSearchTerm, showAll]);
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    const overrideControls: Partial<ItemControls> = useMemo(() => {
+        return {
+            onDoubleClick: ({ index, internalState, item, meta }) => {
+                if (!item) {
+                    return;
+                }
+
+                const playType = (meta?.playType as Play) || Play.NOW;
+                const items = internalState?.getData() as Song[];
+
+                if (index !== undefined) {
+                    player.addToQueueByData(items, playType, item.id);
+                }
+            },
+        };
+    }, [player]);
+
+    const handlePlay = useCallback(
+        (playType: Play) => {
+            if (songs.length === 0) return;
+            player.addToQueueByData(songs, playType);
+        },
+        [songs, player],
+    );
+
+    const handlePlayNext = usePlayButtonClick({
+        onClick: () => handlePlay(Play.NEXT),
+        onLongPress: () => handlePlay(LONG_PRESS_PLAY_BEHAVIOR[Play.NEXT]),
+    });
+    const handlePlayNow = usePlayButtonClick({
+        onClick: () => handlePlay(Play.NOW),
+        onLongPress: () => handlePlay(LONG_PRESS_PLAY_BEHAVIOR[Play.NOW]),
+    });
+    const handlePlayLast = usePlayButtonClick({
+        onClick: () => handlePlay(Play.LAST),
+        onLongPress: () => handlePlay(LONG_PRESS_PLAY_BEHAVIOR[Play.LAST]),
+    });
+
+    const isLoading = favoriteSongsQuery.isLoading || !favoriteSongsQuery.data;
+
+    if (!isLoading && !tableConfig) return null;
+
+    const currentSongId = currentSong?.id;
+
+    return (
+        <section>
+            <Stack gap="md">
+                <div className={styles.albumSectionTitle}>
+                    <Group>
+                        <TextTitle fw={700} order={3}>
+                            {t('page.albumArtistDetail.favoriteSongs', {
+                                postProcess: 'sentenceCase',
+                            })}
+                        </TextTitle>
+                        {!isLoading && <Badge>{songs.length}</Badge>}
+                    </Group>
+                    <div className={styles.albumSectionDividerContainer}>
+                        <div className={styles.albumSectionDivider} />
+                        <Button
+                            component={Link}
+                            size="compact-md"
+                            to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_FAVORITE_SONGS, {
+                                albumArtistId: routeId,
+                            })}
+                            uppercase
+                            variant="subtle"
+                        >
+                            {t('page.albumArtistDetail.viewAll', {
+                                postProcess: 'sentenceCase',
+                            })}
+                        </Button>
+                        {songs.length > 0 && (
+                            <ActionIconGroup>
+                                <PlayTooltip type={Play.NOW}>
+                                    <ActionIcon
+                                        icon="mediaPlay"
+                                        iconProps={{ size: 'md' }}
+                                        size="xs"
+                                        variant="subtle"
+                                        {...handlePlayNow.handlers}
+                                        {...handlePlayNow.props}
+                                        disabled={isLoading}
+                                    />
+                                </PlayTooltip>
+                                <PlayTooltip type={Play.NEXT}>
+                                    <ActionIcon
+                                        icon="mediaPlayNext"
+                                        iconProps={{ size: 'md' }}
+                                        size="xs"
+                                        variant="subtle"
+                                        {...handlePlayNext.handlers}
+                                        {...handlePlayNext.props}
+                                        disabled={isLoading}
+                                    />
+                                </PlayTooltip>
+                                <PlayTooltip type={Play.LAST}>
+                                    <ActionIcon
+                                        icon="mediaPlayLast"
+                                        iconProps={{ size: 'md' }}
+                                        size="xs"
+                                        variant="subtle"
+                                        {...handlePlayLast.handlers}
+                                        {...handlePlayLast.props}
+                                        disabled={isLoading}
+                                    />
+                                </PlayTooltip>
+                            </ActionIconGroup>
+                        )}
+                    </div>
+                </div>
+                {isLoading ? (
+                    <Group justify="center" py="md">
+                        <Spinner />
+                    </Group>
+                ) : tableConfig ? (
+                    <>
+                        <Group gap="sm" w="100%">
+                            <TextInput
+                                flex={1}
+                                leftSection={<Icon icon="search" />}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                placeholder={t('common.search', { postProcess: 'sentenceCase' })}
+                                radius="xl"
+                                rightSection={
+                                    searchTerm ? (
+                                        <ActionIcon
+                                            icon="x"
+                                            onClick={() => setSearchTerm('')}
+                                            size="sm"
+                                            variant="transparent"
+                                        />
+                                    ) : null
+                                }
+                                styles={{
+                                    input: {
+                                        background: 'transparent',
+                                        border: '1px solid rgba(255, 255, 255, 0.05)',
+                                    },
+                                }}
+                                value={searchTerm}
+                            />
+                            <ListConfigMenu
+                                displayTypes={[{ hidden: true, value: ListDisplayType.GRID }]}
+                                listKey={ItemListKey.SONG}
+                                optionsConfig={{
+                                    table: {
+                                        itemsPerPage: { hidden: true },
+                                        pagination: { hidden: true },
+                                    },
+                                }}
+                                tableColumnsData={SONG_TABLE_COLUMNS}
+                            />
+                        </Group>
+                        <ItemTableList
+                            activeRowId={currentSongId}
+                            autoFitColumns={tableConfig.autoFitColumns}
+                            CellComponent={ItemTableListColumn}
+                            columns={columns}
+                            data={filteredSongs}
+                            enableAlternateRowColors={tableConfig.enableAlternateRowColors}
+                            enableDrag
+                            enableDragScroll={false}
+                            enableExpansion={false}
+                            enableHeader={tableConfig.enableHeader}
+                            enableHorizontalBorders={tableConfig.enableHorizontalBorders}
+                            enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
+                            enableSelection
+                            enableSelectionDialog={false}
+                            enableVerticalBorders={tableConfig.enableVerticalBorders}
+                            itemType={LibraryItem.SONG}
+                            onColumnReordered={handleColumnReordered}
+                            onColumnResized={handleColumnResized}
+                            overrideControls={overrideControls}
+                            size={tableConfig.size}
+                        />
+                        {!searchTerm.trim() && songs.length > 5 && !showAll && (
+                            <Group justify="center" w="100%">
+                                <Button onClick={() => setShowAll(true)} variant="subtle">
+                                    {t('action.viewMore', { postProcess: 'sentenceCase' })}
+                                </Button>
+                            </Group>
+                        )}
+                    </>
+                ) : null}
+            </Stack>
+        </section>
+    );
+};
+
 interface AlbumArtistMetadataExternalLinksProps {
     artistName?: string;
     externalLinks: boolean;
@@ -726,6 +1031,11 @@ export const AlbumArtistDetailContent = ({
                             />
                         </Grid.Col>
                     )}
+                    {enabledItem.favoriteSongs && (
+                        <Grid.Col order={itemOrder.favoriteSongs} span={12}>
+                            <AlbumArtistMetadataFavoriteSongs routeId={routeId} />
+                        </Grid.Col>
+                    )}
                 </Grid>
             </div>
         </div>
@@ -1251,12 +1561,12 @@ const ArtistAlbums = ({ albumsQuery }: ArtistAlbumsProps) => {
                     const secondaryKeyB = getSecondaryTypePriorityKey(b.releaseType);
 
                     if (secondaryKeyA && secondaryKeyB) {
-                        return secondaryKeyA.localeCompare(secondaryKeyB);
+                        return collator.compare(secondaryKeyA, secondaryKeyB);
                     }
                 }
 
                 // Fallback to alphabetical for non-combined types or if weighted comparison isn't applicable
-                return a.releaseType.localeCompare(b.releaseType);
+                return collator.compare(a.releaseType, b.releaseType);
             });
     }, [albumsByReleaseType, artistReleaseTypeItems, t]);