handle sticky elements on new layout

inset the windowbar
inset the playerbar
2026-05-07 20:40:15 +02:00 · 2026-04-04 13:42:50 -07:00 · 2026-04-04 13:25:35 -07:00 · 2026-04-04 13:21:22 -07:00 · 2026-04-04 13:21:01 -07:00 · 2026-04-04 12:34:27 -07:00
162 changed files with 6147 additions and 2123 deletions
@@ -59,7 +59,11 @@ For media keys to work, you will be prompted to allow Feishin to be a Trusted Ac

 #### Linux Notes

-We provide a small install script to download the latest `.AppImage`, make it executable, and also download the icons required by Desktop Environments. Finally, it generates a `.desktop` file to add Feishin to your Application Launcher.
+Feishin is available in [Flathub](https://flathub.org/en/apps/org.jeffvli.feishin).
+
+Alternatively, you can install it as an Appimage.
+We provide a small install script to download the latest `.AppImage`, make it executable, and also download the icons required by Desktop Environments.
+Finally, it generates a `.desktop` file to add Feishin to your Application Launcher.

 Simply run the installer like this:

@@ -136,7 +140,7 @@ services:
 4. _Optional_ - To hard code the server url, pass the following environment variables: `SERVER_NAME`, `SERVER_TYPE` (one of `jellyfin` or `navidrome` or `subsonic`), `SERVER_URL`. To prevent users from changing these settings, pass `SERVER_LOCK=true`. This can only be set if all three of the previous values are set. When `SERVER_LOCK=true`, you can also set `LEGACY_AUTHENTICATION=true` or `LEGACY_AUTHENTICATION=false` to configure the legacy authentication flag for the server (only applicable for Subsonic/OpenSubsonic servers).

 5. _Optional_ - If your server uses a separate public-facing URL than what integrating applications use internally to communicate with your server, such as a separate Navidrome `ShareURL`, set `REMOTE_URL` to said public-facing URL.
- 
+
 6. _Optional_ - To disable Umami analytics tracking in the Docker/web version, set the environment variable `ANALYTICS_DISABLED=true`. When enabled, the analytics script will not be loaded and all tracking will be disabled.

 7. _Optional_ - App settings (theme, language, sidebar options, etc.) can be overridden with environment variables on first run. The variables use the `FS_` prefix (e.g. `FS_GENERAL_THEME=defaultDark`, `FS_GENERAL_LANGUAGE=de`). See [the settings environment variable documentation](docs/ENV_SETTINGS.md) for the full list.
@@ -29,12 +29,14 @@ These variables override app settings **on first run** when no persisted setting
 | `general.themeLight` | `defaultLight` | `FS_GENERAL_THEME_LIGHT` | Same as theme (used when system is light). |
 | `general.lastfmApiKey` | *(empty)* | `FS_GENERAL_LASTFM_API_KEY` | Last.fm API key. |
 | `general.lastFM` | `true` | `FS_GENERAL_LAST_FM` | `true` / `false` — Enable Last.fm. |
+| `general.listenBrainz` | `true` | `FS_GENERAL_LISTEN_BRAINZ` | `true` / `false` — ListenBrainz links. |
 | `general.musicBrainz` | `true` | `FS_GENERAL_MUSIC_BRAINZ` | `true` / `false` — MusicBrainz links. |
 | `general.nativeAspectRatio` | `false` | `FS_GENERAL_NATIVE_ASPECT_RATIO` | `true` / `false` — Use native cover art aspect ratio. |
 | `general.pathReplace` | *(empty)* | `FS_GENERAL_PATH_REPLACE` | Path pattern to replace (e.g. server path in Docker). |
 | `general.pathReplaceWith` | *(empty)* | `FS_GENERAL_PATH_REPLACE_WITH` | Replacement path. |
 | `general.playerbarOpenDrawer` | `false` | `FS_GENERAL_PLAYERBAR_OPEN_DRAWER` | `true` / `false` — Open queue/lyrics as drawer from player bar. |
 | `general.primaryShade` | `6` | `FS_GENERAL_PRIMARY_SHADE` | Mantine primary shade 0–9 (number). |
+| `general.qobuz` | `true` | `FS_GENERAL_QOBUZ` | `true` / `false` — Qobuz links. |
 | `general.resume` | `true` | `FS_GENERAL_RESUME` | `true` / `false` — Resume playback on load. |
 | `general.showLyricsInSidebar` | `true` | `FS_GENERAL_SHOW_LYRICS_IN_SIDEBAR` | `true` / `false` — Show lyrics in sidebar. |
 | `general.showRatings` | `true` | `FS_GENERAL_SHOW_RATINGS` | `true` / `false` — Show star ratings. |
@@ -44,6 +46,7 @@ These variables override app settings **on first run** when no persisted setting
 | `general.sidebarPlaylistList` | `true` | `FS_GENERAL_SIDEBAR_PLAYLIST_LIST` | `true` / `false` — Show playlist list in sidebar. |
 | `general.sidebarPlaylistSorting` | `false` | `FS_GENERAL_SIDEBAR_PLAYLIST_SORTING` | `true` / `false` — Enable playlist sorting in sidebar. |
 | `general.sideQueueType` | `sideQueue` | `FS_GENERAL_SIDE_QUEUE_TYPE` | `sideDrawerQueue` / `sideQueue` — Side play queue style. |
+| `general.sideQueueLayout` | `horizontal` | `FS_GENERAL_SIDE_QUEUE_LAYOUT` | `horizontal` / `vertical` — Attached side queue layout orientation. |
 | `general.useThemeAccentColor` | `false` | `FS_GENERAL_USE_THEME_ACCENT_COLOR` | `true` / `false` — Use theme’s accent color instead of custom. |
 | `general.useThemePrimaryShade` | `true` | `FS_GENERAL_USE_THEME_PRIMARY_SHADE` | `true` / `false` — Use theme’s primary shade. |
 | `general.zoomFactor` | `100` | `FS_GENERAL_ZOOM_FACTOR` | UI zoom percentage (number). |
@@ -103,7 +103,7 @@
        "electron-store": "^8.2.0",
        "electron-updater": "^6.6.2",
        "fast-average-color": "^9.5.0",
-        "fast-xml-parser": "^5.3.6",
+        "fast-xml-parser": "^5.3.8",
        "format-duration": "^3.0.2",
        "fuse.js": "^7.1.0",
        "i18next": "^25.6.2",
@@ -111,8 +111,8 @@ importers:
        specifier: ^9.5.0
        version: 9.5.0
      fast-xml-parser:
-        specifier: ^5.3.6
-        version: 5.3.6
+        specifier: ^5.3.8
+        version: 5.3.8
      format-duration:
        specifier: ^3.0.2
        version: 3.0.2
@@ -423,8 +423,8 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0

-  '@babel/helper-define-polyfill-provider@0.6.6':
-    resolution: {integrity: sha512-mOAsxeeKkUKayvZR3HeTYD/fICpCPLJrU5ZjelT/PA6WHtNDBOE436YiaEUvHN454bRM3CebhDsIpieCc4texA==}
+  '@babel/helper-define-polyfill-provider@0.6.7':
+    resolution: {integrity: sha512-6Fqi8MtQ/PweQ9xvux65emkLQ83uB+qAVtfHkC9UodyHMIZdxNI01HjLCLUtybElp2KY2XNE0nOgyP1E1vXw9w==}
    peerDependencies:
      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0

@@ -1818,67 +1818,56 @@ packages:
    resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
    resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.52.5':
    resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.52.5':
    resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-loong64-gnu@4.52.5':
    resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
    resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
    resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.52.5':
    resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.52.5':
    resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.52.5':
    resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.52.5':
    resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-openharmony-arm64@4.52.5':
    resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
@@ -2290,18 +2279,18 @@ packages:
  b4a@1.6.7:
    resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}

-  babel-plugin-polyfill-corejs2@0.4.15:
-    resolution: {integrity: sha512-hR3GwrRwHUfYwGfrisXPIDP3JcYfBrW7wKE7+Au6wDYl7fm/ka1NEII6kORzxNU556JjfidZeBsO10kYvtV1aw==}
+  babel-plugin-polyfill-corejs2@0.4.16:
+    resolution: {integrity: sha512-xaVwwSfebXf0ooE11BJovZYKhFjIvQo7TsyVpETuIeH2JHv0k/T6Y5j22pPTvqYqmpkxdlPAJlyJ0tfOJAoMxw==}
    peerDependencies:
      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0

-  babel-plugin-polyfill-corejs3@0.14.0:
-    resolution: {integrity: sha512-AvDcMxJ34W4Wgy4KBIIePQTAOP1Ie2WFwkQp3dB7FQ/f0lI5+nM96zUnYEOE1P9sEg0es5VCP0HxiWu5fUHZAQ==}
+  babel-plugin-polyfill-corejs3@0.14.1:
+    resolution: {integrity: sha512-ENp89vM9Pw4kv/koBb5N2f9bDZsR0hpf3BdPMOg/pkS3pwO4dzNnQZVXtBbeyAadgm865DmQG2jMMLqmZXvuCw==}
    peerDependencies:
      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0

-  babel-plugin-polyfill-regenerator@0.6.6:
-    resolution: {integrity: sha512-hYm+XLYRMvupxiQzrvXUj7YyvFFVfv5gI0R71AJzudg1g2AI2vyCPPIFEBjk162/wFzti3inBHo7isWFuEVS/A==}
+  babel-plugin-polyfill-regenerator@0.6.7:
+    resolution: {integrity: sha512-OTYbUlSwXhNgr4g6efMZgsO8//jA61P7ZbRX3iTT53VON8l+WQS8IAUEVo4a4cWknrg2W8Cj4gQhRYNCJ8GkAA==}
    peerDependencies:
      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0

@@ -2462,8 +2451,8 @@ packages:
  caniuse-lite@1.0.30001751:
    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}

-  caniuse-lite@1.0.30001774:
-    resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==}
+  caniuse-lite@1.0.30001777:
+    resolution: {integrity: sha512-tmN+fJxroPndC74efCdp12j+0rk0RHwV5Jwa1zWaFVyw2ZxAuPeG8ZgWC3Wz7uSjT3qMRQ5XHZ4COgQmsCMJAQ==}

  chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@@ -2880,8 +2869,8 @@ packages:
  electron-to-chromium@1.5.242:
    resolution: {integrity: sha512-msZ7SYGFpXkm/iUizlMrm/FPNeYo8uSltQccLVFO3fV4RN2JWGdG7Aatztxtw3uDWp3DkupfkrosLjUnhY+iOw==}

-  electron-to-chromium@1.5.302:
-    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
+  electron-to-chromium@1.5.307:
+    resolution: {integrity: sha512-5z3uFKBWjiNR44nFcYdkcXjKMbg5KXNdciu7mhTPo9tB7NbqSNP2sSnGR+fqknZSCwKkBN+oxiiajWs4dT6ORg==}

  electron-updater@6.6.2:
    resolution: {integrity: sha512-Cr4GDOkbAUqRHP5/oeOmH/L2Bn6+FQPxVLZtPbcmKZC63a1F3uu5EefYOssgZXG3u/zBlubbJ5PJdITdMVggbw==}
@@ -3131,8 +3120,8 @@ packages:
  fast-uri@3.0.6:
    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}

-  fast-xml-parser@5.3.6:
-    resolution: {integrity: sha512-QNI3sAvSvaOiaMl8FYU4trnEzCwiRr8XMWgAHzlrWpTSj+QaCSvOf1h82OEP1s4hiAXhnbXSyFWCf4ldZzZRVA==}
+  fast-xml-parser@5.3.8:
+    resolution: {integrity: sha512-53jIF4N6u/pxvaL1eb/hEZts/cFLWZ92eCfLrNyCI0k38lettCG/Bs40W9pPwoPXyHQlKu2OUbQtiEIZK/J6Vw==}
    hasBin: true

  fastest-levenshtein@1.0.16:
@@ -3242,6 +3231,10 @@ packages:
    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
    engines: {node: '>=14.14'}

+  fs-extra@11.3.4:
+    resolution: {integrity: sha512-CTXd6rk/M3/ULNQj8FBqBWHYBVYybQ3VPBw0xGKFe3tuH7ytT6ACnvzpIQ3UZtB8yvUKC2cXn1a+x+5EVQLovA==}
+    engines: {node: '>=14.14'}
+
  fs-extra@7.0.1:
    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
    engines: {node: '>=6 <7 || >=8'}
@@ -3538,8 +3531,8 @@ packages:
  immer@10.2.0:
    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}

-  immutable@5.1.4:
-    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
+  immutable@5.1.5:
+    resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==}

  import-fresh@3.3.1:
    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
@@ -4155,8 +4148,8 @@ packages:
  node-releases@2.0.26:
    resolution: {integrity: sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==}

-  node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+  node-releases@2.0.36:
+    resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}

  nopt@8.1.0:
    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
@@ -5208,8 +5201,8 @@ packages:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
    engines: {node: '>=8'}

-  strnum@2.1.2:
-    resolution: {integrity: sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==}
+  strnum@2.2.0:
+    resolution: {integrity: sha512-Y7Bj8XyJxnPAORMZj/xltsfo55uOiyHcU2tnAVzHUnSJR/KsEX+9RoDeXEnsXtl/CX4fAcrt64gZ13aGaWPeBg==}

  stylelint-config-css-modules@4.5.1:
    resolution: {integrity: sha512-xRMvAOVWa8h3Dw2NmanJHuPqMUInmMoBy14kkJDT2xs2xevxl7WnQOe/nDAMvgf9NkodzKrhKZ97E61yQOKkDA==}
@@ -6037,7 +6030,7 @@ snapshots:
      regexpu-core: 6.4.0
      semver: 6.3.1

-  '@babel/helper-define-polyfill-provider@0.6.6(@babel/core@7.28.5)':
+  '@babel/helper-define-polyfill-provider@0.6.7(@babel/core@7.28.5)':
    dependencies:
      '@babel/core': 7.28.5
      '@babel/helper-compilation-targets': 7.28.6
@@ -6629,9 +6622,9 @@ snapshots:
      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.5)
      '@babel/plugin-transform-unicode-sets-regex': 7.28.6(@babel/core@7.28.5)
      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.28.5)
-      babel-plugin-polyfill-corejs2: 0.4.15(@babel/core@7.28.5)
-      babel-plugin-polyfill-corejs3: 0.14.0(@babel/core@7.28.5)
-      babel-plugin-polyfill-regenerator: 0.6.6(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs2: 0.4.16(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs3: 0.14.1(@babel/core@7.28.5)
+      babel-plugin-polyfill-regenerator: 0.6.7(@babel/core@7.28.5)
      core-js-compat: 3.48.0
      semver: 6.3.1
    transitivePeerDependencies:
@@ -6875,7 +6868,7 @@ snapshots:
    dependencies:
      cross-dirname: 0.1.0
      debug: 4.4.3
-      fs-extra: 11.3.3
+      fs-extra: 11.3.4
      minimist: 1.2.8
      postject: 1.0.0-alpha.6
    transitivePeerDependencies:
@@ -8067,27 +8060,27 @@ snapshots:

  b4a@1.6.7: {}

-  babel-plugin-polyfill-corejs2@0.4.15(@babel/core@7.28.5):
+  babel-plugin-polyfill-corejs2@0.4.16(@babel/core@7.28.5):
    dependencies:
      '@babel/compat-data': 7.29.0
      '@babel/core': 7.28.5
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.28.5)
+      '@babel/helper-define-polyfill-provider': 0.6.7(@babel/core@7.28.5)
      semver: 6.3.1
    transitivePeerDependencies:
      - supports-color

-  babel-plugin-polyfill-corejs3@0.14.0(@babel/core@7.28.5):
+  babel-plugin-polyfill-corejs3@0.14.1(@babel/core@7.28.5):
    dependencies:
      '@babel/core': 7.28.5
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.28.5)
+      '@babel/helper-define-polyfill-provider': 0.6.7(@babel/core@7.28.5)
      core-js-compat: 3.48.0
    transitivePeerDependencies:
      - supports-color

-  babel-plugin-polyfill-regenerator@0.6.6(@babel/core@7.28.5):
+  babel-plugin-polyfill-regenerator@0.6.7(@babel/core@7.28.5):
    dependencies:
      '@babel/core': 7.28.5
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.28.5)
+      '@babel/helper-define-polyfill-provider': 0.6.7(@babel/core@7.28.5)
    transitivePeerDependencies:
      - supports-color

@@ -8182,9 +8175,9 @@ snapshots:
  browserslist@4.28.1:
    dependencies:
      baseline-browser-mapping: 2.10.0
-      caniuse-lite: 1.0.30001774
-      electron-to-chromium: 1.5.302
-      node-releases: 2.0.27
+      caniuse-lite: 1.0.30001777
+      electron-to-chromium: 1.5.307
+      node-releases: 2.0.36
      update-browserslist-db: 1.2.3(browserslist@4.28.1)

  buffer-builder@0.2.0:
@@ -8310,7 +8303,7 @@ snapshots:

  caniuse-lite@1.0.30001751: {}

-  caniuse-lite@1.0.30001774: {}
+  caniuse-lite@1.0.30001777: {}

  chalk@4.1.2:
    dependencies:
@@ -8780,7 +8773,7 @@ snapshots:

  electron-to-chromium@1.5.242: {}

-  electron-to-chromium@1.5.302: {}
+  electron-to-chromium@1.5.307: {}

  electron-updater@6.6.2:
    dependencies:
@@ -9179,9 +9172,9 @@ snapshots:

  fast-uri@3.0.6: {}

-  fast-xml-parser@5.3.6:
+  fast-xml-parser@5.3.8:
    dependencies:
-      strnum: 2.1.2
+      strnum: 2.2.0

  fastest-levenshtein@1.0.16: {}

@@ -9288,6 +9281,13 @@ snapshots:
      jsonfile: 6.2.0
      universalify: 2.0.1

+  fs-extra@11.3.4:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+    optional: true
+
  fs-extra@7.0.1:
    dependencies:
      graceful-fs: 4.2.11
@@ -9648,7 +9648,7 @@ snapshots:

  immer@10.2.0: {}

-  immutable@5.1.4:
+  immutable@5.1.5:
    optional: true

  import-fresh@3.3.1:
@@ -10207,7 +10207,7 @@ snapshots:

  node-releases@2.0.26: {}

-  node-releases@2.0.27: {}
+  node-releases@2.0.36: {}

  nopt@8.1.0:
    dependencies:
@@ -10972,7 +10972,7 @@ snapshots:
      '@bufbuild/protobuf': 2.11.0
      buffer-builder: 0.2.0
      colorjs.io: 0.5.2
-      immutable: 5.1.4
+      immutable: 5.1.5
      rxjs: 7.8.2
      supports-color: 8.1.1
      sync-child-process: 1.0.2
@@ -11275,7 +11275,7 @@ snapshots:

  strip-json-comments@3.1.1: {}

-  strnum@2.1.2: {}
+  strnum@2.2.0: {}

  stylelint-config-css-modules@4.5.1(stylelint@16.25.0(typescript@5.8.3)):
    dependencies:
@@ -24,12 +24,14 @@ window.FS_GENERAL_HOME_FEATURE_STYLE = "${FS_GENERAL_HOME_FEATURE_STYLE}";
 window.FS_GENERAL_LANGUAGE = "${FS_GENERAL_LANGUAGE}";
 window.FS_GENERAL_LAST_FM = "${FS_GENERAL_LAST_FM}";
 window.FS_GENERAL_LASTFM_API_KEY = "${FS_GENERAL_LASTFM_API_KEY}";
+window.FS_GENERAL_LISTEN_BRAINZ = "${FS_GENERAL_LISTEN_BRAINZ}";
 window.FS_GENERAL_MUSIC_BRAINZ = "${FS_GENERAL_MUSIC_BRAINZ}";
 window.FS_GENERAL_NATIVE_ASPECT_RATIO = "${FS_GENERAL_NATIVE_ASPECT_RATIO}";
 window.FS_GENERAL_PATH_REPLACE = "${FS_GENERAL_PATH_REPLACE}";
 window.FS_GENERAL_PATH_REPLACE_WITH = "${FS_GENERAL_PATH_REPLACE_WITH}";
 window.FS_GENERAL_PLAYERBAR_OPEN_DRAWER = "${FS_GENERAL_PLAYERBAR_OPEN_DRAWER}";
 window.FS_GENERAL_PRIMARY_SHADE = "${FS_GENERAL_PRIMARY_SHADE}";
+window.FS_GENERAL_QOBUZ = "${FS_GENERAL_QOBUZ}";
 window.FS_GENERAL_RESUME = "${FS_GENERAL_RESUME}";
 window.FS_GENERAL_SHOW_LYRICS_IN_SIDEBAR = "${FS_GENERAL_SHOW_LYRICS_IN_SIDEBAR}";
 window.FS_GENERAL_SHOW_RATINGS = "${FS_GENERAL_SHOW_RATINGS}";
@@ -39,6 +41,7 @@ window.FS_GENERAL_SIDEBAR_COLLAPSE_SHARED = "${FS_GENERAL_SIDEBAR_COLLAPSE_SHARE
 window.FS_GENERAL_SIDEBAR_PLAYLIST_LIST = "${FS_GENERAL_SIDEBAR_PLAYLIST_LIST}";
 window.FS_GENERAL_SIDEBAR_PLAYLIST_SORTING = "${FS_GENERAL_SIDEBAR_PLAYLIST_SORTING}";
 window.FS_GENERAL_SIDE_QUEUE_TYPE = "${FS_GENERAL_SIDE_QUEUE_TYPE}";
+window.FS_GENERAL_SIDE_QUEUE_LAYOUT = "${FS_GENERAL_SIDE_QUEUE_LAYOUT}";
 window.FS_GENERAL_THEME = "${FS_GENERAL_THEME}";
 window.FS_GENERAL_THEME_DARK = "${FS_GENERAL_THEME_DARK}";
 window.FS_GENERAL_THEME_LIGHT = "${FS_GENERAL_THEME_LIGHT}";
@@ -301,6 +301,7 @@
        "forward": "endavant",
        "manage": "gestiona",
        "mbid": "ID de MusicBrainz",
+        "grouping": "agrupament",
        "noResultsFromQuery": "la petició no ha produït resultats",
        "path": "ruta",
        "playerMustBePaused": "cal pausar el reproductor",
@@ -423,8 +424,7 @@
        "editPlaylist": {
            "success": "$t(entity.playlist, {\"count\": 1}) s'ha actualitzat amb èxit",
            "title": "editar la $t(entity.playlist, {\"count\": 1})",
-            "publicJellyfinNote": "Per algun motiu, Jellyfin no exposa si una llista de reproducció és pública o no. Si voleu que es mantingui pública, seleccioneu la següent entrada",
-            "editNote": "es recomana no editar manualment les llistes de reproducció grans. segur que accepteu el risc de perdre dades si sobreescriviu la llista de reproducció existent?"
+            "publicJellyfinNote": "Per algun motiu, Jellyfin no exposa si una llista de reproducció és pública o no. Si voleu que es mantingui pública, seleccioneu la següent entrada"
        },
        "lyricSearch": {
            "input_artist": "$t(entity.artist, {\"count\": 1})",
@@ -411,7 +411,21 @@
        "autosave": "automaticky ukládat frontu přehrávání",
        "autosave_description": "zapnout automatické ukládání fronty přehrávání na server. toto je možné pouze při použití Navidrome/Subsonic a není možné mít kombinovanou frontu přehrávání.",
        "autosaveCount": "četnost automatického ukládání fronty přehrávání",
-        "autosaveCount_description": "kolik změn skladeb se může provést před uložením fronty. 1 (minimum) znamená při každé změně skladby"
+        "autosaveCount_description": "kolik změn skladeb se může provést před uložením fronty. 1 (minimum) znamená při každé změně skladby",
+        "spotify_description": "na stránkách umělců a alb zobrazit odkazy na Spotify",
+        "spotify": "zobrazit odkazy na Spotify",
+        "nativeSpotify_description": "otevřít v aplikaci Spotify namísto vašeho prohlížeče",
+        "nativeSpotify": "použít aplikaci Spotify",
+        "listenbrainz_description": "na stránkách umělců a alb zobrazit odkazy na ListenBrainz",
+        "listenbrainz": "zobrazit odkazy na ListenBrainz",
+        "qobuz_description": "na stránkách umělců a alb zobrazit odkazy na Qobuz",
+        "qobuz": "zobrazit odkazy na Qobuz",
+        "sidePlayQueueLayout": "rozložení postranní fronty přehrávání",
+        "sidePlayQueueLayout_description": "nastaví rozložení postranní lišty přehrávání",
+        "sidePlayQueueLayout_optionHorizontal": "na šířku",
+        "sidePlayQueueLayout_optionVertical": "na výšku",
+        "waveformLoadingDelay": "zpoždění načítání vlnové křivky",
+        "waveformLoadingDelay_description": "zpoždění v sekundách před načtením vlnové křivky. zvyšte, pokud jste během používání webového přehrávače zaznamenali záseky."
    },
    "action": {
        "editPlaylist": "upravit $t(entity.playlist, {\"count\": 1})",
@@ -433,7 +447,10 @@
        "removeFromFavorites": "odebrat z $t(entity.favorite, {\"count\": 2})",
        "openIn": {
            "lastfm": "Otevřít v Last.fm",
-            "musicbrainz": "Otevřít v MusicBrainz"
+            "musicbrainz": "Otevřít v MusicBrainz",
+            "spotify": "Otevřít na Spotify",
+            "listenbrainz": "Otevřít ve službě ListenBrainz",
+            "qobuz": "Otevřít ve službě Qobuz"
        },
        "moveToNext": "přesunout na další",
        "downloadStarted": "spuštěno stahování {{count}} položek",
@@ -579,7 +596,9 @@
        "filter_single": "jeden",
        "filter_multiple": "několik",
        "rename": "přejmenovat",
-        "newVersionAvailable": "je dostupná nová verze"
+        "newVersionAvailable": "je dostupná nová verze",
+        "numberOfResults": "{{numberOfResults}} výsledků",
+        "grouping": "seskupování"
    },
    "table": {
        "config": {
@@ -1045,8 +1064,7 @@
        "editPlaylist": {
            "title": "upravit $t(entity.playlist, {\"count\": 1})",
            "success": "$t(entity.playlist, {\"count\": 1}) úspěšně aktualizován",
-            "publicJellyfinNote": "Jellyfin z nějakého důvodu neukazuje, zda je seznam skladeb veřejný, nebo ne. Pokud si přejete, aby zůstal veřejný, zvolte prosím následující vstup",
-            "editNote": "ruční úpravy velkých seznamů skladeb nejsou doporučeny. opravdu přijímáte riziko ztráty dat, které může vzniknout přepsáním existujícího seznamu skladeb?"
+            "publicJellyfinNote": "Jellyfin z nějakého důvodu neukazuje, zda je seznam skladeb veřejný, nebo ne. Pokud si přejete, aby zůstal veřejný, zvolte prosím následující vstup"
        },
        "shareItem": {
            "allowDownloading": "umožnit stahování",
@@ -1092,6 +1110,9 @@
            "export": "exportovat texty",
            "input_synced": "exportovat synchronizované texty",
            "input_offset": "$t(setting.lyricOffset)"
+        },
+        "editRadioStation": {
+            "success": "stanice rádia úspěšně upravena"
        }
    },
    "entity": {
@@ -359,7 +359,6 @@
        },
        "editPlaylist": {
            "publicJellyfinNote": "Jellyfin viser af en eller anden grund ikke, om en playliste er offentlig eller ej. Hvis du ønsker, at den forbliver offentlig, skal du have følgende felt markeret",
-            "editNote": "manuelle ændringer anbefales ikke for store playlister. er du sikker på, at du accepterer risikoen for datatab ved at overskrive den eksisterende playliste?",
            "success": "$t(entity.playlist, {\"count\": 1}) opdateret",
            "title": "rediger $t(entity.playlist, {\"count\": 1})"
        },
@@ -19,7 +19,10 @@
        "removeFromFavorites": "Aus $t(entity.favorite, {\"count\": 2}) entfernen",
        "openIn": {
            "lastfm": "Auf Last.fm öffnen",
-            "musicbrainz": "Auf MusicBrainz öffnen"
+            "musicbrainz": "Auf MusicBrainz öffnen",
+            "listenbrainz": "In ListenBrainz öffnen",
+            "qobuz": "In Qobuz öffnen",
+            "spotify": "In Spotify öffnen"
        },
        "moveToNext": "Als nächstes",
        "downloadStarted": "Download von {{count}} Elementen gestartet",
@@ -124,6 +127,7 @@
        "preview": "Vorschau",
        "reload": "Neu Laden",
        "mbid": "MusicBrainz ID",
+        "grouping": "gruppierung",
        "close": "schließen",
        "share": "Teilen",
        "translation": "Übersetzung",
@@ -162,7 +166,8 @@
        "filter_single": "einzeln",
        "filter_multiple": "mehrfach",
        "retry": "Wiederholen",
-        "newVersionAvailable": "Eine neue Version ist verfügbar"
+        "newVersionAvailable": "Eine neue Version ist verfügbar",
+        "numberOfResults": "{{numberOfResults}} Ergebnisse"
    },
    "error": {
        "remotePortWarning": "Starten Sie den Server neu, um den neuen Port anzuwenden",
@@ -301,8 +306,7 @@
        "editPlaylist": {
            "title": "Bearbeite $t(entity.playlist, {\"count\": 1})",
            "success": "$t(entity.playlist, {\"count\": 1}) erfolgreich aktualisiert",
-            "publicJellyfinNote": "Jellyfin legt aus irgendwelchen Gründen nicht offen ob eine Wiedergabeliste öffentlich ist oder nicht. Wenn du möchtest, dass sie öffentlich bleibt, wähle bitte diese Option aus",
-            "editNote": "Manuelles Bearbeiten wird für große Wiedergabelisten nicht empfohlen. Bist Du sicher, dass Du die aktuelle Wiedergabeliste unter dem Risiko von Datenverlust überschrieben möchtest?"
+            "publicJellyfinNote": "Jellyfin legt aus irgendwelchen Gründen nicht offen ob eine Wiedergabeliste öffentlich ist oder nicht. Wenn du möchtest, dass sie öffentlich bleibt, wähle bitte diese Option aus"
        },
        "lyricSearch": {
            "title": "Songtext Suche",
@@ -1108,7 +1112,16 @@
        "useThemeAccentColor_description": "Verwendet die Primärfarbe des gewählten Themas anstatt einer ausgewählten Akzentfarbe",
        "useThemePrimaryShade": "Primärschatten des Themas nutzen",
        "useThemePrimaryShade_description": "Verwendet den Primärschatten des ausgewählten Themas als primäre Farbvarianten",
-        "primaryShade": "Primärschatten"
+        "primaryShade": "Primärschatten",
+        "listenbrainz": "ListenBrainz Links anzeigen",
+        "listenbrainz_description": "Zeige Links zu ListenBrainz auf den Interpreten/Alben Seiten",
+        "mpvExtraParameters": "Zusätzliche mpv Parameter",
+        "qobuz": "Qobuz Links anzeigen",
+        "spotify": "Spotify Links anzeigen",
+        "nativeSpotify": "Spotify App benutzen",
+        "qobuz_description": "Zeige Links zu Qobuz auf den Interpreten/Alben Seiten",
+        "spotify_description": "Zeige Links zu Spotify auf den Interpreten/Alben Seiten",
+        "artistReleaseTypeConfiguration": "Interpreten Release Typ Einstellung"
    },
    "dragDropZone": {
        "error_oneFileOnly": "Bitte wähle nur 1 Datei",
@@ -1269,6 +1282,8 @@
        "miscellaneousSettings": "Verschiedenes Einstellungen",
        "ansiBands": "ANSI Bänder",
        "lowResolution": "Niedrige Auflösung",
-        "showFPS": "FPS anzeigen"
+        "showFPS": "FPS anzeigen",
+        "fadePeaks": "Spitzen abblenden",
+        "showPeaks": "Spitzen anzeigen"
    }
 }
@@ -37,7 +37,9 @@
        "openApplicationDirectory": "open application directory",
        "openIn": {
            "lastfm": "Open in Last.fm",
+            "listenbrainz": "Open in ListenBrainz",
            "musicbrainz": "Open in MusicBrainz",
+            "qobuz": "Open in Qobuz",
            "spotify": "Open in Spotify"
        }
    },
@@ -107,11 +109,13 @@
        "minimize": "minimize",
        "modified": "modified",
        "mbid": "MusicBrainz ID",
+        "grouping": "grouping",
        "mood": "mood",
        "name": "name",
        "no": "no",
        "none": "none",
        "noResultsFromQuery": "the query returned no results",
+        "numberOfResults": "{{numberOfResults}} results",
        "noFilters": "no filters configured",
        "note": "note",
        "ok": "ok",
@@ -360,6 +364,9 @@
            "input_name": "name",
            "input_streamUrl": "stream url"
        },
+        "editRadioStation": {
+            "success": "radio station updated successfully"
+        },
        "deletePlaylist": {
            "input_confirm": "type the name of the $t(entity.playlist, {\"count\": 1}) to confirm",
            "success": "$t(entity.playlist, {\"count\": 1}) deleted successfully",
@@ -367,7 +374,6 @@
        },
        "editPlaylist": {
            "publicJellyfinNote": "Jellyfin for some reason does not expose whether a playlist is public or not. If you wish for this to remain public, please have the following input selected",
-            "editNote": "manual edits are not recommended for large playlists. are you sure you accept the risk of data loss incurred by overwriting the existing playlist?",
            "success": "$t(entity.playlist, {\"count\": 1}) updated successfully",
            "title": "edit $t(entity.playlist, {\"count\": 1})"
        },
@@ -898,6 +904,8 @@
        "language_description": "sets the language for the application ($t(common.restartRequired))",
        "lastfm_description": "show links to Last.fm on artist/album pages",
        "lastfm": "show last.fm links",
+        "listenbrainz_description": "show links to ListenBrainz on artist/album pages",
+        "listenbrainz": "show ListenBrainz links",
        "lastfmApiKey_description": "the API key for {{lastfm}}. required for cover art",
        "lastfmApiKey": "{{lastfm}} API key",
        "lyricFetch_description": "fetch lyrics from various internet sources",
@@ -925,6 +933,8 @@
        "mpvExtraParameters_help": "one per line",
        "musicbrainz_description": "show links to MusicBrainz on artist/album pages, where MusicBrainz ID exists",
        "musicbrainz": "show MusicBrainz links",
+        "qobuz_description": "show links to Qobuz on artist/album pages",
+        "qobuz": "show Qobuz links",
        "spotify_description": "show links to Spotify on artist/album pages",
        "spotify": "show Spotify links",
        "nativeSpotify_description": "open in the Spotify app instead of your browser",
@@ -1036,6 +1046,10 @@
        "sidePlayQueueStyle_description": "sets the style of the side play queue",
        "sidePlayQueueStyle_optionAttached": "attached",
        "sidePlayQueueStyle_optionDetached": "detached",
+        "sidePlayQueueLayout": "side play queue layout",
+        "sidePlayQueueLayout_description": "sets the layout of the attached side play queue",
+        "sidePlayQueueLayout_optionHorizontal": "horizontal",
+        "sidePlayQueueLayout_optionVertical": "vertical",
        "mediaSession_description": "enables Media Session integration, displaying media controls and metadata in the system volume overlay and lock screen",
        "mediaSession": "enable media session",
        "sidePlayQueueStyle": "side play queue style",
@@ -1071,6 +1085,8 @@
        "volumeWheelStep": "volume wheel step",
        "volumeWidth_description": "the width of the volume slider",
        "volumeWidth": "volume slider width",
+        "waveformLoadingDelay": "waveform loading delay",
+        "waveformLoadingDelay_description": "delay in seconds before loading waveform. increase this value if you are experiencing stutters when using the web player.",
        "webAudio_description": "use web audio. this enables advanced features like replaygain. disable if you experience otherwise",
        "webAudio": "use web audio",
        "windowBarStyle_description": "select the style of the window bar",
@@ -216,7 +216,7 @@
        "passwordStore": "contraseñas/almacenamiento secreto",
        "homeConfiguration": "Configuración de la página de inicio",
        "mpvExtraParameters_help": "Uno por línea",
-        "externalLinks_description": "Permite mostrar enlaces externos (Last.fm, MusicBrainz) en las páginas del artista/álbum",
+        "externalLinks_description": "Permite mostrar enlaces externos (Last.fm, MusicBrainz) en las páginas de artistas/álbumes",
        "homeConfiguration_description": "Configura qué elementos son mostrados y en qué orden en la página de inicio",
        "clearCacheSuccess": "Caché limpiada correctamente",
        "externalLinks": "Mostrar enlaces externos",
@@ -243,13 +243,13 @@
        "transcodeFormat": "formato a transcodificar",
        "transcodeFormat_description": "selecciona el formato a transcodificar. dejar vacío para que el servidor decida",
        "albumBackground": "imagen de fondo del álbum",
-        "albumBackground_description": "Añade una imagen de fondo a las páginas del álbum que contienen la carátula del álbum",
+        "albumBackground_description": "Añade una imagen de fondo a las páginas de álbumes que contienen la carátula del álbum",
        "albumBackgroundBlur": "Tamaño de desenfoque de la imagen de fondo del álbum",
        "albumBackgroundBlur_description": "Ajusta la cantidad de desenfoque aplicado a la imagen de fondo del álbum",
        "playerbarOpenDrawer": "Cambiar la barra del reproductor a pantalla completa",
        "playerbarOpenDrawer_description": "Permite hacer clic en la barra del reproductor para abrir el reproductor a pantalla completa",
-        "artistConfiguration": "Configuración de la página del artista del álbum",
-        "artistConfiguration_description": "Configura qué elementos se muestran y en qué orden en la página del artista del álbum",
+        "artistConfiguration": "Configuración de la página de artistas del álbum",
+        "artistConfiguration_description": "Configura qué elementos se muestran y en qué orden en la página de artistas del álbum",
        "playButtonBehavior_optionPlayShuffled": "$t(player.shuffle)",
        "trayEnabled": "Mostrar en el área de notificación",
        "trayEnabled_description": "muestra/oculta el icono/menú del área de notificación. si está deshabilitado, también deshabilita minimizar/salir a la bandeja",
@@ -293,7 +293,7 @@
        "releaseChannel_optionBeta": "Beta",
        "releaseChannel": "Canal de lanzamiento",
        "releaseChannel_description": "Elige entre lanzamientos estables, beta, o alpha (nightly) para las actualizaciones automáticas",
-        "artistBackground_description": "Añade una imagen de fondo para las páginas de artista que contienen el arte del artista",
+        "artistBackground_description": "Añade una imagen de fondo para las páginas de artistas que contienen el arte de los artistas",
        "mediaSession": "Activar sesión de medios",
        "mediaSession_description": "Activa la integración de la sesión de medios, mostrando los controles de medios y los metadatos en la superposición del volumen del sistema y en la pantalla de bloqueo",
        "exportImportSettings_control_description": "Exporta e importa la configuración a través de JSON",
@@ -370,7 +370,7 @@
        "combinedLyricsAndVisualizer_description": "Combina letras y visualizador en el mismo panel",
        "combinedLyricsAndVisualizer": "Combinar letras y visualizador en la barra lateral del reproductor",
        "artistReleaseTypeConfiguration": "Configuración de tipo de lanzamiento de artista",
-        "artistReleaseTypeConfiguration_description": "Configura qué tipos de lanzamiento son mostrados, y en qué orden, en la página del artista del álbum",
+        "artistReleaseTypeConfiguration_description": "Configura qué tipos de lanzamiento son mostrados, y en qué orden, en la página de artistas del álbum",
        "mpvExtraParameters": "Parámetros adicionales de MPV",
        "mpvExtraParameters_description": "Argumentos adicionales a pasar a MPV",
        "hotkey_listPlayDefault": "Reproducir lista",
@@ -411,7 +411,21 @@
        "autosave": "Guardar automáticamente la cola de reproducción",
        "autosaveCount": "Frecuencia de guardado automática de la cola de reproducción",
        "autosave_description": "Permite guardar automáticamente la cola de reproducción en tu servidor. Esto solo es posible cuando se usa Navidrome/Subsonic, y no puedes tener una cola de reproducción mezclada.",
-        "autosaveCount_description": "Cuántas pistas cambian antes de que la cola sea guardada. 1 (mínimo) quiere decir que todas las canciones cambian"
+        "autosaveCount_description": "Cuántas pistas cambian antes de que la cola sea guardada. 1 (mínimo) quiere decir que todas las canciones cambian",
+        "spotify_description": "Muestra enlaces a Spotify en las páginas de artistas/álbumes",
+        "spotify": "Mostrar enlaces de Spotify",
+        "nativeSpotify_description": "Abre en la aplicación de Spotify en lugar de tu navegador",
+        "nativeSpotify": "Usar la aplicación de Spotify",
+        "listenbrainz": "Mostrar enlaces a ListenBrainz",
+        "listenbrainz_description": "Muestra enlaces a ListenBrainz en las páginas de artistas/álbumes",
+        "qobuz_description": "Muestra enlaces a Qobuz en las páginas de artistas/álbumes",
+        "qobuz": "Mostrar enlaces a Qobuz",
+        "sidePlayQueueLayout_optionHorizontal": "Horizontal",
+        "sidePlayQueueLayout_optionVertical": "Vertical",
+        "sidePlayQueueLayout": "Diseño de la cola de reproducción lateral",
+        "sidePlayQueueLayout_description": "Establece el diseño de la cola de reproducción lateral adjunta",
+        "waveformLoadingDelay": "Retraso de carga de la forma de onda",
+        "waveformLoadingDelay_description": "Retraso en segundos antes de cargar la forma de onda. Incrementa este valor si estás experimentando tartamudeos al usar el reproductor web."
    },
    "action": {
        "editPlaylist": "editar $t(entity.playlist, {\"count\": 1})",
@@ -433,7 +447,10 @@
        "removeFromFavorites": "eliminar de $t(entity.favorite, {\"count\": 2})",
        "openIn": {
            "lastfm": "Abrir en Last.fm",
-            "musicbrainz": "Abrir en MusicBrainz"
+            "musicbrainz": "Abrir en MusicBrainz",
+            "spotify": "Abrir en Spotify",
+            "listenbrainz": "Abrir en ListenBrainz",
+            "qobuz": "Abrir en Qobuz"
        },
        "moveToNext": "pasar al siguiente",
        "downloadStarted": "Iniciada descarga de {{count}} elementos",
@@ -579,7 +596,9 @@
        "filter_single": "simple",
        "filter_multiple": "multi",
        "rename": "Renombrar",
-        "newVersionAvailable": "Una nueva versión está disponible"
+        "newVersionAvailable": "Una nueva versión está disponible",
+        "numberOfResults": "{{numberOfResults}} resultados",
+        "grouping": "Agrupar"
    },
    "error": {
        "remotePortWarning": "reiniciar el servidor para aplicar el nuevo puerto",
@@ -927,8 +946,7 @@
        "editPlaylist": {
            "title": "editar $t(entity.playlist, {\"count\": 1})",
            "success": "$t(entity.playlist, {\"count\": 1}) actualizada correctamente",
-            "publicJellyfinNote": "Jellyfin por alguna razón no expone si una lista de reproducción es pública o no. Si deseas que ésta siga siendo pública, por favor ten seleccionada la siguiente entrada",
-            "editNote": "No se recomiendan las ediciones manuales para grandes listas de reproducción. ¿Seguro que aceptas el riesgo de pérdida de información incurrido por sobrescribir la lista de reproducción existente?"
+            "publicJellyfinNote": "Jellyfin por alguna razón no expone si una lista de reproducción es pública o no. Si deseas que ésta siga siendo pública, por favor ten seleccionada la siguiente entrada"
        },
        "queryEditor": {
            "input_optionMatchAll": "coincidir todos",
@@ -15,7 +15,10 @@
        "viewPlaylists": "ikusi $t(entity.playlist, {\"count\": 2})",
        "openIn": {
            "lastfm": "Ireki Last.fm-n",
-            "musicbrainz": "Ireki MusicBrainz-en"
+            "musicbrainz": "Ireki MusicBrainz-en",
+            "listenbrainz": "Ireki ListenBrainz-en",
+            "qobuz": "Ireki Qobuz-en",
+            "spotify": "Ireki Spotify-n"
        },
        "clearQueue": "garbitu ilara",
        "createPlaylist": "sortu $t(entity.playlist, {\"count\": 1})",
@@ -33,7 +36,8 @@
        "shuffleAll": "nahastu dena",
        "shuffleSelected": "nahastu aukeratutak",
        "moveItems": "elementuak mugitu",
-        "openApplicationDirectory": "ireki aplikazioaren direktorioa"
+        "openApplicationDirectory": "ireki aplikazioaren direktorioa",
+        "goToCurrent": "joan uneko elementura"
    },
    "common": {
        "add": "gehitu",
@@ -67,8 +71,8 @@
        "filter_other": "iragazkiak",
        "filters": "iragazkiak",
        "forceRestartRequired": "berreabiarazi aldaketak aplikatzeko... itxi notifikazioa berreabiarazteko",
-        "setting_one": "ezarpenak",
-        "setting_other": "",
+        "setting_one": "ezarpena",
+        "setting_other": "ezarpenak",
        "share": "partekatu",
        "action_one": "ekintza",
        "action_other": "ekintzak",
@@ -150,7 +154,10 @@
        "recordLabel": "diskoetxea",
        "example": "adibidea",
        "tableColumns": "taulako zutabeak",
-        "doNotShowAgain": "ez erakutsi hau berriro"
+        "doNotShowAgain": "ez erakutsi hau berriro",
+        "numberOfResults": "{{numberOfResults}} emaitza",
+        "rename": "berrizendatu",
+        "newVersionAvailable": "bertsio berri bat eskuragarri dago"
    },
    "player": {
        "repeat": "errepikatu",
@@ -351,7 +358,11 @@
        "noNetwork": "zerbitzaria ez dago erabilgarri",
        "noNetworkDescription": "ezin izan da zerbitzari honetara konektatu",
        "saveQueueFailed": "huts egin du ilara gordetzean",
-        "multipleServerSaveQueueError": "erreprodukzio-ilarak zerbitzarikoak ez diren abesti bat edo gehiago ditu. hau ez da onartzen"
+        "multipleServerSaveQueueError": "erreprodukzio-ilarak zerbitzarikoak ez diren abesti bat edo gehiago ditu. hau ez da onartzen",
+        "invalidJson": "JSON baliogabea",
+        "playbackPausedDueToError": "erreprodukzioa eten egin da errore baten ondorioz",
+        "serverLockSingleServer": "zerbitzaria blokeatuta dagoenean, zerbitzari bakarra onartzen da",
+        "settingsSyncError": "desadostasunak aurkitu dira errendatzailearen ezarpenen eta prozesu nagusiaren artean. berrabiarazi aplikazioa aldaketak aplikatzeko"
    },
    "filter": {
        "disc": "diskoa",
@@ -371,7 +382,7 @@
        "biography": "biografia",
        "bitrate": "bit-emaria",
        "bpm": "bpm-ak",
-        "channels": "$t(common.channel_other)",
+        "channels": "$t(common.channel, {\"count\": 2})",
        "comment": "iruzkina",
        "favorited": "gogoko gisa markatua",
        "genre": "$t(entity.genre, {\"count\": 1})",
@@ -396,7 +407,9 @@
        "releaseYear": "argitalpen urtea",
        "toYear": "urtera arte",
        "fromYear": "urtetik aurrera",
-        "explicitStatus": "$t(common.explicitStatus)"
+        "explicitStatus": "$t(common.explicitStatus)",
+        "matchAnd": "eta",
+        "matchOr": "edo"
    },
    "setting": {
        "hotkey_playbackPause": "pausatu",
@@ -561,7 +574,7 @@
        "hotkey_browserForward": "nabigatzailean aurreraka",
        "imageAspectRatio": "erabili jatorrizko azaleko artearen aspektu-erlazioa",
        "lyricFetchProvider": "letrak eskuratzeko hornitzaileak",
-        "lyricFetchProvider_description": "aukeratu letrak eskuratzeko hornitzaileak. hornitzaileen ordena kontsultatuko diren ordena da",
+        "lyricFetchProvider_description": "aukeratu letrak eskuratzeko hornitzaileak",
        "minimizeToTray": "minimizatu erretilura",
        "minimizeToTray_description": "minimizatu aplikazioa sistemaren erretilura",
        "minimumScrobblePercentage": "scrobble iraupen minimoa (ehunekoa)",
@@ -675,7 +688,33 @@
        "remotePort_description": "urruneko kontrol zerbitzariaren portua ezartzen du",
        "remotePort": "urruneko kontrol zerbitzariaren ataka",
        "remoteUsername_description": "urruneko kontrol zerbitzariaren erabiltzaile-izena ezartzen du. Erabiltzaile-izena eta pasahitza hutsik badaude, autentifikazioa desgaituta egongo da",
-        "remoteUsername": "urruneko kontrol zerbitzariaren erabiltzaile-izena"
+        "remoteUsername": "urruneko kontrol zerbitzariaren erabiltzaile-izena",
+        "logLevel_optionWarn": "abisua",
+        "qobuz_description": "erakutsi Qobuz-erako estekak artista/album orrialdeetan",
+        "qobuz": "erakutsi Qobuz-erako estekak",
+        "spotify_description": "erakutsi Spotify-rako estekak artista/album orrialdeetan",
+        "spotify": "erakutsi Spotify-rako estekak",
+        "nativeSpotify_description": "ireki Spotify aplikazioan, arakatzailearen ordez",
+        "nativeSpotify": "erabili Spotify aplikazioa",
+        "playerbarSlider_description": "uhin-forma ez da gomendagarria interneteko konexio motela edo neurtua baduzu",
+        "playerbarSliderType_optionWaveform": "uhin-forma",
+        "playerbarWaveformAlign": "uhin-formaren lerrokatzea",
+        "playerbarWaveformAlign_optionTop": "nagusia",
+        "playerbarWaveformBarWidth": "uhin-formako barraren zabalera",
+        "playerbarWaveformGap": "uhin-formaren tartea",
+        "playerbarWaveformRadius": "uhin-formaren erradioa",
+        "showLyricsInSidebar_description": "letrak erakusten dituen panel bat gehituko da erantsitako erreprodukzio-ilaran",
+        "showLyricsInSidebar": "erakutsi letra erreproduzitzailearen alboko barran",
+        "blurExplicitImages": "irudi esplizituak lausotu",
+        "blurExplicitImages_description": "esplizitu gisa etiketatutako albumaren eta abestiaren azalak lausotuta agertuko dira",
+        "enableGridMultiSelect": "gaitu sareta anitzeko hautaketa",
+        "enableGridMultiSelect_description": "gaituta dagoenean, sareta-ikuspegietan hainbat elementu hautatzea ahalbidetzen du. desgaituta dagoenean, sareta-elementuen irudietan klik egitean elementuaren orrialdera nabigatuko da",
+        "showVisualizerInSidebar_description": "bistaratzailea erakusten duen panel bat gehituko da erreproduzitzailearen alboko barran",
+        "preservePitch_description": "erreprodukzio-abiadura aldatzean tonua mantentzen du",
+        "preservePitch": "mantendu tonua",
+        "preventSleepOnPlayback": "erreprodukzioan loa saihestu",
+        "replayGainClipping_description": "Saihestu {{ReplayGain}}-k eragindako mozketa irabazpena automatikoki jaitsiz",
+        "replayGainMode_description": "doitu bolumenaren irabazia fitxategiaren metadatuetan gordetako {{ReplayGain}} balioen arabera"
    },
    "form": {
        "addServer": {
@@ -731,15 +770,16 @@
        "editPlaylist": {
            "success": "$t(entity.playlist, {\"count\": 1}) behar bezala eguneratu da",
            "title": "$t(entity.playlist, {\"count\": 1}) editatu",
-            "publicJellyfinNote": "Arrazoiren batengatik, Jellyfin ez du erakusten erreprodukzio-zerrendak publikoak diren edo ez. Hau publiko izaten jarraitzea nahi baduzu, hautatu sarrera hau",
-            "editNote": "ez da gomendatzen eskuzko edizioak egitea erreprodukzio-zerrenda handietarako. ziur zaude onartzen duzula lehendik dagoen erreprodukzio-zerrenda gainidazteagatik datuak galtzeko arriskua?"
+            "publicJellyfinNote": "Arrazoiren batengatik, Jellyfin ez du erakusten erreprodukzio-zerrendak publikoak diren edo ez. Hau publiko izaten jarraitzea nahi baduzu, hautatu sarrera hau"
        },
        "queryEditor": {
            "title": "kontsulta editorea",
            "input_optionMatchAll": "guztiak bat etorri",
            "input_optionMatchAny": "edozeinekin bat etorri",
            "resetToDefault": "lehenetsitako egoerara berrezarri",
-            "clearFilters": "garbitu iragazkiak"
+            "clearFilters": "garbitu iragazkiak",
+            "addRuleGroup": "gehitu arau-taldea",
+            "removeRuleGroup": "kendu arau-taldea"
        },
        "updateServer": {
            "success": "zerbitzaria behar bezala eguneratu da",
@@ -751,7 +791,8 @@
            "disabled": "modu pribatua desgaituta, erreprodukzio egoera ikusgai dago orain gaitutako kanpoko integrazioentzat"
        },
        "largeFetchConfirmation": {
-            "title": "gehitu elementuak ilaran"
+            "title": "gehitu elementuak ilaran",
+            "description": "Ekintza honek uneko iragazki-ikuspegian dauden elementu guztiak gehituko ditu"
        },
        "createRadioStation": {
            "input_homepageUrl": "hasierako orriaren URLa",
@@ -928,7 +969,8 @@
            "nowPlaying": "orain erreproduzitzen",
            "shared": "partekatutako $t(entity.playlist, {\"count\": 2})",
            "favorites": "$t(entity.favorite, {\"count\": 2})",
-            "radio": "$t(entity.radioStation, {\"count\": 2})"
+            "radio": "$t(entity.radioStation, {\"count\": 2})",
+            "collections": "bildumak"
        },
        "trackList": {
            "title": "$t(entity.track, {\"count\": 2})",
@@ -1097,6 +1139,26 @@
        "saveAsPreset": "Aurrezarpen gisa gorde",
        "applyPreset": "Aurrezarpena Aplikatu",
        "selectPreset": "Aukeratu Aurrezarpena",
-        "presets": "Aurrezarpenak"
+        "presets": "Aurrezarpenak",
+        "visualizerType": "Bistaratzaile Mota",
+        "cycleTime": "Zikloaren denbora (segundoak)",
+        "includeAllPresets": "Aurrezarpen guztiak sartu",
+        "ignoredPresets": "Aurrezarpen baztertuak",
+        "selectedPresets": "Hautatutako aurrezarpenak",
+        "mode1To8": "1 - 8 modua",
+        "mode10": "10 modua",
+        "gradientLeft": "Gradientearen ezkerra",
+        "gradientRight": "Gradientearen eskuina",
+        "peakBehavior": "Gailurraren Portaera",
+        "peakLine": "Gailurraren lerroa",
+        "miscellaneousSettings": "Hainbat ezarpen",
+        "alphaBars": "Alfa barrak",
+        "ansiBands": "ANSI bandak",
+        "ledBars": "LED barrak",
+        "trueLeds": "True LED-ak",
+        "roundBars": "Barra biribilduak",
+        "lowResolution": "Erresoluzio baxua",
+        "showFPS": "Erakutsi FPS",
+        "showScaleX": "Erakutsi X eskala"
    }
 }
@@ -332,8 +332,7 @@
        "editPlaylist": {
            "success": "$t(entity.playlist, {\"count\": 1}) päivitetty onnistuneesti",
            "title": "muokkaa $t(entity.playlist, {\"count\": 1})",
-            "publicJellyfinNote": "Jellyfin ei jostain syystä kerro onko soittolista julkinen vai ei. Jos haluat sen pysyvän julkisena, pidä seuraava valinta valittuna",
-            "editNote": "manuaalisia muokkauksia ei suositella suurille soittolistoille. haluatko varmasti hyväksyä riskin, että nykyinen soittolista ylikirjoitetaan ja tietoja voi hävitä?"
+            "publicJellyfinNote": "Jellyfin ei jostain syystä kerro onko soittolista julkinen vai ei. Jos haluat sen pysyvän julkisena, pidä seuraava valinta valittuna"
        },
        "lyricSearch": {
            "input_artist": "$t(entity.artist, {\"count\": 1})",
@@ -70,7 +70,10 @@
        "removeFromFavorites": "retirer des $t(entity.favorite, {\"count\": 2})",
        "openIn": {
            "lastfm": "Ouvrir dans Last.fm",
-            "musicbrainz": "Ouvrir dans MusicBrainz"
+            "musicbrainz": "Ouvrir dans MusicBrainz",
+            "listenbrainz": "Ouvrir dans ListenBrainz",
+            "qobuz": "Ouvrir dans Qobuz",
+            "spotify": "Ouvrir dans Spotify"
        },
        "moveToNext": "passer au suivant",
        "downloadStarted": "téléchargement de {{count}} éléments en cours",
@@ -180,6 +183,7 @@
        "albumPeak": "crête de l'album",
        "close": "fermer",
        "mbid": "Identifiant MusicBrainz",
+        "grouping": "regroupement",
        "preview": "aperçu",
        "share": "partager",
        "reload": "recharger",
@@ -217,7 +221,8 @@
        "filter_single": "unique",
        "filter_multiple": "multiple",
        "rename": "renommer",
-        "newVersionAvailable": "une nouvelle version est disponible"
+        "newVersionAvailable": "une nouvelle version est disponible",
+        "numberOfResults": "{{numberOfResults}} résultats"
    },
    "error": {
        "remotePortWarning": "redémarrer le serveur pour appliquer le nouveau port",
@@ -238,7 +243,7 @@
        "mpvRequired": "MPV requis",
        "audioDeviceFetchError": "une erreur s’est produite lors de la tentative d’obtenir les périphériques audio",
        "invalidServer": "serveur invalide",
-        "loginRateError": "trop de tentative de connexion, merci de réessayer dans quelques secondes",
+        "loginRateError": "trop de tentatives de connexion, merci de réessayer dans quelques secondes",
        "openError": "impossible d'ouvrir le fichier",
        "networkError": "une erreur de réseau est survenue",
        "badAlbum": "vous voyez cette page parce que ce titre ne fait pas parti d'un album. vous rencontrez probablement cette erreur si vous avez un titre à la racine de votre dossier musique. Jellyfin gère les chansons uniquement si elles sont dans un sous-dossier, qui est lui-même dans un dossier \"Musique(s)\"",
@@ -874,7 +879,21 @@
        "hotkey_listPlayNext": "lire ensuite",
        "hotkey_listPlayNow": "lire maintenant",
        "playerItemConfiguration_description": "configurer les éléments affichés et leur ordre dans le lecteur plein écran",
-        "playerItemConfiguration": "configuration des éléments du lecteur"
+        "playerItemConfiguration": "configuration des éléments du lecteur",
+        "listenbrainz_description": "afficher les liens vers ListenBrainz sur les pages d'artiste/album",
+        "listenbrainz": "afficher les liens ListenBrainz",
+        "qobuz_description": "afficher les liens vers Qobuz sur les pages d'artiste/album",
+        "qobuz": "afficher les liens Qobuz",
+        "spotify_description": "afficher les liens vers Spotify sur les pages d'artiste/album",
+        "spotify": "afficher les liens Spotify",
+        "nativeSpotify_description": "ouvrir dans l'application Spotify plutôt que le navigateur",
+        "nativeSpotify": "utiliser l'application Spotify",
+        "sidePlayQueueLayout": "disposition de la file d'attente",
+        "sidePlayQueueLayout_description": "définit la disposition de la file d'attente attaché",
+        "sidePlayQueueLayout_optionHorizontal": "horizontal",
+        "sidePlayQueueLayout_optionVertical": "vertical",
+        "waveformLoadingDelay": "délai de chargement de la forme d'onde",
+        "waveformLoadingDelay_description": "délai en secondes avant le chargement de l'onde. augmentez cette valeur si vous rencontrez des saccades lors de l'utilisation du lecteur web."
    },
    "form": {
        "deletePlaylist": {
@@ -932,8 +951,7 @@
        "editPlaylist": {
            "title": "modifier $t(entity.playlist, {\"count\": 1})",
            "publicJellyfinNote": "Jellyfin n'indique pas si une liste de lecture est publique ou non. Si vous souhaitez que cette liste de lecture reste publique, veuillez sélectionner l'entrée suivante",
-            "success": "$t(entity.playlist, {\"count\": 1}) mis à jour avec succès",
-            "editNote": "les modifications manuelles ne sont pas recommandées pour les listes de lecture volumineuses. êtes-vous sûre d'accepter le risque d'une perte de données en écrasant la liste de lecture existante ?"
+            "success": "$t(entity.playlist, {\"count\": 1}) mis à jour avec succès"
        },
        "lyricSearch": {
            "title": "recherche de paroles",
@@ -1074,7 +1092,7 @@
                "pagination_itemsPerPage": "entrées par page",
                "pagination_infinite": "infini",
                "pagination_paginate": "paginé",
-                "alternateRowColors": "alterner les couleurs des lignes",
+                "alternateRowColors": "alterner la couleur des lignes",
                "horizontalBorders": "bordures de ligne",
                "rowHoverHighlight": "surligner les lignes au survol",
                "verticalBorders": "bordure de colonne",
@@ -1216,12 +1234,12 @@
    },
    "visualizer": {
        "visualizerType": "type de visualisateur",
-        "cyclePresets": "cycle les préréglages",
-        "cycleTime": "temps de cycle (secondes)",
+        "cyclePresets": "cycler les préréglages",
+        "cycleTime": "durée d'un cycle (secondes)",
        "includeAllPresets": "inclure tous les préréglages",
        "ignoredPresets": "préréglages ignorés",
-        "selectedPresets": "préréglages sélectionné",
-        "randomizeNextPreset": "randomiser le préréglage suivant",
+        "selectedPresets": "préréglages sélectionnés",
+        "randomizeNextPreset": "préréglage suivant aléatoire",
        "blendTime": "temps de mélange",
        "presets": "préréglages",
        "selectPreset": "sélectionner un préréglage",
@@ -1231,7 +1249,7 @@
        "copyConfiguration": "copier la configuration",
        "pasteConfiguration": "coller la configuration",
        "pasteConfigurationPlaceholder": "coller ici la configuration JSON...",
-        "pasteFromClipboard": "coller depuis le presse-papier",
+        "pasteFromClipboard": "coller depuis le presse-papiers",
        "applyConfiguration": "appliquer la configuration",
        "configCopied": "configuration copiée dans le presse-papiers",
        "configCopyFailed": "échec de la copie de la configuration",
@@ -1256,7 +1274,7 @@
        "gradientNamePlaceholder": "nom du dégradé",
        "vertical": "verticale",
        "horizontal": "horizontale",
-        "colorStops": "couleur d'arrêts",
+        "colorStops": "Points de Couleur",
        "addColor": "ajouter un couleur",
        "position": "position",
        "level": "niveau",
@@ -313,8 +313,7 @@
        "editPlaylist": {
            "success": "$t(entity.playlist, {\"count\": 1}) sikeresen módosítva",
            "publicJellyfinNote": "A Jellyfin valamiért nem teszi közzé, hogy egy lejátszási lista publikus-e vagy sem. Amennyiben azt szeretnéd, hogy publikus maradjon, válaszd ki az alábbi beviteli mezőt",
-            "title": "szerkesztés $t(entity.playlist, {\"count\": 1})",
-            "editNote": "A kézi szerkesztés nem ajánlott nagy lejátszási listák esetén. Biztosan vállalod a meglévő lejátszási lista felülírásával járó adatvesztés kockázatát?"
+            "title": "szerkesztés $t(entity.playlist, {\"count\": 1})"
        },
        "lyricSearch": {
            "input_artist": "$t(entity.artist, {\"count\": 1})",
@@ -304,8 +304,7 @@
        "editPlaylist": {
            "publicJellyfinNote": "Jellyfin entah bagaimana tidak menampilkan apakah playlist ini publik atau tidak. Jika Anda ingin playlist ini tetap publik, harap pilih entri berikut",
            "success": "$t(entity.playlist, {\"count\": 1}) berhasil diperbarui",
-            "title": "ubah $t(entity.playlist, {\"count\": 1})",
-            "editNote": "pengeditan manual tidak disarankan untuk playlist besar. apakah Anda yakin menerima risiko kehilangan data yang timbul akibat menimpa playlist yang ada?"
+            "title": "ubah $t(entity.playlist, {\"count\": 1})"
        },
        "lyricSearch": {
            "input_artist": "$t(entity.artist, {\"count\": 1})",
@@ -128,6 +128,7 @@
        "close": "chiudi",
        "codec": "codec",
        "mbid": "MusicBrainz ID",
+        "grouping": "raggruppamento",
        "preview": "anteprima",
        "reload": "aggiorna",
        "share": "condividi",
@@ -75,7 +75,7 @@
        "mpvExecutablePath_description": "MPV を実行するファイルパスを設定します。空のままにすると、デフォルトのパスが使用されます",
        "replayGainClipping_description": "自動的にゲインを下げて {{ReplayGain}} によるクリッピングを防ぎます",
        "replayGainPreamp": "{{ReplayGain}} プリアンプ (dB)",
-        "hotkey_favoriteCurrentSong": "$t(common.currentSong) をお気に入り",
+        "hotkey_favoriteCurrentSong": "$t(common.currentSong) をお気に入りに登録",
        "sampleRate": "サンプルレート",
        "sidePlayQueueStyle_optionAttached": "結合",
        "sidebarConfiguration": "サイドバー設定",
@@ -90,19 +90,19 @@
        "themeLight": "テーマ (ライト)",
        "fontType_optionBuiltIn": "組み込みフォント",
        "hotkey_playbackPlayPause": "再生 / 一時停止",
-        "hotkey_rate1": "1つ星で評価",
+        "hotkey_rate1": "1 つ星で評価",
        "hotkey_skipForward": "次へスキップ",
        "disableLibraryUpdateOnStartup": "起動時の新バージョンチェックを無効にします",
        "discordApplicationId_description": "{{discord}} に Rich Presence ステータスを表示するためのアプリケーション ID (デフォルトは {{defaultId}} です)",
-        "sidePlayQueueStyle": "サイド再生キュースタイル",
+        "sidePlayQueueStyle": "サイド再生キューの形式",
        "gaplessAudio": "ギャップレス再生",
        "playButtonBehavior_optionAddLast": "$t(player.addLast)",
        "zoom": "ズーム率",
        "minimizeToTray_description": "最小化ボタンが押された際、システムトレイに格納します",
        "hotkey_playbackPlay": "再生",
-        "hotkey_togglePreviousSongFavorite": "$t(common.previousSong) をお気に入り登録/解除",
+        "hotkey_togglePreviousSongFavorite": "$t(common.previousSong) のお気に入りを切り替え",
        "hotkey_volumeDown": "音量を下げる",
-        "hotkey_unfavoritePreviousSong": "$t(common.previousSong) をお気に入り解除",
+        "hotkey_unfavoritePreviousSong": "$t(common.previousSong) をお気に入りから解除",
        "audioPlayer_description": "再生に使用するオーディオプレーヤーを選択します",
        "globalMediaHotkeys": "グローバルメディアホットキー",
        "hotkey_globalSearch": "グローバル検索",
@@ -110,7 +110,7 @@
        "remoteUsername_description": "リモートコントロール サーバーのユーザ名を設定します。 ユーザー名とパスワードの両方が空の場合、認証は無効になります",
        "exitToTray_description": "アプリケーション終了ボタンが押された際、システムトレイに格納します",
        "followLyric_description": "現在の再生位置に歌詞をスクロールします",
-        "hotkey_favoritePreviousSong": "$t(common.previousSong) をお気に入り",
+        "hotkey_favoritePreviousSong": "$t(common.previousSong) をお気に入りに登録",
        "replayGainMode_optionAlbum": "$t(entity.album, {\"count\": 1})",
        "lyricOffset": "歌詞のオフセット (ミリ秒)",
        "discordUpdateInterval_description": "更新間隔 (秒単位、最小 15 秒)",
@@ -121,7 +121,7 @@
        "lyricFetchProvider": "歌詞取得先",
        "language_description": "アプリケーションの言語を設定します ($t(common.restartRequired))",
        "playbackStyle_optionCrossFade": "クロスフェード",
-        "hotkey_rate3": "3つ星で評価",
+        "hotkey_rate3": "3 つ星で評価",
        "font": "フォント",
        "replayGainMode_optionTrack": "$t(entity.track, {\"count\": 1})",
        "themeLight_description": "アプリケーションに使用するライトテーマを設定します",
@@ -130,7 +130,7 @@
        "hotkey_toggleQueue": "キューの切り替え",
        "zoom_description": "アプリケーションのズーム率を設定します",
        "remotePassword_description": "リモートコントロール サーバーのパスワードを設定します。 ログイン情報はデフォルトでセキュアな通信がされないため、個人情報と関係ないランダムなパスワードを利用してください",
-        "hotkey_rate5": "5つ星で評価",
+        "hotkey_rate5": "5 つ星で評価",
        "hotkey_playbackPrevious": "前のトラック",
        "showSkipButtons_description": "プレーヤーバーのスキップボタンを表示または非表示にします",
        "crossfadeDuration_description": "クロスフェード効果の時間を設定します",
@@ -141,11 +141,11 @@
        "discordRichPresence_description": "{{discord}} Rich Presence で再生ステータスを有効にします。画像キー: {{icon}}, {{playing}}, {{paused}}",
        "mpvExecutablePath": "MPV 実行ファイルパス",
        "audioDevice": "オーディオデバイス",
-        "hotkey_rate2": "2つ星で評価",
+        "hotkey_rate2": "2 つ星で評価",
        "playButtonBehavior_description": "キューに曲を追加するときの再生ボタンのデフォルトの動作を設定します",
        "minimumScrobblePercentage_description": "Scrobble されるために必要な最短の再生時間 (%)",
        "exitToTray": "終了時にシステムトレイに格納",
-        "hotkey_rate4": "4つ星で評価",
+        "hotkey_rate4": "4 つ星で評価",
        "enableRemote": "リモートコントロール サーバーを有効化",
        "showSkipButton_description": "プレーヤーバーのスキップボタンを表示または非表示にします",
        "savePlayQueue": "再生キューを保存",
@@ -156,7 +156,7 @@
        "volumeWheelStep": "音量ホイールステップ",
        "sidebarPlaylistList_description": "サイドバーのプレイリストを表示または非表示にします",
        "accentColor": "アクセントカラー",
-        "sidePlayQueueStyle_description": "サイド再生キューのスタイルを設定します",
+        "sidePlayQueueStyle_description": "サイド再生キューの形式を設定します",
        "accentColor_description": "アプリケーションが利用するアクセントカラーを設定します",
        "replayGainMode": "{{ReplayGain}} モード",
        "playbackStyle_optionNormal": "通常",
@@ -182,12 +182,12 @@
        "sidePlayQueueStyle_optionDetached": "分離",
        "audioPlayer": "オーディオプレーヤー",
        "hotkey_zoomOut": "縮小",
-        "hotkey_unfavoriteCurrentSong": "$t(common.currentSong) をお気に入り解除",
+        "hotkey_unfavoriteCurrentSong": "$t(common.currentSong) をお気に入りから解除",
        "hotkey_rate0": "評価をクリア",
        "discordApplicationId": "{{discord}} アプリケーション ID",
        "applicationHotkeys_description": "アプリケーションのホットキーを設定します。チェックボックスを切り替えて、グローバルホットキーとして設定します (デスクトップのみ)",
        "hotkey_volumeMute": "音量をミュート",
-        "hotkey_toggleCurrentSongFavorite": "$t(common.currentSong) をお気に入り登録/解除",
+        "hotkey_toggleCurrentSongFavorite": "$t(common.currentSong) のお気に入りを切り替え",
        "remoteUsername": "リモートコントロールサーバーのユーザー名",
        "hotkey_browserBack": "ブラウザ 戻る",
        "showSkipButton": "スキップボタンを表示",
@@ -221,8 +221,8 @@
        "volumeWidth": "音量スライダーの幅",
        "webAudio_description": "Web Audio を使用します。これにより、リプレイゲインなどの高度な機能が有効になります。問題が発生した場合は無効にしてください",
        "mpvExtraParameters_help": "1 行に 1 つずつ",
-        "musicbrainz_description": "MusicBrainz ID が存在するアーティスト/アルバムページに MusicBrainz へのリンクを表示します",
-        "musicbrainz": "MusicBrainz リンクを表示する",
+        "musicbrainz_description": "MusicBrainz ID が存在するアーティストとアルバムページに MusicBrainz へのリンクを表示します",
+        "musicbrainz": "MusicBrainz のリンクを表示",
        "neteaseTranslation_description": "有効にすると、利用可能な場合は NetEase から翻訳された歌詞を取得して表示します",
        "neteaseTranslation": "NetEase 翻訳歌詞を有効にする",
        "passwordStore_description": "使用するパスワード / シークレットストア。パスワードの保存に問題がある場合はこれを変更してください",
@@ -238,8 +238,8 @@
        "imageAspectRatio": "ネイティブのカバーアートの縦横比を使用する",
        "language": "言語",
        "imageAspectRatio_description": "有効にすると、カバーアートはネイティブの縦横比で表示されます。縦横比が 1:1 でない場合、残りのスペースは空白になります",
-        "lastfm_description": "アーティスト/アルバムページに Last.fm へのリンクを表示します",
-        "lastfm": "Last.fm リンクを表示する",
+        "lastfm_description": "アーティストとアルバムページに Last.fm へのリンクを表示します",
+        "lastfm": "Last.fm のリンクを表示",
        "lastfmApiKey": "{{lastfm}} API キー",
        "homeConfiguration_description": "ホーム画面に表示する項目と表示順序を設定します",
        "homeConfiguration": "ホーム画面の設定",
@@ -287,7 +287,7 @@
        "exportImportSettings_control_title": "設定をインポート/エクスポート",
        "exportImportSettings_control_description": "JSON 経由で設定をエクスポートおよびインポートする",
        "exportImportSettings_destructiveWarning": "設定のインポートは破壊的です。下の「インポート」をクリックする前に、上記の内容を必ずご確認ください!",
-        "hotkey_navigateHome": "ホームに移動",
+        "hotkey_navigateHome": "ホーム画面へ移動",
        "playButtonBehavior_optionPlayShuffled": "$t(player.shuffle)",
        "playerbarOpenDrawer": "プレーヤーバーの全画面表示切り替え",
        "transcode": "トランスコーディングを有効にする",
@@ -329,11 +329,11 @@
        "followCurrentSong": "現在の曲をフォロー",
        "followCurrentSong_description": "再生キューを現在再生中の曲まで自動的にスクロールします",
        "logLevel": "ログレベル",
-        "logLevel_description": "表示するログの最小レベルを設定します。debug はすべてのログを表示し、error はエラーのみを表示します",
-        "logLevel_optionDebug": "debug",
-        "logLevel_optionError": "error",
-        "logLevel_optionInfo": "info",
-        "logLevel_optionWarn": "警告する",
+        "logLevel_description": "表示するログの最小レベルを設定します。Debug はすべてのログを表示し、Error はエラーのみを表示します",
+        "logLevel_optionDebug": "Debug",
+        "logLevel_optionError": "Error",
+        "logLevel_optionInfo": "Info",
+        "logLevel_optionWarn": "Warn",
        "playerFilters": "キューから曲をフィルタリング",
        "playerFilters_description": "以下の基準に基づいて曲をキューに追加しないようにします",
        "artistRadioCount": "アーティスト / トラックのラジオカウント",
@@ -407,11 +407,25 @@
        "playerbarWaveformBarWidth": "波形バーの幅",
        "playerbarWaveformGap": "波形ギャップ",
        "playerbarWaveformRadius": "波形半径",
-        "hotkey_listNavigateToPage": "リストのアイテムページへ移動",
-        "hotkey_listPlayDefault": "リスト再生",
-        "hotkey_listPlayLast": "リストの最後を再生",
-        "hotkey_listPlayNext": "リスト 再生 次へ",
-        "hotkey_listPlayNow": "今すぐリストを再生"
+        "hotkey_listNavigateToPage": "項目の詳細ページへ移動",
+        "hotkey_listPlayDefault": "リストを再生 (デフォルト)",
+        "hotkey_listPlayLast": "最後に再生",
+        "hotkey_listPlayNext": "次に再生",
+        "hotkey_listPlayNow": "今すぐ再生",
+        "spotify_description": "アーティストとアルバムページに Spotify へのリンクを表示します",
+        "spotify": "Spotify のリンクを表示",
+        "nativeSpotify_description": "ブラウザーの代わりに Spotify アプリで開きます",
+        "nativeSpotify": "Spotify アプリを使用",
+        "listenbrainz_description": "アーティストとアルバムページに ListenBrainz へのリンクを表示します",
+        "listenbrainz": "ListenBrainz のリンクを表示",
+        "qobuz_description": "アーティストとアルバムページに Qobuz へのリンクを表示します",
+        "qobuz": "Qobuz のリンクを表示",
+        "sidePlayQueueLayout": "サイド再生キューのレイアウト",
+        "sidePlayQueueLayout_description": "結合されたサイド再生キューのレイアウトを設定します",
+        "sidePlayQueueLayout_optionHorizontal": "水平",
+        "sidePlayQueueLayout_optionVertical": "垂直",
+        "waveformLoadingDelay": "波形読み込みの遅延",
+        "waveformLoadingDelay_description": "波形を読み込むまでの遅延時間（秒単位）を設定します。Web プレーヤー使用時にカクつきが発生する場合は、この値を増やしてください。"
    },
    "action": {
        "editPlaylist": "$t(entity.playlist, {\"count\": 1}) を編集",
@@ -433,7 +447,10 @@
        "removeFromFavorites": "$t(entity.favorite, {\"count\": 2}) から削除",
        "openIn": {
            "lastfm": "Last.fm で開く",
-            "musicbrainz": "MusicBrainz で開く"
+            "musicbrainz": "MusicBrainz で開く",
+            "spotify": "Spotify で開く",
+            "listenbrainz": "ListenBrainz で開く",
+            "qobuz": "Qobuz で開く"
        },
        "moveToNext": "次",
        "downloadStarted": "{{count}} 曲のダウンロードを開始しました",
@@ -537,7 +554,7 @@
        "bitDepth": "ビット深度",
        "close": "閉じる",
        "codec": "コーデック",
-        "mbid": "MusicBrainz識別子",
+        "mbid": "MusicBrainz ID",
        "sampleRate": "サンプルレート",
        "preview": "プレビュー",
        "private": "プライベート",
@@ -571,7 +588,9 @@
        "filter_single": "シングル",
        "filter_multiple": "複数枚組",
        "rename": "名前を変更",
-        "newVersionAvailable": "新しいバージョンが利用可能です"
+        "newVersionAvailable": "新しいバージョンが利用可能です",
+        "numberOfResults": "{{numberOfResults}} 件の結果",
+        "grouping": "グループ化"
    },
    "table": {
        "config": {
@@ -584,7 +603,7 @@
            "general": {
                "displayType": "表示タイプ",
                "gap": "$t(common.gap)",
-                "tableColumns": "テーブル カラム",
+                "tableColumns": "テーブル列",
                "autoFitColumns": "カラム長を自動調整",
                "size": "$t(common.size)",
                "itemSize": "項目のサイズ (px)",
@@ -1037,8 +1056,7 @@
        "editPlaylist": {
            "title": "$t(entity.playlist, {\"count\": 1}) を編集",
            "publicJellyfinNote": "Jellyfin では、何らかの理由でプレイリストが公開されているかどうかが表示されません。公開されたままにしたい場合は、以下の項目を選択してください",
-            "success": "$t(entity.playlist, {\"count\": 1}) が正常に更新されました",
-            "editNote": "大規模なプレイリストの場合、手動編集は推奨されません。既存のプレイリストを上書きすることでデータ損失が発生するリスクを許容しますか?"
+            "success": "$t(entity.playlist, {\"count\": 1}) が正常に更新されました"
        },
        "shareItem": {
            "allowDownloading": "ダウンロードを許可",
@@ -1064,7 +1082,7 @@
            "title": "ラジオ局を作成",
            "input_homepageUrl": "ホームページ URL",
            "input_name": "名前",
-            "input_streamUrl": "ストリームURL"
+            "input_streamUrl": "ストリーム URL"
        },
        "lyricsExport": {
            "export": "歌詞をエクスポート",
@@ -1125,12 +1143,12 @@
            "audiobook": "オーディオブック",
            "audioDrama": "オーディオドラマ",
            "compilation": "コンピレーション",
-            "djMix": "DJミックス",
+            "djMix": "DJ ミックス",
            "demo": "デモ",
            "soundtrack": "サウンドトラック",
            "fieldRecording": "フィールドレコーディング",
            "interview": "インタビュー",
-            "live": "生で",
+            "live": "ライブ",
            "mixtape": "ミックステープ",
            "remix": "リミックス",
            "spokenWord": "スポークン・ワード"
@@ -1184,20 +1202,20 @@
        "updatePreset": "プリセットを更新",
        "copyConfiguration": "設定をコピーする",
        "pasteConfiguration": "設定を貼り付け",
-        "pasteConfigurationPlaceholder": "ここにJSON設定を貼り付けてください...",
+        "pasteConfigurationPlaceholder": "ここに JSON 設定を貼り付けてください...",
        "pasteFromClipboard": "クリップボードから貼り付け",
        "applyConfiguration": "設定を適用",
        "configCopied": "設定をクリップボードにコピーしました",
        "configCopyFailed": "設定のコピーに失敗しました",
-        "configPasted": "加えられた構成 首尾よく",
+        "configPasted": "設定が正常に適用されました",
        "configPasteFailed": "設定の適用に失敗しました。形式を確認してください。",
        "configPasteReadFailed": "クリップボードからの読み取りに失敗しました",
        "presetName": "プリセット名",
        "presetNamePlaceholder": "プリセット名を入力",
-        "general": "一将",
+        "general": "全般",
        "mode": "モード",
-        "mode1To8": "モード1～8",
-        "mode10": "モード10",
+        "mode1To8": "モード 1 - 8",
+        "mode10": "モード 10",
        "barSpace": "バースペース",
        "lineWidth": "線幅",
        "fillAlpha": "アルファ塗りつぶしを設定",
@@ -1216,15 +1234,15 @@
        "level": "レベル",
        "remove": "取り除く",
        "pasteGradient": "グラデーションを貼り付け",
-        "pasteGradientPlaceholder": "グラデーションのJSONをここに貼り付けてください...",
+        "pasteGradientPlaceholder": "グラデーションの JSON をここに貼り付けてください...",
        "custom": "カスタム",
        "builtIn": "組み込み",
        "colorMode": "カラーモード",
        "gradient": "勾配",
-        "gradientLeft": "左グラデーション",
-        "gradientRight": "右方向のグラデーション",
+        "gradientLeft": "左へのグラデーション",
+        "gradientRight": "右へのグラデーション",
        "fft": "高速フーリエ変換",
-        "fftSize": "FFTサイズ",
+        "fftSize": "FFT サイズ",
        "smoothing": "平滑化",
        "frequencyRangeAndScaling": "周波数範囲とスケーリング",
        "minimumFrequency": "最小周波数",
@@ -1256,30 +1274,30 @@
        "mirror": "鏡",
        "miscellaneousSettings": "その他の設定",
        "alphaBars": "アルファバー",
-        "ansiBands": "ANSIバンド",
-        "ledBars": "LEDバー",
-        "trueLeds": "真のLED",
+        "ansiBands": "ANSI バンド",
+        "ledBars": "LED バー",
+        "trueLeds": "真の LED",
        "lumiBars": "ルミ・バー",
        "outlineBars": "アウトラインバー",
        "roundBars": "丸棒",
        "lowResolution": "低解像度",
        "splitGradient": "分割グラデーション",
-        "showFPS": "FPSを表示",
-        "showScaleX": "X軸スケールを表示",
+        "showFPS": "FPS を表示",
+        "showScaleX": "X 軸スケールを表示",
        "noteLabels": "注釈ラベル",
-        "showScaleY": "Y軸スケールを表示",
+        "showScaleY": "Y 軸スケールを表示",
        "options": {
            "mode": {
                "0": "[0] 離散周波数",
-                "1": "[1] 1/24オクターブ / 240バンド",
-                "2": "[2] 1/12オクターブ / 120バンド",
-                "3": "[3] 1/8オクターブ / 80バンド",
-                "4": "[4] 1/6オクターブ / 60バンド",
-                "5": "[5] 1/4オクターブ / 40バンド",
-                "6": "[6] 1/3オクターブ / 30バンド",
-                "7": "[7] 半オクターブ / 20バンド",
-                "8": "[8] フルオクターブ / 10バンド",
-                "10": "[10] 折れ線グラフ／面グラフ"
+                "1": "[1] 1/24 オクターブ / 240 バンド",
+                "2": "[2] 1/12 オクターブ / 120 バンド",
+                "3": "[3] 1/8 オクターブ / 80 バンド",
+                "4": "[4] 1/6 オクターブ / 60 バンド",
+                "5": "[5] 1/4 オクターブ / 40 バンド",
+                "6": "[6] 1/3 オクターブ / 30 バンド",
+                "7": "[7] 半オクターブ / 20 バンド",
+                "8": "[8] フルオクターブ / 10 バンド",
+                "10": "[10] 折れ線グラフ / 面グラフ"
            },
            "colorMode": {
                "gradient": "勾配",
@@ -2,7 +2,8 @@
    "action": {
        "openIn": {
            "lastfm": "Åpne i Last.fm",
-            "musicbrainz": "Åpne i MusicBrainz"
+            "musicbrainz": "Åpne i MusicBrainz",
+            "spotify": "Åpne i Spotify"
        },
        "moveToBottom": "flytt til bunnen",
        "deletePlaylist": "slett $t(entity.playlist, {\"count\": 1})",
@@ -159,7 +160,8 @@
        "gridRows": "rutenettrader",
        "tableColumns": "tabellkolonner",
        "itemsMore": "{{count}} fler",
-        "explicitStatus": "grovhetsstatus"
+        "explicitStatus": "grovhetsstatus",
+        "newVersionAvailable": "en ny version er tilgjengelig"
    },
    "entity": {
        "smartPlaylist": "smart $t(entity.playlist, {\"count\": 1})",
@@ -233,7 +235,8 @@
        "saveQueueFailed": "kunne ikke lagre kø",
        "multipleServerSaveQueueError": "Spillekøen har en eller flere sanger som ikke finnes på gjeldene tjener. Dette er ikke støttet",
        "serverLockSingleServer": "kun én tjener er tillatt når tjener er låst",
-        "settingsSyncError": "avvik ble funnet mellom innstillinger i avspilleren og hovedprosessen. ta en omstart av applikasjonen for å aktivere endringene"
+        "settingsSyncError": "avvik ble funnet mellom innstillinger i avspilleren og hovedprosessen. ta en omstart av applikasjonen for å aktivere endringene",
+        "playbackPausedDueToError": "avspilling ble paused på grunn av en feil"
    },
    "filter": {
        "bpm": "bpm",
@@ -319,7 +322,8 @@
            "success": "la $t(entity.trackWithCount, {\"count\": {{message}} }) til $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
            "title": "legg til i $t(entity.playlist, {\"count\": 1})",
            "input_skipDuplicates": "hopp over duplikater",
-            "input_playlists": "$t(entity.playlist, {\"count\": 2})"
+            "input_playlists": "$t(entity.playlist, {\"count\": 2})",
+            "searchOrCreate": "søk $t(entity.playlist, {\"count\": 2}) eller skriv for å opprette en"
        },
        "deletePlaylist": {
            "title": "slett $t(entity.playlist, {\"count\": 1})",
@@ -328,7 +332,8 @@
        },
        "editPlaylist": {
            "title": "rediger $t(entity.playlist, {\"count\": 1})",
-            "success": "$t(entity.playlist, {\"count\": 1}) er oppdatert"
+            "success": "$t(entity.playlist, {\"count\": 1}) er oppdatert",
+            "publicJellyfinNote": "Jellyfin av en grunn kan ikke oppgi om en spilleliste er offentlig eller ikke. Hvis du ønsker at denne skal beholdes offentlig, vennligst ha følgende inndata valgt"
        },
        "shareItem": {
            "allowDownloading": "tillat nedlasting",
@@ -336,7 +341,9 @@
            "createFailed": "opprettelse av delt ressurs feilet (er deling aktivert?)",
            "setExpiration": "angi utløpstid",
            "success": "del lenke som er kopiert til utklippstavlen (eller klikk her for å åpne)",
-            "expireInvalid": "utløpstid må være et fremtidig tidspunkt"
+            "expireInvalid": "utløpstid må være et fremtidig tidspunkt",
+            "copyToClipboard": "Kopier til kopitavle: Ctrl+C, Enter",
+            "successMustClick": "opprettet deling. trykk her for å åpne"
        },
        "updateServer": {
            "success": "vellykket oppdatering av serveren",
@@ -367,7 +374,19 @@
        },
        "lyricsExport": {
            "export": "eksporter sangtekster",
-            "input_synced": "eksporter sunkroniserte sangtekster"
+            "input_synced": "eksporter sunkroniserte sangtekster",
+            "input_offset": "$t(setting.lyricOffset)"
+        },
+        "shuffleAll": {
+            "title": "spill av tilfeldig",
+            "input_genre": "$t(entity.genre, {\"count\": 1})",
+            "input_limit": "hvor mange sanger?",
+            "input_minYear": "fra år",
+            "input_maxYear": "til år",
+            "input_played": "avspillingsfilter",
+            "input_played_optionAll": "alle sanger",
+            "input_played_optionUnplayed": "bare uavspilte sanger",
+            "input_played_optionPlayed": "bare avspilte sanger"
        }
    },
    "page": {
@@ -512,7 +531,8 @@
            "advanced": "avansert",
            "hotkeysTab": "hurtigtaster",
            "playbackTab": "avspilling",
-            "windowTab": "vindu"
+            "windowTab": "vindu",
+            "theme": "tema"
        },
        "playlistList": {
            "title": "$t(entity.playlist, {\"count\": 2})"
@@ -19,7 +19,10 @@
        "clearQueue": "verwijder lijst",
        "openIn": {
            "lastfm": "Open in Last.fm",
-            "musicbrainz": "Open in MusicBrainz"
+            "musicbrainz": "Open in MusicBrainz",
+            "listenbrainz": "Openen in ListenBrainz",
+            "qobuz": "Openen in Qobuz",
+            "spotify": "Openen in Spotify"
        },
        "moveToNext": "ga naar volgende",
        "downloadStarted": "begonnen met downloaden van {{count}} items",
@@ -37,7 +40,8 @@
        "moveDown": "verplaats omlaag",
        "holdToMoveToTop": "ingedrukt houden om naar begin te verplaatsen",
        "holdToMoveToBottom": "ingedrukt houden om naar einde te verplaatsen",
-        "openApplicationDirectory": "applicatiemap openen"
+        "openApplicationDirectory": "applicatiemap openen",
+        "goToCurrent": "ga naar huidige item"
    },
    "common": {
        "backward": "achteruit",
@@ -130,6 +134,7 @@
        "bitDepth": "bitdiepte",
        "codec": "codec",
        "mbid": "MusicBrainz ID",
+        "grouping": "groepering",
        "share": "deel",
        "explicit": "expliciet",
        "sampleRate": "sample rate",
@@ -159,7 +164,9 @@
        "retry": "opnieuw proberen",
        "filter_single": "single",
        "rename": "hernoemen",
-        "filter_multiple": "meerdere"
+        "filter_multiple": "meerdere",
+        "numberOfResults": "{{numberOfResults}} resultaten",
+        "newVersionAvailable": "een nieuwe versie is beschikbaar"
    },
    "filter": {
        "rating": "rating",
@@ -452,7 +459,8 @@
        "saveQueueFailed": "kan wachtrij niet opslaan",
        "settingsSyncError": "Er zijn verschillen gevonden tussen de instellingen in de renderer en het hoofdproces. Start de applicatie opnieuw op om de wijzigingen toe te passen",
        "invalidJson": "ongeldige JSON",
-        "serverLockSingleServer": "slechts één server is toegestaan als server op slot is gezet"
+        "serverLockSingleServer": "slechts één server is toegestaan als server op slot is gezet",
+        "playbackPausedDueToError": "afspelen gepauzeerd vanwege een fout"
    },
    "entity": {
        "genre_one": "genre",
@@ -561,7 +569,8 @@
                "title": "$t(common.title)",
                "titleArtist": "$t(common.title) (artiest)",
                "titleCombined": "$t(common.title) (gecombineerd)",
-                "year": "$t(common.year)"
+                "year": "$t(common.year)",
+                "albumGroup": "albumgroep"
            },
            "general": {
                "advancedSettings": "geavanceerde instellingen",
@@ -954,7 +963,29 @@
        "automaticUpdates_description": "Zoek en installeer updates automatisch",
        "releaseChannel_optionAlpha": "alfa (nachtelijk)",
        "discordStateIcon": "toon afspeelicoon",
-        "discordStateIcon_description": "toon een klein afspeelicoon in de rich-presence-status. het gepauzeerde icoon wordt altijd getoond als \"rich presence tonen wanneer gepauzeerd\" is ingeschakeld"
+        "discordStateIcon_description": "toon een klein afspeelicoon in de rich-presence-status. het gepauzeerde icoon wordt altijd getoond als \"rich presence tonen wanneer gepauzeerd\" is ingeschakeld",
+        "autosave": "afspeelwachtrij automatisch opslaan",
+        "autosave_description": "schakel in dat de afspeelwachtrij automatisch wordt opgeslagen op je server. dit is enkel mogelijk bij gebruik van Navidrome/Subsonic met een niet-gemengde afspeelwachtrij.",
+        "autosaveCount": "frequentie automatisch opslaan afspeelwachtrij",
+        "autosaveCount_description": "aantal nummerwisselingen voordat de wachtrij wordt opgeslagen. bij 1 (het minimum) treedt dit bij elke nummerwissel op",
+        "useThemePrimaryShade": "gebruikt primaire tint van thema",
+        "useThemePrimaryShade_description": "gebruik de primaire tint die in het geselecteerde thema is ingesteld voor hoofdkleurvarianten",
+        "primaryShade": "primaire tint",
+        "primaryShade_description": "overschrijf de primaire tint (0-9) die wordt gebruikt voor knoppen, links en andere elementen die de hoofdkleur gebruiken",
+        "listenbrainz_description": "toon links naar ListenBrainz op artiest- en albumpagina's",
+        "listenbrainz": "toon ListenBrainz-links",
+        "qobuz_description": "toon links naar Qobuz op artiest- en albumpagina's",
+        "qobuz": "toon Qobuz-links",
+        "spotify_description": "toon links naar Spotify op artiest- en albumpagina's",
+        "spotify": "toon Spotify-links",
+        "nativeSpotify_description": "open de Spotify app in plaats van de webbrowser",
+        "nativeSpotify": "gebruik Spotify app",
+        "playerItemConfiguration_description": "stel in welke items en in welke volgorde te tonen in de volledigschermspeler",
+        "playerItemConfiguration": "configuratie van afspeel-item",
+        "sidePlayQueueLayout": "uitlijning afspeelwachtrij aan zijkant",
+        "sidePlayQueueLayout_description": "stel de uitlijning in voor de afspeelwachtrij die aan de zijkant is gekoppeld",
+        "sidePlayQueueLayout_optionHorizontal": "horizontaal",
+        "sidePlayQueueLayout_optionVertical": "verticaal"
    },
    "form": {
        "addServer": {
@@ -1013,8 +1044,7 @@
        "editPlaylist": {
            "title": "$t(entity.playlist, {\"count\": 1}) aanpassen",
            "publicJellyfinNote": "Jellyfin laat niet weten of een playlist publiek of privaat is. Als u wilt dat dit publiek blijft, selecteer de volgende invoer",
-            "success": "$t(entity.playlist, {\"count\": 1}) succesvol geüpdatet",
-            "editNote": "Handmatige bewerking wordt afgeraden voor grote afspeellijsten. Weet je zeker dat je het risico op dataverlies wilt accepteren door de bestaande afspeellijst te overschrijven?"
+            "success": "$t(entity.playlist, {\"count\": 1}) succesvol geüpdatet"
        },
        "updateServer": {
            "title": "update server",
@@ -1114,7 +1144,8 @@
        "sleepTimer_off": "uit",
        "sleepTimer_timeRemaining": "{{time}} resterend",
        "sleepTimer_setCustom": "timer instellen",
-        "sleepTimer_cancel": "timer annuleren"
+        "sleepTimer_cancel": "timer annuleren",
+        "albumRadio": "albumradio"
    },
    "datetime": {
        "minuteShort": "m",
@@ -19,7 +19,10 @@
        "setRating": "oceń",
        "openIn": {
            "lastfm": "Otwórz w Last.fm",
-            "musicbrainz": "Otwórz w MusicBrainz"
+            "musicbrainz": "Otwórz w MusicBrainz",
+            "listenbrainz": "Otwórz w ListenBrainz",
+            "qobuz": "Otwórz w Qobuz",
+            "spotify": "Otwórz w Spotify"
        },
        "moveToNext": "przesuń na następne",
        "downloadStarted": "rozpoczęto pobieranie {{count}} elementów",
@@ -165,7 +168,9 @@
        "filter_multiple": "multi",
        "filter_single": "single",
        "rename": "zmień nazwę",
-        "newVersionAvailable": "nowa wersja jest dostępna"
+        "newVersionAvailable": "nowa wersja jest dostępna",
+        "numberOfResults": "{{numberOfResults}} wyników",
+        "grouping": "grupowanie"
    },
    "entity": {
        "genre_one": "gatunek",
@@ -370,8 +375,7 @@
        "editPlaylist": {
            "title": "edytuj $t(entity.playlist, {\"count\": 1})",
            "success": "$t(entity.playlist, {\"count\": 1}) zaktualizowana pomyślnie",
-            "publicJellyfinNote": "Z jakiegoś powodu Jellyfin nie udostępnia informacji na temat publiczności playlisty. Jeżeli chcesz, aby ta pozostała publiczna, mniej wybraną poniższą opcję",
-            "editNote": "manualne edytowanie nie jest zalecane dla dużych playlist. czy na pewno zgadzasz się na ryzyko utraty danych wywołane przez nadpisanie istniejącej playlisty?"
+            "publicJellyfinNote": "Z jakiegoś powodu Jellyfin nie udostępnia informacji na temat publiczności playlisty. Jeżeli chcesz, aby ta pozostała publiczna, mniej wybraną poniższą opcję"
        },
        "shareItem": {
            "allowDownloading": "zezwól na pobieranie",
@@ -417,6 +421,9 @@
            "export": "eksportuj tekst",
            "input_synced": "eksportuj zsynchronizowany tekst",
            "input_offset": "$t(setting.lyricOffset)"
+        },
+        "editRadioStation": {
+            "success": "stacja radiowa zaktualizowana pomyślnie"
        }
    },
    "page": {
@@ -1043,7 +1050,21 @@
        "autosave": "automatycznie zapisuj kolejkę odtwarzania",
        "autosave_description": "włącz automatyczne zapisywanie kolejki odtwarzania na twój serwer. to jest możliwe tylko gdy używane jest Navidrome/Subsonic, i nie masz zmixowanej kolejki odtwarzania.",
        "autosaveCount": "częstotliwość automatycznego zapisywania kolejki odtwarzania",
-        "autosaveCount_description": "ile razy piosenka zostanie zmieniona przed zapisaniem kolejki. 1 (najmniejsze) oznacza zapisywanie kolejki po każdej zmianie piosenki"
+        "autosaveCount_description": "ile razy piosenka zostanie zmieniona przed zapisaniem kolejki. 1 (najmniejsze) oznacza zapisywanie kolejki po każdej zmianie piosenki",
+        "listenbrainz_description": "pokaż linki do ListenBrainz na stronach wykonawców/albumów",
+        "listenbrainz": "pokaż linki ListenBrainz",
+        "qobuz_description": "pokaż linki do Qobuz na stronach wykonawców/albumów",
+        "qobuz": "pokaż linki Qobuz",
+        "spotify_description": "pokaż linki do Spotify na stronach wykonawców/albumów",
+        "spotify": "pokaż linki Spotify",
+        "nativeSpotify_description": "otwieraj w aplikacji Spotify zamiast w twojej przeglądarce",
+        "nativeSpotify": "używaj aplikacji Spotify",
+        "sidePlayQueueLayout": "układ boczny kolejki odtwarzania",
+        "sidePlayQueueLayout_description": "ustawia układ przyczepionej z boku kolejki odtwarzania",
+        "sidePlayQueueLayout_optionHorizontal": "poziomy",
+        "sidePlayQueueLayout_optionVertical": "pionowy",
+        "waveformLoadingDelay": "opóźnienie załadowania fali",
+        "waveformLoadingDelay_description": "opóźnienie w sekundach przed załadowaniem fali. zwiększ tą wartość jeżeli doświadczasz zawieszania się odtwarzacza przeglądarkowego."
    },
    "table": {
        "config": {
@@ -84,6 +84,7 @@
        "size": "tamanho",
        "note": "observação",
        "mbid": "ID no MusicBrainz",
+        "grouping": "agrupamento",
        "reload": "recarregar",
        "codec": "codec",
        "preview": "pré-visualizar",
@@ -72,6 +72,7 @@
        "forceRestartRequired": "reinicie para aplicar as alterações… feche a notificação para reiniciar",
        "forward": "para frente",
        "gap": "intervalo",
+        "grouping": "agrupamento",
        "home": "início",
        "increase": "incrementar",
        "left": "esquerda",
@@ -126,6 +126,7 @@
        "note": "заметка",
        "none": "нет",
        "mbid": "MusicBrainz ID",
+        "grouping": "группировка",
        "reload": "перезагрузить",
        "preview": "просмотр",
        "codec": "кодек",
@@ -678,8 +679,7 @@
        "editPlaylist": {
            "title": "редактировать $t(entity.playlist, {\"count\": 1})",
            "success": "$t(entity.playlist, {\"count\": 1}) обновлён успешно",
-            "publicJellyfinNote": "Jellyfin по какой-то причине не предоставляет информацию о том, публичный плейлист или нет. Если вы хотите, чтобы он остался публичным, выберите следующую опцию",
-            "editNote": "редактирование больших плейлистов вручную не рекомендуется. Вы уверены, что готовы принять риск потери данных, который может возникнуть в результате перезаписи существующего плейлиста?"
+            "publicJellyfinNote": "Jellyfin по какой-то причине не предоставляет информацию о том, публичный плейлист или нет. Если вы хотите, чтобы он остался публичным, выберите следующую опцию"
        },
        "shareItem": {
            "success": "ссылка скопирована в буфер обмена (нажмите здесь, чтобы открыть)",
@@ -310,8 +310,7 @@
        "editPlaylist": {
            "title": "திருத்து $t(entity.playlist, {\"count\": 1})",
            "publicJellyfinNote": "சில காரணங்களால் செல்லிஃபின் ஒரு பிளேலிச்ட் பொதுவில் இல்லையா என்பதை அம்பலப்படுத்தவில்லை. இது பொதுவில் இருக்க விரும்பினால், தயவுசெய்து பின்வரும் உள்ளீட்டைத் தேர்ந்தெடுக்கவும்",
-            "success": "$t(entity.playlist, {\"count\": 1}) வெற்றிகரமாகப் புதுப்பிக்கப்பட்டது",
-            "editNote": "பெரிய பிளேலிச்ட்களுக்கு கைமுறை திருத்தங்கள் பரிந்துரைக்கப்படவில்லை. ஏற்கனவே உள்ள பிளேலிச்ட்டை மேலெழுதுவதால் ஏற்படும் தரவு இழப்பின் அபாயத்தை நிச்சயமாக ஏற்றுக்கொள்கிறீர்களா?"
+            "success": "$t(entity.playlist, {\"count\": 1}) வெற்றிகரமாகப் புதுப்பிக்கப்பட்டது"
        },
        "lyricSearch": {
            "input_artist": "$t(entity.artist, {\"count\": 1})",
@@ -98,6 +98,7 @@
        "forceRestartRequired": "перезапустіть, щоб застосувати зміни… закрийте повідомлення, щоб перезапустити",
        "forward": "уперед",
        "gap": "прогалина",
+        "grouping": "групування",
        "home": "додому",
        "increase": "збільшити",
        "left": "ліво",
@@ -382,7 +383,6 @@
        },
        "editPlaylist": {
            "publicJellyfinNote": "Jellyfin з якоїсь причини не показує, чи є плейлист публічним чи ні. Якщо ви хочете, щоб він залишався публічним, виберіть варіант нижче",
-            "editNote": "ручне редагування не рекомендується для великих плейлистів. ви впевнені, що готові прийняти ризик втрати даних, який виникає при перезапису існуючого плейлисту?",
            "success": "$t(entity.playlist, {\"count\": 1}) успішно оновлено",
            "title": "змінити $t(entity.playlist, {\"count\": 1})"
        },
@@ -19,7 +19,10 @@
        "goToPage": "前往页面",
        "openIn": {
            "lastfm": "在 Last.fm 中打开",
-            "musicbrainz": "在 MusicBrainz 中打开"
+            "musicbrainz": "在 MusicBrainz 中打开",
+            "listenbrainz": "在 ListenBrainz 中打开",
+            "qobuz": "在 Qobuz 中打开",
+            "spotify": "在 Spotify 中打开"
        },
        "moveToNext": "移至下一首",
        "downloadStarted": "开始下载 {{count}} 个项目",
@@ -157,7 +160,9 @@
        "mood": "氛围",
        "rename": "重命名",
        "filter_multiple": "多项",
-        "newVersionAvailable": "新版本现已可用"
+        "newVersionAvailable": "新版本现已可用",
+        "numberOfResults": "{{numberOfResults}} 结果",
+        "grouping": "分组"
    },
    "entity": {
        "albumArtist_other": "专辑艺术家",
@@ -448,7 +453,7 @@
        "discordServeImage": "从服务器提供 {{discord}} 图像",
        "discordServeImage_description": "从服务器本身分享 {{discord}} rich presence 的封面艺术，仅适用于 Jellyfin 和 Navidrome。 {{discord}} 使用机器人来获取图像，因此您的服务器必须可通过公共互联网访问",
        "musicbrainz": "显示 MusicBrainz 链接",
-        "musicbrainz_description": "在存在 MusicBrainz ID 的艺术家/专辑页面上显示 MusicBrainz 的链接",
+        "musicbrainz_description": "在艺术家/专辑页面上显示 MusicBrainz 链接（如果存在 MusicBrainz ID）",
        "lastfm": "显示 last.fm 链接",
        "lastfm_description": "在艺术家/专辑页面上显示 Last.fm 的链接",
        "preferLocalLyrics_description": "优先选择本地歌词（如有），而不是远程歌词",
@@ -593,7 +598,21 @@
        "primaryShade": "主色调",
        "primaryShade_description": "覆盖按钮、链接和其他主色元素使用的主色调（0-9）",
        "playerItemConfiguration_description": "配置全屏播放器上显示的项目及其显示顺序",
-        "playerItemConfiguration": "播放器项目配置"
+        "playerItemConfiguration": "播放器项目配置",
+        "listenbrainz_description": "在艺术家/专辑页面上显示 ListenBrainz 链接",
+        "listenbrainz": "显示 ListenBrainz 链接",
+        "qobuz_description": "在艺术家/专辑页面上显示 Qobuz 链接",
+        "qobuz": "显示 Qobuz 链接",
+        "spotify_description": "在艺术家/专辑页面上显示 Spotify 链接",
+        "spotify": "显示 Spotify 链接",
+        "nativeSpotify_description": "在 Spotify 应用中打开，而不是在浏览器中打开",
+        "nativeSpotify": "使用 Spotify 应用",
+        "sidePlayQueueLayout": "侧边播放队列布局",
+        "sidePlayQueueLayout_description": "设置附加侧边播放队列的布局",
+        "sidePlayQueueLayout_optionHorizontal": "水平",
+        "sidePlayQueueLayout_optionVertical": "垂直",
+        "waveformLoadingDelay": "波形加载延迟",
+        "waveformLoadingDelay_description": "加载波形前的延迟时间（秒）。如果在使用网页播放器时遇到卡顿现象，请增加此值。"
    },
    "error": {
        "remotePortWarning": "重启服务器使新端口生效",
@@ -945,8 +964,7 @@
        "editPlaylist": {
            "title": "编辑$t(entity.playlist, {\"count\": 1})",
            "publicJellyfinNote": "Jellyfin 出于某种原因不会显示播放列表是否公开。如果您希望保持公开，请选择以下输入",
-            "success": "$t(entity.playlist, {\"count\": 1})更新成功",
-            "editNote": "不建议对大型播放列表进行手动编辑，你确定接受新播放列表覆盖已有播放列表可能导致的数据丢失风险吗？"
+            "success": "$t(entity.playlist, {\"count\": 1})更新成功"
        },
        "lyricSearch": {
            "title": "搜索歌词",
@@ -116,7 +116,9 @@
        "itemsMore": "{{count}} 更多",
        "filter_single": "單選",
        "filter_multiple": "複選",
-        "newVersionAvailable": "有新的版本可供使用"
+        "newVersionAvailable": "有新的版本可供使用",
+        "numberOfResults": "{{numberOfResults}} 項結果",
+        "grouping": "分組"
    },
    "error": {
        "endpointNotImplementedError": "{{serverType}} 尚未實現端點 {{endpoint}}",
@@ -777,10 +779,20 @@
        "autosave_description": "啟用自動將播放佇列儲存到您的伺服器。這只有在使用Navidrome/Subsonic時才可使用，並且您不能有混合播放佇列。",
        "autosaveCount": "自動播放佇列儲存頻率",
        "autosaveCount_description": "在儲存佇列之前，有多少曲目更改。1（最小）表示每次歌曲更改",
-        "spotify_description": "在藝人與專輯頁面顯示Spotify的連結",
-        "spotify": "顯示Spotify的連結",
-        "nativeSpotify_description": "在Spotify應用程式中開啟，而非在瀏覽器中開啟",
-        "nativeSpotify": "使用Spotify應用程式"
+        "spotify_description": "在藝人與專輯頁面顯示 Spotify 的連結",
+        "spotify": "顯示 Spotify 的連結",
+        "nativeSpotify_description": "在 Spotify 應用程式中開啟，而非在瀏覽器中開啟",
+        "nativeSpotify": "使用 Spotify 應用程式",
+        "sidePlayQueueLayout": "側邊播放佇列佈局",
+        "sidePlayQueueLayout_description": "設定吸附側邊播放佇列的佈局",
+        "sidePlayQueueLayout_optionHorizontal": "水平",
+        "sidePlayQueueLayout_optionVertical": "垂直",
+        "listenbrainz_description": "在藝術家/專輯頁面上顯示 ListenBrainz 的連結",
+        "listenbrainz": "顯示 ListenBrainz 連結",
+        "qobuz_description": "在藝術家/專輯頁面上顯示 Qobuz 的連結",
+        "qobuz": "顯示 Qobuz 連結",
+        "waveformLoadingDelay": "波形載入延遲",
+        "waveformLoadingDelay_description": "載入波形前的延遲（以秒為單位）。如果您在使用網頁播放器時遇到卡頓，請增加此值。"
    },
    "table": {
        "config": {
@@ -913,7 +925,9 @@
        "openIn": {
            "lastfm": "在Last.fm開啟",
            "musicbrainz": "在MusicBrainz開啟",
-            "spotify": "在Spotify中開啟"
+            "spotify": "在 Spotify 中開啟",
+            "listenbrainz": "在 ListenBrainz 中開啟",
+            "qobuz": "在 Qobuz 中開啟"
        },
        "downloadStarted": "已開始下載 {{count}} 項內容",
        "moveItems": "移動項目",
@@ -1064,8 +1078,7 @@
        "editPlaylist": {
            "title": "編輯$t(entity.playlist, {\"count\": 1})",
            "publicJellyfinNote": "Jellyfin 出於某種原因，不會顯示播放清單是否公開。如果您希望保持公開狀態，請選擇以下輸入",
-            "success": "$t(entity.playlist, {\"count\": 1}) 更新成功",
-            "editNote": "不建議手動編輯大型播放清單，你確定要承擔覆寫現有播放清單可能造成的資料遺失風險嗎？"
+            "success": "$t(entity.playlist, {\"count\": 1}) 更新成功"
        },
        "shareItem": {
            "allowDownloading": "允許下載",
@@ -1111,6 +1124,9 @@
            "export": "匯出歌詞",
            "input_synced": "匯出同步歌詞",
            "input_offset": "$t(setting.lyricOffset)"
+        },
+        "editRadioStation": {
+            "success": "電臺更新成功"
        }
    },
    "releaseType": {
@@ -58,14 +58,16 @@ export async function getSearchResults(
 ): Promise<InternetProviderLyricSearchResponse[] | null> {
    let result: AxiosResponse<LrcLibSearchResponse[]>;

-    if (!params.name) {
+    if (!params.name && !params.artist) {
        return null;
    }

+    const searchQuery = [params.name, params.artist].join(' ');
+
    try {
        result = await axios.get<LrcLibSearchResponse[]>(SEEARCH_URL, {
            params: {
-                q: params.name,
+                q: searchQuery,
            },
        });
    } catch (e) {
@@ -437,10 +437,18 @@ ipcMain.on('player-mute', async (_event, mute: boolean) => {

 ipcMain.handle('player-get-time', async (): Promise<number | undefined> => {
    try {
-        return getMpvInstance()?.getTimePosition();
+        const mpv = getMpvInstance();
+        if (!mpv) {
+            return undefined;
+        }
+        return await mpv.getTimePosition();
    } catch (err: any | NodeMpvError) {
+        // Err 3: IPC command invalid — e.g. time-pos unavailable when idle / between tracks
+        if (err?.errcode === 3) {
+            return undefined;
+        }
        mpvLog({ action: `Failed to get current time` }, err);
-        return 0;
+        return undefined;
    }
 });

@@ -272,11 +272,6 @@ if (isLinux() && !process.argv.some((a) => a.startsWith('--password-store='))) {
    app.commandLine.appendSwitch('password-store', passwordStore);
 }

-// Handle fractional scaling issue from Wayland https://github.com/jeffvli/feishin/issues/1271#issuecomment-4063326712
-if (isLinux()) {
-    app.commandLine.appendSwitch('disable-features', 'WaylandFractionalScaleV1');
-}
-
 let mainWindow: BrowserWindow | null = null;
 let tray: null | Tray = null;
 let exitFromTray = false;
@@ -436,19 +431,21 @@ const createTray = () => {
        },
    ]);

-    tray.on('click', () => {
-        if (store.get('window_minimize_to_tray')) {
-            if (mainWindow?.isVisible()) {
-                mainWindow?.hide();
+    if (!isMacOS()) {
+        tray.on('click', () => {
+            if (store.get('window_minimize_to_tray')) {
+                if (mainWindow?.isVisible()) {
+                    mainWindow?.hide();
+                } else {
+                    mainWindow?.show();
+                    createWinThumbarButtons();
+                }
            } else {
                mainWindow?.show();
                createWinThumbarButtons();
            }
-        } else {
-            mainWindow?.show();
-            createWinThumbarButtons();
-        }
-    });
+        });
+    }

    tray.setToolTip('Feishin');
    tray.setContextMenu(contextMenu);
@@ -745,11 +742,17 @@ const playbackType = store.get('playbackType', PlayerType.WEB) as PlayerType;
 const shouldDisableMediaFeatures =
    isLinux() || !enableMediaSession || playbackType !== PlayerType.WEB;

+const chromiumDisabledFeatures: string[] = [];
+// Fractional scaling on Wayland: https://github.com/jeffvli/feishin/issues/1271#issuecomment-4063326712
+if (isLinux()) {
+    chromiumDisabledFeatures.push('WaylandFractionalScaleV1');
+}
 if (shouldDisableMediaFeatures) {
-    app.commandLine.appendSwitch(
-        'disable-features',
-        'HardwareMediaKeyHandling,MediaSessionService',
-    );
+    chromiumDisabledFeatures.push('HardwareMediaKeyHandling', 'MediaSessionService');
+}
+
+if (chromiumDisabledFeatures.length > 0) {
+    app.commandLine.appendSwitch('disable-features', chromiumDisabledFeatures.join(','));
 }

 // https://github.com/electron/electron/issues/46538#issuecomment-2808806722
@@ -10,6 +10,8 @@ import {
    ControllerEndpoint,
    InternalControllerEndpoint,
    ServerType,
+    SetPlaylistSongsArgs,
+    SetPlaylistSongsResponse,
 } from '/@/shared/types/domain-types';

 type ApiController = {
@@ -67,6 +69,7 @@ const getPathReplaceSettings = () => {

 const addContext = <T extends { apiClientProps: any; context?: any }>(args: T): T => {
    const pathSettings = getPathReplaceSettings();
+
    return {
        ...args,
        context: {
@@ -172,6 +175,20 @@ export const controller: GeneralController = {
            server.type,
        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
    },
+    deleteInternetRadioStationImage(args) {
+        const server = getServerById(args.apiClientProps.serverId);
+
+        if (!server) {
+            throw new Error(
+                `${i18n.t('error.apiRouteError', { postProcess: 'sentenceCase' })}: deleteInternetRadioStationImage`,
+            );
+        }
+
+        return apiController(
+            'deleteInternetRadioStationImage',
+            server.type,
+        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
+    },
    deletePlaylist(args) {
        const server = getServerById(args.apiClientProps.serverId);

@@ -186,6 +203,20 @@ export const controller: GeneralController = {
            server.type,
        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
    },
+    deletePlaylistImage(args) {
+        const server = getServerById(args.apiClientProps.serverId);
+
+        if (!server) {
+            throw new Error(
+                `${i18n.t('error.apiRouteError', { postProcess: 'sentenceCase' })}: deletePlaylistImage`,
+            );
+        }
+
+        return apiController(
+            'deletePlaylistImage',
+            server.type,
+        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
+    },
    getAlbumArtistDetail(args) {
        const server = getServerById(args.apiClientProps.serverId);

@@ -717,7 +748,9 @@ export const controller: GeneralController = {
        const server = getServerById(args.apiClientProps.serverId);

        if (!server) {
-            return '';
+            throw new Error(
+                `${i18n.t('error.apiRouteError', { postProcess: 'sentenceCase' })}: getStreamUrl`,
+            );
        }

        return apiController(
@@ -885,6 +918,20 @@ export const controller: GeneralController = {
            }),
        );
    },
+    setPlaylistSongs: function (args: SetPlaylistSongsArgs): Promise<SetPlaylistSongsResponse> {
+        const server = getServerById(args.apiClientProps.serverId);
+
+        if (!server) {
+            throw new Error(
+                `${i18n.t('error.apiRouteError', { postProcess: 'sentenceCase' })}: setPlaylistSongs`,
+            );
+        }
+
+        return apiController(
+            'setPlaylistSongs',
+            server.type,
+        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
+    },
    setRating(args) {
        const server = getServerById(args.apiClientProps.serverId);

@@ -941,4 +988,32 @@ export const controller: GeneralController = {
            server.type,
        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
    },
+    uploadInternetRadioStationImage(args) {
+        const server = getServerById(args.apiClientProps.serverId);
+
+        if (!server) {
+            throw new Error(
+                `${i18n.t('error.apiRouteError', { postProcess: 'sentenceCase' })}: uploadInternetRadioStationImage`,
+            );
+        }
+
+        return apiController(
+            'uploadInternetRadioStationImage',
+            server.type,
+        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
+    },
+    uploadPlaylistImage(args) {
+        const server = getServerById(args.apiClientProps.serverId);
+
+        if (!server) {
+            throw new Error(
+                `${i18n.t('error.apiRouteError', { postProcess: 'sentenceCase' })}: uploadPlaylistImage`,
+            );
+        }
+
+        return apiController(
+            'uploadPlaylistImage',
+            server.type,
+        )?.(addContext({ ...args, apiClientProps: { ...args.apiClientProps, server } }));
+    },
 };
@@ -1283,7 +1283,7 @@ export const JellyfinController: InternalControllerEndpoint = {
            apiClientProps,
            query: { ...query, limit: 1, startIndex: 0 },
        }).then((result) => result!.totalRecordCount!),
-    getStreamUrl: ({ apiClientProps: { server }, query }) => {
+    getStreamUrl: async ({ apiClientProps: { server }, query }) => {
        const { bitrate, format, id, transcode } = query;
        const deviceId = '';

@@ -1769,6 +1769,24 @@ export const JellyfinController: InternalControllerEndpoint = {
            ),
        };
    },
+    setPlaylistSongs: async (args) => {
+        const { apiClientProps, body } = args;
+
+        const res = await jfApiClient(apiClientProps).updatePlaylist({
+            body: {
+                Ids: body.songIds,
+            },
+            params: {
+                id: body.id,
+            },
+        });
+
+        if (res.status !== 204) {
+            throw new Error('Failed to update playlist songs');
+        }
+
+        return null;
+    },
    updateInternetRadioStation: async (args) => {
        const { apiClientProps, body, query } = args;

@@ -1798,14 +1816,8 @@ export const JellyfinController: InternalControllerEndpoint = {

        const res = await jfApiClient(apiClientProps).updatePlaylist({
            body: {
-                Genres: body.genres?.map((item) => ({ Id: item.id, Name: item.name })) || [],
                IsPublic: body.public,
-                MediaType: 'Audio',
                Name: body.name,
-                PremiereDate: null,
-                ProviderIds: {},
-                Tags: [],
-                UserId: apiClientProps.server?.userId, // Required
            },
            params: {
                id: query.id,
@@ -1820,31 +1832,6 @@ export const JellyfinController: InternalControllerEndpoint = {
    },
 };

-// const getArtistList = async (args: ArtistListArgs): Promise<AlbumArtistListResponse> => {
-//     const { query, apiClientProps } = args;
-
-//     const res = await jfApiClient(apiClientProps).getAlbumArtistList({
-//         query: {
-//             Limit: query.limit,
-//             ParentId: query.musicFolderId,
-//             Recursive: true,
-//             SortBy: artistListSortMap.jellyfin[query.sortBy] || 'SortName,Name',
-//             SortOrder: sortOrderMap.jellyfin[query.sortOrder],
-//             StartIndex: query.startIndex,
-//         },
-//     });
-
-//     if (res.status !== 200) {
-//         throw new Error('Failed to get artist list');
-//     }
-
-//     return {
-//         items: res.body.Items.map((item) => jfNormalize.albumArtist(item, apiClientProps.server)),
-//         startIndex: query.startIndex,
-//         totalRecordCount: res.body.TotalRecordCount,
-//     };
-// };
-
 function getLibraryId(musicFolderId?: string | string[]) {
    return Array.isArray(musicFolderId) ? musicFolderId[0] : musicFolderId;
 }
@@ -46,6 +46,24 @@ export const contract = c.router({
            500: resultWithHeaders(ndType._response.error),
        },
    },
+    deleteInternetRadioStation: {
+        body: null,
+        method: 'DELETE',
+        path: 'radio/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.deleteInternetRadioStation),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    deleteInternetRadioStationImage: {
+        body: null,
+        method: 'DELETE',
+        path: 'radio/:id/image',
+        responses: {
+            200: resultWithHeaders(ndType._response.deleteInternetRadioStationImage),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
    deletePlaylist: {
        body: null,
        method: 'DELETE',
@@ -55,6 +73,15 @@ export const contract = c.router({
            500: resultWithHeaders(ndType._response.error),
        },
    },
+    deletePlaylistImage: {
+        body: null,
+        method: 'DELETE',
+        path: 'playlist/:id/image',
+        responses: {
+            200: resultWithHeaders(ndType._response.deletePlaylistImage),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
    getAlbumArtistDetail: {
        method: 'GET',
        path: 'artist/:id',
@@ -132,6 +159,15 @@ export const contract = c.router({
            500: resultWithHeaders(ndType._response.error),
        },
    },
+    getRadioList: {
+        method: 'GET',
+        path: 'radio',
+        query: ndType._parameters.radioList,
+        responses: {
+            200: resultWithHeaders(ndType._response.radioList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
    getSongDetail: {
        method: 'GET',
        path: 'song/:id',
@@ -205,6 +241,15 @@ export const contract = c.router({
            500: resultWithHeaders(ndType._response.error),
        },
    },
+    updateInternetRadioStation: {
+        body: ndType._parameters.updateInternetRadioStation,
+        method: 'PUT',
+        path: 'radio/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.updateInternetRadioStation),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
    updatePlaylist: {
        body: ndType._parameters.updatePlaylist,
        method: 'PUT',
@@ -214,6 +259,24 @@ export const contract = c.router({
            500: resultWithHeaders(ndType._response.error),
        },
    },
+    uploadInternetRadioStationImage: {
+        body: ndType._parameters.uploadInternetRadioStationImage,
+        method: 'POST',
+        path: 'radio/:id/image',
+        responses: {
+            200: resultWithHeaders(ndType._response.uploadInternetRadioStationImage),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    uploadPlaylistImage: {
+        body: ndType._parameters.uploadPlaylistImage,
+        method: 'POST',
+        path: 'playlist/:id/image',
+        responses: {
+            200: resultWithHeaders(ndType._response.uploadPlaylistImage),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
 });

 const axiosClient = axios.create({});
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { set } from 'idb-keyval';
 import orderBy from 'lodash/orderBy';

@@ -5,13 +6,17 @@ import { ndApiClient } from '/@/renderer/api/navidrome/navidrome-api';
 import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
 import { SubsonicController } from '/@/renderer/api/subsonic/subsonic-controller';
 import { ndNormalize } from '/@/shared/api/navidrome/navidrome-normalize';
-import { NDSongListSort } from '/@/shared/api/navidrome/navidrome-types';
+import { NDRadioListSort, NDSongListSort } from '/@/shared/api/navidrome/navidrome-types';
 import { ssNormalize } from '/@/shared/api/subsonic/subsonic-normalize';
 import { getFeatures, hasFeature, hasFeatureWithVersion, VersionInfo } from '/@/shared/api/utils';
 import {
    albumArtistListSortMap,
    albumListSortMap,
    AuthenticationResponse,
+    DeleteInternetRadioStationImageArgs,
+    DeleteInternetRadioStationImageResponse,
+    DeletePlaylistImageArgs,
+    DeletePlaylistImageResponse,
    genreListSortMap,
    InternalControllerEndpoint,
    playlistListSortMap,
@@ -23,6 +28,10 @@ import {
    SortOrder,
    sortOrderMap,
    tagListSortMap,
+    UploadInternetRadioStationImageArgs,
+    UploadInternetRadioStationImageResponse,
+    UploadPlaylistImageArgs,
+    UploadPlaylistImageResponse,
    userListSortMap,
 } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
@@ -30,6 +39,13 @@ import { ServerFeature } from '/@/shared/types/features-types';
 const VERSION_INFO: VersionInfo = [
    // Why 2? Subsonic controller will return 1 for its own implementation
    // Use 2 to denote that Navidrome's own API has a different endpoint
+    [
+        '0.61.0',
+        {
+            [ServerFeature.INTERNET_RADIO_IMAGE_UPLOAD]: [1],
+            [ServerFeature.PLAYLIST_IMAGE_UPLOAD]: [1],
+        },
+    ],
    ['0.60.4', { [ServerFeature.TRACK_YES_NO_RATING_FILTER]: [1] }],
    ['0.57.0', { [ServerFeature.SERVER_PLAY_QUEUE]: [2] }],
    ['0.56.0', { [ServerFeature.TRACK_ALBUM_ARTIST_SEARCH]: [1] }],
@@ -171,7 +187,38 @@ export const NavidromeController: InternalControllerEndpoint = {
        };
    },
    deleteFavorite: SubsonicController.deleteFavorite,
-    deleteInternetRadioStation: SubsonicController.deleteInternetRadioStation,
+    deleteInternetRadioStation: async (args) => {
+        const { apiClientProps, query } = args;
+
+        const res = await ndApiClient(apiClientProps).deleteInternetRadioStation({
+            params: {
+                id: query.id,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to delete internet radio station');
+        }
+
+        return null;
+    },
+    deleteInternetRadioStationImage: async (
+        args: DeleteInternetRadioStationImageArgs,
+    ): Promise<DeleteInternetRadioStationImageResponse> => {
+        const { apiClientProps, query } = args;
+
+        const res = await ndApiClient(apiClientProps as any).deleteInternetRadioStationImage({
+            params: {
+                id: query.id,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to delete internet radio station image');
+        }
+
+        return res.body.data.status === 'ok';
+    },
    deletePlaylist: async (args) => {
        const { apiClientProps, query } = args;

@@ -187,6 +234,23 @@ export const NavidromeController: InternalControllerEndpoint = {

        return null;
    },
+    deletePlaylistImage: async (
+        args: DeletePlaylistImageArgs,
+    ): Promise<DeletePlaylistImageResponse> => {
+        const { apiClientProps, query } = args;
+
+        const res = await ndApiClient(apiClientProps as any).deletePlaylistImage({
+            params: {
+                id: query.id,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to delete playlist image');
+        }
+
+        return res.body.data.status === 'ok';
+    },
    getAlbumArtistDetail: async (args) => {
        const { apiClientProps, query } = args;

@@ -547,7 +611,24 @@ export const NavidromeController: InternalControllerEndpoint = {
    },
    getImageRequest: SubsonicController.getImageRequest,
    getImageUrl: SubsonicController.getImageUrl,
-    getInternetRadioStations: SubsonicController.getInternetRadioStations,
+    getInternetRadioStations: async (args) => {
+        const { apiClientProps } = args;
+
+        const res = await ndApiClient(apiClientProps).getRadioList({
+            query: {
+                _end: -1,
+                _order: 'ASC',
+                _sort: NDRadioListSort.NAME,
+                _start: 0,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to get internet radio stations');
+        }
+
+        return res.body.data.map((station) => ndNormalize.internetRadioStation(station));
+    },
    getLyrics: SubsonicController.getLyrics,
    getMusicFolderList: SubsonicController.getMusicFolderList,
    getPlaylistDetail: async (args) => {
@@ -604,6 +685,7 @@ export const NavidromeController: InternalControllerEndpoint = {
            query: {
                _end: -1,
                _order: 'ASC',
+                _sort: NDSongListSort.ID,
                _start: 0,
                ...excludeMissing(apiClientProps.server),
            },
@@ -744,7 +826,6 @@ export const NavidromeController: InternalControllerEndpoint = {
            args.context?.pathReplaceWith,
        );
    },
-
    getSongList: async (args) => {
        const { apiClientProps, query } = args;

@@ -818,6 +899,7 @@ export const NavidromeController: InternalControllerEndpoint = {
            totalRecordCount: albums.totalRecordCount,
        };
    },
+
    getSongListCount: async ({ apiClientProps, query }) =>
        NavidromeController.getSongList({
            apiClientProps,
@@ -1010,6 +1092,7 @@ export const NavidromeController: InternalControllerEndpoint = {
            query: {
                _end: -1,
                _order: 'ASC',
+                _sort: NDSongListSort.ID,
                _start: 0,
                ...excludeMissing(apiClientProps.server),
            },
@@ -1120,6 +1203,7 @@ export const NavidromeController: InternalControllerEndpoint = {
    },
    scrobble: SubsonicController.scrobble,
    search: SubsonicController.search,
+    setPlaylistSongs: SubsonicController.setPlaylistSongs,
    setRating: SubsonicController.setRating,
    shareItem: async (args) => {
        const { apiClientProps, body } = args;
@@ -1142,7 +1226,26 @@ export const NavidromeController: InternalControllerEndpoint = {
            id: res.body.data.id,
        };
    },
-    updateInternetRadioStation: SubsonicController.updateInternetRadioStation,
+    updateInternetRadioStation: async (args) => {
+        const { apiClientProps, body, query } = args;
+
+        const res = await ndApiClient(apiClientProps).updateInternetRadioStation({
+            body: {
+                homePageUrl: body.homepageUrl ?? '',
+                name: body.name,
+                streamUrl: body.streamUrl,
+            },
+            params: {
+                id: query.id,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to update internet radio station');
+        }
+
+        return null;
+    },
    updatePlaylist: async (args) => {
        const { apiClientProps, body, query } = args;

@@ -1167,4 +1270,76 @@ export const NavidromeController: InternalControllerEndpoint = {

        return null;
    },
+    uploadInternetRadioStationImage: async (
+        args: UploadInternetRadioStationImageArgs,
+    ): Promise<UploadInternetRadioStationImageResponse> => {
+        const { apiClientProps, body, query } = args;
+
+        const server = apiClientProps.server;
+        const serverUrl = server?.url?.replace(/\/$/, '');
+
+        if (!serverUrl) {
+            throw new Error('Server is required');
+        }
+
+        const form = new FormData();
+        const bytes = body.image as Uint8Array<ArrayBuffer>;
+        const fileLike =
+            typeof File !== 'undefined'
+                ? new File([bytes], 'image', { type: 'application/octet-stream' })
+                : new Blob([bytes], { type: 'application/octet-stream' });
+        form.append('image', fileLike as any);
+
+        const res = await axios.post(`${serverUrl}/api/radio/${query.id}/image`, form, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+                ...(server?.ndCredential && {
+                    'x-nd-authorization': `Bearer ${server.ndCredential}`,
+                }),
+            },
+            signal: apiClientProps.signal,
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to upload internet radio station image');
+        }
+
+        return res.data?.status === 'ok';
+    },
+    uploadPlaylistImage: async (
+        args: UploadPlaylistImageArgs,
+    ): Promise<UploadPlaylistImageResponse> => {
+        const { apiClientProps, body, query } = args;
+
+        const server = apiClientProps.server;
+        const serverUrl = server?.url?.replace(/\/$/, '');
+
+        if (!serverUrl) {
+            throw new Error('Server is required');
+        }
+
+        const form = new FormData();
+        const bytes = body.image as Uint8Array<ArrayBuffer>;
+        const fileLike =
+            typeof File !== 'undefined'
+                ? new File([bytes], 'image', { type: 'application/octet-stream' })
+                : new Blob([bytes], { type: 'application/octet-stream' });
+        form.append('image', fileLike as any);
+
+        const res = await axios.post(`${serverUrl}/api/playlist/${query.id}/image`, form, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+                ...(server?.ndCredential && {
+                    'x-nd-authorization': `Bearer ${server.ndCredential}`,
+                }),
+            },
+            signal: apiClientProps.signal,
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to upload playlist image');
+        }
+
+        return res.data?.status === 'ok';
+    },
 };
@@ -347,6 +347,11 @@ export const queryKeys: Record<
        list: (serverId: string) => [serverId, 'roles'] as const,
    },
    search: {
+        infiniteList: (
+            serverId: string,
+            type: 'albumArtists' | 'albums' | 'songs',
+            searchTerm: string,
+        ) => [serverId, 'search', 'infiniteList', type, searchTerm] as const,
        list: (serverId: string, query?: SearchQuery) => {
            if (query) return [serverId, 'search', 'list', query] as const;
            return [serverId, 'search', 'list'] as const;
@@ -250,6 +250,23 @@ export const contract = c.router({
            200: ssType._response.topSongsList,
        },
    },
+    getTranscodeDecision: {
+        body: ssType._body.getTranscodeDecision,
+        method: 'POST',
+        path: 'getTranscodeDecision.view',
+        query: ssType._parameters.getTranscodeDecision,
+        responses: {
+            200: ssType._response.getTranscodeDecision,
+        },
+    },
+    getTranscodeStream: {
+        method: 'GET',
+        path: 'getTranscodeStream.view',
+        query: ssType._parameters.getTranscodeStream,
+        responses: {
+            200: z.string(),
+        },
+    },
    getUser: {
        method: 'GET',
        path: 'getUser.view',
@@ -392,7 +409,7 @@ export const ssApiClient = (args: {
    const { server, signal, silent, url } = args;

    return initClient(contract, {
-        api: async ({ headers, method, path }) => {
+        api: async ({ body, headers, method, path, rawQuery }) => {
            let baseUrl: string | undefined;
            const authParams: Record<string, any> = {};

@@ -423,19 +440,44 @@ export const ssApiClient = (args: {
                url: `${baseUrl}/${api}`,
            };

-            const data = {
-                c: 'Feishin',
-                f: 'json',
-                v: '1.13.0',
-                ...authParams,
-                ...params,
-            };
+            const isGetTranscodeDecisionPost =
+                method === 'POST' && api === 'getTranscodeDecision.view';

-            if (hasFeature(server, ServerFeature.OS_FORM_POST)) {
+            if (isGetTranscodeDecisionPost && body != null) {
+                request.method = 'POST';
+                request.headers = {
+                    ...headers,
+                    'Content-Type': 'application/json',
+                };
+                request.data = body;
+                request.params = {
+                    c: 'Feishin',
+                    f: 'json',
+                    v: '1.13.0',
+                    ...authParams,
+                    ...(typeof rawQuery === 'object' && rawQuery !== null
+                        ? (rawQuery as Record<string, unknown>)
+                        : {}),
+                };
+            } else if (hasFeature(server, ServerFeature.OS_FORM_POST)) {
                headers['Content-Type'] = 'application/x-www-form-urlencoded';
                request.method = 'POST';
+                const data = {
+                    c: 'Feishin',
+                    f: 'json',
+                    v: '1.13.0',
+                    ...authParams,
+                    ...params,
+                };
                request.data = qs.stringify(data, { arrayFormat: 'repeat' });
            } else {
+                const data = {
+                    c: 'Feishin',
+                    f: 'json',
+                    v: '1.13.0',
+                    ...authParams,
+                    ...params,
+                };
                request.method = method;
                request.params = data;
            }
@@ -8,7 +8,12 @@ import md5 from 'md5';
 import { z } from 'zod';

 import { contract, ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
+import {
+    getDefaultTranscodingProfiles,
+    getDirectPlayProfiles,
+} from '/@/renderer/features/player/components/audio-players';
 import { randomString } from '/@/renderer/utils';
+import { logFn } from '/@/renderer/utils/logger';
 import { getServerUrl } from '/@/renderer/utils/normalize-server-url';
 import { ssNormalize } from '/@/shared/api/subsonic/subsonic-normalize';
 import {
@@ -87,6 +92,151 @@ const ALBUM_LIST_SORT_MAPPING: Record<AlbumListSort, AlbumListSortType | undefin
 const MAX_SUBSONIC_ITEMS = 500;
 const SUBSONIC_FAST_BATCH_SIZE = MAX_SUBSONIC_ITEMS * 10;

+// const TRANSCODE_DIRECT_PLAY_PROFILES = [
+//     {
+//         audioCodecs: ['mp3'],
+//         containers: ['mp3'],
+//         maxAudioChannels: 2,
+//         protocols: ['http'],
+//     },
+//     {
+//         audioCodecs: ['aac'],
+//         containers: ['m4a', 'mp4'],
+//         maxAudioChannels: 2,
+//         protocols: ['http'],
+//     },
+//     {
+//         audioCodecs: ['vorbis'],
+//         containers: ['ogg'],
+//         maxAudioChannels: 2,
+//         protocols: ['http'],
+//     },
+//     {
+//         audioCodecs: ['opus'],
+//         containers: ['ogg', 'webm'],
+//         maxAudioChannels: 2,
+//         protocols: ['http'],
+//     },
+//     {
+//         audioCodecs: ['pcm'],
+//         containers: ['wav'],
+//         maxAudioChannels: 2,
+//         protocols: ['http'],
+//     },
+//     {
+//         audioCodecs: ['flac'],
+//         containers: ['flac'],
+//         maxAudioChannels: 2,
+//         protocols: ['http'],
+//     },
+// ];
+
+// const TRANSCODE_UNSUPPORTED_DIRECT_PLAY_PROFILES = [
+//     {
+//       containers: ["m4a", "mp4"],
+//       audioCodecs: ["alac"],
+//       protocols: ["http"],
+//       maxAudioChannels: 2
+//     },
+//     {
+//       containers: ["m4a", "mp4"],
+//       audioCodecs: ["ac3", "eac3"],
+//       protocols: ["http"],
+//       maxAudioChannels: 6
+//     },
+//     {
+//       containers: ["ogg"],
+//       audioCodecs: ["flac", "speex"],
+//       protocols: ["http"],
+//       maxAudioChannels: 2
+//     },
+//     {
+//       containers: ["wav"],
+//       audioCodecs: ["adpcm", "gsm", "aac", "mp3"],
+//       protocols: ["http"],
+//       maxAudioChannels: 2
+//     },
+//     {
+//       containers: ["mkv"],
+//       audioCodecs: ["aac", "mp3", "flac", "opus", "vorbis", "ac3", "eac3", "dts"],
+//       protocols: ["http"],
+//       maxAudioChannels: 8
+//     },
+//     {
+//       containers: ["avi"],
+//       audioCodecs: ["mp3", "ac3", "pcm", "aac"],
+//       protocols: ["http"],
+//       maxAudioChannels: 6
+//     },
+//     {
+//       containers: ["asf", "wma"],
+//       audioCodecs: ["wma", "pcm", "mp3"],
+//       protocols: ["http"],
+//       maxAudioChannels: 2
+//     },
+//     {
+//       containers: ["caf"],
+//       audioCodecs: ["pcm", "aac", "alac", "mp3"],
+//       protocols: ["http"],
+//       maxAudioChannels: 8
+//     },
+//     {
+//       containers: ["3gp"],
+//       audioCodecs: ["aac", "amr"],
+//       protocols: ["http"],
+//       maxAudioChannels: 2
+//     },
+//     {
+//       containers: ["amr"],
+//       audioCodecs: ["amr"],
+//       protocols: ["http"],
+//       maxAudioChannels: 1
+//     },
+//     {
+//       containers: ["ape"],
+//       audioCodecs: ["ape"],
+//       protocols: ["http"],
+//       maxAudioChannels: 2
+//     },
+//     {
+//       containers: ["wv"],
+//       audioCodecs: ["wavpack"],
+//       protocols: ["http"],
+//       maxAudioChannels: 2
+//     },
+//     {
+//       containers: ["ac3"],
+//       audioCodecs: ["ac3"],
+//       protocols: ["http"],
+//       maxAudioChannels: 6
+//     },
+//     {
+//       containers: ["eac3"],
+//       audioCodecs: ["eac3"],
+//       protocols: ["http"],
+//       maxAudioChannels: 8
+//     },
+//     {
+//       containers: ["dts"],
+//       audioCodecs: ["dts"],
+//       protocols: ["http"],
+//       maxAudioChannels: 8
+//     }
+//   ];
+
+function appendTranscodeParams(url: string, format?: string, bitrate?: number) {
+    let streamUrl = url;
+
+    if (format) {
+        streamUrl += `&format=${format}`;
+    }
+    if (bitrate !== undefined) {
+        streamUrl += `&maxBitRate=${bitrate}`;
+    }
+
+    return streamUrl;
+}
+
 function sortAndPaginate<T>(
    items: T[],
    options: {
@@ -1035,7 +1185,7 @@ export const SubsonicController: InternalControllerEndpoint = {
        return ssNormalize.playlist(res.body.playlist, apiClientProps.server);
    },
    getPlaylistList: async ({ apiClientProps, query }) => {
-        const sortOrder = query.sortOrder.toLowerCase() as 'asc' | 'desc';
+        const sortOrder = (query.sortOrder || SortOrder.ASC).toLowerCase() as 'asc' | 'desc';

        const res = await ssApiClient(apiClientProps).getPlaylists({});

@@ -1273,6 +1423,10 @@ export const SubsonicController: InternalControllerEndpoint = {
            }
        }

+        if (subsonicFeatures[SubsonicExtensions.TRANSCODING]) {
+            features.osTranscodeDecision = [1];
+        }
+
        if (subsonicFeatures[SubsonicExtensions.SONG_LYRICS]) {
            features.lyricsMultipleStructured = [1];
        }
@@ -1801,20 +1955,81 @@ export const SubsonicController: InternalControllerEndpoint = {

        return totalRecordCount;
    },
-    getStreamUrl: ({ apiClientProps: { server }, query }) => {
-        const { bitrate, format, id, transcode } = query;
-        let url = `${server?.url}/rest/stream.view?id=${id}&v=1.13.0&c=Feishin&${server?.credential}`;
+    getStreamUrl: async ({ apiClientProps, query }) => {
+        const { server } = apiClientProps;
+        const { bitrate, format, id, mediaType = 'song', skipAutoTranscode, transcode } = query;

+        const streamUrl = `${server?.url}/rest/stream.view?id=${id}&v=1.13.0&c=Feishin&${server?.credential}`;
+
+        // If transcoding is explicitly enabled, just return the direct transcoded stream URL
        if (transcode) {
-            if (format) {
-                url += `&format=${format}`;
-            }
-            if (bitrate !== undefined) {
-                url += `&maxBitRate=${bitrate}`;
-            }
+            return appendTranscodeParams(streamUrl, format, bitrate);
        }

-        return url;
+        // Used in cases where MPV is the default player, since mpv handles basically every audio format
+        if (skipAutoTranscode) {
+            return streamUrl;
+        }
+
+        // If the server supports transcoding decision, always use it to determine if we need to transcode
+        if (hasFeature(server, ServerFeature.OS_TRANSCODE_DECISION)) {
+            const maxTranscodingAudioBitrate = 0;
+
+            const directPlayProfiles = getDirectPlayProfiles();
+            const transcodingProfiles = getDefaultTranscodingProfiles();
+
+            const transcodeDecision = await ssApiClient(apiClientProps).getTranscodeDecision({
+                body: {
+                    codecProfiles: [],
+                    directPlayProfiles,
+                    maxAudioBitrate: 0,
+                    maxTranscodingAudioBitrate,
+                    name: 'Feishin',
+                    platform: navigator.userAgent,
+                    transcodingProfiles,
+                },
+                query: {
+                    mediaId: id,
+                    mediaType,
+                },
+            });
+
+            if (transcodeDecision.status !== 200) {
+                throw new Error('Failed to get transcode decision');
+            }
+
+            const td = transcodeDecision.body.transcodeDecision;
+            const requiresTranscoding = !td?.canDirectPlay;
+
+            // If the server does not require transcoding, just return the direct stream URL
+            if (!requiresTranscoding) {
+                return streamUrl;
+            }
+
+            logFn.info(`Song ${id} requires transcoding: ${[td.transcodeReason].join(', ')}`);
+
+            // If the server does not return transcode params, manually create the transcode params
+            if (!td.transcodeParams) {
+                return appendTranscodeParams(streamUrl, format, bitrate);
+            }
+
+            const transcodeStreamUrl = await ssApiClient(apiClientProps).getTranscodeStream({
+                query: {
+                    mediaId: id,
+                    mediaType,
+                    offset: 0,
+                    transcodeParams: td.transcodeParams,
+                },
+            });
+
+            if (transcodeStreamUrl.status !== 200) {
+                throw new Error('Failed to get transcode stream');
+            }
+
+            return transcodeStreamUrl.body;
+        }
+
+        return streamUrl;
    },
    getStructuredLyrics: async (args) => {
        const { apiClientProps, query } = args;
@@ -2118,6 +2333,22 @@ export const SubsonicController: InternalControllerEndpoint = {
            ),
        };
    },
+    setPlaylistSongs: async (args) => {
+        const { apiClientProps, body } = args;
+
+        const res = await ssApiClient(apiClientProps).createPlaylist({
+            query: {
+                playlistId: body.id,
+                songId: body.songIds,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to update playlist songs');
+        }
+
+        return null;
+    },
    setRating: async (args) => {
        const { apiClientProps, query } = args;

@@ -7,7 +7,7 @@ import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import isElectron from 'is-electron';
-import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, memo, Suspense, useEffect, useMemo, useRef, useState } from 'react';

 import i18n from '/@/i18n/i18n';
 import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
@@ -38,67 +38,26 @@ const UpdateAvailableDialog = lazy(() =>
 const ipc = isElectron() ? window.api.ipc : null;

 export const App = () => {
+    return <ThemedApp />;
+};
+
+const ThemedApp = () => {
    const { mode, theme } = useAppTheme();
-    const language = useLanguage();

-    const { content, enabled } = useCssSettings();
-    const { bindings } = useHotkeySettings();
-    const cssRef = useRef<HTMLStyleElement | null>(null);
-
-    useSyncSettingsToMain();
-    useCheckForUpdates();
+    return (
+        <MantineProvider forceColorScheme={mode} theme={theme}>
+            <AppShell />
+        </MantineProvider>
+    );
+};

+const AppShell = memo(function AppShell() {
    const [webAudio, setWebAudio] = useState<WebAudio>();

-    useEffect(() => {
-        if (enabled && content) {
-            // Yes, CSS is sanitized here as well. Prevent a suer from changing the
-            // localStorage to bypass sanitizing.
-            const sanitized = sanitizeCss(content);
-            if (!cssRef.current) {
-                cssRef.current = document.createElement('style');
-                document.body.appendChild(cssRef.current);
-            }
-
-            cssRef.current.textContent = sanitized;
-
-            return () => {
-                cssRef.current!.textContent = '';
-            };
-        }
-
-        return () => {};
-    }, [content, enabled]);
-
    const webAudioProvider = useMemo(() => {
        return { setWebAudio, webAudio };
    }, [webAudio]);

-    useEffect(() => {
-        if (isElectron()) {
-            ipc?.send('set-global-shortcuts', bindings);
-        }
-    }, [bindings]);
-
-    useEffect(() => {
-        if (language) {
-            i18n.changeLanguage(language);
-        }
-    }, [language]);
-
-    useEffect(() => {
-        if (isElectron()) {
-            window.api.utils.rendererOpenSettings(() => {
-                openSettingsModal();
-            });
-
-            return () => {
-                ipc?.removeAllListeners('renderer-open-settings');
-            };
-        }
-        return undefined;
-    }, []);
-
    const notificationStyles = useMemo(
        () => ({
            root: {
@@ -109,7 +68,8 @@ export const App = () => {
    );

    return (
-        <MantineProvider forceColorScheme={mode} theme={theme}>
+        <>
+            <AppEffects />
            <Notifications
                containerWidth="300px"
                position="bottom-center"
@@ -126,6 +86,104 @@ export const App = () => {
                <ReleaseNotesModal />
                <UpdateAvailableDialog />
            </Suspense>
-        </MantineProvider>
+        </>
    );
+});
+
+const AppEffects = () => (
+    <>
+        <SyncSettingsEffect />
+        <UpdateCheckEffect />
+        <CssSettingsEffect />
+        <GlobalShortcutsEffect />
+        <LanguageEffect />
+        <OpenSettingsEffect />
+    </>
+);
+
+const SyncSettingsEffect = () => {
+    useSyncSettingsToMain();
+
+    return null;
+};
+
+const UpdateCheckEffect = () => {
+    useCheckForUpdates();
+
+    return null;
+};
+
+const CssSettingsEffect = () => {
+    const { content, enabled } = useCssSettings();
+    const cssRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        if (!enabled || !content) {
+            if (cssRef.current) {
+                cssRef.current.textContent = '';
+            }
+
+            return;
+        }
+
+        // Yes, CSS is sanitized here as well. Prevent a user from changing the
+        // localStorage to bypass sanitizing.
+        const sanitized = sanitizeCss(content);
+        if (!cssRef.current) {
+            cssRef.current = document.createElement('style');
+            document.body.appendChild(cssRef.current);
+        }
+
+        cssRef.current.textContent = sanitized;
+
+        return () => {
+            if (cssRef.current) {
+                cssRef.current.textContent = '';
+            }
+        };
+    }, [content, enabled]);
+
+    return null;
+};
+
+const GlobalShortcutsEffect = () => {
+    const { bindings } = useHotkeySettings();
+
+    useEffect(() => {
+        if (isElectron()) {
+            ipc?.send('set-global-shortcuts', bindings);
+        }
+    }, [bindings]);
+
+    return null;
+};
+
+const LanguageEffect = () => {
+    const language = useLanguage();
+
+    useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language]);
+
+    return null;
+};
+
+const OpenSettingsEffect = () => {
+    useEffect(() => {
+        if (isElectron()) {
+            window.api.utils.rendererOpenSettings(() => {
+                openSettingsModal();
+            });
+
+            return () => {
+                ipc?.removeAllListeners('renderer-open-settings');
+            };
+        }
+
+        return undefined;
+    }, []);
+
+    return null;
 };
@@ -67,10 +67,19 @@
    padding: var(--theme-spacing-md);
 }

+.single-carousel-container .carousel {
+    min-height: 240px;
+}
+
+.single-carousel-container .carousel-item {
+    min-height: 240px;
+}
+
 .single-carousel-container .carousel-item .content {
    flex-direction: row;
-    gap: var(--theme-spacing-lg);
+    gap: var(--theme-spacing-md);
    align-items: flex-end;
+    min-height: 240px;
    padding: var(--theme-spacing-xl);
 }

@@ -36,12 +36,16 @@
    min-width: 0;
 }

+.grid-carousel-viewport {
+    width: 100%;
+    min-height: 0;
+}
+
 .grid {
    display: grid;
    grid-template-columns: repeat(var(--cards-to-show, 2), minmax(0, 1fr));
    gap: var(--theme-spacing-md);
    contain: layout paint;
-    content-visibility: auto;
    overflow: hidden;
    will-change: transform;
 }
@@ -22,9 +22,9 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useShowRatings } from '/@/renderer/store';
 import {
    formatDateAbsolute,
-    formatDateAbsoluteUTC,
    formatDateRelative,
    formatDurationString,
+    formatPartialIsoDateUTC,
    formatRating,
 } from '/@/renderer/utils/format';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
@@ -1161,12 +1161,10 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
        },
        {
            format: (data) => {
-                if ('releaseYear' in data && data.releaseYear !== null) {
+                if ('releaseYear' in data && data.releaseYear != null) {
                    const releaseYear = data.releaseYear;
                    const originalYear =
-                        'originalYear' in data && data.originalYear !== null
-                            ? data.originalYear
-                            : null;
+                        'originalYear' in data && data.originalYear > 0 ? data.originalYear : null;

                    if (originalYear !== null && originalYear !== releaseYear) {
                        return `${originalYear}${SEPARATOR_STRING}${releaseYear}`;
@@ -1186,10 +1184,10 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
                        data.originalDate &&
                        data.originalDate !== data.releaseDate
                    ) {
-                        return `${formatDateAbsoluteUTC(data.originalDate)}${SEPARATOR_STRING}${formatDateAbsoluteUTC(data.releaseDate)}`;
+                        return `${formatPartialIsoDateUTC(data.originalDate)}${SEPARATOR_STRING}${formatPartialIsoDateUTC(data.releaseDate)}`;
                    }

-                    return `${formatDateAbsoluteUTC(data.releaseDate)}`;
+                    return `${formatPartialIsoDateUTC(data.releaseDate)}`;
                }
                return '';
            },
@@ -1,6 +1,21 @@
 import { ItemDetailListCellProps } from './types';

-import { formatDateAbsoluteUTC } from '/@/renderer/utils/format';
+import { formatPartialIsoDateUTC } from '/@/renderer/utils/format';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';

-export const ReleaseDateColumn = ({ song }: ItemDetailListCellProps) =>
-    song.releaseDate ? formatDateAbsoluteUTC(song.releaseDate) : <>&nbsp;</>;
+export const ReleaseDateColumn = ({ song }: ItemDetailListCellProps) => {
+    const row = song as typeof song & { originalDate?: null | string };
+    const releaseDate = row.releaseDate;
+    if (!releaseDate) {
+        return <>&nbsp;</>;
+    }
+
+    const originalDate =
+        row.originalDate && row.originalDate !== releaseDate ? row.originalDate : null;
+
+    if (originalDate) {
+        return `${formatPartialIsoDateUTC(originalDate)}${SEPARATOR_STRING}${formatPartialIsoDateUTC(releaseDate)}`;
+    }
+
+    return formatPartialIsoDateUTC(releaseDate);
+};
@@ -67,7 +67,7 @@ import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useSettingsStore, useShowRatings } from '/@/renderer/store';
-import { formatDateAbsoluteUTC, formatDurationString } from '/@/renderer/utils';
+import { formatDurationString, formatPartialIsoDateUTC } from '/@/renderer/utils';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
@@ -489,9 +489,9 @@ const MetadataSection = memo(
            let releaseStr = '';
            if (item.releaseDate) {
                if (item.originalDate && item.originalDate !== item.releaseDate) {
-                    releaseStr = `${formatDateAbsoluteUTC(item.originalDate)}${SEPARATOR_STRING}${formatDateAbsoluteUTC(item.releaseDate)}`;
+                    releaseStr = `${formatPartialIsoDateUTC(item.originalDate)}${SEPARATOR_STRING}${formatPartialIsoDateUTC(item.releaseDate)}`;
                } else {
-                    releaseStr = formatDateAbsoluteUTC(item.releaseDate);
+                    releaseStr = formatPartialIsoDateUTC(item.releaseDate);
                }
            } else if (item.releaseYear != null) {
                releaseStr = String(item.releaseYear);
@@ -20,7 +20,8 @@ export const createColumnCellComponent = (
                prevProps.columnIndex === nextProps.columnIndex &&
                prevProps.data === nextProps.data &&
                prevProps.style === nextProps.style &&
-                prevProps.columns === nextProps.columns
+                prevProps.columns === nextProps.columns &&
+                prevProps.playlistId === nextProps.playlistId
            );
        },
    );
@@ -8,49 +8,25 @@ import {
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import {
    formatDateAbsolute,
-    formatDateAbsoluteUTC,
    formatDateRelative,
-    formatHrDateTime,
+    formatPartialIsoDateUTC,
 } from '/@/renderer/utils/format';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
-import { Stack } from '/@/shared/components/stack/stack';
-import { Text } from '/@/shared/components/text/text';
-import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 import { TableColumn } from '/@/shared/types/types';

-const getDateTooltipLabel = (utcString: string) => {
-    return (
-        <Stack gap="xs" justify="center">
-            <Text size="md" ta="center">
-                {formatHrDateTime(utcString)}
-            </Text>
-            <Text isMuted size="sm" ta="center">
-                {utcString}
-            </Text>
-        </Stack>
-    );
-};
-
 const DateColumnBase = (props: ItemTableListInnerColumn) => {
    const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
    const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];

-    const { formattedDate, tooltipLabel } = useMemo(() => {
-        if (typeof row === 'string' && row) {
-            return {
-                formattedDate: formatDateAbsolute(row),
-                tooltipLabel: getDateTooltipLabel(row),
-            };
-        }
-        return { formattedDate: null, tooltipLabel: null };
-    }, [row]);
+    const formattedAbsolute = useMemo(
+        () => (typeof row === 'string' && row ? formatDateAbsolute(row) : null),
+        [row],
+    );

-    if (typeof row === 'string' && row) {
+    if (formattedAbsolute) {
        return (
            <TableColumnTextContainer {...props}>
-                <Tooltip label={tooltipLabel} multiline={false}>
-                    <span>{formattedDate}</span>
-                </Tooltip>
+                <span>{formattedAbsolute}</span>
            </TableColumnTextContainer>
        );
    }
@@ -79,44 +55,37 @@ const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
                        : null;

                if (originalDate) {
-                    const formattedOriginalDate = formatDateAbsoluteUTC(originalDate);
-                    const formattedReleaseDate = formatDateAbsoluteUTC(releaseDate);
-                    const displayText = `${formattedOriginalDate}${SEPARATOR_STRING}${formattedReleaseDate}`;
-
-                    return {
-                        displayText,
-                        tooltipLabel: getDateTooltipLabel(releaseDate),
-                    };
+                    const formattedOriginalDate = formatPartialIsoDateUTC(originalDate);
+                    const formattedReleaseDate = formatPartialIsoDateUTC(releaseDate);
+                    return `${formattedOriginalDate}${SEPARATOR_STRING}${formattedReleaseDate}`;
                }

                if (typeof releaseDate === 'string' && releaseDate) {
-                    return {
-                        displayText: formatDateAbsoluteUTC(releaseDate),
-                        tooltipLabel: getDateTooltipLabel(releaseDate),
-                    };
+                    return formatPartialIsoDateUTC(releaseDate);
                }
            }
        }
        return null;
    }, [props.type, rowItem]);

-    const { formattedDate, tooltipLabel } = useMemo(() => {
-        if (typeof row === 'string' && row) {
-            return {
-                formattedDate: formatDateAbsoluteUTC(row),
-                tooltipLabel: getDateTooltipLabel(row),
-            };
-        }
-        return { formattedDate: null, tooltipLabel: null };
-    }, [row]);
+    const formattedIsoFallback = useMemo(
+        () => (typeof row === 'string' && row ? formatPartialIsoDateUTC(row) : null),
+        [row],
+    );

    if (props.type === TableColumn.RELEASE_DATE) {
        if (releaseDateContent) {
            return (
                <TableColumnTextContainer {...props}>
-                    <Tooltip label={releaseDateContent.tooltipLabel} multiline={false}>
-                        <span>{releaseDateContent.displayText}</span>
-                    </Tooltip>
+                    <span>{releaseDateContent}</span>
+                </TableColumnTextContainer>
+            );
+        }
+
+        if (formattedIsoFallback) {
+            return (
+                <TableColumnTextContainer {...props}>
+                    <span>{formattedIsoFallback}</span>
                </TableColumnTextContainer>
            );
        }
@@ -128,20 +97,6 @@ const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
        return <ColumnSkeletonFixed {...props} />;
    }

-    if (typeof row === 'string' && row) {
-        return (
-            <TableColumnTextContainer {...props}>
-                <Tooltip label={tooltipLabel} multiline={false}>
-                    <span>{formattedDate}</span>
-                </Tooltip>
-            </TableColumnTextContainer>
-        );
-    }
-
-    if (row === null) {
-        return <ColumnNullFallback {...props} />;
-    }
-
    return <ColumnSkeletonFixed {...props} />;
 };

@@ -151,22 +106,15 @@ const RelativeDateColumnBase = (props: ItemTableListInnerColumn) => {
    const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
    const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];

-    const { formattedDate, tooltipLabel } = useMemo(() => {
-        if (typeof row === 'string') {
-            return {
-                formattedDate: formatDateRelative(row),
-                tooltipLabel: getDateTooltipLabel(row),
-            };
-        }
-        return { formattedDate: null, tooltipLabel: null };
+    const formattedRelative = useMemo(() => {
+        if (typeof row !== 'string') return null;
+        return formatDateRelative(row);
    }, [row]);

-    if (typeof row === 'string') {
+    if (formattedRelative !== null) {
        return (
            <TableColumnTextContainer {...props}>
-                <Tooltip label={tooltipLabel} multiline={false}>
-                    <span>{formattedDate}</span>
-                </Tooltip>
+                <span>{formattedRelative}</span>
            </TableColumnTextContainer>
        );
    }
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { useMemo } from 'react';
 import { Link } from 'react-router';

 import styles from './title-column.module.css';
@@ -35,8 +36,12 @@ function DefaultTitleColumn(props: ItemTableListInnerColumn) {
    const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
    const row: string | undefined = rowItem?.[props.columns[props.columnIndex].id];

+    const path = useMemo(() => {
+        if (typeof row !== 'string' || !rowItem || !(rowItem as any).id) return undefined;
+        return getTitlePath(props.itemType, (rowItem as any).id as string);
+    }, [props.itemType, row, rowItem]);
+
    if (typeof row === 'string') {
-        const path = getTitlePath(props.itemType, (rowItem as any).id as string);
        const item = rowItem as any;

        const titleLinkProps = path
@@ -80,8 +85,12 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
    const song = rowItem as QueueSong;
    const isActive = useIsActiveRow(song?.id, song?._uniqueId);

+    const path = useMemo(() => {
+        if (typeof row !== 'string' || !rowItem || !(rowItem as any).id) return undefined;
+        return getTitlePath(props.itemType, (rowItem as any).id as string);
+    }, [props.itemType, row, rowItem]);
+
    if (typeof row === 'string') {
-        const path = getTitlePath(props.itemType, (rowItem as any).id as string);
        const item = rowItem as any;

        const titleLinkProps = path
@@ -13,10 +13,10 @@ const YearColumnBase = (props: ItemTableListInnerColumn) => {
    const item = rowItem as any;

    const yearDisplay = useMemo(() => {
-        if (item && 'releaseYear' in item && item.releaseYear !== null) {
+        if (item && 'releaseYear' in item && item.releaseYear != null) {
            const releaseYear = item.releaseYear;
            const originalYear =
-                'originalYear' in item && item.originalYear !== null ? item.originalYear : null;
+                'originalYear' in item && item.originalYear > 0 ? item.originalYear : null;

            if (originalYear !== null && originalYear !== releaseYear) {
                return `${originalYear}${SEPARATOR_STRING}${releaseYear}`;
@@ -34,256 +34,268 @@ export const useItemDragDropState = <TElement extends HTMLElement = HTMLDivEleme
 }: UseItemDragDropStateProps): DragDropState<TElement> => {
    const shouldEnableDrag = enableDrag && isDataRow && !!item;

+    const needsDropRegistration =
+        shouldEnableDrag &&
+        (itemType === LibraryItem.QUEUE_SONG || itemType === LibraryItem.PLAYLIST_SONG);
+
    const {
        isDraggedOver,
        isDragging: isDraggingLocal,
        ref: dragRef,
    } = useDragDrop<TElement>({
-        drag: {
-            getId: () => {
-                if (!item || !isDataRow) {
-                    return [];
-                }
+        drag: shouldEnableDrag
+            ? {
+                  getId: () => {
+                      if (!item || !isDataRow) {
+                          return [];
+                      }

-                const draggedItems = getDraggedItems(item as any, internalState);
+                      const draggedItems = getDraggedItems(item as any, internalState);

-                return draggedItems.map((draggedItem) => draggedItem.id);
-            },
-            getItem: () => {
-                if (!item || !isDataRow) {
-                    return [];
-                }
+                      return draggedItems.map((draggedItem) => draggedItem.id);
+                  },
+                  getItem: () => {
+                      if (!item || !isDataRow) {
+                          return [];
+                      }

-                const draggedItems = getDraggedItems(item as any, internalState);
+                      const draggedItems = getDraggedItems(item as any, internalState);

-                return draggedItems;
-            },
-            itemType,
-            onDragStart: () => {
-                if (!item || !isDataRow) {
-                    return;
-                }
+                      return draggedItems;
+                  },
+                  itemType,
+                  onDragStart: () => {
+                      if (!item || !isDataRow) {
+                          return;
+                      }

-                const draggedItems = getDraggedItems(item as any, internalState);
-                if (internalState) {
-                    internalState.setDragging(draggedItems);
-                }
-            },
-            onDrop: () => {
-                if (internalState) {
-                    internalState.setDragging([]);
-                }
-            },
-            operation:
-                itemType === LibraryItem.QUEUE_SONG
-                    ? [DragOperation.REORDER, DragOperation.ADD]
-                    : itemType === LibraryItem.PLAYLIST_SONG
-                      ? [DragOperation.REORDER, DragOperation.ADD]
-                      : [DragOperation.ADD],
-            target: DragTargetMap[itemType] || DragTarget.GENERIC,
-        },
-        drop: {
-            canDrop: (args) => {
-                if (args.source.type === DragTarget.TABLE_COLUMN) {
-                    return false;
-                }
+                      const draggedItems = getDraggedItems(item as any, internalState);
+                      if (internalState) {
+                          internalState.setDragging(draggedItems);
+                      }
+                  },
+                  onDrop: () => {
+                      if (internalState) {
+                          internalState.setDragging([]);
+                      }
+                  },
+                  operation:
+                      itemType === LibraryItem.QUEUE_SONG
+                          ? [DragOperation.REORDER, DragOperation.ADD]
+                          : itemType === LibraryItem.PLAYLIST_SONG
+                            ? [DragOperation.REORDER, DragOperation.ADD]
+                            : [DragOperation.ADD],
+                  target: DragTargetMap[itemType] || DragTarget.GENERIC,
+              }
+            : undefined,
+        drop: needsDropRegistration
+            ? {
+                  canDrop: (args) => {
+                      if (args.source.type === DragTarget.TABLE_COLUMN) {
+                          return false;
+                      }

-                // Allow drops for QUEUE_SONG (queue reordering)
-                if (itemType === LibraryItem.QUEUE_SONG) {
-                    return true;
-                }
+                      // Allow drops for QUEUE_SONG (queue reordering)
+                      if (itemType === LibraryItem.QUEUE_SONG) {
+                          return true;
+                      }

-                // Allow drops for PLAYLIST_SONG (playlist reordering)
-                // Only allow drops when drag is started from the reorder handle
-                if (
-                    itemType === LibraryItem.PLAYLIST_SONG &&
-                    args.source.itemType === LibraryItem.PLAYLIST_SONG &&
-                    args.source.metadata?.fromReorderHandle === true
-                ) {
-                    return true;
-                }
+                      // Allow drops for PLAYLIST_SONG (playlist reordering)
+                      // Only allow drops when drag is started from the reorder handle
+                      if (
+                          itemType === LibraryItem.PLAYLIST_SONG &&
+                          args.source.itemType === LibraryItem.PLAYLIST_SONG &&
+                          args.source.metadata?.fromReorderHandle === true
+                      ) {
+                          return true;
+                      }

-                return false;
-            },
-            getData: () => {
-                return {
-                    id: [(item as unknown as { id: string }).id],
-                    item: [item as unknown as unknown[]],
-                    itemType,
-                    type: DragTargetMap[itemType] || DragTarget.GENERIC,
-                };
-            },
-            onDrag: () => {
-                return;
-            },
-            onDragLeave: () => {
-                return;
-            },
-            onDrop: (args) => {
-                if (args.self.type === DragTarget.QUEUE_SONG) {
-                    const sourceServerId = (
-                        args.source.item?.[0] as unknown as { _serverId: string }
-                    )._serverId;
+                      return false;
+                  },
+                  getData: () => {
+                      return {
+                          id: [(item as unknown as { id: string }).id],
+                          item: [item as unknown as unknown[]],
+                          itemType,
+                          type: DragTargetMap[itemType] || DragTarget.GENERIC,
+                      };
+                  },
+                  onDrag: () => {
+                      return;
+                  },
+                  onDragLeave: () => {
+                      return;
+                  },
+                  onDrop: (args) => {
+                      if (args.self.type === DragTarget.QUEUE_SONG) {
+                          const sourceServerId = (
+                              args.source.item?.[0] as unknown as { _serverId: string }
+                          )._serverId;

-                    const sourceItemType = args.source.itemType as LibraryItem;
+                          const sourceItemType = args.source.itemType as LibraryItem;

-                    const droppedOnUniqueId = (
-                        args.self.item?.[0] as unknown as { _uniqueId: string }
-                    )._uniqueId;
+                          const droppedOnUniqueId = (
+                              args.self.item?.[0] as unknown as { _uniqueId: string }
+                          )._uniqueId;

-                    switch (args.source.type) {
-                        case DragTarget.ALBUM: {
-                            playerContext.addToQueueByFetch(
-                                sourceServerId,
-                                args.source.id,
-                                sourceItemType,
-                                { edge: args.edge, uniqueId: droppedOnUniqueId },
-                            );
-                            break;
-                        }
-                        case DragTarget.ALBUM_ARTIST: {
-                            playerContext.addToQueueByFetch(
-                                sourceServerId,
-                                args.source.id,
-                                sourceItemType,
-                                { edge: args.edge, uniqueId: droppedOnUniqueId },
-                            );
-                            break;
-                        }
-                        case DragTarget.ARTIST: {
-                            playerContext.addToQueueByFetch(
-                                sourceServerId,
-                                args.source.id,
-                                sourceItemType,
-                                { edge: args.edge, uniqueId: droppedOnUniqueId },
-                            );
-                            break;
-                        }
-                        case DragTarget.FOLDER: {
-                            const items = args.source.item;
+                          switch (args.source.type) {
+                              case DragTarget.ALBUM: {
+                                  playerContext.addToQueueByFetch(
+                                      sourceServerId,
+                                      args.source.id,
+                                      sourceItemType,
+                                      { edge: args.edge, uniqueId: droppedOnUniqueId },
+                                  );
+                                  break;
+                              }
+                              case DragTarget.ALBUM_ARTIST: {
+                                  playerContext.addToQueueByFetch(
+                                      sourceServerId,
+                                      args.source.id,
+                                      sourceItemType,
+                                      { edge: args.edge, uniqueId: droppedOnUniqueId },
+                                  );
+                                  break;
+                              }
+                              case DragTarget.ARTIST: {
+                                  playerContext.addToQueueByFetch(
+                                      sourceServerId,
+                                      args.source.id,
+                                      sourceItemType,
+                                      { edge: args.edge, uniqueId: droppedOnUniqueId },
+                                  );
+                                  break;
+                              }
+                              case DragTarget.FOLDER: {
+                                  const items = args.source.item;

-                            const { folders, songs } = (items || []).reduce<{
-                                folders: Folder[];
-                                songs: Song[];
-                            }>(
-                                (acc, item) => {
-                                    if ((item as unknown as Song)._itemType === LibraryItem.SONG) {
-                                        acc.songs.push(item as unknown as Song);
-                                    } else if (
-                                        (item as unknown as Folder)._itemType === LibraryItem.FOLDER
-                                    ) {
-                                        acc.folders.push(item as unknown as Folder);
-                                    }
-                                    return acc;
-                                },
-                                { folders: [], songs: [] },
-                            );
+                                  const { folders, songs } = (items || []).reduce<{
+                                      folders: Folder[];
+                                      songs: Song[];
+                                  }>(
+                                      (acc, item) => {
+                                          if (
+                                              (item as unknown as Song)._itemType ===
+                                              LibraryItem.SONG
+                                          ) {
+                                              acc.songs.push(item as unknown as Song);
+                                          } else if (
+                                              (item as unknown as Folder)._itemType ===
+                                              LibraryItem.FOLDER
+                                          ) {
+                                              acc.folders.push(item as unknown as Folder);
+                                          }
+                                          return acc;
+                                      },
+                                      { folders: [], songs: [] },
+                                  );

-                            const folderIds = folders.map((folder) => folder.id);
+                                  const folderIds = folders.map((folder) => folder.id);

-                            // Handle folders: fetch and add to queue
-                            if (folderIds.length > 0) {
-                                playerContext.addToQueueByFetch(
-                                    sourceServerId,
-                                    folderIds,
-                                    LibraryItem.FOLDER,
-                                    { edge: args.edge, uniqueId: droppedOnUniqueId },
-                                );
-                            }
+                                  // Handle folders: fetch and add to queue
+                                  if (folderIds.length > 0) {
+                                      playerContext.addToQueueByFetch(
+                                          sourceServerId,
+                                          folderIds,
+                                          LibraryItem.FOLDER,
+                                          { edge: args.edge, uniqueId: droppedOnUniqueId },
+                                      );
+                                  }

-                            // Handle songs: add directly to queue
-                            if (songs.length > 0) {
-                                playerContext.addToQueueByData(songs, {
-                                    edge: args.edge,
-                                    uniqueId: droppedOnUniqueId,
-                                });
-                            }
+                                  // Handle songs: add directly to queue
+                                  if (songs.length > 0) {
+                                      playerContext.addToQueueByData(songs, {
+                                          edge: args.edge,
+                                          uniqueId: droppedOnUniqueId,
+                                      });
+                                  }

-                            break;
-                        }
-                        case DragTarget.GENRE: {
-                            playerContext.addToQueueByFetch(
-                                sourceServerId,
-                                args.source.id,
-                                sourceItemType,
-                                { edge: args.edge, uniqueId: droppedOnUniqueId },
-                            );
-                            break;
-                        }
-                        case DragTarget.PLAYLIST: {
-                            playerContext.addToQueueByFetch(
-                                sourceServerId,
-                                args.source.id,
-                                sourceItemType,
-                                { edge: args.edge, uniqueId: droppedOnUniqueId },
-                            );
-                            break;
-                        }
-                        case DragTarget.QUEUE_SONG: {
-                            const sourceItems = (args.source.item || []) as QueueSong[];
-                            if (
-                                sourceItems.length > 0 &&
-                                args.edge &&
-                                (args.edge === 'top' || args.edge === 'bottom')
-                            ) {
-                                playerContext.moveSelectedTo(
-                                    sourceItems,
-                                    args.edge,
-                                    droppedOnUniqueId,
-                                );
-                            }
-                            break;
-                        }
-                        case DragTarget.SONG: {
-                            const sourceItems = (args.source.item || []) as Song[];
-                            if (sourceItems.length > 0) {
-                                playerContext.addToQueueByData(sourceItems, {
-                                    edge: args.edge,
-                                    uniqueId: droppedOnUniqueId,
-                                });
-                            }
-                            break;
-                        }
-                        default: {
-                            break;
-                        }
-                    }
-                }
+                                  break;
+                              }
+                              case DragTarget.GENRE: {
+                                  playerContext.addToQueueByFetch(
+                                      sourceServerId,
+                                      args.source.id,
+                                      sourceItemType,
+                                      { edge: args.edge, uniqueId: droppedOnUniqueId },
+                                  );
+                                  break;
+                              }
+                              case DragTarget.PLAYLIST: {
+                                  playerContext.addToQueueByFetch(
+                                      sourceServerId,
+                                      args.source.id,
+                                      sourceItemType,
+                                      { edge: args.edge, uniqueId: droppedOnUniqueId },
+                                  );
+                                  break;
+                              }
+                              case DragTarget.QUEUE_SONG: {
+                                  const sourceItems = (args.source.item || []) as QueueSong[];
+                                  if (
+                                      sourceItems.length > 0 &&
+                                      args.edge &&
+                                      (args.edge === 'top' || args.edge === 'bottom')
+                                  ) {
+                                      playerContext.moveSelectedTo(
+                                          sourceItems,
+                                          args.edge,
+                                          droppedOnUniqueId,
+                                      );
+                                  }
+                                  break;
+                              }
+                              case DragTarget.SONG: {
+                                  const sourceItems = (args.source.item || []) as Song[];
+                                  if (sourceItems.length > 0) {
+                                      playerContext.addToQueueByData(sourceItems, {
+                                          edge: args.edge,
+                                          uniqueId: droppedOnUniqueId,
+                                      });
+                                  }
+                                  break;
+                              }
+                              default: {
+                                  break;
+                              }
+                          }
+                      }

-                // Handle PLAYLIST_SONG reordering
-                // Only allow drops when drag is started from the reorder handle
-                if (
-                    args.self.itemType === LibraryItem.PLAYLIST_SONG &&
-                    args.source.itemType === LibraryItem.PLAYLIST_SONG &&
-                    args.source.metadata?.fromReorderHandle === true &&
-                    playlistId
-                ) {
-                    const sourceItems = (args.source.item || []) as any[];
-                    const targetItem = item as any;
+                      // Handle PLAYLIST_SONG reordering
+                      // Only allow drops when drag is started from the reorder handle
+                      if (
+                          args.self.itemType === LibraryItem.PLAYLIST_SONG &&
+                          args.source.itemType === LibraryItem.PLAYLIST_SONG &&
+                          args.source.metadata?.fromReorderHandle === true &&
+                          playlistId
+                      ) {
+                          const sourceItems = (args.source.item || []) as any[];
+                          const targetItem = item as any;

-                    if (
-                        sourceItems.length > 0 &&
-                        args.edge &&
-                        (args.edge === 'top' || args.edge === 'bottom') &&
-                        targetItem
-                    ) {
-                        // Emit event to reorder playlist songs
-                        eventEmitter.emit('PLAYLIST_REORDER', {
-                            edge: args.edge,
-                            playlistId,
-                            sourceIds: args.source.id,
-                            targetId: targetItem.id,
-                        });
-                    }
-                }
+                          if (
+                              sourceItems.length > 0 &&
+                              args.edge &&
+                              (args.edge === 'top' || args.edge === 'bottom') &&
+                              targetItem
+                          ) {
+                              // Emit event to reorder playlist songs
+                              eventEmitter.emit('PLAYLIST_REORDER', {
+                                  edge: args.edge,
+                                  playlistId,
+                                  sourceIds: args.source.id,
+                                  targetId: targetItem.id,
+                              });
+                          }
+                      }

-                if (internalState) {
-                    internalState.setDragging([]);
-                }
+                      if (internalState) {
+                          internalState.setDragging([]);
+                      }

-                return;
-            },
-        },
+                      return;
+                  },
+              }
+            : undefined,
        isEnabled: shouldEnableDrag,
    });

@@ -0,0 +1,72 @@
+import { useLayoutEffect, useState } from 'react';
+
+import { useWindowSettings } from '/@/renderer/store/settings.store';
+import { Platform } from '/@/shared/types/types';
+
+export interface ItemTableStickyLayoutOffsets {
+    inViewMarginTop: number;
+    stickyTop: number;
+}
+
+export function useItemTableStickyLayoutOffsets(): ItemTableStickyLayoutOffsets {
+    const { windowBarStyle } = useWindowSettings();
+    const isWinMac = windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS;
+
+    const [offsets, setOffsets] = useState(() => ({
+        inViewMarginTop: getFallbackInViewMargin(windowBarStyle),
+        stickyTop: getFallbackStickyTop(windowBarStyle),
+    }));
+
+    useLayoutEffect(() => {
+        const read = () => {
+            const topVar = isWinMac
+                ? '--item-table-sticky-top-win-mac'
+                : '--item-table-sticky-top-default';
+            const marginVar = isWinMac
+                ? '--item-table-sticky-inview-margin-win-mac'
+                : '--item-table-sticky-inview-margin-default';
+            setOffsets({
+                inViewMarginTop: resolveRootCssMarginLeftVar(
+                    marginVar,
+                    getFallbackInViewMargin(windowBarStyle),
+                ),
+                stickyTop: resolveRootCssWidthVar(topVar, getFallbackStickyTop(windowBarStyle)),
+            });
+        };
+
+        read();
+        window.addEventListener('resize', read);
+        return () => window.removeEventListener('resize', read);
+    }, [isWinMac, windowBarStyle]);
+
+    return offsets;
+}
+
+function getFallbackInViewMargin(windowBarStyle: Platform): number {
+    return windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS ? -130 : -100;
+}
+
+function getFallbackStickyTop(windowBarStyle: Platform): number {
+    return windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS ? 95 : 65;
+}
+
+function resolveRootCssMarginLeftVar(varName: string, fallback: number): number {
+    if (typeof document === 'undefined') return fallback;
+    const el = document.createElement('div');
+    el.style.cssText = `position:fixed;left:0;top:0;margin-left:var(${varName});width:1px;height:0;margin-top:0;margin-right:0;margin-bottom:0;padding:0;border:none;visibility:hidden;pointer-events:none;`;
+    document.body.appendChild(el);
+    const raw = getComputedStyle(el).marginLeft;
+    el.remove();
+    const v = parseFloat(raw);
+    return Number.isFinite(v) ? v : fallback;
+}
+
+function resolveRootCssWidthVar(varName: string, fallback: number): number {
+    if (typeof document === 'undefined') return fallback;
+    const el = document.createElement('div');
+    el.style.cssText = `position:fixed;left:-99999px;top:0;width:var(${varName});height:0;margin:0;padding:0;border:none;visibility:hidden;pointer-events:none;`;
+    document.body.appendChild(el);
+    const w = el.getBoundingClientRect().width;
+    el.remove();
+    return Number.isFinite(w) && w > 0 ? w : fallback;
+}
@@ -1,9 +1,8 @@
+import type { ItemTableStickyLayoutOffsets } from '/@/renderer/components/item-list/item-table-list/hooks/use-item-table-sticky-layout-offsets';
+
 import { useInView } from 'motion/react';
 import { useEffect, useMemo, useState } from 'react';

-import { useWindowSettings } from '/@/renderer/store/settings.store';
-import { Platform } from '/@/shared/types/types';
-
 export interface GroupRowInfo {
    groupIndex: number;
    rowIndex: number;
@@ -18,6 +17,7 @@ export const useStickyTableGroupRows = ({
    mainGridRef,
    shouldShowStickyHeader,
    stickyHeaderTop,
+    stickyLayout,
 }: {
    containerRef: React.RefObject<HTMLDivElement | null>;
    enabled: boolean;
@@ -27,17 +27,14 @@ export const useStickyTableGroupRows = ({
    mainGridRef: React.RefObject<HTMLDivElement | null>;
    shouldShowStickyHeader?: boolean;
    stickyHeaderTop?: number;
+    stickyLayout: ItemTableStickyLayoutOffsets;
 }) => {
-    const { windowBarStyle } = useWindowSettings();
+    const { inViewMarginTop, stickyTop: layoutStickyTop } = stickyLayout;
    const [stickyGroupIndex, setStickyGroupIndex] = useState<null | number>(null);

-    const topMargin =
-        windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
-            ? '-130px'
-            : '-100px';
-
+    const groupRowsInViewMargin = `${inViewMarginTop}px 0px 0px 0px`;
    const isTableInView = useInView(containerRef, {
-        margin: `${topMargin} 0px 0px 0px`,
+        margin: groupRowsInViewMargin as NonNullable<Parameters<typeof useInView>[1]>['margin'],
    });

    const stickyTop = useMemo(() => {
@@ -46,8 +43,8 @@ export const useStickyTableGroupRows = ({
        if (shouldShowStickyHeader && stickyHeaderTop !== undefined) {
            return stickyHeaderTop + headerHeight + 1;
        }
-        return windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS ? 95 : 65;
-    }, [windowBarStyle, shouldShowStickyHeader, stickyHeaderTop, headerHeight]);
+        return layoutStickyTop;
+    }, [layoutStickyTop, shouldShowStickyHeader, stickyHeaderTop, headerHeight]);

    // Calculate group row indexes
    const groupRowIndexes = useMemo(() => {
@@ -1,9 +1,8 @@
+import type { ItemTableStickyLayoutOffsets } from '/@/renderer/components/item-list/item-table-list/hooks/use-item-table-sticky-layout-offsets';
+
 import { useInView } from 'motion/react';
 import { RefObject, useEffect, useMemo, useRef } from 'react';

-import { useWindowSettings } from '/@/renderer/store/settings.store';
-import { Platform } from '/@/shared/types/types';
-
 export const useStickyTableHeader = ({
    containerRef,
    enabled,
@@ -12,6 +11,7 @@ export const useStickyTableHeader = ({
    pinnedLeftColumnRef,
    pinnedRightColumnRef,
    stickyHeaderMainRef,
+    stickyLayout,
 }: {
    containerRef: RefObject<HTMLDivElement | null>;
    enabled: boolean;
@@ -20,8 +20,9 @@ export const useStickyTableHeader = ({
    pinnedLeftColumnRef?: RefObject<HTMLDivElement | null>;
    pinnedRightColumnRef?: RefObject<HTMLDivElement | null>;
    stickyHeaderMainRef?: RefObject<HTMLDivElement | null>;
+    stickyLayout: ItemTableStickyLayoutOffsets;
 }) => {
-    const { windowBarStyle } = useWindowSettings();
+    const { inViewMarginTop, stickyTop } = stickyLayout;
    const isScrollingRef = useRef({
        main: false,
        pinnedLeft: false,
@@ -29,27 +30,20 @@ export const useStickyTableHeader = ({
        stickyHeader: false,
    });

-    const topMargin =
-        windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
-            ? '-130px'
-            : '-100px';
+    const inViewRootMargin = `${inViewMarginTop}px 0px 0px 0px`;

-    const isTableHeaderInView = useInView(headerRef, {
-        margin: `${topMargin} 0px 0px 0px`,
-    });
+    const inViewOptions = { margin: inViewRootMargin } as {
+        margin: NonNullable<Parameters<typeof useInView>[1]>['margin'];
+    };

-    const isTableInView = useInView(containerRef, {
-        margin: `${topMargin} 0px 0px 0px`,
-    });
+    const isTableHeaderInView = useInView(headerRef, inViewOptions);
+
+    const isTableInView = useInView(containerRef, inViewOptions);

    const shouldShowStickyHeader = useMemo(() => {
        return enabled && !isTableHeaderInView && isTableInView;
    }, [enabled, isTableHeaderInView, isTableInView]);

-    const stickyTop = useMemo(() => {
-        return windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS ? 95 : 65;
-    }, [windowBarStyle]);
-
    // Sync scroll between sticky header and main grid/pinned columns
    useEffect(() => {
        if (!shouldShowStickyHeader || !stickyHeaderMainRef?.current || !mainGridRef?.current) {
@@ -19,7 +19,6 @@ import React, {
    useRef,
    useState,
 } from 'react';
-import { useParams } from 'react-router';
 import { CellComponentProps } from 'react-window-v2';

 import styles from './item-table-list-column.module.css';
@@ -82,7 +81,6 @@ export interface ItemTableListInnerColumn extends ItemTableListColumn {
 }

 const ItemTableListColumnBase = (props: ItemTableListColumn) => {
-    const { playlistId } = useParams() as { playlistId?: string };
    const type = props.columnType ?? (props.columns[props.columnIndex].id as TableColumn);

    const isHeaderEnabled = !!props.enableHeader;
@@ -135,7 +133,7 @@ const ItemTableListColumnBase = (props: ItemTableListColumn) => {
        item,
        itemType: props.itemType,
        playerContext: props.playerContext,
-        playlistId,
+        playlistId: props.playlistId,
    });

    const controls = props.controls;
@@ -362,6 +360,7 @@ export const ItemTableListColumn = memo(ItemTableListColumnBase, (prevProps, nex
        prevProps.enableColumnResize === nextProps.enableColumnResize &&
        prevProps.enableColumnReorder === nextProps.enableColumnReorder &&
        prevProps.cellPadding === nextProps.cellPadding &&
+        prevProps.playlistId === nextProps.playlistId &&
        prevItem === nextItem
    );
 });
@@ -1,31 +1,51 @@
+import type { ReactElement } from 'react';
+
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
 import { useSyncExternalStore } from 'react';

+import type { TableItemProps } from './item-table-list';
+
 import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls, ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
 import { PlayerContext } from '/@/renderer/features/player/context/player-context';
 import { LibraryItem } from '/@/shared/types/domain-types';

-/**
- * Stage A/B: Provide table-scoped config + external stores so churny values can update
- * without forcing `cellProps` identity changes (and therefore without rerendering every visible cell).
- */
-
 export type ItemTableListConfig = {
    cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
    columns: ItemTableListColumnConfig[];
    controls: ItemControls;
+    enableAlternateRowColors: boolean;
+    enableColumnReorder: boolean;
+    enableColumnResize: boolean;
+    enableDrag: boolean;
+    enableExpansion: boolean;
    enableHeader: boolean;
+    enableHorizontalBorders: boolean;
    enableRowHoverHighlight: boolean;
    enableSelection: boolean;
+    enableVerticalBorders: boolean;
+    getRowHeight: (index: number, cellProps: TableItemProps) => number;
+    groups?: ItemTableListGroupHeader[];
    internalState: ItemListStateActions;
    itemType: LibraryItem;
    playerContext: PlayerContext;
+    playlistId?: string;
    size: 'compact' | 'default' | 'large';
    startRowIndex?: number;
    tableId: string;
 };

+export type ItemTableListGroupHeader = {
+    itemCount: number;
+    render: (props: {
+        data: unknown[];
+        groupIndex: number;
+        index: number;
+        internalState: ItemListStateActions;
+        startDataIndex: number;
+    }) => ReactElement;
+};
+
 const ItemTableListConfigContext = createContext<ItemTableListConfig | null>(null);

 export const ItemTableListConfigProvider = ({
@@ -52,7 +52,7 @@

 .item-table-pinned-rows-grid-container.header-fixed {
    position: fixed !important;
-    top: 65px;
+    top: var(--item-table-sticky-top-default);
    z-index: 15;
    background-color: var(--theme-bg-primary);
    box-shadow: 0 -1px 0 0 var(--theme-colors-border);
@@ -60,7 +60,7 @@
 }

 .item-table-pinned-rows-grid-container.header-window-bar {
-    top: 95px;
+    top: var(--item-table-sticky-top-win-mac);
 }

 .item-table-list-container.header-fixed-margin {
@@ -15,6 +15,7 @@ import React, {
    useRef,
    useState,
 } from 'react';
+import { useParams } from 'react-router';
 import { type CellComponentProps, Grid } from 'react-window-v2';

 import styles from './item-table-list.module.css';
@@ -30,6 +31,7 @@ import { parseTableColumns } from '/@/renderer/components/item-list/helpers/pars
 import { useListHotkeys } from '/@/renderer/components/item-list/helpers/use-list-hotkeys';
 import { useContainerWidthTracking } from '/@/renderer/components/item-list/item-table-list/hooks/use-container-width-tracking';
 import { useRowInteractionDelegate } from '/@/renderer/components/item-list/item-table-list/hooks/use-row-interaction-delegate';
+import { useItemTableStickyLayoutOffsets } from '/@/renderer/components/item-list/item-table-list/hooks/use-item-table-sticky-layout-offsets';
 import { useStickyGroupRowPositioning } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-group-row-positioning';
 import { useStickyHeaderPositioning } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-header-positioning';
 import { useStickyTableGroupRows } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows';
@@ -43,6 +45,7 @@ import { useTableRowModel } from '/@/renderer/components/item-list/item-table-li
 import { useTableScrollToIndex } from '/@/renderer/components/item-list/item-table-list/hooks/use-table-scroll-to-index';
 import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import {
+    type ItemTableListConfig,
    ItemTableListConfigProvider,
    ItemTableListStoreProvider,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
@@ -104,27 +107,11 @@ export enum TableItemSize {
 interface VirtualizedTableGridProps {
    calculatedColumnWidths: number[];
    CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
-    cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-    controls: ItemControls;
    data: unknown[];
    dataWithGroups: (null | unknown)[];
-    enableAlternateRowColors: boolean;
-    enableColumnReorder: boolean;
-    enableColumnResize: boolean;
-    enableDrag?: boolean;
-    enableExpansion: boolean;
-    enableHeader: boolean;
-    enableHorizontalBorders: boolean;
-    enableRowHoverHighlight: boolean;
    enableScrollShadow: boolean;
-    enableSelection: boolean;
-    enableVerticalBorders: boolean;
    getItem?: (index: number) => undefined | unknown;
-    getRowHeight: (index: number, cellProps: TableItemProps) => number;
-    groups?: TableGroupHeader[];
    headerHeight: number;
-    internalState: ItemListStateActions;
-    itemType: LibraryItem;
    mergedRowRef: React.Ref<HTMLDivElement>;
    onRangeChanged?: ItemTableListProps['onRangeChanged'];
    parsedColumns: ReturnType<typeof parseTableColumns>;
@@ -134,13 +121,10 @@ interface VirtualizedTableGridProps {
    pinnedRightColumnRef: React.RefObject<HTMLDivElement | null>;
    pinnedRowCount: number;
    pinnedRowRef: React.RefObject<HTMLDivElement | null>;
-    playerContext: PlayerContext;
    showLeftShadow: boolean;
    showRightShadow: boolean;
    showTopShadow: boolean;
-    size: 'compact' | 'default' | 'large';
-    startRowIndex?: number;
-    tableId: string;
+    tableConfig: ItemTableListConfig;
    totalColumnCount: number;
    totalRowCount: number;
 }
@@ -148,27 +132,11 @@ interface VirtualizedTableGridProps {
 const VirtualizedTableGrid = ({
    calculatedColumnWidths,
    CellComponent,
-    cellPadding,
-    controls,
    data,
    dataWithGroups,
-    enableAlternateRowColors,
-    enableColumnReorder,
-    enableColumnResize,
-    enableDrag,
-    enableExpansion,
-    enableHeader,
-    enableHorizontalBorders,
-    enableRowHoverHighlight,
    enableScrollShadow,
-    enableSelection,
-    enableVerticalBorders,
    getItem,
-    getRowHeight,
-    groups,
    headerHeight,
-    internalState,
-    itemType,
    mergedRowRef,
    onRangeChanged,
    parsedColumns,
@@ -178,16 +146,14 @@ const VirtualizedTableGrid = ({
    pinnedRightColumnRef,
    pinnedRowCount,
    pinnedRowRef,
-    playerContext,
    showLeftShadow,
    showRightShadow,
    showTopShadow,
-    size,
-    startRowIndex,
-    tableId,
+    tableConfig,
    totalColumnCount,
    totalRowCount,
 }: VirtualizedTableGridProps) => {
+    const { enableHeader, enableRowHoverHighlight, getRowHeight, groups } = tableConfig;
    const hoverDelegateRef = useRef<HTMLDivElement | null>(null);

    useRowInteractionDelegate({
@@ -345,35 +311,7 @@ const VirtualizedTableGrid = ({
        ],
    );

-    const stableConfigProps = useMemo(
-        () => ({
-            cellPadding,
-            columns: parsedColumns,
-            controls,
-            enableHeader,
-            getRowHeight,
-            hasAlbumGroupColumn: parsedColumns.some((col) => col.id === TableColumn.ALBUM_GROUP),
-            internalState,
-            itemType,
-            playerContext,
-            size,
-            tableId,
-        }),
-        [
-            cellPadding,
-            parsedColumns,
-            controls,
-            enableHeader,
-            getRowHeight,
-            internalState,
-            itemType,
-            playerContext,
-            size,
-            tableId,
-        ],
-    );
-
-    const dynamicDataProps = useMemo(
+    const gridOnlyProps = useMemo(
        () => ({
            calculatedColumnWidths,
            data: dataWithGroups,
@@ -381,11 +319,11 @@ const VirtualizedTableGrid = ({
            getGroupRenderData,
            getRowItem,
            groupHeaderInfoByRowIndex,
+            hasAlbumGroupColumn: parsedColumns.some((col) => col.id === TableColumn.ALBUM_GROUP),
            pinnedLeftColumnCount,
            pinnedLeftColumnWidths,
            pinnedRightColumnCount,
            pinnedRightColumnWidths,
-            startRowIndex,
        }),
        [
            calculatedColumnWidths,
@@ -394,50 +332,68 @@ const VirtualizedTableGrid = ({
            getAdjustedRowIndex,
            getGroupRenderData,
            groupHeaderInfoByRowIndex,
+            parsedColumns,
            pinnedLeftColumnCount,
            pinnedLeftColumnWidths,
            pinnedRightColumnCount,
            pinnedRightColumnWidths,
-            startRowIndex,
-        ],
-    );
-
-    const featureFlags = useMemo(
-        () => ({
-            enableAlternateRowColors,
-            enableColumnReorder,
-            enableColumnResize,
-            enableDrag,
-            enableExpansion,
-            enableHorizontalBorders,
-            enableRowHoverHighlight,
-            enableSelection,
-            enableVerticalBorders,
-            groups,
-        }),
-        [
-            enableAlternateRowColors,
-            enableColumnReorder,
-            enableColumnResize,
-            enableDrag,
-            enableExpansion,
-            enableHorizontalBorders,
-            enableRowHoverHighlight,
-            enableSelection,
-            enableVerticalBorders,
-            groups,
        ],
    );

    const itemProps: TableItemProps = useMemo(
        () => ({
-            ...stableConfigProps,
-            ...dynamicDataProps,
-            ...featureFlags,
+            cellPadding: tableConfig.cellPadding,
+            columns: tableConfig.columns,
+            controls: tableConfig.controls,
+            enableAlternateRowColors: tableConfig.enableAlternateRowColors,
+            enableColumnReorder: tableConfig.enableColumnReorder,
+            enableColumnResize: tableConfig.enableColumnResize,
+            enableDrag: tableConfig.enableDrag,
+            enableExpansion: tableConfig.enableExpansion,
+            enableHeader: tableConfig.enableHeader,
+            enableHorizontalBorders: tableConfig.enableHorizontalBorders,
+            enableRowHoverHighlight: tableConfig.enableRowHoverHighlight,
+            enableSelection: tableConfig.enableSelection,
+            enableVerticalBorders: tableConfig.enableVerticalBorders,
+            getRowHeight: tableConfig.getRowHeight,
+            groups: tableConfig.groups,
+            internalState: tableConfig.internalState,
+            itemType: tableConfig.itemType,
+            playerContext: tableConfig.playerContext,
+            playlistId: tableConfig.playlistId,
+            size: tableConfig.size,
+            startRowIndex: tableConfig.startRowIndex,
+            tableId: tableConfig.tableId,
+            ...gridOnlyProps,
        }),
-        [stableConfigProps, dynamicDataProps, featureFlags],
+        [gridOnlyProps, tableConfig],
    );

+    const pinnedLeftGridMinWidthPx = useMemo(() => {
+        let sum = 0;
+        for (let i = 0; i < pinnedLeftColumnCount; i++) {
+            sum += calculatedColumnWidths[i] ?? 0;
+        }
+        return sum;
+    }, [calculatedColumnWidths, pinnedLeftColumnCount]);
+
+    const pinnedRightGridMinWidthPx = useMemo(() => {
+        let sum = 0;
+        const start = pinnedLeftColumnCount + totalColumnCount;
+        for (let i = 0; i < pinnedRightColumnCount; i++) {
+            sum += calculatedColumnWidths[start + i] ?? 0;
+        }
+        return sum;
+    }, [calculatedColumnWidths, pinnedLeftColumnCount, pinnedRightColumnCount, totalColumnCount]);
+
+    const pinnedRowsMinHeightPx = useMemo(() => {
+        let sum = 0;
+        for (let i = 0; i < pinnedRowCount; i++) {
+            sum += getRowHeight(i, itemProps);
+        }
+        return sum;
+    }, [getRowHeight, itemProps, pinnedRowCount]);
+
    const PinnedRowCell = useCallback(
        (cellProps: CellComponentProps & TableItemProps) => {
            return (
@@ -447,16 +403,14 @@ const VirtualizedTableGrid = ({
                />
            );
        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [pinnedLeftColumnCount, CellComponent, featureFlags, calculatedColumnWidths],
+        [pinnedLeftColumnCount, CellComponent],
    );

    const PinnedColumnCell = useCallback(
        (cellProps: CellComponentProps & TableItemProps) => {
            return <CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />;
        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [pinnedRowCount, CellComponent, featureFlags, calculatedColumnWidths],
+        [pinnedRowCount, CellComponent],
    );

    const PinnedRightColumnCell = useCallback(
@@ -469,15 +423,7 @@ const VirtualizedTableGrid = ({
                />
            );
        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [
-            pinnedLeftColumnCount,
-            pinnedRowCount,
-            totalColumnCount,
-            CellComponent,
-            featureFlags,
-            calculatedColumnWidths,
-        ],
+        [pinnedLeftColumnCount, pinnedRowCount, totalColumnCount, CellComponent],
    );

    const PinnedRightIntersectionCell = useCallback(
@@ -489,14 +435,7 @@ const VirtualizedTableGrid = ({
                />
            );
        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [
-            pinnedLeftColumnCount,
-            totalColumnCount,
-            CellComponent,
-            featureFlags,
-            calculatedColumnWidths,
-        ],
+        [pinnedLeftColumnCount, totalColumnCount, CellComponent],
    );

    const RowCell = useCallback(
@@ -509,14 +448,7 @@ const VirtualizedTableGrid = ({
                />
            );
        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [
-            pinnedLeftColumnCount,
-            pinnedRowCount,
-            CellComponent,
-            featureFlags,
-            calculatedColumnWidths,
-        ],
+        [pinnedLeftColumnCount, pinnedRowCount, CellComponent],
    );

    const handleOnCellsRendered = useCallback(
@@ -541,10 +473,7 @@ const VirtualizedTableGrid = ({
                style={
                    {
                        '--header-height': `${headerHeight}px`,
-                        minWidth: `${Array.from({ length: pinnedLeftColumnCount }, () => 0).reduce(
-                            (a, _, i) => a + columnWidth(i),
-                            0,
-                        )}px`,
+                        minWidth: `${pinnedLeftGridMinWidthPx}px`,
                    } as React.CSSProperties
                }
            >
@@ -554,10 +483,7 @@ const VirtualizedTableGrid = ({
                            [styles.withHeader]: enableHeader,
                        })}
                        style={{
-                            minHeight: `${Array.from({ length: pinnedRowCount }, () => 0).reduce(
-                                (a, _, i) => a + getRowHeight(i, itemProps),
-                                0,
-                            )}px`,
+                            minHeight: `${pinnedRowsMinHeightPx}px`,
                            overflow: 'hidden',
                        }}
                    >
@@ -611,10 +537,7 @@ const VirtualizedTableGrid = ({
                        style={
                            {
                                '--header-height': `${headerHeight}px`,
-                                minHeight: `${Array.from(
-                                    { length: pinnedRowCount },
-                                    () => 0,
-                                ).reduce((a, _, i) => a + getRowHeight(i, itemProps), 0)}px`,
+                                minHeight: `${pinnedRowsMinHeightPx}px`,
                                overflow: 'hidden',
                            } as React.CSSProperties
                        }
@@ -627,7 +550,7 @@ const VirtualizedTableGrid = ({
                            columnWidth={(index) => {
                                return columnWidth(index + pinnedLeftColumnCount);
                            }}
-                            rowCount={Array.from({ length: pinnedRowCount }, () => 0).length}
+                            rowCount={pinnedRowCount}
                            rowHeight={getRowHeight}
                        />
                    </div>
@@ -660,14 +583,7 @@ const VirtualizedTableGrid = ({
                    style={
                        {
                            '--header-height': `${headerHeight}px`,
-                            minWidth: `${Array.from(
-                                { length: pinnedRightColumnCount },
-                                () => 0,
-                            ).reduce(
-                                (a, _, i) =>
-                                    a + columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
-                                0,
-                            )}px`,
+                            minWidth: `${pinnedRightGridMinWidthPx}px`,
                        } as React.CSSProperties
                    }
                >
@@ -677,10 +593,7 @@ const VirtualizedTableGrid = ({
                                [styles.withHeader]: enableHeader,
                            })}
                            style={{
-                                minHeight: `${Array.from(
-                                    { length: pinnedRowCount },
-                                    () => 0,
-                                ).reduce((a, _, i) => a + getRowHeight(i, itemProps), 0)}px`,
+                                minHeight: `${pinnedRowsMinHeightPx}px`,
                                overflow: 'hidden',
                            }}
                        >
@@ -739,27 +652,12 @@ const MemoizedVirtualizedTableGrid = memo(VirtualizedTableGrid, (prevProps, next
            prevProps.calculatedColumnWidths,
            nextProps.calculatedColumnWidths,
        ) &&
-        prevProps.cellPadding === nextProps.cellPadding &&
-        prevProps.controls === nextProps.controls &&
+        prevProps.tableConfig === nextProps.tableConfig &&
        prevProps.data === nextProps.data &&
        prevProps.dataWithGroups === nextProps.dataWithGroups &&
-        prevProps.enableAlternateRowColors === nextProps.enableAlternateRowColors &&
-        prevProps.enableColumnReorder === nextProps.enableColumnReorder &&
-        prevProps.enableColumnResize === nextProps.enableColumnResize &&
-        prevProps.enableDrag === nextProps.enableDrag &&
-        prevProps.enableExpansion === nextProps.enableExpansion &&
-        prevProps.enableHeader === nextProps.enableHeader &&
-        prevProps.enableHorizontalBorders === nextProps.enableHorizontalBorders &&
-        prevProps.enableRowHoverHighlight === nextProps.enableRowHoverHighlight &&
        prevProps.enableScrollShadow === nextProps.enableScrollShadow &&
-        prevProps.enableSelection === nextProps.enableSelection &&
-        prevProps.enableVerticalBorders === nextProps.enableVerticalBorders &&
        prevProps.getItem === nextProps.getItem &&
-        prevProps.getRowHeight === nextProps.getRowHeight &&
-        prevProps.groups === nextProps.groups &&
        prevProps.headerHeight === nextProps.headerHeight &&
-        prevProps.internalState === nextProps.internalState &&
-        prevProps.itemType === nextProps.itemType &&
        prevProps.mergedRowRef === nextProps.mergedRowRef &&
        prevProps.onRangeChanged === nextProps.onRangeChanged &&
        prevProps.parsedColumns === nextProps.parsedColumns &&
@@ -769,13 +667,9 @@ const MemoizedVirtualizedTableGrid = memo(VirtualizedTableGrid, (prevProps, next
        prevProps.pinnedRightColumnRef === nextProps.pinnedRightColumnRef &&
        prevProps.pinnedRowCount === nextProps.pinnedRowCount &&
        prevProps.pinnedRowRef === nextProps.pinnedRowRef &&
-        prevProps.playerContext === nextProps.playerContext &&
        prevProps.showLeftShadow === nextProps.showLeftShadow &&
        prevProps.showRightShadow === nextProps.showRightShadow &&
        prevProps.showTopShadow === nextProps.showTopShadow &&
-        prevProps.size === nextProps.size &&
-        prevProps.startRowIndex === nextProps.startRowIndex &&
-        prevProps.tableId === nextProps.tableId &&
        prevProps.totalColumnCount === nextProps.totalColumnCount &&
        prevProps.totalRowCount === nextProps.totalRowCount &&
        prevProps.CellComponent === nextProps.CellComponent
@@ -828,6 +722,7 @@ export interface TableItemProps {
    pinnedRightColumnCount?: number;
    pinnedRightColumnWidths?: number[];
    playerContext: PlayerContext;
+    playlistId?: string;
    size?: ItemTableListProps['size'];
    startRowIndex?: number;
    tableId: string;
@@ -935,6 +830,8 @@ const ItemTableListStickyUI = memo(
        const stickyHeaderMainRef = useRef<HTMLDivElement | null>(null);
        const stickyHeaderRightRef = useRef<HTMLDivElement | null>(null);

+        const stickyLayout = useItemTableStickyLayoutOffsets();
+
        const { shouldShowStickyHeader, stickyTop } = useStickyTableHeader({
            containerRef,
            enabled: enableHeader && enableStickyHeader,
@@ -943,6 +840,7 @@ const ItemTableListStickyUI = memo(
            pinnedLeftColumnRef,
            pinnedRightColumnRef,
            stickyHeaderMainRef,
+            stickyLayout,
        });

        useStickyHeaderPositioning({
@@ -964,6 +862,7 @@ const ItemTableListStickyUI = memo(
            mainGridRef: rowRef,
            shouldShowStickyHeader,
            stickyHeaderTop: stickyTop,
+            stickyLayout,
        });

        const shouldRenderStickyGroupRow = shouldShowStickyGroupRow;
@@ -1309,6 +1208,7 @@ const BaseItemTableList = ({
    size = 'default',
    startRowIndex,
 }: ItemTableListProps) => {
+    const { playlistId: routePlaylistId } = useParams() as { playlistId?: string };
    const tableId = useId();
    const baseItemCount = itemCount ?? data.length;
    const totalItemCount = enableHeader ? baseItemCount + 1 : baseItemCount;
@@ -1574,6 +1474,7 @@ const BaseItemTableList = ({
                pinnedLeftColumnCount + totalColumnCount,
            ),
            playerContext,
+            playlistId: routePlaylistId,
            size,
            tableId,
        }),
@@ -1599,6 +1500,7 @@ const BaseItemTableList = ({
            pinnedLeftColumnCount,
            pinnedRightColumnCount,
            playerContext,
+            routePlaylistId,
            size,
            tableId,
            totalColumnCount,
@@ -1612,17 +1514,27 @@ const BaseItemTableList = ({
        itemType,
    });

-    const tableConfigValue = useMemo(
+    const tableConfigValue = useMemo<ItemTableListConfig>(
        () => ({
            cellPadding,
            columns: parsedColumns,
            controls,
+            enableAlternateRowColors,
+            enableColumnReorder: !!onColumnReordered,
+            enableColumnResize: !!onColumnResized,
+            enableDrag,
+            enableExpansion,
            enableHeader,
+            enableHorizontalBorders,
            enableRowHoverHighlight,
            enableSelection,
+            enableVerticalBorders,
+            getRowHeight,
+            groups,
            internalState,
            itemType,
            playerContext,
+            playlistId: routePlaylistId,
            size,
            startRowIndex,
            tableId,
@@ -1631,12 +1543,22 @@ const BaseItemTableList = ({
            cellPadding,
            parsedColumns,
            controls,
+            enableAlternateRowColors,
+            onColumnReordered,
+            onColumnResized,
+            enableDrag,
+            enableExpansion,
            enableHeader,
+            enableHorizontalBorders,
            enableRowHoverHighlight,
            enableSelection,
+            enableVerticalBorders,
+            getRowHeight,
+            groups,
            internalState,
            itemType,
            playerContext,
+            routePlaylistId,
            size,
            startRowIndex,
            tableId,
@@ -1707,27 +1629,11 @@ const BaseItemTableList = ({
                    <MemoizedVirtualizedTableGrid
                        calculatedColumnWidths={calculatedColumnWidths}
                        CellComponent={optimizedCellComponent}
-                        cellPadding={cellPadding}
-                        controls={controls}
                        data={data}
                        dataWithGroups={dataWithGroups}
-                        enableAlternateRowColors={enableAlternateRowColors}
-                        enableColumnReorder={!!onColumnReordered}
-                        enableColumnResize={!!onColumnResized}
-                        enableDrag={enableDrag}
-                        enableExpansion={enableExpansion}
-                        enableHeader={enableHeader}
-                        enableHorizontalBorders={enableHorizontalBorders}
-                        enableRowHoverHighlight={enableRowHoverHighlight}
                        enableScrollShadow={enableScrollShadow}
-                        enableSelection={enableSelection}
-                        enableVerticalBorders={enableVerticalBorders}
                        getItem={getItem}
-                        getRowHeight={getRowHeight}
-                        groups={groups}
                        headerHeight={headerHeight}
-                        internalState={internalState}
-                        itemType={itemType}
                        mergedRowRef={mergedRowRef}
                        onRangeChanged={onRangeChanged}
                        parsedColumns={parsedColumns}
@@ -1737,13 +1643,10 @@ const BaseItemTableList = ({
                        pinnedRightColumnRef={pinnedRightColumnRef}
                        pinnedRowCount={pinnedRowCount}
                        pinnedRowRef={pinnedRowRef}
-                        playerContext={playerContext}
                        showLeftShadow={showLeftShadow}
                        showRightShadow={showRightShadow}
                        showTopShadow={showTopShadow}
-                        size={size}
-                        startRowIndex={startRowIndex}
-                        tableId={tableId}
+                        tableConfig={tableConfigValue}
                        totalColumnCount={totalColumnCount}
                        totalRowCount={totalRowCount}
                    />
@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { CellComponentProps } from 'react-window-v2';

 import { createColumnCellComponents } from './cell-component-factory';
@@ -24,24 +24,7 @@ const MemoizedCellRouterBase = (props: MemoizedCellRouterProps) => {
    return <ItemTableListColumn {...props} />;
 };

-export const MemoizedCellRouter = memo(MemoizedCellRouterBase, (prevProps, nextProps) => {
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.columnCellComponents === nextProps.columnCellComponents &&
-        prevProps.size === nextProps.size &&
-        prevProps.enableAlternateRowColors === nextProps.enableAlternateRowColors &&
-        prevProps.enableHorizontalBorders === nextProps.enableHorizontalBorders &&
-        prevProps.enableVerticalBorders === nextProps.enableVerticalBorders &&
-        prevProps.enableRowHoverHighlight === nextProps.enableRowHoverHighlight &&
-        prevProps.enableSelection === nextProps.enableSelection &&
-        prevProps.enableColumnResize === nextProps.enableColumnResize &&
-        prevProps.enableColumnReorder === nextProps.enableColumnReorder &&
-        prevProps.cellPadding === nextProps.cellPadding
-    );
-});
+export const MemoizedCellRouter = MemoizedCellRouterBase;

 export const useColumnCellComponents = (
    columns: TableColumn[],
@@ -94,6 +94,7 @@ interface AlbumMetadataTagsProps {
 }

 const MOOD_TAG = 'mood';
+const GROUPING_TAG = 'grouping';
 const RELEASE_COUNTRY_TAG = 'releasecountry';
 const RELEASE_STATUS_TAG = 'releasestatus';

@@ -155,6 +156,30 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
        }));
    }, [album]);

+    const groupingItems = useMemo(() => {
+        if (!album) return [];
+
+        return (
+            album.tags?.[GROUPING_TAG]?.map((tag) => {
+                if (album._serverType !== ServerType.NAVIDROME) {
+                    return { id: tag, label: tag, url: null };
+                }
+
+                const searchParams = new URLSearchParams();
+                const paramsWithCustom = setJsonSearchParam(
+                    searchParams,
+                    FILTER_KEYS.ALBUM._CUSTOM,
+                    { grouping: [tag] },
+                );
+                return {
+                    id: tag,
+                    label: tag,
+                    url: `${AppRoute.LIBRARY_ALBUMS}?${paramsWithCustom.toString()}`,
+                };
+            }) ?? []
+        );
+    }, [album]);
+
    const recordLabels = useMemo(() => {
        if (!album?.recordLabels || album.recordLabels.length === 0) return [];

@@ -221,6 +246,29 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
                items={moodTagItems}
                title={t('common.mood', { postProcess: 'sentenceCase' })}
            />
+
+            {groupingItems.length > 0 && (
+                <Stack align="center" className={styles.metadataPillGroup} gap="xs">
+                    <Text fw={600} isNoSelect size="sm" tt="uppercase">
+                        {t('common.grouping', { postProcess: 'sentenceCase' })}
+                    </Text>
+                    <div className={styles['pill-group-wrapper']}>
+                        <Pill.Group>
+                            {groupingItems.map((item) =>
+                                item.url ? (
+                                    <PillLink key={`grouping-${item.id}`} size="md" to={item.url}>
+                                        {item.label}
+                                    </PillLink>
+                                ) : (
+                                    <Pill key={`grouping-${item.id}`} size="md">
+                                        {item.label}
+                                    </Pill>
+                                ),
+                            )}
+                        </Pill.Group>
+                    </div>
+                </Stack>
+            )}
        </>
    );
 };
@@ -296,25 +344,60 @@ interface AlbumMetadataExternalLinksProps {
    albumName?: string;
    externalLinks: boolean;
    lastFM: boolean;
+    listenBrainz: boolean;
    mbzId?: null | string;
+    mbzReleaseGroupId?: null | string;
    musicBrainz: boolean;
    nativeSpotify: boolean;
+    qobuz: boolean;
    spotify: boolean;
 }

+const getListenBrainzUrl = (
+    mbzReleaseGroupId: null | string,
+    albumArtist?: string,
+    albumName?: string,
+) => {
+    if (mbzReleaseGroupId) {
+        return `https://listenbrainz.org/album/${mbzReleaseGroupId}`;
+    }
+
+    if (albumArtist || albumName) {
+        return `https://listenbrainz.org/search/?search_term=${encodeURIComponent([albumArtist, albumName].filter(Boolean).join(' ').trim())}`;
+    }
+
+    return null;
+};
+
+const getQobuzUrl = (albumArtist?: string, albumName?: string) => {
+    if (albumArtist || albumName) {
+        return `https://www.qobuz.com/us-en/search/albums/${encodeURIComponent([albumArtist, albumName].filter(Boolean).join(' ').trim())}`;
+    }
+
+    return null;
+};
+
 const AlbumMetadataExternalLinks = ({
    albumArtist,
    albumName,
    externalLinks,
    lastFM,
+    listenBrainz,
    mbzId,
+    mbzReleaseGroupId,
    musicBrainz,
    nativeSpotify,
+    qobuz,
    spotify,
 }: AlbumMetadataExternalLinksProps) => {
    const { t } = useTranslation();

-    if (!externalLinks || (!lastFM && !musicBrainz && !spotify)) return null;
+    const listenBrainzUrl = getListenBrainzUrl(mbzReleaseGroupId || null, albumArtist, albumName);
+    const qobuzUrl = getQobuzUrl(albumArtist, albumName);
+
+    if (!externalLinks || (!lastFM && !listenBrainz && !musicBrainz && !qobuz && !spotify)) {
+        return null;
+    }

    return (
        <Stack gap="xs">
@@ -323,7 +406,7 @@ const AlbumMetadataExternalLinks = ({
                    postProcess: 'sentenceCase',
                })}
            </Text>
-            <Group className={styles.externalLinksGroup} gap="sm">
+            <Group className={styles.externalLinksGroup} gap="xs">
                {lastFM && (
                    <ActionIcon
                        component="a"
@@ -332,8 +415,7 @@ const AlbumMetadataExternalLinks = ({
                        )}/${encodeURIComponent(albumName || '')}`}
                        icon="brandLastfm"
                        iconProps={{
-                            fill: 'default',
-                            size: 'xl',
+                            size: '2xl',
                        }}
                        radius="md"
                        rel="noopener noreferrer"
@@ -350,8 +432,7 @@ const AlbumMetadataExternalLinks = ({
                        href={`https://musicbrainz.org/release/${mbzId}`}
                        icon="brandMusicBrainz"
                        iconProps={{
-                            fill: 'default',
-                            size: 'xl',
+                            size: '2xl',
                        }}
                        radius="md"
                        rel="noopener noreferrer"
@@ -362,6 +443,40 @@ const AlbumMetadataExternalLinks = ({
                        variant="subtle"
                    />
                ) : null}
+                {listenBrainz && listenBrainzUrl && (
+                    <ActionIcon
+                        component="a"
+                        href={listenBrainzUrl}
+                        icon="brandListenBrainz"
+                        iconProps={{
+                            size: '2xl',
+                        }}
+                        radius="md"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        tooltip={{
+                            label: t('action.openIn.listenbrainz'),
+                        }}
+                        variant="subtle"
+                    />
+                )}
+                {qobuz && qobuzUrl && (
+                    <ActionIcon
+                        component="a"
+                        href={qobuzUrl}
+                        icon="brandQobuz"
+                        iconProps={{
+                            size: '2xl',
+                        }}
+                        radius="md"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        tooltip={{
+                            label: t('action.openIn.qobuz'),
+                        }}
+                        variant="subtle"
+                    />
+                )}
                {spotify && (
                    <ActionIcon
                        component="a"
@@ -372,8 +487,7 @@ const AlbumMetadataExternalLinks = ({
                        }
                        icon="brandSpotify"
                        iconProps={{
-                            fill: 'default',
-                            size: 'xl',
+                            size: '2xl',
                        }}
                        radius="md"
                        rel="noopener noreferrer"
@@ -396,7 +510,8 @@ export const AlbumDetailContent = () => {
        albumQueries.detail({ query: { id: albumId }, serverId: server.id }),
    );

-    const { externalLinks, lastFM, musicBrainz, nativeSpotify, spotify } = useExternalLinks();
+    const { externalLinks, lastFM, listenBrainz, musicBrainz, nativeSpotify, qobuz, spotify } =
+        useExternalLinks();

    const comment = detailQuery?.data?.comment;

@@ -427,9 +542,12 @@ export const AlbumDetailContent = () => {
                            albumName={detailQuery?.data?.name}
                            externalLinks={externalLinks}
                            lastFM={lastFM}
+                            listenBrainz={listenBrainz}
                            mbzId={mbzId || undefined}
+                            mbzReleaseGroupId={detailQuery?.data?.mbzReleaseGroupId}
                            musicBrainz={musicBrainz}
                            nativeSpotify={nativeSpotify}
+                            qobuz={qobuz}
                            spotify={spotify}
                        />
                    </div>
@@ -20,7 +20,7 @@ import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useShowRatings } from '/@/renderer/store';
 import { useArtistRadioCount, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { formatDateAbsoluteUTC, formatDurationString, formatSizeString } from '/@/renderer/utils';
+import { formatDurationString, formatPartialIsoDateUTC, formatSizeString } from '/@/renderer/utils';
 import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
 import { Group } from '/@/shared/components/group/group';
 import { Separator } from '/@/shared/components/separator/separator';
@@ -131,7 +131,10 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
        const originalDifferentFromRelease =
            album?.originalDate && album?.originalDate !== album?.releaseDate;

-        const originalYearDifferentFromRelease = album?.originalYear !== album?.releaseYear;
+        const originalYearDifferentFromRelease =
+            album.originalYear > 0 &&
+            album.releaseYear != null &&
+            album.originalYear !== album.releaseYear;

        const playCount = album?.playCount;

@@ -147,17 +150,17 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
            if (originalDifferentFromRelease) {
                items.push({
                    id: 'originalDate',
-                    value: `♫ ${formatDateAbsoluteUTC(album.originalDate)}`,
+                    value: `♫ ${formatPartialIsoDateUTC(album.originalDate)}`,
                });
            }

            if (releaseDate) {
                items.push({
                    id: 'releaseDate',
-                    value: `${releasePrefix} ${formatDateAbsoluteUTC(releaseDate)}`,
+                    value: `${releasePrefix} ${formatPartialIsoDateUTC(releaseDate)}`,
                });
            }
-        } else if (album.originalYear) {
+        } else if (album.originalYear > 0) {
            if (originalYearDifferentFromRelease) {
                items.push({
                    id: 'originalYear',
@@ -168,14 +171,24 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
            if (releaseDate) {
                items.push({
                    id: 'releaseDate',
-                    value: `${releaseYearPrefix} ${formatDateAbsoluteUTC(releaseDate)}`,
+                    value: `${releaseYearPrefix} ${formatPartialIsoDateUTC(releaseDate)}`,
                });
-            } else if (releaseYear) {
+            } else if (releaseYear != null && releaseYear > 0) {
                items.push({
                    id: 'releaseYear',
                    value: `${releaseYearPrefix} ${releaseYear}`,
                });
            }
+        } else if (releaseDate) {
+            items.push({
+                id: 'releaseDate',
+                value: `♫ ${formatPartialIsoDateUTC(releaseDate)}`,
+            });
+        } else if (releaseYear != null && releaseYear > 0) {
+            items.push({
+                id: 'releaseYear',
+                value: `♫ ${releaseYear}`,
+            });
        }

        items.push(
@@ -17,9 +17,10 @@ import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import { useAlbumBackground, useCurrentServer } from '/@/renderer/store';
-import { Spinner } from '/@/shared/components/spinner/spinner';
 import { LibraryItem } from '/@/shared/types/domain-types';

+const ALBUM_DETAIL_BG_FALLBACK = 'var(--theme-colors-foreground-muted)';
+
 const AlbumDetailRoute = () => {
    const scrollAreaRef = useRef<HTMLDivElement>(null);
    const headerRef = useRef<HTMLDivElement>(null);
@@ -42,25 +43,21 @@ const AlbumDetailRoute = () => {
            type: 'itemCard',
        }) || '';

-    const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({
+    const { background: backgroundColor } = useFastAverageColor({
        id: albumId,
        src: imageUrl,
        srcLoaded: true,
    });

-    const background = backgroundColor;
+    const background = backgroundColor ?? ALBUM_DETAIL_BG_FALLBACK;

    const showBlurredImage = albumBackground;

-    if (isColorLoading) {
-        return <Spinner container />;
-    }
-
    return (
        <AnimatedPage key={`album-detail-${albumId}`}>
            <NativeScrollArea
                pageHeaderProps={{
-                    backgroundColor: backgroundColor || undefined,
+                    backgroundColor: backgroundColor ?? ALBUM_DETAIL_BG_FALLBACK,
                    children: (
                        <LibraryHeaderBar>
                            <LibraryHeaderBar.PlayButton
@@ -888,26 +888,54 @@ interface AlbumArtistMetadataExternalLinksProps {
    artistName?: string;
    externalLinks: boolean;
    lastFM: boolean;
+    listenBrainz: boolean;
    mbzId?: null | string;
    musicBrainz: boolean;
    nativeSpotify: boolean;
    order?: number;
+    qobuz: boolean;
    spotify: boolean;
 }

+const getListenBrainzUrl = (mbzId: null | string, artistName?: string) => {
+    if (mbzId) {
+        return `https://listenbrainz.org/artist/${mbzId}`;
+    }
+
+    if (artistName) {
+        return `https://listenbrainz.org/search/?search_term=${encodeURIComponent(artistName)}`;
+    }
+
+    return null;
+};
+
+const getQobuzUrl = (artistName?: string) => {
+    if (artistName) {
+        return `https://www.qobuz.com/us-en/search/artists/${encodeURIComponent(artistName)}`;
+    }
+
+    return null;
+};
+
 const AlbumArtistMetadataExternalLinks = ({
    artistName,
    externalLinks,
    lastFM,
+    listenBrainz,
    mbzId,
    musicBrainz,
    nativeSpotify,
    order,
+    qobuz,
    spotify,
 }: AlbumArtistMetadataExternalLinksProps) => {
    const { t } = useTranslation();
+    const listenBrainzUrl = getListenBrainzUrl(mbzId || null, artistName);
+    const qobuzUrl = getQobuzUrl(artistName);

-    if (!externalLinks || (!lastFM && !musicBrainz && !spotify)) return null;
+    if (!externalLinks || (!lastFM && !listenBrainz && !musicBrainz && !qobuz && !spotify)) {
+        return null;
+    }

    return (
        <Grid.Col order={order} span={12}>
@@ -917,15 +945,14 @@ const AlbumArtistMetadataExternalLinks = ({
                        postProcess: 'sentenceCase',
                    })}
                </Text>
-                <Group gap="sm">
+                <Group gap="xs">
                    {lastFM && (
                        <ActionIcon
                            component="a"
                            href={`https://www.last.fm/music/${encodeURIComponent(artistName || '')}`}
                            icon="brandLastfm"
                            iconProps={{
-                                fill: 'default',
-                                size: 'xl',
+                                size: '2xl',
                            }}
                            rel="noopener noreferrer"
                            target="_blank"
@@ -941,8 +968,7 @@ const AlbumArtistMetadataExternalLinks = ({
                            href={`https://musicbrainz.org/artist/${mbzId}`}
                            icon="brandMusicBrainz"
                            iconProps={{
-                                fill: 'default',
-                                size: 'xl',
+                                size: '2xl',
                            }}
                            rel="noopener noreferrer"
                            target="_blank"
@@ -952,6 +978,38 @@ const AlbumArtistMetadataExternalLinks = ({
                            variant="subtle"
                        />
                    ) : null}
+                    {listenBrainz && listenBrainzUrl && (
+                        <ActionIcon
+                            component="a"
+                            href={listenBrainzUrl}
+                            icon="brandListenBrainz"
+                            iconProps={{
+                                size: '2xl',
+                            }}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            tooltip={{
+                                label: t('action.openIn.listenbrainz'),
+                            }}
+                            variant="subtle"
+                        />
+                    )}
+                    {qobuz && qobuzUrl && (
+                        <ActionIcon
+                            component="a"
+                            href={qobuzUrl}
+                            icon="brandQobuz"
+                            iconProps={{
+                                size: '2xl',
+                            }}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            tooltip={{
+                                label: t('action.openIn.qobuz'),
+                            }}
+                            variant="subtle"
+                        />
+                    )}
                    {spotify && (
                        <ActionIcon
                            component="a"
@@ -962,8 +1020,7 @@ const AlbumArtistMetadataExternalLinks = ({
                            }
                            icon="brandSpotify"
                            iconProps={{
-                                fill: 'default',
-                                size: 'xl',
+                                size: '2xl',
                            }}
                            rel="noopener noreferrer"
                            target={nativeSpotify ? undefined : '_blank'}
@@ -1075,7 +1132,8 @@ export const AlbumArtistDetailContent = ({
 }: AlbumArtistDetailContentProps) => {
    const artistItems = useArtistItems();
    const artistRadioCount = useArtistRadioCount();
-    const { externalLinks, lastFM, musicBrainz, nativeSpotify, spotify } = useExternalLinks();
+    const { externalLinks, lastFM, listenBrainz, musicBrainz, nativeSpotify, qobuz, spotify } =
+        useExternalLinks();
    const { albumArtistId, artistId } = useParams() as {
        albumArtistId?: string;
        artistId?: string;
@@ -1161,18 +1219,21 @@ export const AlbumArtistDetailContent = ({
                        genres={detailQuery.data?.genres}
                        order={genresOrder}
                    />
-                    {externalLinks && (lastFM || musicBrainz || spotify) && (
-                        <AlbumArtistMetadataExternalLinks
-                            artistName={detailQuery.data?.name}
-                            externalLinks={externalLinks}
-                            lastFM={lastFM}
-                            mbzId={mbzId}
-                            musicBrainz={musicBrainz}
-                            nativeSpotify={nativeSpotify}
-                            order={externalLinksOrder}
-                            spotify={spotify}
-                        />
-                    )}
+                    {externalLinks &&
+                        (lastFM || listenBrainz || musicBrainz || qobuz || spotify) && (
+                            <AlbumArtistMetadataExternalLinks
+                                artistName={detailQuery.data?.name}
+                                externalLinks={externalLinks}
+                                lastFM={lastFM}
+                                listenBrainz={listenBrainz}
+                                mbzId={mbzId}
+                                musicBrainz={musicBrainz}
+                                nativeSpotify={nativeSpotify}
+                                order={externalLinksOrder}
+                                qobuz={qobuz}
+                                spotify={spotify}
+                            />
+                        )}
                    {enabledItem.biography && (
                        <AlbumArtistMetadataBiography
                            artistName={detailQuery.data?.name}
@@ -189,13 +189,15 @@ export const AlbumArtistDetailHeader = forwardRef<HTMLDivElement, AlbumArtistDet
        }, [detailQuery.data?.imageUrl, imageUrl]);

        const alternateImageUrl = artistInfoQuery.data?.imageUrl;
+        const hasImageId = Boolean(detailQuery.data?.imageId);
+        const fallbackHeaderImageUrl = alternateImageUrl || selectedImageUrl;

        return (
            <LibraryHeader
-                imageUrl={alternateImageUrl || selectedImageUrl}
+                imageUrl={hasImageId ? undefined : fallbackHeaderImageUrl}
                item={{
                    imageId: detailQuery.data?.imageId,
-                    imageUrl: alternateImageUrl || detailQuery.data?.imageUrl,
+                    imageUrl: hasImageId ? undefined : fallbackHeaderImageUrl,
                    route: AppRoute.LIBRARY_ALBUM_ARTISTS,
                    type: LibraryItem.ALBUM_ARTIST,
                }}
@@ -25,6 +25,7 @@ import {
 } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
 import { openLyricsSettingsModal } from '/@/renderer/features/lyrics/utils/open-lyrics-settings-modal';
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
+import { useIsRadioActive } from '/@/renderer/features/radio/hooks/use-radio-player';
 import { ComponentErrorBoundary } from '/@/renderer/features/shared/components/component-error-boundary';
 import { queryClient } from '/@/renderer/lib/react-query';
 import { useLyricsSettings, usePlayerSong } from '/@/renderer/store';
@@ -42,6 +43,10 @@ type LyricsProps = {

 export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default' }: LyricsProps) => {
    const currentSong = usePlayerSong();
+    const isRadioActive = useIsRadioActive();
+
+    const isLyricsDisabled = isRadioActive;
+
    const {
        enableAutoTranslation,
        preferLocalLyrics,
@@ -91,7 +96,8 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
        lyricsQueries.songLyrics(
            {
                options: {
-                    enabled: !!pendingSongId && pendingSongId === currentSong?.id,
+                    enabled:
+                        !!pendingSongId && pendingSongId === currentSong?.id && !isLyricsDisabled,
                },
                query: { songId: currentSong?.id || '' },
                serverId: currentSong?._serverId || '',
@@ -110,11 +116,15 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
        return computeSelectedFromResult(data, preferLocalLyrics, indexToUse);
    }, [data, indexToUse, preferLocalLyrics]);

+    const displayLyrics = isLyricsDisabled ? null : lyrics;
+
    const currentOffsetMs = useMemo(() => {
        if (!data) return 0;
        return getDisplayOffset(lyrics, data.selectedOffsetMs, indexToUse, data.local);
    }, [data, indexToUse, lyrics]);

+    const displayOffsetMs = isLyricsDisabled ? 0 : currentOffsetMs;
+
    const handleOnSearchOverride = useCallback(
        (params: LyricsOverride) => {
            if (!lyricsKey) return;
@@ -192,7 +202,7 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
    }, [currentSong, lyricsKey]);

    const fetchTranslation = useCallback(async () => {
-        if (!lyrics) return;
+        if (!lyrics || isLyricsDisabled) return;
        const originalLyrics = Array.isArray(lyrics.lyrics)
            ? lyrics.lyrics.map(([, line]) => line).join('\n')
            : lyrics.lyrics;
@@ -204,7 +214,13 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
        );
        setTranslatedLyrics(TranslatedText);
        setShowTranslation(true);
-    }, [lyrics, translationApiKey, translationApiProvider, translationTargetLanguage]);
+    }, [
+        isLyricsDisabled,
+        lyrics,
+        translationApiKey,
+        translationApiProvider,
+        translationTargetLanguage,
+    ]);

    const handleOnTranslateLyric = useCallback(async () => {
        if (translatedLyrics) {
@@ -226,10 +242,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
    );

    useEffect(() => {
-        if (lyrics && !translatedLyrics && enableAutoTranslation) {
+        if (displayLyrics && !translatedLyrics && enableAutoTranslation) {
            fetchTranslation();
        }
-    }, [lyrics, translatedLyrics, enableAutoTranslation, fetchTranslation]);
+    }, [displayLyrics, translatedLyrics, enableAutoTranslation, fetchTranslation]);

    const languages = useMemo(() => {
        const local = data?.local;
@@ -242,8 +258,8 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
        return [];
    }, [data?.local]);

-    const isLoadingLyrics = isLoading;
-    const hasNoLyrics = !lyrics;
+    const isLoadingLyrics = isLoading && !isLyricsDisabled;
+    const hasNoLyrics = !displayLyrics;
    const [shouldFadeOut, setShouldFadeOut] = useState(false);

    useEffect(() => {
@@ -267,10 +283,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
    }, [isLoadingLyrics, hasNoLyrics, fadeOutNoLyricsMessage]);

    const handleExportLyrics = useCallback(() => {
-        if (lyrics) {
-            openLyricsExportModal({ lyrics, offsetMs: currentOffsetMs, synced });
+        if (displayLyrics) {
+            openLyricsExportModal({ lyrics: displayLyrics, offsetMs: currentOffsetMs, synced });
        }
-    }, [currentOffsetMs, lyrics, synced]);
+    }, [currentOffsetMs, displayLyrics, synced]);

    const handleOpenSettings = () => {
        openLyricsSettingsModal(settingsKey);
@@ -318,14 +334,14 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
                            >
                                {synced ? (
                                    <SynchronizedLyrics
-                                        {...(lyrics as SynchronizedLyricsProps)}
-                                        offsetMs={currentOffsetMs}
+                                        {...(displayLyrics as SynchronizedLyricsProps)}
+                                        offsetMs={displayOffsetMs}
                                        settingsKey={settingsKey}
                                        translatedLyrics={showTranslation ? translatedLyrics : null}
                                    />
                                ) : (
                                    <UnsynchronizedLyrics
-                                        {...(lyrics as UnsynchronizedLyricsProps)}
+                                        {...(displayLyrics as UnsynchronizedLyricsProps)}
                                        settingsKey={settingsKey}
                                        translatedLyrics={showTranslation ? translatedLyrics : null}
                                    />
@@ -336,10 +352,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
                )}
                <div className={styles.actionsContainer}>
                    <LyricsActions
-                        hasLyrics={!!lyrics}
+                        hasLyrics={!!displayLyrics}
                        index={indexToUse}
                        languages={languages}
-                        offsetMs={currentOffsetMs}
+                        offsetMs={displayOffsetMs}
                        onExportLyrics={handleExportLyrics}
                        onRemoveLyric={handleOnRemoveLyric}
                        onSearchOverride={handleOnSearchOverride}
@@ -124,10 +124,10 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
            if (!radioState.currentStreamUrl) {
                const playerData = usePlayerStore.getState().getPlayerData();
                const currentSongUrl = playerData.currentSong
-                    ? getSongUrl(playerData.currentSong, transcode)
+                    ? await getSongUrl(playerData.currentSong, transcode, true)
                    : undefined;
                const nextSongUrl = playerData.nextSong
-                    ? getSongUrl(playerData.nextSong, transcode)
+                    ? await getSongUrl(playerData.nextSong, transcode, true)
                    : undefined;

                if (currentSongUrl && nextSongUrl && !hasPopulatedQueueRef.current && mpvPlayer) {
@@ -216,6 +216,10 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
            return;
        }

+        if (playerStatus !== PlayerStatus.PLAYING) {
+            return;
+        }
+
        const updateProgress = async () => {
            if (!mpvPlayer || !isMountedRef.current) {
                return;
@@ -245,7 +249,7 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
                progressIntervalRef.current = null;
            }
        };
-    }, [hasCurrentSong, isTransitioning, onProgress]);
+    }, [hasCurrentSong, isTransitioning, onProgress, playerStatus]);

    const { mediaAutoNext } = usePlayerActions();

@@ -274,14 +278,14 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
            onMediaPrev: () => {
                replaceMpvQueue(transcode);
            },
-            onNextSongInsertion: (song) => {
+            onNextSongInsertion: async (song) => {
                const radioState = useRadioStore.getState();

                if (radioState.currentStreamUrl) {
                    return;
                }

-                const nextSongUrl = song ? getSongUrl(song, transcode) : undefined;
+                const nextSongUrl = song ? await getSongUrl(song, transcode, true) : undefined;
                mpvPlayer?.setQueueNext(nextSongUrl);
            },
            onPlayerPlay: () => {
@@ -339,19 +343,19 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {

 MpvPlayerEngine.displayName = 'MpvPlayerEngine';

-function handleMpvAutoNext(transcode: {
+async function handleMpvAutoNext(transcode: {
    bitrate?: number | undefined;
    enabled: boolean;
    format?: string | undefined;
 }) {
    const playerData = usePlayerStore.getState().getPlayerData();
    const nextSongUrl = playerData.nextSong
-        ? getSongUrl(playerData.nextSong, transcode)
+        ? await getSongUrl(playerData.nextSong, transcode, true)
        : undefined;
    mpvPlayer?.autoNext(nextSongUrl);
 }

-function replaceMpvQueue(transcode: {
+async function replaceMpvQueue(transcode: {
    bitrate?: number | undefined;
    enabled: boolean;
    format?: string | undefined;
@@ -365,10 +369,10 @@ function replaceMpvQueue(transcode: {

    const playerData = usePlayerStore.getState().getPlayerData();
    const currentSongUrl = playerData.currentSong
-        ? getSongUrl(playerData.currentSong, transcode)
+        ? await getSongUrl(playerData.currentSong, transcode, true)
        : undefined;
    const nextSongUrl = playerData.nextSong
-        ? getSongUrl(playerData.nextSong, transcode)
+        ? await getSongUrl(playerData.nextSong, transcode, true)
        : undefined;
    mpvPlayer?.setQueue(currentSongUrl, nextSongUrl, false);
 }
@@ -80,7 +80,7 @@ export const useMainPlayerListener = () => {

        mpvPlayerListener.rendererStop(() => {
            if (!isRadioActive) {
-                mediaStop();
+                mediaStop({ reset: false });
            }
        });

@@ -1,4 +1,5 @@
-import { useMemo, useRef } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';

 import { api } from '/@/renderer/api';
 import { TranscodingConfig } from '/@/renderer/store';
@@ -10,52 +11,71 @@ export function useSongUrl(
    transcode: TranscodingConfig,
 ): string | undefined {
    const prior = useRef(['', '']);
+    const shouldReusePrior = Boolean(
+        song?._serverId && current && prior.current[0] === song._uniqueId && prior.current[1],
+    );

-    return useMemo(() => {
-        if (song?._serverId) {
-            // If we are the current track, we do not want a transcoding
-            // reconfiguration to force a restart.
-            if (current && prior.current[0] === song._uniqueId) {
-                return prior.current[1];
-            }
-
-            const url = api.controller.getStreamUrl({
-                apiClientProps: { serverId: song._serverId },
+    const { data: queryStreamUrl } = useQuery({
+        enabled: Boolean(song?._serverId) && !shouldReusePrior,
+        queryFn: () =>
+            api.controller.getStreamUrl({
+                apiClientProps: { serverId: song!._serverId },
                query: {
                    bitrate: transcode.bitrate,
                    format: transcode.format,
-                    id: song.id,
+                    id: song!.id,
                    transcode: transcode.enabled,
                },
-            });
+            }),
+        queryKey: [
+            song?._serverId,
+            'stream-url',
+            song?.id,
+            shouldReusePrior ? 'reuse-prior' : transcode.bitrate,
+            shouldReusePrior ? 'reuse-prior' : transcode.format,
+            shouldReusePrior ? 'reuse-prior' : transcode.enabled,
+        ] as const,
+        staleTime: 60 * 1000,
+    });

-            // transcoding enabled; save the updated result
-            prior.current = [song._uniqueId, url];
-            return url;
+    useEffect(() => {
+        if (!song?._serverId) {
+            prior.current = ['', ''];
+            return;
        }

-        // no track; clear result
-        prior.current = ['', ''];
-        return undefined;
-    }, [
-        song?._serverId,
-        song?._uniqueId,
-        song?.id,
-        current,
-        transcode.bitrate,
-        transcode.format,
-        transcode.enabled,
-    ]);
+        if (!queryStreamUrl) {
+            return;
+        }
+
+        // Save resolved URL to avoid restarting current track on transcode setting changes.
+        prior.current = [song._uniqueId, queryStreamUrl];
+    }, [song?._serverId, song?._uniqueId, queryStreamUrl]);
+
+    useEffect(() => {
+        if (!song?._serverId) {
+            prior.current = ['', ''];
+        }
+    }, [song?._serverId]);
+
+    return shouldReusePrior ? prior.current[1] : queryStreamUrl;
 }

-export const getSongUrl = (song: QueueSong, transcode: TranscodingConfig) => {
-    return api.controller.getStreamUrl({
+export const getSongUrl = async (
+    song: QueueSong,
+    transcode: TranscodingConfig,
+    skipAutoTranscode?: boolean,
+) => {
+    const url = await api.controller.getStreamUrl({
        apiClientProps: { serverId: song._serverId },
        query: {
            bitrate: transcode.bitrate,
            format: transcode.format,
            id: song.id,
+            skipAutoTranscode,
            transcode: transcode.enabled,
        },
    });
+
+    return url;
 };
@@ -33,10 +33,59 @@ import {
    usePlaybackType,
    useSettingsStoreActions,
 } from '/@/renderer/store';
+import { logFn } from '/@/renderer/utils/logger';
 import { toast } from '/@/shared/components/toast/toast';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { PlayerType } from '/@/shared/types/types';

+const CODEC_PROBES = [
+    { codec: 'mp3', container: 'mp3', mime: 'audio/mpeg' },
+    { codec: 'aac', container: 'mp4', mime: 'audio/mp4; codecs="mp4a.40.2"' },
+    { codec: 'opus', container: 'ogg', mime: 'audio/ogg; codecs="opus"' },
+    { codec: 'vorbis', container: 'ogg', mime: 'audio/ogg; codecs="vorbis"' },
+    { codec: 'flac', container: 'flac', mime: 'audio/flac' },
+    { codec: 'wav', container: 'wav', mime: 'audio/wav' },
+    { codec: 'alac', container: 'mp4', mime: 'audio/mp4; codecs="alac"' },
+];
+
+const DEFAULT_TRANSCODING_PROFILES = [
+    { audioCodec: 'opus', container: 'ogg', protocol: 'http' },
+    { audioCodec: 'mp3', container: 'mp3', protocol: 'http' },
+];
+
+const DIRECT_PLAY_PROFILES: {
+    audioCodecs: string[];
+    containers: string[];
+    protocols: string[];
+}[] = [];
+
+export function getDefaultTranscodingProfiles() {
+    return DEFAULT_TRANSCODING_PROFILES;
+}
+
+export function getDirectPlayProfiles() {
+    return DIRECT_PLAY_PROFILES;
+}
+
+// Shamelessly taken from NavidromeUI
+function detectBrowserProfile() {
+    const audio = new Audio();
+
+    for (const { codec, container, mime } of CODEC_PROBES) {
+        if (audio.canPlayType(mime) === 'probably') {
+            DIRECT_PLAY_PROFILES.push({
+                audioCodecs: [codec],
+                containers: [container],
+                protocols: ['http'],
+            });
+        }
+    }
+
+    logFn.info('DIRECT_PLAY_PROFILES', { meta: DIRECT_PLAY_PROFILES });
+
+    return DIRECT_PLAY_PROFILES;
+}
+
 export const AudioPlayers = () => {
    const playbackType = usePlaybackType();
    const serverId = useCurrentServerId();
@@ -49,6 +98,10 @@ export const AudioPlayers = () => {
    } = usePlaybackSettings();
    const { setWebAudio, webAudio: audioContext } = useWebAudio();

+    useEffect(() => {
+        detectBrowserProfile();
+    }, []);
+
    return (
        <>
            <SleepTimerHook />
@@ -112,7 +112,7 @@ const StopButton = ({ disabled }: { disabled?: boolean }) => {
        <PlayerButton
            disabled={disabled}
            icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
-            onClick={mediaStop}
+            onClick={() => mediaStop()}
            tooltip={{
                label: t('player.stop', { postProcess: 'sentenceCase' }),
                openDelay: 0,
@@ -11,7 +11,10 @@ import { ItemImage } from '/@/renderer/components/item-image/item-image';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { RadioMetadataDisplay } from '/@/renderer/features/player/components/radio-metadata-display';
-import { useIsRadioActive } from '/@/renderer/features/radio/hooks/use-radio-player';
+import {
+    useIsRadioActive,
+    useRadioPlayer,
+} from '/@/renderer/features/radio/hooks/use-radio-player';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
    useAppStore,
@@ -34,7 +37,10 @@ import { LibraryItem } from '/@/shared/types/domain-types';
 export const LeftControls = () => {
    const { t } = useTranslation();
    const { setSideBar } = useAppStoreActions();
-    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+    const {
+        expanded: isFullScreenPlayerExpanded,
+        visualizerExpanded: isFullScreenVisualizerExpanded,
+    } = useFullScreenPlayerStore();
    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();

    const { collapsed, image } = useAppStore(
@@ -47,9 +53,11 @@ export const LeftControls = () => {

    const currentSong = usePlayerSong();
    const isRadioActive = useIsRadioActive();
+    const { currentStationArt } = useRadioPlayer();
    const { bindings } = useHotkeySettings();

    const isRadioMode = isRadioActive;
+    const hasRadioStationImage = Boolean(currentStationArt?.imageId || currentStationArt?.imageUrl);
    const hideImage = image && !collapsed;
    const isSongDefined = Boolean(currentSong?.id) && !isRadioMode;
    const title = currentSong?.name;
@@ -62,7 +70,14 @@ export const LeftControls = () => {
        }

        e?.stopPropagation();
-        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
+
+        const shouldClose = isFullScreenPlayerExpanded || isFullScreenVisualizerExpanded;
+
+        if (shouldClose) {
+            setFullScreenPlayerStore({ expanded: false, visualizerExpanded: false });
+        } else {
+            setFullScreenPlayerStore({ expanded: true });
+        }
    };

    const handleToggleSidebarImage = (e?: MouseEvent<HTMLButtonElement>) => {
@@ -118,7 +133,22 @@ export const LeftControls = () => {
                                    })}
                                    openDelay={0}
                                >
-                                    {isRadioMode ? (
+                                    {isRadioMode && hasRadioStationImage ? (
+                                        <ItemImage
+                                            className={clsx(
+                                                styles.playerbarImage,
+                                                PlaybackSelectors.playerCoverArt,
+                                            )}
+                                            enableDebounce={false}
+                                            enableViewport={false}
+                                            fetchPriority="high"
+                                            id={currentStationArt?.imageId ?? undefined}
+                                            itemType={LibraryItem.RADIO_STATION}
+                                            serverId={currentStationArt?.serverId}
+                                            src={currentStationArt?.imageUrl ?? ''}
+                                            type="table"
+                                        />
+                                    ) : isRadioMode ? (
                                        <Center
                                            className={clsx(
                                                styles.playerbarImage,
@@ -7,10 +7,10 @@ import { CustomPlayerbarSlider } from './playerbar-slider';
 import styles from './playerbar-waveform.module.css';

 import { useSongUrl } from '/@/renderer/features/player/audio-player/hooks/use-stream-url';
+import { PlayerbarSeekSlider } from '/@/renderer/features/player/components/playerbar-seek-slider';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { BarAlign, usePlayerbarSlider, usePlayerSong, usePlayerTimestamp } from '/@/renderer/store';
 import { useAppThemeColors, useColorScheme } from '/@/renderer/themes/use-app-theme';
-import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Text } from '/@/shared/components/text/text';

 export const PlayerbarWaveform = () => {
@@ -18,6 +18,7 @@ export const PlayerbarWaveform = () => {
    const playerbarSlider = usePlayerbarSlider();
    const currentTime = usePlayerTimestamp();
    const containerRef = useRef<HTMLDivElement>(null);
+    const audioElementRef = useRef<HTMLAudioElement>(document.createElement('audio'));
    const { mediaSeekToTimestamp } = usePlayer();
    const [isLoading, setIsLoading] = useState(true);
    const [isDragging, setIsDragging] = useState(false);
@@ -29,7 +30,7 @@ export const PlayerbarWaveform = () => {

    const songDuration = currentSong?.duration ? currentSong.duration / 1000 : 0;

-    const streamUrl = useSongUrl(currentSong, true, { bitrate: 64, enabled: true, format: 'mp3' });
+    const streamUrl = useSongUrl(currentSong, true, { bitrate: 64, enabled: false, format: 'mp3' });

    const { color } = useAppThemeColors();
    const primaryColor = (color['--theme-colors-primary'] as string) || 'rgb(53, 116, 252)';
@@ -56,28 +57,20 @@ export const PlayerbarWaveform = () => {
        fillParent: true,
        height: 18,
        interact: false,
+        media: audioElementRef.current,
        normalize: false,
        progressColor: primaryColor,
-        url: streamUrl || undefined,
        waveColor,
    });

    // Reset loading state when stream URL changes and ensure media is muted
    useEffect(() => {
        setIsLoading(true);
-        if (wavesurfer) {
-            wavesurfer.setVolume(0);
-            const mediaElement = wavesurfer.getMediaElement();
-            if (mediaElement) {
-                mediaElement.muted = true;
-                mediaElement.volume = 0;
-            }
-        }
-    }, [streamUrl, wavesurfer]);
+    }, [streamUrl]);

    // Handle waveform ready state
    useEffect(() => {
-        if (!wavesurfer) return;
+        if (!wavesurfer || !streamUrl) return;

        const handleReady = () => {
            setIsLoading(false);
@@ -90,20 +83,18 @@ export const PlayerbarWaveform = () => {

        wavesurfer.on('ready', handleReady);

-        // Check if already loaded
-        if (wavesurfer.getDuration() > 0) {
-            setIsLoading(false);
-            const mediaElement = wavesurfer.getMediaElement();
-            if (mediaElement) {
-                mediaElement.muted = true;
-                mediaElement.volume = 0;
-            }
-        }
+        const waveformTimeout = setTimeout(
+            () => {
+                wavesurfer.load(streamUrl);
+            },
+            playerbarSlider?.loadingDelay ? playerbarSlider.loadingDelay * 1000 : 2000,
+        );

        return () => {
            wavesurfer.un('ready', handleReady);
+            clearTimeout(waveformTimeout);
        };
-    }, [wavesurfer]);
+    }, [wavesurfer, streamUrl, playerbarSlider.loadingDelay]);

    useEffect(() => {
        if (!wavesurfer) return;
@@ -363,12 +354,12 @@ export const PlayerbarWaveform = () => {
                            height: '100%',
                            left: 0,
                            position: 'absolute',
-                            top: 0,
+                            top: 3,
                            width: '100%',
                        }}
                        transition={{ duration: 0.2 }}
                    >
-                        <Spinner container />
+                        <PlayerbarSeekSlider max={songDuration} min={0} />
                    </motion.div>
                )}
            </AnimatePresence>
@@ -1,7 +1,6 @@
 .container {
-    width: 100vw;
+    width: 100%;
    height: 100%;
-    border-top: 1px solid alpha(var(--theme-colors-border), 0.5);
 }

 .controls-grid {
@@ -64,7 +64,7 @@ export interface PlayerContext {
    mediaSeekToTimestamp: (timestamp: number) => void;
    mediaSkipBackward: () => void;
    mediaSkipForward: () => void;
-    mediaStop: () => void;
+    mediaStop: (options?: { reset?: boolean }) => void;
    mediaToggleMute: () => void;
    mediaTogglePlayPause: () => void;
    moveSelectedTo: (items: QueueSong[], edge: 'bottom' | 'top', uniqueId: string) => void;
@@ -596,13 +596,17 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
        storeActions.mediaPrevious();
    }, [storeActions]);

-    const mediaStop = useCallback(() => {
-        logFn.debug(logMsg[LogCategory.PLAYER].mediaStop, {
-            category: LogCategory.PLAYER,
-        });
+    const mediaStop = useCallback(
+        (options?: { reset?: boolean }) => {
+            logFn.debug(logMsg[LogCategory.PLAYER].mediaStop, {
+                category: LogCategory.PLAYER,
+                meta: { reset: options?.reset },
+            });

-        storeActions.mediaStop();
-    }, [storeActions]);
+            storeActions.mediaStop(options);
+        },
+        [storeActions],
+    );

    const mediaSeekToTimestamp = useCallback(
        (timestamp: number) => {
@@ -72,6 +72,7 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
                ? {
                      ...convertQueryGroupToNDQuery(smartPlaylist.filters),
                      limit: smartPlaylist.extraFilters.limit,
+                      limitPercent: smartPlaylist.extraFilters.limitPercent,
                      // order field is now optional - sort direction is embedded in sort field
                      sort: sortValue || '+dateAdded',
                  }
@@ -302,9 +302,9 @@ const PlaylistDetailTrackViewContent = ({ data }: { data: PlaylistSongListRespon
 };

 const PlaylistDetailSongList = ({ data }: { data: PlaylistSongListResponse }) => {
-    const { displayMode } = useListContext();
+    const { displayMode, mode } = useListContext();

-    if (displayMode === LibraryItem.ALBUM) {
+    if (mode !== 'edit' && displayMode === LibraryItem.ALBUM) {
        return <PlaylistDetailAlbumView data={data} />;
    }

@@ -44,13 +44,7 @@ import { Modal } from '/@/shared/components/modal/modal';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
-import {
-    LibraryItem,
-    Playlist,
-    SongListSort,
-    SortOrder,
-    UpdatePlaylistBody,
-} from '/@/shared/types/domain-types';
+import { LibraryItem, Song, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

 interface PlaylistDetailSongListHeaderFiltersProps {
@@ -124,7 +118,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
    isSmartPlaylist,
 }: PlaylistDetailSongListHeaderFiltersProps) => {
    const { t } = useTranslation();
-    const { listKey: listKeyFromContext, mode, setMode } = useListContext();
+    const { listData, listKey: listKeyFromContext, mode, setMode } = useListContext();
    const { playlistId } = useParams() as { playlistId: string };
    const playlistTarget = usePlaylistTarget();
    const { setPlaylistBehavior } = useSettingsStoreActions();
@@ -170,10 +164,19 @@ export const PlaylistDetailSongListHeaderFilters = ({
        key: 'playlist-header-collapsed',
    });

+    const tracks = useMemo(() => {
+        if (!listData?.length) {
+            return [];
+        }
+
+        return (listData as Song[]).map((song) => song.id);
+    }, [listData]);
+
    return (
        <Flex justify="space-between" ref={containerRef}>
            <Group gap="sm" w="100%">
                <Button
+                    disabled={isEditMode}
                    leftSection={<Icon icon="arrowLeftRight" />}
                    onClick={handleToggleDisplayMode}
                    variant="subtle"
@@ -199,15 +202,15 @@ export const PlaylistDetailSongListHeaderFilters = ({
                <MoreButton onClick={handleMore} />
            </Group>
            <Group gap="sm" wrap="nowrap">
-                {isViewEditMode && <SaveAndReplaceButton mode={mode} playlist={detailQuery.data} />}
+                {isViewEditMode && <SaveAndReplaceButton mode={mode} songIds={tracks} />}
                {isViewEditMode && (
                    <Button
                        onClick={() => setMode?.(mode === 'edit' ? 'view' : 'edit')}
                        uppercase
-                        variant="subtle"
+                        variant={mode === 'edit' ? 'state-error' : 'subtle'}
                    >
                        {mode === 'edit'
-                            ? t('common.view', { postProcess: 'titleCase' })
+                            ? t('common.cancel', { postProcess: 'titleCase' })
                            : t('common.edit', { postProcess: 'titleCase' })}
                    </Button>
                )}
@@ -248,39 +251,33 @@ export const PlaylistDetailSongListHeaderFilters = ({
    );
 };

-export const openSaveAndReplaceModal = (playlistId: string, updateBody: UpdatePlaylistBody) => {
+export const openSaveAndReplaceModal = (
+    playlistId: string,
+    songIds: string[],
+    onSuccess: () => void,
+) => {
    openContextModal({
-        innerProps: { playlistId, updateBody },
+        innerProps: { onSuccess, playlistId, songIds },
        modalKey: 'saveAndReplace',
        size: 'sm',
        title: i18n.t('common.saveAndReplace', { postProcess: 'titleCase' }) as string,
    });
 };

-const SaveAndReplaceButton = ({
-    mode,
-    playlist,
-}: {
-    mode: 'edit' | 'view' | undefined;
-    playlist: Playlist | undefined;
-}) => {
+const SaveAndReplaceButton = ({ mode, songIds }: { mode?: 'edit' | 'view'; songIds: string[] }) => {
    const { t } = useTranslation();
    const { playlistId } = useParams() as { playlistId: string };
+    const { setMode } = useListContext();
+
+    const onSuccess = useCallback(() => {
+        setMode?.('view');
+    }, [setMode]);

    const handleOpenModal = useCallback(() => {
-        if (!playlistId || !playlist) return;
+        if (!playlistId) return;

-        const updateBody: UpdatePlaylistBody = {
-            comment: playlist.description ?? '',
-            name: playlist.name,
-            ownerId: playlist.ownerId ?? '',
-            public: playlist.public ?? false,
-            queryBuilderRules: playlist.rules ?? undefined,
-            sync: playlist.sync ?? false,
-        };
-
-        openSaveAndReplaceModal(playlistId, updateBody);
-    }, [playlistId, playlist]);
+        openSaveAndReplaceModal(playlistId, songIds, onSuccess);
+    }, [playlistId, songIds, onSuccess]);

    if (mode === 'view') {
        return null;
@@ -297,78 +294,3 @@ const SaveAndReplaceButton = ({
        </Button>
    );
 };
-// const GenreFilterSelection = () => {
-//     const { t } = useTranslation();
-//     const { playlistId } = useParams() as { playlistId: string };
-//     const serverId = useCurrentServerId();
-
-//     const { data } = useQuery(playlistsQueries.songList({ query: { id: playlistId }, serverId }));
-
-//     const genres = useMemo(() => {
-//         const uniqueGenres = new Map<string, string>();
-
-//         data?.items.forEach((song) => {
-//             song.genres.forEach((genre) => {
-//                 if (genre.id) {
-//                     uniqueGenres.set(genre.id, genre.name);
-//                 }
-//             });
-//         });
-
-//         return Array.from(uniqueGenres.entries()).map(([id, name]) => ({
-//             label: name,
-//             value: id,
-//         }));
-//     }, [data?.items]);
-
-//     return (
-//         <Stack p="md" style={{ background: 'var(--theme-colors-surface)', height: '12rem' }}>
-//             <Text>{t('filter.genre', { postProcess: 'titleCase' })}</Text>
-//             <ScrollArea>
-//                 <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-//                     {genres.map((genre) => (
-//                         <li key={genre.value}>{genre.label}</li>
-//                     ))}
-//                 </ul>
-//             </ScrollArea>
-//         </Stack>
-//     );
-// };
-
-// const ArtistFilterSelection = () => {
-//     const { t } = useTranslation();
-//     const { playlistId } = useParams() as { playlistId: string };
-//     const serverId = useCurrentServerId();
-
-//     const { data } = useQuery(playlistsQueries.songList({ query: { id: playlistId }, serverId }));
-
-//     const artists = useMemo(() => {
-//         const uniqueArtists = new Map<string, string>();
-
-//         data?.items.forEach((song) => {
-//             song.artists.forEach((artist) => {
-//                 if (artist.id) {
-//                     uniqueArtists.set(artist.id, artist.name);
-//                 }
-//             });
-//         });
-
-//         return Array.from(uniqueArtists.entries()).map(([id, name]) => ({
-//             label: name,
-//             value: id,
-//         }));
-//     }, [data?.items]);
-
-//     return (
-//         <Stack style={{ height: '12rem' }}>
-//             <Text>{t('filter.artist', { postProcess: 'titleCase' })}</Text>
-//             <ScrollArea>
-//                 <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-//                     {artists.map((artist) => (
-//                         <li key={artist.value}>{artist.label}</li>
-//                     ))}
-//                 </ul>
-//             </ScrollArea>
-//         </Stack>
-//     );
-// };
@@ -8,6 +8,8 @@ import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
 import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
+import { useDeletePlaylistImage } from '/@/renderer/features/playlists/mutations/delete-playlist-image-mutation';
+import { useUploadPlaylistImage } from '/@/renderer/features/playlists/mutations/upload-playlist-image-mutation';
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import {
    LibraryHeader,
@@ -18,9 +20,17 @@ import { ListSearchInput } from '/@/renderer/features/shared/components/list-sea
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDurationString } from '/@/renderer/utils';
+import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
+import { hasFeature } from '/@/shared/api/utils';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { FileButton } from '/@/shared/components/file-button/file-button';
+import { Group } from '/@/shared/components/group/group';
+import { Spoiler } from '/@/shared/components/spoiler/spoiler';
 import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
 import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
-import { LibraryItem, Song } from '/@/shared/types/domain-types';
+import { LibraryItem, Playlist, Song } from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';
 import { Play } from '/@/shared/types/types';

 interface PlaylistDetailSongListHeaderProps {
@@ -30,6 +40,64 @@ interface PlaylistDetailSongListHeaderProps {
    onToggleQueryBuilder?: () => void;
 }

+function ImageUploadOverlay({ data }: { data?: Playlist }) {
+    const uploadPlaylistImageMutation = useUploadPlaylistImage({});
+    const deletePlaylistImageMutation = useDeletePlaylistImage({});
+    const server = useCurrentServer();
+
+    if (!data) return null;
+    if (!hasFeature(server, ServerFeature.PLAYLIST_IMAGE_UPLOAD)) return null;
+
+    return (
+        <Group gap="xs">
+            <FileButton
+                accept="image/*"
+                onChange={async (file) => {
+                    if (!file || !data?._serverId) return;
+
+                    const buffer = await file.arrayBuffer();
+                    uploadPlaylistImageMutation.mutate({
+                        apiClientProps: {
+                            serverId: data._serverId,
+                        },
+                        body: { image: new Uint8Array(buffer) },
+                        query: { id: data.id },
+                    });
+                }}
+            >
+                {(props) => (
+                    <ActionIcon
+                        icon="uploadImage"
+                        iconProps={{ size: 'lg' }}
+                        radius="xl"
+                        size="xs"
+                        variant="default"
+                        {...props}
+                    />
+                )}
+            </FileButton>
+            <ActionIcon
+                disabled={!data?.uploadedImage}
+                icon="delete"
+                iconProps={{ size: 'lg' }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    if (!data?._serverId) return;
+                    deletePlaylistImageMutation.mutate({
+                        apiClientProps: {
+                            serverId: data._serverId,
+                        },
+                        query: { id: data.id },
+                    });
+                }}
+                radius="xl"
+                size="xs"
+                variant="default"
+            />
+        </Group>
+    );
+}
+
 export const PlaylistDetailSongListHeader = ({
    isSmartPlaylist,
 }: PlaylistDetailSongListHeaderProps) => {
@@ -45,6 +113,7 @@ export const PlaylistDetailSongListHeader = ({
    });

    const playlistDuration = detailQuery?.data?.duration;
+    const playlistDescription = detailQuery?.data?.description?.trim();

    const [collapsed] = useLocalStorage<boolean>({
        defaultValue: false,
@@ -94,6 +163,7 @@ export const PlaylistDetailSongListHeader = ({
            ) : (
                <LibraryHeader
                    compact
+                    imageOverlay={<ImageUploadOverlay data={detailQuery?.data} />}
                    imageUrl={imageUrl}
                    item={{
                        imageId: detailQuery?.data?.imageId,
@@ -104,10 +174,32 @@ export const PlaylistDetailSongListHeader = ({
                    title={detailQuery?.data?.name || ''}
                    topRight={<ListSearchInput />}
                >
-                    <LibraryHeaderMenu
-                        onPlay={(type) => handlePlay(type)}
-                        onShuffle={() => handlePlay(Play.SHUFFLE)}
-                    />
+                    <Stack gap="md" w="100%">
+                        {playlistDescription ? (
+                            <Spoiler
+                                hideLabel={<></>}
+                                maxHeight={16}
+                                showLabel={<></>}
+                                style={{ marginBottom: 0 }}
+                            >
+                                <Text
+                                    isMuted
+                                    size="sm"
+                                    style={{
+                                        maxWidth: '100%',
+                                        whiteSpace: 'pre-wrap',
+                                        wordBreak: 'break-word',
+                                    }}
+                                >
+                                    {replaceURLWithHTMLLinks(playlistDescription)}
+                                </Text>
+                            </Spoiler>
+                        ) : null}
+                        <LibraryHeaderMenu
+                            onPlay={(type) => handlePlay(type)}
+                            onShuffle={() => handlePlay(Play.SHUFFLE)}
+                        />
+                    </Stack>
                </LibraryHeader>
            )}
            <FilterBar>
@@ -32,6 +32,7 @@ import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
+import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
 import { Select } from '/@/shared/components/select/select';
 import { Stack } from '/@/shared/components/stack/stack';
 import { useForm } from '/@/shared/hooks/use-form';
@@ -51,6 +52,7 @@ type DeleteArgs = {

 interface PlaylistQueryBuilderProps {
    limit?: number;
+    limitPercent?: number;
    playlistId?: string;
    query: any;
    sortBy: SongListSort | SongListSort[];
@@ -155,6 +157,7 @@ export type PlaylistQueryBuilderRef = {
    getFilters: () => {
        extraFilters: {
            limit?: number;
+            limitPercent?: number;
            sortBy?: string[];
            sortOrder?: string;
        };
@@ -164,7 +167,7 @@ export type PlaylistQueryBuilderRef = {

 export const PlaylistQueryBuilder = forwardRef(
    (
-        { limit, playlistId, query, sortBy, sortOrder }: PlaylistQueryBuilderProps,
+        { limit, limitPercent, playlistId, query, sortBy, sortOrder }: PlaylistQueryBuilderProps,
        ref: Ref<PlaylistQueryBuilderRef>,
    ) => {
        const { t } = useTranslation();
@@ -213,6 +216,8 @@ export const PlaylistQueryBuilder = forwardRef(
        const extraFiltersForm = useForm({
            initialValues: {
                limit,
+                limitMode: limitPercent != null ? 'limitPercent' : 'limit',
+                limitPercent,
                sortEntries: initialSortEntries,
            },
        });
@@ -224,16 +229,26 @@ export const PlaylistQueryBuilder = forwardRef(
                    const sortString = convertSortEntriesToSortString(
                        extraFiltersForm.values.sortEntries,
                    );
+                    const isLimitPercent = extraFiltersForm.values.limitMode === 'limitPercent';
                    return {
                        extraFilters: {
-                            limit: extraFiltersForm.values.limit,
+                            limit: isLimitPercent ? undefined : extraFiltersForm.values.limit,
+                            limitPercent: isLimitPercent
+                                ? extraFiltersForm.values.limitPercent
+                                : undefined,
                            sortBy: sortString ? [sortString] : undefined,
                        },
                        filters,
                    };
                },
            }),
-            [extraFiltersForm.values.sortEntries, extraFiltersForm.values.limit, filters],
+            [
+                extraFiltersForm.values.sortEntries,
+                extraFiltersForm.values.limit,
+                extraFiltersForm.values.limitMode,
+                extraFiltersForm.values.limitPercent,
+                filters,
+            ],
        );

        const handleResetFilters = useCallback(() => {
@@ -608,10 +623,50 @@ export const PlaylistQueryBuilder = forwardRef(
                                ))}
                            </Stack>
                            <NumberInput
-                                label={t('common.limit', { postProcess: 'titleCase' })}
-                                maxWidth="20%"
+                                label={
+                                    <Group align="center" gap="xs" wrap="nowrap">
+                                        {t('common.limit', { postProcess: 'titleCase' })}
+                                        <SegmentedControl
+                                            data={[
+                                                { label: '#', value: 'limit' },
+                                                { label: '%', value: 'limitPercent' },
+                                            ]}
+                                            onChange={(value) =>
+                                                extraFiltersForm.setFieldValue(
+                                                    'limitMode',
+                                                    value as 'limit' | 'limitPercent',
+                                                )
+                                            }
+                                            size="xs"
+                                            value={extraFiltersForm.values.limitMode}
+                                        />
+                                    </Group>
+                                }
+                                max={
+                                    extraFiltersForm.values.limitMode === 'limitPercent'
+                                        ? 100
+                                        : undefined
+                                }
+                                min={
+                                    extraFiltersForm.values.limitMode === 'limitPercent'
+                                        ? 0
+                                        : undefined
+                                }
+                                onChange={(value) => {
+                                    const nextValue =
+                                        value === '' || value == null ? undefined : Number(value);
+                                    if (extraFiltersForm.values.limitMode === 'limitPercent') {
+                                        extraFiltersForm.setFieldValue('limitPercent', nextValue);
+                                    } else {
+                                        extraFiltersForm.setFieldValue('limit', nextValue);
+                                    }
+                                }}
+                                value={
+                                    extraFiltersForm.values.limitMode === 'limitPercent'
+                                        ? extraFiltersForm.values.limitPercent
+                                        : extraFiltersForm.values.limit
+                                }
                                width={75}
-                                {...extraFiltersForm.getInputProps('limit')}
                            />
                        </Group>
                    </Stack>
@@ -28,11 +28,21 @@ export interface PlaylistQueryEditorProps {
    detailQuery: ReturnType<typeof useQuery<any>>;
    handleSave: (
        filter: Record<string, any>,
-        extraFilters: { limit?: number; sortBy?: string[]; sortOrder?: string },
+        extraFilters: {
+            limit?: number;
+            limitPercent?: number;
+            sortBy?: string[];
+            sortOrder?: string;
+        },
    ) => void;
    handleSaveAs: (
        filter: Record<string, any>,
-        extraFilters: { limit?: number; sortBy?: string[]; sortOrder?: string },
+        extraFilters: {
+            limit?: number;
+            limitPercent?: number;
+            sortBy?: string[];
+            sortOrder?: string;
+        },
    ) => void;
    isQueryBuilderExpanded: boolean;
    onToggleExpand: () => void;
@@ -43,6 +53,7 @@ export interface PlaylistQueryEditorProps {

 type AppliedJsonState = {
    limit?: number;
+    limitPercent?: number;
    query: Record<string, any>;
    sort?: string;
 };
@@ -50,7 +61,7 @@ type AppliedJsonState = {
 type EditorMode = 'builder' | 'json';

 const serializeFiltersToRulesJson = (filters: {
-    extraFilters: { limit?: number; sortBy?: string[] };
+    extraFilters: { limit?: number; limitPercent?: number; sortBy?: string[] };
    filters: any;
 }): Record<string, any> => {
    const queryValue = convertQueryGroupToNDQuery(filters.filters);
@@ -58,18 +69,25 @@ const serializeFiltersToRulesJson = (filters: {
    return {
        ...queryValue,
        ...(filters.extraFilters.limit != null && { limit: filters.extraFilters.limit }),
+        ...(filters.extraFilters.limitPercent != null && {
+            limitPercent: filters.extraFilters.limitPercent,
+        }),
        ...(sortString && { sort: sortString }),
    };
 };

 const parseRulesJsonToSaveArgs = (
    parsed: Record<string, any>,
-): { extraFilters: { limit?: number; sortBy?: string[] }; filter: Record<string, any> } => {
+): {
+    extraFilters: { limit?: number; limitPercent?: number; sortBy?: string[] };
+    filter: Record<string, any>;
+} => {
    const rootKey = parsed.all ? 'all' : 'any';
    const filter = rootKey in parsed ? { [rootKey]: parsed[rootKey] } : { all: [] };
    return {
        extraFilters: {
            ...(parsed.limit != null && { limit: parsed.limit }),
+            ...(parsed.limitPercent != null && { limitPercent: parsed.limitPercent }),
            ...(parsed.sort != null && { sortBy: [parsed.sort] }),
        },
        filter,
@@ -93,7 +111,12 @@ export const PlaylistQueryEditor = ({
    const [appliedJsonState, setAppliedJsonState] = useState<AppliedJsonState | null>(null);

    const getFiltersForSave = useCallback((): null | {
-        extraFilters: { limit?: number; sortBy?: string[]; sortOrder?: string };
+        extraFilters: {
+            limit?: number;
+            limitPercent?: number;
+            sortBy?: string[];
+            sortOrder?: string;
+        };
        filter: Record<string, any>;
    } => {
        if (editorMode === 'json') {
@@ -124,6 +147,9 @@ export const PlaylistQueryEditor = ({
        const previewValue = {
            ...payload.filter,
            ...(payload.extraFilters.limit != null && { limit: payload.extraFilters.limit }),
+            ...(payload.extraFilters.limitPercent != null && {
+                limitPercent: payload.extraFilters.limitPercent,
+            }),
            ...(payload.extraFilters.sortBy?.[0] && { sort: payload.extraFilters.sortBy[0] }),
        };
        openModal({
@@ -208,6 +234,8 @@ export const PlaylistQueryEditor = ({
        [appliedJsonState?.query, detailQuery?.data?.rules],
    );
    const effectiveLimit = appliedJsonState?.limit ?? detailQuery?.data?.rules?.limit;
+    const effectiveLimitPercent =
+        appliedJsonState?.limitPercent ?? detailQuery?.data?.rules?.limitPercent;
    const effectiveSortBy = useMemo(
        () =>
            (appliedJsonState?.sort ? [appliedJsonState.sort] : parseSortBy()) as
@@ -233,6 +261,8 @@ export const PlaylistQueryEditor = ({
                        ? { ...effectiveQuery }
                        : { all: [] };
                    if (effectiveLimit != null) fallback.limit = effectiveLimit;
+                    if (effectiveLimitPercent != null)
+                        fallback.limitPercent = effectiveLimitPercent;
                    if (effectiveSortBy?.[0]) fallback.sort = effectiveSortBy[0];
                    if (!fallback.sort) fallback.sort = '+dateAdded';
                    setJsonText(JSON.stringify(fallback, null, 2));
@@ -248,6 +278,7 @@ export const PlaylistQueryEditor = ({
                        }
                        setAppliedJsonState({
                            limit: parsed.limit,
+                            limitPercent: parsed.limitPercent,
                            query: { [rootKey]: parsed[rootKey] },
                            sort: parsed.sort,
                        });
@@ -263,7 +294,16 @@ export const PlaylistQueryEditor = ({
                setEditorMode('builder');
            }
        },
-        [editorMode, effectiveLimit, effectiveQuery, effectiveSortBy, jsonText, queryBuilderRef, t],
+        [
+            editorMode,
+            effectiveLimit,
+            effectiveLimitPercent,
+            effectiveQuery,
+            effectiveSortBy,
+            jsonText,
+            queryBuilderRef,
+            t,
+        ],
    );

    return (
@@ -367,6 +407,7 @@ export const PlaylistQueryEditor = ({
                        <PlaylistQueryBuilder
                            key={JSON.stringify(appliedJsonState ?? detailQuery?.data?.rules)}
                            limit={effectiveLimit}
+                            limitPercent={effectiveLimitPercent}
                            playlistId={playlistId}
                            query={effectiveQuery}
                            ref={queryBuilderRef}
@@ -2,21 +2,20 @@ import { closeAllModals, ContextModalProps } from '@mantine/modals';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';

-import { useUpdatePlaylist } from '/@/renderer/features/playlists/mutations/update-playlist-mutation';
+import { useUpdatePlaylistTracks } from '/@/renderer/features/playlists/mutations/update-playlist-tracks-mutation';
 import { useCurrentServerId } from '/@/renderer/store';
 import { ConfirmModal } from '/@/shared/components/modal/modal';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
-import { UpdatePlaylistBody } from '/@/shared/types/domain-types';

 export const SaveAndReplaceContextModal = ({
    innerProps,
-}: ContextModalProps<{ playlistId: string; updateBody: UpdatePlaylistBody }>) => {
+}: ContextModalProps<{ onSuccess: () => void; playlistId: string; songIds: string[] }>) => {
    const { t } = useTranslation();
-    const { playlistId, updateBody } = innerProps;
+    const { onSuccess, playlistId, songIds } = innerProps;
    const serverId = useCurrentServerId();

-    const updatePlaylistMutation = useUpdatePlaylist({});
+    const updatePlaylistMutation = useUpdatePlaylistTracks({});

    const handleConfirm = useCallback(() => {
        if (!serverId || !playlistId) {
@@ -27,8 +26,10 @@ export const SaveAndReplaceContextModal = ({
        updatePlaylistMutation.mutate(
            {
                apiClientProps: { serverId },
-                body: updateBody,
-                query: { id: playlistId },
+                body: {
+                    id: playlistId,
+                    songIds,
+                },
            },
            {
                onError: (err) => {
@@ -41,6 +42,7 @@ export const SaveAndReplaceContextModal = ({
                    });
                },
                onSuccess: () => {
+                    onSuccess();
                    closeAllModals();
                    toast.success({
                        message: t('form.editPlaylist.success', {
@@ -50,11 +52,11 @@ export const SaveAndReplaceContextModal = ({
                },
            },
        );
-    }, [t, serverId, playlistId, updateBody, updatePlaylistMutation]);
+    }, [serverId, playlistId, updatePlaylistMutation, songIds, t, onSuccess]);

    return (
        <ConfirmModal loading={updatePlaylistMutation.isPending} onConfirm={handleConfirm}>
-            <Text>{t('form.editPlaylist.editNote', { postProcess: 'sentenceCase' })}</Text>
+            <Text>{t('common.areYouSure', { postProcess: 'sentenceCase' })}</Text>
        </ConfirmModal>
    );
 };
@@ -1,21 +1,31 @@
 import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import { t } from 'i18next';
+import { type ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

+import { ItemImage } from '/@/renderer/components/item-image/item-image';
+import { useDeletePlaylistImage } from '/@/renderer/features/playlists/mutations/delete-playlist-image-mutation';
 import { useUpdatePlaylist } from '/@/renderer/features/playlists/mutations/update-playlist-mutation';
+import { useUploadPlaylistImage } from '/@/renderer/features/playlists/mutations/upload-playlist-image-mutation';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { useCurrentServer, useCurrentServerId, usePermissions } from '/@/renderer/store';
 import { hasFeature } from '/@/shared/api/utils';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Box } from '/@/shared/components/box/box';
+import { FileButton } from '/@/shared/components/file-button/file-button';
+import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { ModalButton } from '/@/shared/components/modal/model-shared';
 import { Select } from '/@/shared/components/select/select';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { TextInput } from '/@/shared/components/text-input/text-input';
+import { Textarea } from '/@/shared/components/textarea/textarea';
 import { toast } from '/@/shared/components/toast/toast';
 import { useForm } from '/@/shared/hooks/use-form';
 import {
+    LibraryItem,
    ServerType,
    SortOrder,
    UpdatePlaylistBody,
@@ -24,17 +34,41 @@ import {
 } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';

+type PlaylistImageProps = {
+    imageId: null | string;
+    imageUrl: null | string;
+    uploadedImage?: string;
+};
+
 export const UpdatePlaylistContextModal = ({
    id,
    innerProps,
 }: ContextModalProps<{
    body: Partial<UpdatePlaylistBody>;
+    playlistImage?: PlaylistImageProps;
    query: UpdatePlaylistQuery;
 }>) => {
    const { t } = useTranslation();
-    const mutation = useUpdatePlaylist({});
+    const updateMutation = useUpdatePlaylist({});
+    const uploadImageMutation = useUploadPlaylistImage({});
+    const deleteImageMutation = useDeletePlaylistImage({});
    const server = useCurrentServer();
-    const { body, query } = innerProps;
+    const { body, playlistImage, query } = innerProps;
+
+    const [pendingFile, setPendingFile] = useState<File | null>(null);
+    const [pendingPreviewUrl, setPendingPreviewUrl] = useState<null | string>(null);
+    const [removeCustomCover, setRemoveCustomCover] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    useEffect(() => {
+        if (!pendingFile) {
+            setPendingPreviewUrl(null);
+            return;
+        }
+        const url = URL.createObjectURL(pendingFile);
+        setPendingPreviewUrl(url);
+        return () => URL.revokeObjectURL(url);
+    }, [pendingFile]);

    const form = useForm<UpdatePlaylistBody>({
        initialValues: {
@@ -47,91 +81,259 @@ export const UpdatePlaylistContextModal = ({
        },
    });

-    const handleSubmit = form.onSubmit((values) => {
-        mutation.mutate(
-            {
-                apiClientProps: { serverId: server?.id || '' },
+    const handleSubmit = form.onSubmit(async (values) => {
+        if (!server?.id) return;
+
+        setIsSaving(true);
+        try {
+            await updateMutation.mutateAsync({
+                apiClientProps: { serverId: server.id },
                body: values,
                query,
-            },
-            {
-                onError: (err) => {
-                    toast.error({
-                        message: err.message,
-                        title: t('error.genericError', { postProcess: 'sentenceCase' }),
-                    });
-                },
-                onSuccess: () => {
-                    toast.success({
-                        message: t('form.editPlaylist.success', { postProcess: 'sentenceCase' }),
-                    });
-                    closeModal(id);
-                },
-            },
-        );
+            });
+
+            if (pendingFile) {
+                const buffer = await pendingFile.arrayBuffer();
+                await uploadImageMutation.mutateAsync({
+                    apiClientProps: { serverId: server.id },
+                    body: { image: new Uint8Array(buffer) },
+                    query: { id: query.id },
+                });
+            } else if (removeCustomCover && playlistImage?.uploadedImage) {
+                await deleteImageMutation.mutateAsync({
+                    apiClientProps: { serverId: server.id },
+                    query: { id: query.id },
+                });
+            }
+
+            toast.success({
+                message: t('form.editPlaylist.success', { postProcess: 'sentenceCase' }),
+            });
+            closeModal(id);
+        } catch (err: any) {
+            toast.error({
+                message: err?.message,
+                title: t('error.genericError', { postProcess: 'sentenceCase' }),
+            });
+        } finally {
+            setIsSaving(false);
+        }
    });

    const isPublicDisplayed = hasFeature(server, ServerFeature.PUBLIC_PLAYLIST);
    const isOwnerDisplayed = server?.type === ServerType.NAVIDROME;
    const isCommentDisplayed = server?.type === ServerType.NAVIDROME;
-    const isSubmitDisabled = !form.values.name || mutation.isPending;
+    const isCoverImageDisplayed = hasFeature(server, ServerFeature.PLAYLIST_IMAGE_UPLOAD);
+    const isSubmitDisabled = !form.values.name || isSaving;
+    const hadUploadedCover = !!playlistImage?.uploadedImage;
+
+    const fieldNodes: ReactNode[] = [
+        <TextInput
+            data-autofocus
+            key="name"
+            label={t('form.createPlaylist.input', {
+                context: 'name',
+                postProcess: 'titleCase',
+            })}
+            required
+            {...form.getInputProps('name')}
+        />,
+    ];
+
+    if (isCommentDisplayed) {
+        fieldNodes.push(
+            <Textarea
+                autosize
+                key="comment"
+                label={t('form.createPlaylist.input', {
+                    context: 'description',
+                    postProcess: 'titleCase',
+                })}
+                minRows={5}
+                {...form.getInputProps('comment')}
+            />,
+        );
+    }
+
+    if (isOwnerDisplayed) {
+        fieldNodes.push(<OwnerSelect form={form} key="owner" />);
+    }
+
+    if (isPublicDisplayed) {
+        if (server?.type === ServerType.JELLYFIN) {
+            fieldNodes.push(
+                <div key="jellyfin-public-note">
+                    {t('form.editPlaylist.publicJellyfinNote', {
+                        postProcess: 'sentenceCase',
+                    })}
+                </div>,
+            );
+        }
+        fieldNodes.push(
+            <Switch
+                key="public"
+                label={t('form.createPlaylist.input', {
+                    context: 'public',
+                    postProcess: 'titleCase',
+                })}
+                {...form.getInputProps('public', { type: 'checkbox' })}
+            />,
+        );
+    }
+
+    fieldNodes.push(
+        <Group justify="flex-end" key="actions">
+            <ModalButton disabled={isSaving} onClick={() => closeModal(id)}>
+                {t('common.cancel')}
+            </ModalButton>
+            <ModalButton
+                disabled={isSubmitDisabled}
+                loading={isSaving}
+                type="submit"
+                variant="filled"
+            >
+                {t('common.save')}
+            </ModalButton>
+        </Group>,
+    );

    return (
        <form onSubmit={handleSubmit}>
-            <Stack>
-                <TextInput
-                    data-autofocus
-                    label={t('form.createPlaylist.input', {
-                        context: 'name',
-                        postProcess: 'titleCase',
-                    })}
-                    required
-                    {...form.getInputProps('name')}
-                />
-                {isCommentDisplayed && (
-                    <TextInput
-                        label={t('form.createPlaylist.input', {
-                            context: 'description',
-                            postProcess: 'titleCase',
-                        })}
-                        {...form.getInputProps('comment')}
+            {isCoverImageDisplayed ? (
+                <Flex align="flex-start" gap="lg" wrap="wrap">
+                    <PlaylistCoverField
+                        hadUploadedCover={hadUploadedCover}
+                        onClearPending={() => setPendingFile(null)}
+                        onFileSelect={(file) => {
+                            if (!file) return;
+                            setRemoveCustomCover(false);
+                            setPendingFile(file);
+                        }}
+                        onToggleRemoveCover={() => setRemoveCustomCover((v) => !v)}
+                        pendingFile={pendingFile}
+                        pendingPreviewUrl={pendingPreviewUrl}
+                        playlistImage={playlistImage}
+                        removeCustomCover={removeCustomCover}
                    />
-                )}
-                {isOwnerDisplayed && <OwnerSelect form={form} />}
-                {isPublicDisplayed && (
-                    <>
-                        {server?.type === ServerType.JELLYFIN && (
-                            <div>
-                                {t('form.editPlaylist.publicJellyfinNote', {
-                                    postProcess: 'sentenceCase',
-                                })}
-                            </div>
-                        )}
-                        <Switch
-                            label={t('form.createPlaylist.input', {
-                                context: 'public',
-                                postProcess: 'titleCase',
-                            })}
-                            {...form.getInputProps('public', { type: 'checkbox' })}
-                        />
-                    </>
-                )}
-                <Group justify="flex-end">
-                    <ModalButton onClick={() => closeModal(id)}>{t('common.cancel')}</ModalButton>
-                    <ModalButton
-                        disabled={isSubmitDisabled}
-                        loading={mutation.isPending}
-                        type="submit"
-                        variant="filled"
-                    >
-                        {t('common.save')}
-                    </ModalButton>
-                </Group>
-            </Stack>
+                    <Stack gap="md" style={{ flex: '1 1 220px', minWidth: 0 }}>
+                        {fieldNodes}
+                    </Stack>
+                </Flex>
+            ) : (
+                <Stack gap="md">{fieldNodes}</Stack>
+            )}
        </form>
    );
 };

+const COVER_SIZE = 240;
+
+function PlaylistCoverField({
+    hadUploadedCover,
+    onClearPending,
+    onFileSelect,
+    onToggleRemoveCover,
+    pendingFile,
+    pendingPreviewUrl,
+    playlistImage,
+    removeCustomCover,
+}: {
+    hadUploadedCover: boolean;
+    onClearPending: () => void;
+    onFileSelect: (file: File | null) => void;
+    onToggleRemoveCover: () => void;
+    pendingFile: File | null;
+    pendingPreviewUrl: null | string;
+    playlistImage?: PlaylistImageProps;
+    removeCustomCover: boolean;
+}) {
+    const server = useCurrentServer();
+
+    const showServerCover = !pendingPreviewUrl && !removeCustomCover;
+    const previewId = showServerCover ? playlistImage?.imageId || undefined : undefined;
+    const previewSrc = pendingPreviewUrl || (showServerCover ? playlistImage?.imageUrl || '' : '');
+
+    const secondaryAction = () => {
+        if (pendingFile) {
+            onClearPending();
+            return;
+        }
+        if (hadUploadedCover) {
+            onToggleRemoveCover();
+        }
+    };
+
+    const secondaryDisabled = !pendingFile && !hadUploadedCover;
+
+    const secondaryIcon = pendingFile ? 'x' : removeCustomCover ? 'arrowLeft' : 'delete';
+
+    const iconControls = (
+        <>
+            <FileButton accept="image/*" onChange={onFileSelect}>
+                {(props) => (
+                    <ActionIcon
+                        icon="uploadImage"
+                        iconProps={{ size: 'lg' }}
+                        radius="xl"
+                        size="sm"
+                        variant="default"
+                        {...props}
+                    />
+                )}
+            </FileButton>
+            <ActionIcon
+                disabled={secondaryDisabled}
+                icon={secondaryIcon}
+                iconProps={{ size: 'lg' }}
+                onClick={secondaryAction}
+                radius="xl"
+                size="sm"
+                variant="default"
+            />
+        </>
+    );
+
+    const coverArt = (
+        <ItemImage
+            enableViewport={false}
+            id={previewId}
+            itemType={LibraryItem.PLAYLIST}
+            serverId={server?.id}
+            src={previewSrc}
+            type="header"
+        />
+    );
+
+    return (
+        <Box
+            style={{
+                borderRadius: 'var(--mantine-radius-md)',
+                flexShrink: 0,
+                height: COVER_SIZE,
+                overflow: 'hidden',
+                position: 'relative',
+                width: COVER_SIZE,
+            }}
+        >
+            {coverArt}
+            <Group
+                gap={4}
+                style={{
+                    background: 'rgba(0, 0, 0, 0.55)',
+                    borderRadius: 'var(--mantine-radius-md)',
+                    bottom: 6,
+                    padding: 4,
+                    position: 'absolute',
+                    right: 6,
+                }}
+                wrap="nowrap"
+            >
+                {iconControls}
+            </Group>
+        </Box>
+    );
+}
+
 const OwnerSelect = ({ form }: { form: ReturnType<typeof useForm<UpdatePlaylistBody>> }) => {
    const serverId = useCurrentServerId();
    const permissions = usePermissions();
@@ -1,11 +1,17 @@
 import { openContextModal } from '@mantine/modals';

 import i18n from '/@/i18n/i18n';
+import { useAuthStore } from '/@/renderer/store';
+import { hasFeature } from '/@/shared/api/utils';
 import { Playlist } from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';

 export const openUpdatePlaylistModal = async (args: { playlist: Playlist }) => {
    const { playlist } = args;

+    const server = useAuthStore.getState().currentServer;
+    const hasImageUpload = hasFeature(server, ServerFeature.PLAYLIST_IMAGE_UPLOAD);
+
    openContextModal({
        innerProps: {
            body: {
@@ -17,9 +23,15 @@ export const openUpdatePlaylistModal = async (args: { playlist: Playlist }) => {
                queryBuilderRules: playlist?.rules || undefined,
                sync: playlist?.sync || undefined,
            },
+            playlistImage: {
+                imageId: playlist.imageId,
+                imageUrl: playlist.imageUrl,
+                uploadedImage: playlist.uploadedImage,
+            },
            query: { id: playlist?.id },
        },
        modalKey: 'updatePlaylist',
+        size: hasImageUpload ? 'lg' : 'md',
        title: i18n.t('form.editPlaylist.title', { postProcess: 'titleCase' }) as string,
    });
 };
@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import { DeletePlaylistImageArgs, DeletePlaylistImageResponse } from '/@/shared/types/domain-types';
+
+export const useDeletePlaylistImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<DeletePlaylistImageResponse, AxiosError, DeletePlaylistImageArgs, null>({
+        mutationFn: (args) => {
+            return api.controller.deletePlaylistImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps, query } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.playlists.list(serverId),
+            });
+
+            if (query?.id) {
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.playlists.detail(serverId, query.id),
+                });
+            }
+        },
+        ...options,
+    });
+};
@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import { SetPlaylistSongsArgs } from '/@/shared/types/domain-types';
+
+export const useUpdatePlaylistTracks = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<null, AxiosError, SetPlaylistSongsArgs, null>({
+        mutationFn: (args) =>
+            api.controller.setPlaylistSongs({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            }),
+        onSuccess: (_data, variables) => {
+            const { apiClientProps, body } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.playlists.list(serverId),
+            });
+
+            if (body?.id) {
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.playlists.detail(serverId, body.id),
+                });
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.playlists.songList(serverId, body.id),
+                });
+            }
+        },
+        ...options,
+    });
+};
@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import { UploadPlaylistImageArgs, UploadPlaylistImageResponse } from '/@/shared/types/domain-types';
+
+export const useUploadPlaylistImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<UploadPlaylistImageResponse, AxiosError, UploadPlaylistImageArgs, null>({
+        mutationFn: (args) => {
+            return api.controller.uploadPlaylistImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps, query } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.playlists.list(serverId),
+            });
+
+            if (query?.id) {
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.playlists.detail(serverId, query.id),
+                });
+            }
+        },
+        ...options,
+    });
+};
@@ -85,7 +85,12 @@ const PlaylistDetailSongListRoute = () => {

    const handleSave = (
        filter: Record<string, any>,
-        extraFilters: { limit?: number; sortBy?: string[]; sortOrder?: string },
+        extraFilters: {
+            limit?: number;
+            limitPercent?: number;
+            sortBy?: string[];
+            sortOrder?: string;
+        },
    ) => {
        if (!detailQuery?.data) return;

@@ -96,7 +101,8 @@ const PlaylistDetailSongListRoute = () => {

        const rules = {
            ...filter,
-            limit: extraFilters.limit || undefined,
+            limit: extraFilters.limit ?? undefined,
+            limitPercent: extraFilters.limitPercent ?? undefined,
            sort: sortValue,
        };

@@ -123,7 +129,12 @@ const PlaylistDetailSongListRoute = () => {

    const handleSaveAs = (
        filter: Record<string, any>,
-        extraFilters: { limit?: number; sortBy?: string[]; sortOrder?: string },
+        extraFilters: {
+            limit?: number;
+            limitPercent?: number;
+            sortBy?: string[];
+            sortOrder?: string;
+        },
    ) => {
        if (!detailQuery?.data) return;

@@ -134,7 +145,8 @@ const PlaylistDetailSongListRoute = () => {

        const rules = {
            ...filter,
-            limit: extraFilters.limit || undefined,
+            limit: extraFilters.limit ?? undefined,
+            limitPercent: extraFilters.limitPercent ?? undefined,
            sort: sortValue,
        };

@@ -36,7 +36,7 @@ export function playlistSongsToAlbums(songs: Song[]): PlaylistAlbumRow[] {
            mbzReleaseGroupId: null,
            name: song.album ?? '',
            originalDate: null,
-            originalYear: null,
+            originalYear: 0,
            participants: song.participants,
            playCount: null,
            recordLabels: [],
@@ -1,11 +1,19 @@
 import { t } from 'i18next';
-import { MouseEvent } from 'react';
+import { MouseEvent, type ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

+import { ItemImage } from '/@/renderer/components/item-image/item-image';
+import { useDeleteInternetRadioStationImage } from '/@/renderer/features/radio/mutations/delete-internet-radio-station-image-mutation';
 import { useUpdateRadioStation } from '/@/renderer/features/radio/mutations/update-radio-station-mutation';
+import { useUploadInternetRadioStationImage } from '/@/renderer/features/radio/mutations/upload-internet-radio-station-image-mutation';
 import { useCurrentServer } from '/@/renderer/store';
 import { logFn } from '/@/renderer/utils/logger';
 import { logMsg } from '/@/renderer/utils/logger-message';
+import { hasFeature } from '/@/shared/api/utils';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Box } from '/@/shared/components/box/box';
+import { FileButton } from '/@/shared/components/file-button/file-button';
+import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { closeAllModals, openModal } from '/@/shared/components/modal/modal';
 import { ModalButton } from '/@/shared/components/modal/model-shared';
@@ -15,19 +23,51 @@ import { toast } from '/@/shared/components/toast/toast';
 import { useForm } from '/@/shared/hooks/use-form';
 import {
    InternetRadioStation,
+    LibraryItem,
    ServerListItem,
    UpdateInternetRadioStationBody,
 } from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';

 interface EditRadioStationFormProps {
    onCancel: () => void;
    station: InternetRadioStation;
 }

+type RadioStationImageProps = {
+    imageId: null | string;
+    imageUrl: null | string;
+    uploadedImage?: string;
+};
+
 export const EditRadioStationForm = ({ onCancel, station }: EditRadioStationFormProps) => {
    const { t } = useTranslation();
-    const mutation = useUpdateRadioStation({});
+    const updateMutation = useUpdateRadioStation({});
+    const uploadImageMutation = useUploadInternetRadioStationImage({});
+    const deleteImageMutation = useDeleteInternetRadioStationImage({});
    const server = useCurrentServer();
+    const isCoverImageDisplayed = hasFeature(server, ServerFeature.INTERNET_RADIO_IMAGE_UPLOAD);
+
+    const stationImage: RadioStationImageProps = {
+        imageId: station.imageId ?? null,
+        imageUrl: station.imageUrl ?? null,
+        uploadedImage: station.uploadedImage ?? undefined,
+    };
+
+    const [pendingFile, setPendingFile] = useState<File | null>(null);
+    const [pendingPreviewUrl, setPendingPreviewUrl] = useState<null | string>(null);
+    const [removeCustomCover, setRemoveCustomCover] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    useEffect(() => {
+        if (!pendingFile) {
+            setPendingPreviewUrl(null);
+            return;
+        }
+        const url = URL.createObjectURL(pendingFile);
+        setPendingPreviewUrl(url);
+        return () => URL.revokeObjectURL(url);
+    }, [pendingFile]);

    const form = useForm<UpdateInternetRadioStationBody>({
        initialValues: {
@@ -37,74 +77,234 @@ export const EditRadioStationForm = ({ onCancel, station }: EditRadioStationForm
        },
    });

-    const handleSubmit = form.onSubmit((values) => {
-        if (!server) return;
+    const handleSubmit = form.onSubmit(async (values) => {
+        if (!server?.id) return;

-        mutation.mutate(
-            {
+        setIsSaving(true);
+        try {
+            await updateMutation.mutateAsync({
                apiClientProps: { serverId: server.id },
                body: values,
                query: { id: station.id },
-            },
-            {
-                onError: (error) => {
-                    logFn.error(logMsg.other.error, {
-                        meta: { error: error as Error },
-                    });
+            });

-                    toast.error({
-                        message: (error as Error).message,
-                        title: t('error.genericError', {
-                            postProcess: 'sentenceCase',
-                        }) as string,
-                    });
-                },
-                onSuccess: () => {
-                    closeAllModals();
-                },
-            },
-        );
+            if (pendingFile) {
+                const buffer = await pendingFile.arrayBuffer();
+                await uploadImageMutation.mutateAsync({
+                    apiClientProps: { serverId: server.id },
+                    body: { image: new Uint8Array(buffer) },
+                    query: { id: station.id },
+                });
+            } else if (removeCustomCover && stationImage.uploadedImage) {
+                await deleteImageMutation.mutateAsync({
+                    apiClientProps: { serverId: server.id },
+                    query: { id: station.id },
+                });
+            }
+
+            toast.success({
+                message: t('form.editRadioStation.success', {
+                    postProcess: 'sentenceCase',
+                }) as string,
+            });
+            closeAllModals();
+        } catch (err: unknown) {
+            logFn.error(logMsg.other.error, {
+                meta: { error: err as Error },
+            });
+
+            toast.error({
+                message: (err as Error)?.message,
+                title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
+            });
+        } finally {
+            setIsSaving(false);
+        }
    });

+    const isSubmitDisabled = !form.values.name || !form.values.streamUrl || isSaving;
+    const hadUploadedCover = !!stationImage.uploadedImage;
+
+    const fieldNodes: ReactNode[] = [
+        <TextInput
+            data-autofocus
+            key="name"
+            label={t('form.createRadioStation.input', {
+                context: 'name',
+                postProcess: 'titleCase',
+            })}
+            required
+            {...form.getInputProps('name')}
+        />,
+        <TextInput
+            key="streamUrl"
+            label={t('form.createRadioStation.input', {
+                context: 'streamUrl',
+                postProcess: 'titleCase',
+            })}
+            required
+            {...form.getInputProps('streamUrl')}
+        />,
+        <TextInput
+            key="homepageUrl"
+            label={t('form.createRadioStation.input', {
+                context: 'homepageUrl',
+                postProcess: 'titleCase',
+            })}
+            {...form.getInputProps('homepageUrl')}
+        />,
+        <Group justify="flex-end" key="actions">
+            <ModalButton disabled={isSaving} onClick={onCancel}>
+                {t('common.cancel')}
+            </ModalButton>
+            <ModalButton
+                disabled={isSubmitDisabled}
+                loading={isSaving}
+                type="submit"
+                variant="filled"
+            >
+                {t('common.save')}
+            </ModalButton>
+        </Group>,
+    ];
+
    return (
        <form onSubmit={handleSubmit}>
-            <Stack gap="md">
-                <TextInput
-                    label={t('form.createRadioStation.input', {
-                        context: 'name',
-                        postProcess: 'titleCase',
-                    })}
-                    required
-                    {...form.getInputProps('name')}
-                />
-                <TextInput
-                    label={t('form.createRadioStation.input', {
-                        context: 'streamUrl',
-                        postProcess: 'titleCase',
-                    })}
-                    required
-                    {...form.getInputProps('streamUrl')}
-                />
-                <TextInput
-                    label={t('form.createRadioStation.input', {
-                        context: 'homepageUrl',
-                        postProcess: 'titleCase',
-                    })}
-                    {...form.getInputProps('homepageUrl')}
-                />
-                <Group justify="flex-end">
-                    <ModalButton onClick={onCancel} variant="subtle">
-                        {t('common.cancel', { postProcess: 'sentenceCase' })}
-                    </ModalButton>
-                    <ModalButton loading={mutation.isPending} type="submit" variant="filled">
-                        {t('common.save', { postProcess: 'sentenceCase' })}
-                    </ModalButton>
-                </Group>
-            </Stack>
+            {isCoverImageDisplayed && server?.id ? (
+                <Flex align="flex-start" gap="lg" wrap="wrap">
+                    <RadioStationCoverField
+                        hadUploadedCover={hadUploadedCover}
+                        onClearPending={() => setPendingFile(null)}
+                        onFileSelect={(file) => {
+                            if (!file) return;
+                            setRemoveCustomCover(false);
+                            setPendingFile(file);
+                        }}
+                        onToggleRemoveCover={() => setRemoveCustomCover((v) => !v)}
+                        pendingFile={pendingFile}
+                        pendingPreviewUrl={pendingPreviewUrl}
+                        removeCustomCover={removeCustomCover}
+                        stationImage={stationImage}
+                    />
+                    <Stack gap="md" style={{ flex: '1 1 220px', minWidth: 0 }}>
+                        {fieldNodes}
+                    </Stack>
+                </Flex>
+            ) : (
+                <Stack gap="md">{fieldNodes}</Stack>
+            )}
        </form>
    );
 };

+const COVER_SIZE = 240;
+
+function RadioStationCoverField({
+    hadUploadedCover,
+    onClearPending,
+    onFileSelect,
+    onToggleRemoveCover,
+    pendingFile,
+    pendingPreviewUrl,
+    removeCustomCover,
+    stationImage,
+}: {
+    hadUploadedCover: boolean;
+    onClearPending: () => void;
+    onFileSelect: (file: File | null) => void;
+    onToggleRemoveCover: () => void;
+    pendingFile: File | null;
+    pendingPreviewUrl: null | string;
+    removeCustomCover: boolean;
+    stationImage: RadioStationImageProps;
+}) {
+    const server = useCurrentServer();
+
+    const showServerCover = !pendingPreviewUrl && !removeCustomCover;
+    const previewId = showServerCover ? stationImage.imageId || undefined : undefined;
+    const previewSrc = pendingPreviewUrl || (showServerCover ? stationImage.imageUrl || '' : '');
+
+    const secondaryAction = () => {
+        if (pendingFile) {
+            onClearPending();
+            return;
+        }
+        if (hadUploadedCover) {
+            onToggleRemoveCover();
+        }
+    };
+
+    const secondaryDisabled = !pendingFile && !hadUploadedCover;
+
+    const secondaryIcon = pendingFile ? 'x' : removeCustomCover ? 'arrowLeft' : 'delete';
+
+    const iconControls = (
+        <>
+            <FileButton accept="image/*" onChange={onFileSelect}>
+                {(props) => (
+                    <ActionIcon
+                        icon="uploadImage"
+                        iconProps={{ size: 'lg' }}
+                        radius="xl"
+                        size="sm"
+                        variant="default"
+                        {...props}
+                    />
+                )}
+            </FileButton>
+            <ActionIcon
+                disabled={secondaryDisabled}
+                icon={secondaryIcon}
+                iconProps={{ size: 'lg' }}
+                onClick={secondaryAction}
+                radius="xl"
+                size="sm"
+                variant="default"
+            />
+        </>
+    );
+
+    const coverArt = (
+        <ItemImage
+            enableViewport={false}
+            id={previewId}
+            itemType={LibraryItem.RADIO_STATION}
+            serverId={server?.id}
+            src={previewSrc}
+            type="header"
+        />
+    );
+
+    return (
+        <Box
+            style={{
+                borderRadius: 'var(--mantine-radius-md)',
+                flexShrink: 0,
+                height: COVER_SIZE,
+                overflow: 'hidden',
+                position: 'relative',
+                width: COVER_SIZE,
+            }}
+        >
+            {coverArt}
+            <Group
+                gap={4}
+                style={{
+                    background: 'rgba(0, 0, 0, 0.55)',
+                    borderRadius: 'var(--mantine-radius-md)',
+                    bottom: 6,
+                    padding: 4,
+                    position: 'absolute',
+                    right: 6,
+                }}
+                wrap="nowrap"
+            >
+                {iconControls}
+            </Group>
+        </Box>
+    );
+}
+
 export const openEditRadioStationModal = (
    station: InternetRadioStation,
    server: null | ServerListItem,
@@ -119,8 +319,11 @@ export const openEditRadioStationModal = (
        return;
    }

+    const hasImageUpload = hasFeature(server, ServerFeature.INTERNET_RADIO_IMAGE_UPLOAD);
+
    openModal({
        children: <EditRadioStationForm onCancel={closeAllModals} station={station} />,
+        size: hasImageUpload ? 'lg' : 'md',
        title: t('common.edit', { postProcess: 'titleCase' }) as string,
    });
 };
@@ -20,11 +20,55 @@

 .radio-item-button {
    all: unset;
+    box-sizing: border-box;
+    display: block;
    flex: 1;
    width: 100%;
+    min-width: 0;
+    text-align: left;
+    cursor: pointer;
+}
+
+.thumbnail {
+    flex-shrink: 0;
+    width: 3rem;
+    height: 3rem;
+    overflow: hidden;
+    border-radius: var(--mantine-radius-md);
+}
+
+.image-container {
+    width: 3rem;
+    height: 3rem;
+}
+
+.meta {
+    flex: 1;
+    min-width: 0;
+}
+
+.meta-line {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

 .radio-item-link {
    color: inherit;
    text-decoration: underline;
 }
+
+.radio-item-actions {
+    flex-shrink: 0;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.radio-item:hover .radio-item-actions,
+.radio-item:focus-within .radio-item-actions {
+    pointer-events: auto;
+    opacity: 1;
+}
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';

 import styles from './radio-list-items.module.css';

+import { ItemImage } from '/@/renderer/components/item-image/item-image';
 import { openEditRadioStationModal } from '/@/renderer/features/radio/components/edit-radio-station-form';
 import {
    useRadioControls,
@@ -12,15 +13,15 @@ import {
 import { useDeleteRadioStation } from '/@/renderer/features/radio/mutations/delete-radio-station-mutation';
 import { useCurrentServer, usePermissions } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Box } from '/@/shared/components/box/box';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
-import { Icon } from '/@/shared/components/icon/icon';
 import { closeAllModals, ConfirmModal, openModal } from '/@/shared/components/modal/modal';
 import { Paper } from '/@/shared/components/paper/paper';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
-import { InternetRadioStation } from '/@/shared/types/domain-types';
+import { InternetRadioStation, LibraryItem } from '/@/shared/types/domain-types';

 interface RadioListItemProps {
    station: InternetRadioStation;
@@ -44,8 +45,13 @@ const RadioListItem = ({ station }: RadioListItemProps) => {
    const handleClick = () => {
        if (stationIsPlaying) {
            stop();
-        } else {
-            play(station.streamUrl, station.name);
+        } else if (server?.id) {
+            play(station.streamUrl, station.name, {
+                id: station.id,
+                imageId: station.imageId,
+                imageUrl: station.imageUrl,
+                serverId: server.id,
+            });
        }
    };

@@ -107,27 +113,39 @@ const RadioListItem = ({ station }: RadioListItemProps) => {
            })}
            p="md"
        >
-            <Flex align="flex-start" gap="md" justify="space-between">
-                <button className={styles['radio-item-button']} onClick={handleClick} role="button">
-                    <Stack gap="xs">
-                        <Group gap="xs">
-                            <Icon color="muted" icon="radio" size="md" />
+            <Flex align="center" gap="md" justify="space-between" wrap="nowrap">
+                <button className={styles['radio-item-button']} onClick={handleClick} type="button">
+                    <Group align="center" gap="md" wrap="nowrap">
+                        <Box className={styles.thumbnail}>
+                            <ItemImage
+                                enableViewport={false}
+                                id={station.imageId ?? undefined}
+                                imageContainerProps={{
+                                    className: styles['image-container'],
+                                }}
+                                itemType={LibraryItem.RADIO_STATION}
+                                serverId={server?.id}
+                                src={station.imageUrl ?? ''}
+                                type="table"
+                            />
+                        </Box>
+                        <Stack className={styles.meta} gap={4}>
                            <Text fw={500} size="md">
                                {station.name}
                            </Text>
-                        </Group>
-                        <Text isMuted size="sm">
-                            {station.streamUrl}
-                        </Text>
-                        {station.homepageUrl && (
-                            <Text isMuted size="sm">
-                                {station.homepageUrl}
+                            <Text className={styles['meta-line']} isMuted size="sm">
+                                {station.streamUrl}
                            </Text>
-                        )}
-                    </Stack>
+                            {station.homepageUrl ? (
+                                <Text className={styles['meta-line']} isMuted size="sm">
+                                    {station.homepageUrl}
+                                </Text>
+                            ) : null}
+                        </Stack>
+                    </Group>
                </button>
                {(permissions.radio.edit || permissions.radio.delete) && (
-                    <Group gap="xs">
+                    <Group className={styles['radio-item-actions']} gap="xs">
                        {permissions.radio.edit && (
                            <ActionIcon
                                icon="edit"
@@ -7,6 +7,13 @@ import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/
 import { usePlaybackType, usePlayerStoreBase, useSettingsStore } from '/@/renderer/store';
 import { PlayerStatus, PlayerType } from '/@/shared/types/types';

+export type RadioCurrentStationArt = {
+    id: string;
+    imageId?: null | string;
+    imageUrl?: null | string;
+    serverId: string;
+};
+
 export interface RadioMetadata {
    artist: null | string;
    title: null | string;
@@ -15,13 +22,18 @@ export interface RadioMetadata {
 interface RadioStore {
    actions: {
        pause: () => void;
-        play: (streamUrl?: string, stationName?: string) => void;
+        play: (
+            streamUrl?: string,
+            stationName?: string,
+            stationArt?: null | RadioCurrentStationArt,
+        ) => void;
        setCurrentStreamUrl: (currentStreamUrl: null | string) => void;
        setIsPlaying: (isPlaying: boolean) => void;
        setMetadata: (metadata: null | RadioMetadata) => void;
        setStationName: (stationName: null | string) => void;
        stop: () => void;
    };
+    currentStationArt: null | RadioCurrentStationArt;
    currentStreamUrl: null | string;
    isPlaying: boolean;
    metadata: null | RadioMetadata;
@@ -34,7 +46,11 @@ export const useRadioStore = createWithEqualityFn<RadioStore>((set) => ({
            set({ isPlaying: false });
            usePlayerStoreBase.getState().mediaPause();
        },
-        play: (streamUrl?: string, stationName?: string) => {
+        play: (
+            streamUrl?: string,
+            stationName?: string,
+            stationArt?: null | RadioCurrentStationArt,
+        ) => {
            set((state) => {
                const newStreamUrl = streamUrl ?? state.currentStreamUrl;
                const newStationName = stationName ?? state.stationName;
@@ -43,12 +59,19 @@ export const useRadioStore = createWithEqualityFn<RadioStore>((set) => ({
                    return state;
                }

-                // Reset metadata when switching stations (streamUrl changes)
-                const isSwitchingStation = newStreamUrl !== state.currentStreamUrl;
+                const streamUrlExplicit = streamUrl !== undefined;
+                const isSwitchingStation =
+                    streamUrlExplicit && streamUrl !== state.currentStreamUrl;
+
+                let nextStationArt = state.currentStationArt;
+                if (isSwitchingStation) {
+                    nextStationArt = stationArt ?? null;
+                }

                usePlayerStoreBase.getState().mediaPlay();

                return {
+                    currentStationArt: nextStationArt,
                    currentStreamUrl: newStreamUrl,
                    isPlaying: true,
                    metadata: isSwitchingStation ? null : state.metadata,
@@ -64,6 +87,7 @@ export const useRadioStore = createWithEqualityFn<RadioStore>((set) => ({
            const playbackType = useSettingsStore.getState().playback.type;

            set({
+                currentStationArt: null,
                currentStreamUrl: null,
                isPlaying: false,
                metadata: null,
@@ -79,6 +103,7 @@ export const useRadioStore = createWithEqualityFn<RadioStore>((set) => ({
            }
        },
    },
+    currentStationArt: null,
    currentStreamUrl: null,
    isPlaying: false,
    metadata: null,
@@ -90,12 +115,14 @@ export const useIsPlayingRadio = () => useRadioStore((state) => state.isPlaying)
 export const useIsRadioActive = () => useRadioStore((state) => Boolean(state.currentStreamUrl));

 export const useRadioPlayer = () => {
+    const currentStationArt = useRadioStore((state) => state.currentStationArt);
    const currentStreamUrl = useRadioStore((state) => state.currentStreamUrl);
    const isPlaying = useRadioStore((state) => state.isPlaying);
    const metadata = useRadioStore((state) => state.metadata);
    const stationName = useRadioStore((state) => state.stationName);

    return {
+        currentStationArt,
        currentStreamUrl,
        isPlaying,
        metadata,
@@ -163,6 +190,7 @@ export const useRadioAudioInstance = () => {
            setIsPlaying(false);
            setCurrentStreamUrl(null);
            setStationName(null);
+            useRadioStore.setState({ currentStationArt: null, metadata: null });
        };

        mpvPlayerListener.rendererPlay(handleMpvPlay);
@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import {
+    DeleteInternetRadioStationImageArgs,
+    DeleteInternetRadioStationImageResponse,
+} from '/@/shared/types/domain-types';
+
+export const useDeleteInternetRadioStationImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<
+        DeleteInternetRadioStationImageResponse,
+        AxiosError,
+        DeleteInternetRadioStationImageArgs,
+        null
+    >({
+        mutationFn: (args) => {
+            return api.controller.deleteInternetRadioStationImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.radio.list(serverId),
+            });
+        },
+        ...options,
+    });
+};
@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import {
+    UploadInternetRadioStationImageArgs,
+    UploadInternetRadioStationImageResponse,
+} from '/@/shared/types/domain-types';
+
+export const useUploadInternetRadioStationImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<
+        UploadInternetRadioStationImageResponse,
+        AxiosError,
+        UploadInternetRadioStationImageArgs,
+        null
+    >({
+        mutationFn: (args) => {
+            return api.controller.uploadInternetRadioStationImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.radio.list(serverId),
+            });
+        },
+        ...options,
+    });
+};
@@ -1,9 +1,11 @@
-import { queryOptions } from '@tanstack/react-query';
+import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';

 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { SearchQuery } from '/@/shared/types/domain-types';
+import { SearchQuery, SearchResponse } from '/@/shared/types/domain-types';
+
+const SEARCH_PAGE_SIZE = 4;

 export const searchQueries = {
    search: (args: QueryHookArgs<SearchQuery>) => {
@@ -18,4 +20,103 @@ export const searchQueries = {
            ...args.options,
        });
    },
+    searchAlbumArtistsInfinite: (args: {
+        enabled?: boolean;
+        searchTerm: string;
+        serverId: string | undefined;
+    }) => {
+        const { enabled = true, searchTerm, serverId } = args;
+        return infiniteQueryOptions({
+            enabled: Boolean(serverId && searchTerm && enabled),
+            getNextPageParam: (lastPage: SearchResponse, allPages: SearchResponse[]) => {
+                const len = lastPage.albumArtists.length;
+                if (len < SEARCH_PAGE_SIZE) return undefined;
+                return allPages.length * SEARCH_PAGE_SIZE;
+            },
+            initialPageParam: 0,
+            queryFn: ({ pageParam, signal }) => {
+                if (!serverId) throw new Error('serverId required');
+                const startIndex = (pageParam ?? 0) as number;
+                return api.controller.search({
+                    apiClientProps: { serverId, signal },
+                    query: {
+                        albumArtistLimit: SEARCH_PAGE_SIZE,
+                        albumArtistStartIndex: startIndex,
+                        albumLimit: 0,
+                        albumStartIndex: 0,
+                        query: searchTerm,
+                        songLimit: 0,
+                        songStartIndex: 0,
+                    },
+                });
+            },
+            queryKey: queryKeys.search.infiniteList(serverId ?? '', 'albumArtists', searchTerm),
+        });
+    },
+    searchAlbumsInfinite: (args: {
+        enabled?: boolean;
+        searchTerm: string;
+        serverId: string | undefined;
+    }) => {
+        const { enabled = true, searchTerm, serverId } = args;
+        return infiniteQueryOptions({
+            enabled: Boolean(serverId && searchTerm && enabled),
+            getNextPageParam: (lastPage: SearchResponse, allPages: SearchResponse[]) => {
+                const len = lastPage.albums.length;
+                if (len < SEARCH_PAGE_SIZE) return undefined;
+                return allPages.length * SEARCH_PAGE_SIZE;
+            },
+            initialPageParam: 0,
+            queryFn: ({ pageParam, signal }) => {
+                if (!serverId) throw new Error('serverId required');
+                const startIndex = (pageParam ?? 0) as number;
+                return api.controller.search({
+                    apiClientProps: { serverId, signal },
+                    query: {
+                        albumArtistLimit: 0,
+                        albumArtistStartIndex: 0,
+                        albumLimit: SEARCH_PAGE_SIZE,
+                        albumStartIndex: startIndex,
+                        query: searchTerm,
+                        songLimit: 0,
+                        songStartIndex: 0,
+                    },
+                });
+            },
+            queryKey: queryKeys.search.infiniteList(serverId ?? '', 'albums', searchTerm),
+        });
+    },
+    searchSongsInfinite: (args: {
+        enabled?: boolean;
+        searchTerm: string;
+        serverId: string | undefined;
+    }) => {
+        const { enabled = true, searchTerm, serverId } = args;
+        return infiniteQueryOptions({
+            enabled: Boolean(serverId && searchTerm && enabled),
+            getNextPageParam: (lastPage: SearchResponse, allPages: SearchResponse[]) => {
+                const len = lastPage.songs.length;
+                if (len < SEARCH_PAGE_SIZE) return undefined;
+                return allPages.length * SEARCH_PAGE_SIZE;
+            },
+            initialPageParam: 0,
+            queryFn: ({ pageParam, signal }) => {
+                if (!serverId) throw new Error('serverId required');
+                const startIndex = (pageParam ?? 0) as number;
+                return api.controller.search({
+                    apiClientProps: { serverId, signal },
+                    query: {
+                        albumArtistLimit: 0,
+                        albumArtistStartIndex: 0,
+                        albumLimit: 0,
+                        albumStartIndex: 0,
+                        query: searchTerm,
+                        songLimit: SEARCH_PAGE_SIZE,
+                        songStartIndex: startIndex,
+                    },
+                });
+            },
+            queryKey: queryKeys.search.infiniteList(serverId ?? '', 'songs', searchTerm),
+        });
+    },
 };
@@ -0,0 +1,41 @@
+.root {
+    display: flex;
+    flex-direction: column;
+}
+
+
+.heading {
+    display: flex;
+    gap: var(--theme-spacing-xs);
+    align-items: center;
+    font-size: var(--theme-font-size-sm);
+    cursor: pointer;
+    user-select: none;
+    opacity: 0.8;
+}
+
+.heading:hover {
+    opacity: 1;
+}
+
+.heading:focus-visible {
+    outline: 2px solid var(--theme-colors-primary);
+    outline-offset: 2px;
+}
+
+.chevron {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    opacity: 0.9;
+}
+
+.subtitle {
+    display: flex;
+    align-items: center;
+}
+
+.items {
+    display: flex;
+    flex-direction: column;
+}
@@ -0,0 +1,69 @@
+import { ReactNode, useCallback, useState } from 'react';
+
+import styles from './collapsible-command-group.module.css';
+
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Paper } from '/@/shared/components/paper/paper';
+
+interface CollapsibleCommandGroupProps {
+    children: ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    heading: string;
+    onToggle?: () => void;
+    subtitle?: ReactNode;
+}
+
+export function CollapsibleCommandGroup({
+    children,
+    defaultExpanded = true,
+    expanded: controlledExpanded,
+    heading,
+    onToggle,
+    subtitle,
+}: CollapsibleCommandGroupProps) {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+
+    const isControlled = controlledExpanded !== undefined && onToggle !== undefined;
+    const expanded = isControlled ? controlledExpanded : internalExpanded;
+
+    const toggle = useCallback(() => {
+        if (isControlled) {
+            onToggle?.();
+        } else {
+            setInternalExpanded((prev) => !prev);
+        }
+    }, [isControlled, onToggle]);
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                toggle();
+            }
+        },
+        [toggle],
+    );
+
+    return (
+        <div className={styles.root}>
+            <Paper p="sm" radius="sm" withBorder>
+                <div
+                    className={styles.heading}
+                    onClick={toggle}
+                    onKeyDown={handleKeyDown}
+                    role="button"
+                    tabIndex={0}
+                >
+                    <Icon className={styles.chevron} icon={expanded ? 'dropdown' : 'arrowRightS'} />
+                    <Group justify="space-between" w="100%">
+                        <span>{heading}</span>
+                        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
+                    </Group>
+                </div>
+            </Paper>
+            {expanded && <div className={styles.items}>{children}</div>}
+        </div>
+    );
+}
@@ -1,45 +1,141 @@
-import { useQuery } from '@tanstack/react-query';
-import { Fragment, useCallback, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { generatePath, useNavigate } from 'react-router';
+import { useCallback, useRef, useState } from 'react';

-import { searchQueries } from '/@/renderer/features/search/api/search-api';
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
-import { CommandItemSelectable } from '/@/renderer/features/search/components/command-item-selectable';
 import { GoToCommands } from '/@/renderer/features/search/components/go-to-commands';
 import { HomeCommands } from '/@/renderer/features/search/components/home-commands';
-import { LibraryCommandItem } from '/@/renderer/features/search/components/library-command-item';
+import { SearchAlbumArtistsSection } from '/@/renderer/features/search/components/search-album-artists-section';
+import { SearchAlbumsSection } from '/@/renderer/features/search/components/search-albums-section';
+import { SearchSongsSection } from '/@/renderer/features/search/components/search-songs-section';
 import { ServerCommands } from '/@/renderer/features/search/components/server-commands';
-import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer } from '/@/renderer/store';
+import { useAppStore } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
-import { Box } from '/@/shared/components/box/box';
+import { Breadcrumb } from '/@/shared/components/breadcrumb/breadcrumb';
 import { Button } from '/@/shared/components/button/button';
+import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Kbd } from '/@/shared/components/kbd/kbd';
 import { Modal } from '/@/shared/components/modal/modal';
-import { Spinner } from '/@/shared/components/spinner/spinner';
+import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
-import { LibraryItem } from '/@/shared/types/domain-types';

 interface CommandPaletteProps {
    modalProps: (typeof useDisclosure)['arguments'];
 }

+const SEARCH_SECTION_IDS = {
+    albums: 'albums',
+    artists: 'artists',
+    tracks: 'tracks',
+} as const;
+
+interface CommandPaletteSearchProps {
+    children?: React.ReactNode;
+    isHome: boolean;
+    onSelectResult: () => void;
+    query: string;
+    searchInputRef: React.RefObject<HTMLInputElement | null>;
+    setQuery: (query: string) => void;
+}
+
+function CommandPaletteSearch({
+    children,
+    isHome,
+    onSelectResult,
+    query,
+    searchInputRef,
+    setQuery,
+}: CommandPaletteSearchProps) {
+    const [debouncedQuery] = useDebouncedValue(query, 400);
+    const searchSectionsExpanded = useAppStore(
+        (state) => state.commandPaletteSearchSectionsExpanded,
+    );
+    const setSearchSectionExpanded = useAppStore(
+        (state) => state.actions.setCommandPaletteSearchSectionExpanded,
+    );
+
+    return (
+        <>
+            <TextInput
+                data-autofocus
+                leftSection={<Icon icon="search" />}
+                onChange={(e) => setQuery(e.currentTarget.value)}
+                ref={searchInputRef}
+                rightSection={
+                    query && (
+                        <ActionIcon
+                            onClick={() => {
+                                setQuery('');
+                                searchInputRef.current?.focus();
+                            }}
+                            variant="transparent"
+                        >
+                            <Icon icon="x" />
+                        </ActionIcon>
+                    )
+                }
+                size="sm"
+                value={query}
+            />
+            <Divider my="sm" />
+            <Command.List>
+                <Stack gap="xs">
+                    <SearchAlbumsSection
+                        debouncedQuery={debouncedQuery ?? ''}
+                        expanded={searchSectionsExpanded[SEARCH_SECTION_IDS.albums] ?? true}
+                        isHome={isHome}
+                        onSelectResult={onSelectResult}
+                        onToggle={() =>
+                            setSearchSectionExpanded(
+                                SEARCH_SECTION_IDS.albums,
+                                !(searchSectionsExpanded[SEARCH_SECTION_IDS.albums] ?? true),
+                            )
+                        }
+                        query={query}
+                    />
+                    <SearchAlbumArtistsSection
+                        debouncedQuery={debouncedQuery ?? ''}
+                        expanded={searchSectionsExpanded[SEARCH_SECTION_IDS.artists] ?? true}
+                        isHome={isHome}
+                        onSelectResult={onSelectResult}
+                        onToggle={() =>
+                            setSearchSectionExpanded(
+                                SEARCH_SECTION_IDS.artists,
+                                !(searchSectionsExpanded[SEARCH_SECTION_IDS.artists] ?? true),
+                            )
+                        }
+                        query={query}
+                    />
+                    <SearchSongsSection
+                        debouncedQuery={debouncedQuery ?? ''}
+                        expanded={searchSectionsExpanded[SEARCH_SECTION_IDS.tracks] ?? true}
+                        isHome={isHome}
+                        onSelectResult={onSelectResult}
+                        onToggle={() =>
+                            setSearchSectionExpanded(
+                                SEARCH_SECTION_IDS.tracks,
+                                !(searchSectionsExpanded[SEARCH_SECTION_IDS.tracks] ?? true),
+                            )
+                        }
+                        query={query}
+                    />
+                </Stack>
+                {children}
+            </Command.List>
+        </>
+    );
+}
+
 export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
-    const navigate = useNavigate();
-    const server = useCurrentServer();
    const [value, setValue] = useState('');
    const [query, setQuery] = useState('');
-    const [debouncedQuery] = useDebouncedValue(query, 400);
    const [pages, setPages] = useState<CommandPalettePages[]>([CommandPalettePages.HOME]);
    const activePage = pages[pages.length - 1];
    const isHome = activePage === CommandPalettePages.HOME;
+    const commandRootRef = useRef<HTMLDivElement>(null);
    const searchInputRef = useRef<HTMLInputElement>(null);
-    const { t } = useTranslation();

    const popPage = useCallback(() => {
        setPages((pages) => {
@@ -49,25 +145,10 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
        });
    }, []);

-    const { data, isLoading } = useQuery(
-        searchQueries.search({
-            options: { enabled: isHome && debouncedQuery !== '' && query !== '' },
-            query: {
-                albumArtistLimit: 4,
-                albumArtistStartIndex: 0,
-                albumLimit: 4,
-                albumStartIndex: 0,
-                query: debouncedQuery,
-                songLimit: 4,
-                songStartIndex: 0,
-            },
-            serverId: server?.id,
-        }),
-    );
-
-    const showAlbumGroup = isHome && Boolean(query && data && data?.albums?.length > 0);
-    const showArtistGroup = isHome && Boolean(query && data && data?.albumArtists?.length > 0);
-    const showTrackGroup = isHome && Boolean(query && data && data?.songs?.length > 0);
+    const handleSelectResult = useCallback(() => {
+        modalProps.handlers.close();
+        setQuery('');
+    }, [modalProps.handlers]);

    return (
        <Modal
@@ -94,19 +175,10 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
            }}
            size="lg"
            styles={{
+                body: { padding: '0' },
                header: { display: 'none' },
            }}
        >
-            <Group gap="sm" mb="1rem">
-                {pages.map((page, index) => (
-                    <Fragment key={page}>
-                        {index > 0 && ' > '}
-                        <Button disabled size="compact-md" variant="default">
-                            {page?.toLocaleUpperCase()}
-                        </Button>
-                    </Fragment>
-                ))}
-            </Group>
            <Command
                filter={(value, search) => {
                    if (value.includes(search)) return 1;
@@ -115,147 +187,45 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
                }}
                label="Global Command Menu"
                onKeyDown={(e) => {
-                    // Focus the search input when navigating with arrow keys
-                    // to prevent the focus from staying on the command-item ActionIcon
                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                        searchInputRef.current?.focus();
                    }
+
+                    if (e.key === 'Tab' && !e.shiftKey) {
+                        const root = commandRootRef.current;
+                        if (!root) return;
+
+                        const selectedItem = root.querySelector(
+                            '[cmdk-item][aria-selected="true"]',
+                        ) as HTMLElement | null;
+
+                        if (!selectedItem) return;
+
+                        const focusTarget = selectedItem.querySelector(
+                            'button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+                        ) as HTMLElement | null;
+
+                        if (!focusTarget) return;
+
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        requestAnimationFrame(() => {
+                            focusTarget.focus();
+                        });
+                    }
                }}
                onValueChange={setValue}
+                ref={commandRootRef}
                value={value}
            >
-                <TextInput
-                    data-autofocus
-                    leftSection={<Icon icon="search" />}
-                    onChange={(e) => setQuery(e.currentTarget.value)}
-                    ref={searchInputRef}
-                    rightSection={
-                        query && (
-                            <ActionIcon
-                                onClick={() => {
-                                    setQuery('');
-                                    searchInputRef.current?.focus();
-                                }}
-                                variant="transparent"
-                            >
-                                <Icon icon="x" />
-                            </ActionIcon>
-                        )
-                    }
-                    size="sm"
-                    value={query}
-                />
-                <Command.Separator />
-                <Command.List>
-                    <Command.Empty>No results found.</Command.Empty>
-                    {showAlbumGroup && (
-                        <Command.Group heading="Albums">
-                            {data?.albums?.map((album) => (
-                                <CommandItemSelectable
-                                    key={`search-album-${album.id}`}
-                                    onSelect={() => {
-                                        navigate(
-                                            generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
-                                                albumId: album.id,
-                                            }),
-                                        );
-                                        modalProps.handlers.close();
-                                        setQuery('');
-                                    }}
-                                    value={`search-${album.id}`}
-                                >
-                                    {({ isHighlighted }) => (
-                                        <LibraryCommandItem
-                                            explicitStatus={album.explicitStatus}
-                                            id={album.id}
-                                            imageId={album.imageId}
-                                            imageUrl={album.imageUrl}
-                                            isHighlighted={isHighlighted}
-                                            itemType={LibraryItem.ALBUM}
-                                            subtitle={album.albumArtists
-                                                .map((artist) => artist.name)
-                                                .join(', ')}
-                                            title={album.name}
-                                        />
-                                    )}
-                                </CommandItemSelectable>
-                            ))}
-                        </Command.Group>
-                    )}
-                    {showArtistGroup && (
-                        <Command.Group heading="Artists">
-                            {data?.albumArtists.map((artist) => (
-                                <CommandItemSelectable
-                                    key={`artist-${artist.id}`}
-                                    onSelect={() => {
-                                        navigate(
-                                            generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                                albumArtistId: artist.id,
-                                            }),
-                                        );
-                                        modalProps.handlers.close();
-                                        setQuery('');
-                                    }}
-                                    value={`search-${artist.id}`}
-                                >
-                                    {({ isHighlighted }) => (
-                                        <LibraryCommandItem
-                                            disabled={artist?.albumCount === 0}
-                                            id={artist.id}
-                                            imageId={artist.imageId}
-                                            imageUrl={artist.imageUrl}
-                                            isHighlighted={isHighlighted}
-                                            itemType={LibraryItem.ALBUM_ARTIST}
-                                            subtitle={
-                                                artist?.albumCount !== undefined &&
-                                                artist?.albumCount !== null
-                                                    ? t('entity.albumWithCount', {
-                                                          count: artist.albumCount,
-                                                      })
-                                                    : undefined
-                                            }
-                                            title={artist.name}
-                                        />
-                                    )}
-                                </CommandItemSelectable>
-                            ))}
-                        </Command.Group>
-                    )}
-                    {showTrackGroup && (
-                        <Command.Group heading="Tracks">
-                            {data?.songs.map((song) => (
-                                <CommandItemSelectable
-                                    key={`artist-${song.id}`}
-                                    onSelect={() => {
-                                        navigate(
-                                            generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
-                                                albumId: song.albumId,
-                                            }),
-                                        );
-                                        modalProps.handlers.close();
-                                        setQuery('');
-                                    }}
-                                    value={`search-${song.id}`}
-                                >
-                                    {({ isHighlighted }) => (
-                                        <LibraryCommandItem
-                                            explicitStatus={song.explicitStatus}
-                                            id={song.id}
-                                            imageId={song.imageId}
-                                            imageUrl={song.imageUrl}
-                                            isHighlighted={isHighlighted}
-                                            itemType={LibraryItem.SONG}
-                                            song={song}
-                                            subtitle={song.artists
-                                                .map((artist) => artist.name)
-                                                .join(', ')}
-                                            title={song.name}
-                                        />
-                                    )}
-                                </CommandItemSelectable>
-                            ))}
-                        </Command.Group>
-                    )}
+                <CommandPaletteSearch
+                    isHome={isHome}
+                    onSelectResult={handleSelectResult}
+                    query={query}
+                    searchInputRef={searchInputRef}
+                    setQuery={setQuery}
+                >
                    {activePage === CommandPalettePages.HOME && (
                        <HomeCommands
                            handleClose={modalProps.handlers.close}
@@ -279,21 +249,30 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
                            setQuery={setQuery}
                        />
                    )}
-                </Command.List>
+                </CommandPaletteSearch>
            </Command>
-            <Box mt="0.5rem" p="0.5rem">
-                <Group justify="space-between">
-                    <Command.Loading>
-                        {isHome && isLoading && query !== '' && <Spinner />}
-                    </Command.Loading>
-                    <Group gap="sm">
-                        <Kbd size="md">ESC</Kbd>
-                        <Kbd size="md">↑</Kbd>
-                        <Kbd size="md">↓</Kbd>
-                        <Kbd size="md">⏎</Kbd>
-                    </Group>
+            <Divider my="sm" />
+            <Group justify="space-between">
+                <Breadcrumb separator={<Icon icon="arrowRight" />}>
+                    {pages.map((page, index) => (
+                        <Button
+                            key={page}
+                            onClick={() => setPages((prev) => prev.slice(0, index + 1))}
+                            size="compact-xs"
+                            variant="subtle"
+                        >
+                            {page?.toLocaleUpperCase()}
+                        </Button>
+                    ))}
+                </Breadcrumb>
+
+                <Group gap="sm">
+                    <Kbd size="md">ESC</Kbd>
+                    <Kbd size="md">↑</Kbd>
+                    <Kbd size="md">↓</Kbd>
+                    <Kbd size="md">⏎</Kbd>
                </Group>
-            </Box>
+            </Group>
        </Modal>
    );
 };
@@ -14,7 +14,7 @@ input[cmdk-input] {
 [cmdk-group-items] {
    display: flex;
    flex-direction: column;
-    gap: var(--theme-spacing-xs);
+    gap: 0;
 }

 [cmdk-item] {
@@ -32,3 +32,14 @@
    background: alpha(var(--theme-colors-foreground-muted), 0.3);
    border-radius: 4px;
 }
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        width: var(--theme-font-size-sm);
+        height: var(--theme-font-size-sm);
+    }
+}
@@ -16,6 +16,24 @@ import { Text } from '/@/shared/components/text/text';
 import { ExplicitStatus, LibraryItem, Song } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';

+const createPlayKeyDownHandler = (
+    playType: Play,
+    disabled: boolean,
+    onPlay: (type: Play) => void,
+) => {
+    return (e: React.KeyboardEvent) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!disabled) {
+                onPlay(playType);
+            }
+        } else if (e.key === 'Tab') {
+            e.stopPropagation();
+        }
+    };
+};
+
 interface LibraryCommandItemProps {
    disabled?: boolean;
    explicitStatus?: ExplicitStatus | null;
@@ -113,35 +131,53 @@ export const LibraryCommandItem = ({
                </div>
                <div className={styles.metadataWrapper}>
                    <Text overflow="hidden">{title}</Text>
-                    <Text isMuted overflow="hidden">
+                    <Text isMuted overflow="hidden" size="sm">
                        {subtitle}
                    </Text>
                </div>
            </div>
            {showControls && (
-                <ActionIconGroup>
+                <ActionIconGroup className={styles.controls}>
                    <PlayTooltip disabled={disabled} type={Play.NOW}>
                        <ActionIcon
                            icon="mediaPlay"
-                            variant="subtle"
+                            size="xs"
+                            variant="default"
                            {...handlePlayNow.handlers}
                            {...handlePlayNow.props}
+                            onKeyDown={createPlayKeyDownHandler(
+                                Play.NOW,
+                                Boolean(disabled ?? handlePlayNow.props.disabled),
+                                handlePlay,
+                            )}
                        />
                    </PlayTooltip>
                    <PlayTooltip disabled={disabled} type={Play.NEXT}>
                        <ActionIcon
                            icon="mediaPlayNext"
-                            variant="subtle"
+                            size="xs"
+                            variant="default"
                            {...handlePlayNext.handlers}
                            {...handlePlayNext.props}
+                            onKeyDown={createPlayKeyDownHandler(
+                                Play.NEXT,
+                                Boolean(disabled ?? handlePlayNext.props.disabled),
+                                handlePlay,
+                            )}
                        />
                    </PlayTooltip>
                    <PlayTooltip disabled={disabled} type={Play.LAST}>
                        <ActionIcon
                            icon="mediaPlayLast"
-                            variant="subtle"
+                            size="xs"
+                            variant="default"
                            {...handlePlayLast.handlers}
                            {...handlePlayLast.props}
+                            onKeyDown={createPlayKeyDownHandler(
+                                Play.LAST,
+                                Boolean(disabled ?? handlePlayLast.props.disabled),
+                                handlePlay,
+                            )}
                        />
                    </PlayTooltip>
                </ActionIconGroup>
@@ -0,0 +1,162 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { nanoid } from 'nanoid/non-secure';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createSearchParams, generatePath, useNavigate } from 'react-router';
+
+import { searchQueries } from '/@/renderer/features/search/api/search-api';
+import { CollapsibleCommandGroup } from '/@/renderer/features/search/components/collapsible-command-group';
+import { CommandItemSelectable } from '/@/renderer/features/search/components/command-item-selectable';
+import { LibraryCommandItem } from '/@/renderer/features/search/components/library-command-item';
+import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useCurrentServer } from '/@/renderer/store';
+import { Box } from '/@/shared/components/box/box';
+import { Button } from '/@/shared/components/button/button';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+import { Text } from '/@/shared/components/text/text';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+interface SearchAlbumArtistsSectionProps {
+    debouncedQuery: string;
+    expanded: boolean;
+    isHome: boolean;
+    onSelectResult: () => void;
+    onToggle: () => void;
+    query: string;
+}
+
+export function SearchAlbumArtistsSection({
+    debouncedQuery,
+    expanded,
+    isHome,
+    onSelectResult,
+    onToggle,
+    query,
+}: SearchAlbumArtistsSectionProps) {
+    const navigate = useNavigate();
+    const server = useCurrentServer();
+    const { t } = useTranslation();
+
+    const { data, fetchNextPage, hasNextPage, isFetched, isFetchingNextPage, isLoading } =
+        useInfiniteQuery(
+            searchQueries.searchAlbumArtistsInfinite({
+                enabled: isHome && debouncedQuery !== '' && query !== '',
+                searchTerm: debouncedQuery,
+                serverId: server?.id,
+            }),
+        );
+
+    const artists = data?.pages.flatMap((p) => p.albumArtists) ?? [];
+    const showSection = isHome;
+    const numberOfResults = hasNextPage ? `${artists.length}+` : artists.length;
+
+    const handleGoToPage = useCallback(() => {
+        navigate(
+            {
+                pathname: AppRoute.LIBRARY_ALBUM_ARTISTS,
+                search: createSearchParams({
+                    [FILTER_KEYS.SHARED.SEARCH_TERM]: debouncedQuery || query,
+                }).toString(),
+            },
+            { state: { navigationId: nanoid() } },
+        );
+        onSelectResult();
+    }, [debouncedQuery, navigate, onSelectResult, query]);
+
+    if (!showSection) return null;
+
+    return (
+        <CollapsibleCommandGroup
+            expanded={expanded}
+            heading={t('entity.albumArtist', { count: 2, postProcess: 'titleCase' })}
+            onToggle={onToggle}
+            subtitle={
+                isFetched ? (
+                    <>
+                        {query ? (
+                            <Button
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleGoToPage();
+                                }}
+                                onKeyDown={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }}
+                                size="compact-xs"
+                                variant="filled"
+                                w="8rem"
+                            >
+                                {t('common.numberOfResults', { numberOfResults })}
+                            </Button>
+                        ) : null}
+                    </>
+                ) : undefined
+            }
+        >
+            {isLoading ? (
+                <Box p="md">
+                    <Spinner container />
+                </Box>
+            ) : (
+                <>
+                    {artists.map((artist) => (
+                        <CommandItemSelectable
+                            key={`search-artist-${artist.id}`}
+                            onSelect={() => {
+                                navigate(
+                                    generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                        albumArtistId: artist.id,
+                                    }),
+                                );
+                                onSelectResult();
+                            }}
+                            value={`search-artist-${artist.id}`}
+                        >
+                            {({ isHighlighted }) => (
+                                <LibraryCommandItem
+                                    disabled={artist?.albumCount === 0}
+                                    id={artist.id}
+                                    imageId={artist.imageId}
+                                    imageUrl={artist.imageUrl}
+                                    isHighlighted={isHighlighted}
+                                    itemType={LibraryItem.ALBUM_ARTIST}
+                                    subtitle={
+                                        artist?.albumCount !== undefined &&
+                                        artist?.albumCount !== null
+                                            ? t('entity.albumWithCount', {
+                                                  count: artist.albumCount,
+                                              })
+                                            : undefined
+                                    }
+                                    title={artist.name}
+                                />
+                            )}
+                        </CommandItemSelectable>
+                    ))}
+                    {hasNextPage && (
+                        <CommandItemSelectable
+                            disabled={isFetchingNextPage}
+                            onSelect={() => fetchNextPage()}
+                            value="search-artists-load-more"
+                        >
+                            {() => (
+                                <Text>
+                                    {isFetchingNextPage ? (
+                                        <Spinner />
+                                    ) : (
+                                        <Text size="sm">
+                                            {t('action.viewMore', { postProcess: 'titleCase' })}
+                                        </Text>
+                                    )}
+                                </Text>
+                            )}
+                        </CommandItemSelectable>
+                    )}
+                </>
+            )}
+        </CollapsibleCommandGroup>
+    );
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
jeffvli	5900d41e0a	handle sticky elements on new layout	2026-04-04 13:42:50 -07:00
jeffvli	efe94b3a3b	inset the windowbar	2026-04-04 13:25:35 -07:00
jeffvli	231b6f3865	inset the playerbar	2026-04-04 13:21:22 -07:00
jeffvli	2fbd3ab02d	inset the main content / sidebars	2026-04-04 13:21:01 -07:00
jeffvli	141a20f042	refactor item table props	2026-04-04 12:34:27 -07:00
jeffvli	1592204515	add fallback sort order for subsonic playlist list	2026-04-04 12:03:41 -07:00
jeffvli	b9f5459725	fix layout shift on grid carousel page change	2026-04-03 20:25:12 -07:00
jeffvli	d4e9b9b7a6	adjust bg loading on album detail page	2026-04-03 20:11:10 -07:00
jeffvli	ec9e4b1339	fix type error due to new param on mediaStop	2026-04-03 19:09:42 -07:00
Hosted Weblate	f09109b887	Translated using Weblate Currently translated at 100.0% (1194 of 1194 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Translated using Weblate Currently translated at 100.0% (1194 of 1194 strings) (Polish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pl/ Translated using Weblate Currently translated at 100.0% (1194 of 1194 strings) (Chinese (Traditional Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hant/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (French) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/fr/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Polish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pl/ Co-authored-by: Fjuro <fjuro@users.noreply.hosted.weblate.org> Co-authored-by: Hosted Weblate <hosted@weblate.org> Co-authored-by: KosmoMoustache <kosmomoustache@users.noreply.hosted.weblate.org> Co-authored-by: York <goog10216922@gmail.com> Co-authored-by: skajmer <skajmer@protonmail.com>	2026-04-04 04:05:50 +02:00
jeffvli	1494c8e044	fix mpv seek error on queue end	2026-04-03 19:05:34 -07:00
jeffvli	f3a6027e6d	fix mpv progress interval still running after queue ends	2026-04-03 18:58:58 -07:00
jeffvli	3c42355c1e	attempt to fix mpv playback sync on song insertion (#1855 )	2026-04-03 18:54:49 -07:00
jeffvli	feda1bb06f	remove square image param, default item id for image	2026-04-03 11:24:39 -07:00
jeffvli	72f1d2f9f9	improve date parsing for partial dates (#1683 )	2026-04-02 19:39:08 -07:00
jeffvli	ad11a9303c	add playlist description to expanded header	2026-04-02 18:36:42 -07:00
jeffvli	db06e7f601	add native nd radio endpoints, support radio station images	2026-04-02 18:26:26 -07:00
jeffvli	fbf82c1ef0	add playlist image upload to edit playlist modal	2026-04-02 17:41:25 -07:00
jeffvli	92cea5dfda	add log for direct play profiles	2026-04-02 01:27:14 -07:00
jeffvli	7442f9d3ca	support navidrome playlist image upload	2026-04-02 01:23:09 -07:00
jeffvli	68dacea228	use resized images in artist header	2026-04-01 21:57:32 -07:00
jeffvli	51425b5e86	various performance refactors	2026-04-01 21:57:26 -07:00
jeffvli	c60610cb42	lint files	2026-03-31 21:12:48 -07:00
jeffvli	d3881ee3be	support limitPercent for smart playlists	2026-03-31 21:09:13 -07:00
jeffvli	de403ea6ac	add new nd smart playlist fields - averagerating - albumdateloved - albumlastplayed - albumdaterated - albumloved - albumrating - artistdateloved -artistlastplayed - artistdaterated - artistloved - artistplaycount	2026-03-31 20:55:36 -07:00
jeffvli	a30b1ec90b	add OS transcoding extension	2026-03-31 20:45:22 -07:00
Hosted Weblate	7982c0e1bd	Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Chinese (Simplified Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hans/ Translated using Weblate Currently translated at 83.4% (996 of 1193 strings) (Basque) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/eu/ Co-authored-by: Aitor Astorga <a.astorga.sdv@protonmail.com> Co-authored-by: 無情天 <kofzhanganguo@126.com>	2026-03-31 16:09:57 +02:00
dependabot[bot]	baf4e7bc0b	Bump fast-xml-parser in the npm_and_yarn group across 1 directory (#1777 ) Bumps the npm_and_yarn group with 1 update in the / directory: [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser). Updates `fast-xml-parser` from 5.3.6 to 5.3.8 - [Release notes](https://github.com/NaturalIntelligence/fast-xml-parser/releases) - [Changelog](https://github.com/NaturalIntelligence/fast-xml-parser/blob/master/CHANGELOG.md) - [Commits](https://github.com/NaturalIntelligence/fast-xml-parser/compare/v5.3.6...v5.3.8) --- updated-dependencies: - dependency-name: fast-xml-parser dependency-version: 5.3.8 dependency-type: direct:production dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-03-29 21:43:31 -07:00
Sutaai	74c44558fe	fix: window bar disappearing in Glassy Dark (#1878 ) * fix: glassy dark content container claiming entire width (#1713) * fix: apply container height fix only when using window bar --------- Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>	2026-03-29 21:43:08 -07:00
Pyx	4033619421	glassy dark theme improvements (#1844 ) * glassy dark theme improvements	2026-03-29 21:27:56 -07:00
jeffvli	5d206bbb1f	toggle fullscreen visualizer on left controls image (#1857 )	2026-03-29 21:05:53 -07:00
Hosted Weblate	3db801f2de	Translated using Weblate Currently translated at 89.1% (1063 of 1193 strings) (German) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/de/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Czech) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Japanese) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ja/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Spanish) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Update translation files Updated by "Cleanup translation files" hook in Weblate. Translated using Weblate Currently translated at 100.0% (1194 of 1194 strings) (Chinese (Traditional Han script)) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hant/ Co-authored-by: Fjuro <fjuro@users.noreply.hosted.weblate.org> Co-authored-by: Fordas <fordas15@gmail.com> Co-authored-by: Hosted Weblate <hosted@weblate.org> Co-authored-by: PhillyMay <mein.alias@outlook.com> Co-authored-by: karigane <169052233+karigane-cha@users.noreply.github.com> Co-authored-by: linger <linger0517@gmail.com> Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ Translation: feishin/Translation	2026-03-30 05:34:25 +02:00
ebee04	0d3cf912d3	fix click on feishin icon in macos menu bar (tray) causing switch to feishin window (#1881 )	2026-03-29 20:34:18 -07:00
jeffvli	d81f30a8b5	disable lyrics on radio playback (#1885 )	2026-03-29 20:33:31 -07:00
Kendall Garner	a5c3b454f4	add flathub to readme	2026-03-28 21:33:51 -07:00
Kendall Garner	68e6e3cf65	feat(playlist): support updating playlist track order (#1875 ) * feat(playlist): support updating playlist track order * force track mode when editing * use common confirmation for save * remove en editPLaylist key	2026-03-27 21:36:08 -07:00
Romain VIGNERES	86e6b88555	feat(albums): show grouping tags on album detail page (#1872 ) * feat(albums): show grouping tags on album detail page --------- Co-authored-by: Romain VIGNERES <romain.vigneres@texa.fr>	2026-03-27 18:51:44 -07:00
jeffvli	5cdc45836f	rework queue persistence (#1862 )	2026-03-27 18:48:38 -07:00
Kendall Garner	d438c802a4	fix(normalize): do not duplicate remixer when included in credit	2026-03-27 18:46:12 -07:00
Hosted Weblate	a838bdebb7	Translated using Weblate Currently translated at 79.5% (949 of 1193 strings) (Basque) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/eu/ Co-authored-by: Aitor Astorga <a.astorga.sdv@protonmail.com>	2026-03-27 20:09:51 +01:00
Hosted Weblate	8ff2f4dfb4	Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Chinese (Traditional Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hant/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Japanese) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ja/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1193 of 1193 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Co-authored-by: Fjuro <fjuro@users.noreply.hosted.weblate.org> Co-authored-by: Fordas <fordas15@gmail.com> Co-authored-by: York <goog10216922@gmail.com> Co-authored-by: karigane <169052233+karigane-cha@users.noreply.github.com>	2026-03-26 08:09:54 +01:00
jeffvli	ede47fbf8f	fix missing artist name in lyrics search query for lrclib (#1871 )	2026-03-25 17:49:50 -07:00
jeffvli	9eb64079f7	handle disabled features in a single flag (#1271 )	2026-03-25 17:41:08 -07:00
Hosted Weblate	3b955bb319	Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (Chinese (Simplified Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hans/ Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (Dutch) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/nl/ Co-authored-by: bokse <weblate@bokse.nl> Co-authored-by: 無情天 <kofzhanganguo@126.com>	2026-03-25 07:09:59 +01:00
Darius	816adfa6c7	Waveform playerbar improvements (#1781 ) * Defer waveform loading & show default seek bar as fallback * Add configurable waveform loading delay * Add 2s default value for waveform loading delay * disable transcoding config on waveform url --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>	2026-03-24 10:06:25 -07:00
Hosted Weblate	f91dcc6af6	Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (French) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/fr/ Co-authored-by: KosmoMoustache <kosmomoustache@users.noreply.hosted.weblate.org>	2026-03-24 06:10:58 +01:00
kast3t	6dc58a3ff8	fix playlist sort by id (#1867 ) (#1868 ) * fix playlist sort by id (#1867)	2026-03-23 18:27:21 -07:00
Kendall Garner	09fa10a4e9	fix(web): do not load umami if env is disabled	2026-03-22 15:08:21 -07:00
Hosted Weblate	6f45e1a814	Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (Polish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pl/ Co-authored-by: skajmer <skajmer@protonmail.com>	2026-03-21 23:09:51 +01:00
Hosted Weblate	62ba721f26	Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (Chinese (Traditional Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hant/ Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1191 of 1191 strings) (Japanese) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ja/ Co-authored-by: Fjuro <fjuro@users.noreply.hosted.weblate.org> Co-authored-by: Fordas <fordas15@gmail.com> Co-authored-by: York <goog10216922@gmail.com> Co-authored-by: karigane <169052233+karigane-cha@users.noreply.github.com>	2026-03-19 13:09:56 +01:00
jeffvli	67231753e4	add list search links to command palette	2026-03-18 02:51:27 -07:00
jeffvli	c16eccaecb	fix tab index on command palette play buttons	2026-03-18 02:17:31 -07:00
Hosted Weblate	0bdf1dcb75	Translated using Weblate Currently translated at 100.0% (1190 of 1190 strings) (Chinese (Traditional Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hant/ Co-authored-by: York <goog10216922@gmail.com>	2026-03-18 08:03:12 +00:00
jeffvli	598e9ca5c2	replace lastfm, musicbrainz, and listenbrainz logos	2026-03-18 01:02:57 -07:00
jeffvli	615f9c3515	refactor search into individual sections by itemtype, add infinite loader	2026-03-18 00:59:04 -07:00
jeffvli	b7cbdb4d6c	persist command palette collapsed sections to app store	2026-03-17 22:34:07 -07:00
jeffvli	3c562c1398	redesign command palette - add collapsible search groups - reduce modal padding - reduce command item padding - use breadcrumbs for pagination - move page breadcrumbs to the bottom	2026-03-17 22:28:07 -07:00
jeffvli	3eafa73217	adjust padding / design of layout toggle	2026-03-17 21:40:16 -07:00
Hosted Weblate	74864d9621	Translated using Weblate Currently translated at 100.0% (1184 of 1184 strings) (Chinese (Traditional Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hant/ Co-authored-by: York <goog10216922@gmail.com>	2026-03-18 04:25:29 +00:00
jeffvli	cb5562d32e	decrease height of single feature carousel (#1850 )	2026-03-17 21:25:18 -07:00
jeffvli	e40a175e12	add qobuz and listenbrainz external links	2026-03-17 21:10:31 -07:00
jeffvli	f996b111b9	add new external brand icons	2026-03-17 21:10:31 -07:00
Hosted Weblate	0cb5c49924	Translated using Weblate Currently translated at 100.0% (1180 of 1180 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Co-authored-by: Fjuro <fjuro@users.noreply.hosted.weblate.org>	2026-03-18 02:06:56 +00:00
jeffvli	c636029003	assert appstore state migration return type	2026-03-17 19:06:45 -07:00
jeffvli	db88a6bc22	support vertical play queue layout	2026-03-17 19:01:01 -07:00
Hosted Weblate	8ccd97b574	Translated using Weblate Currently translated at 100.0% (1180 of 1180 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1180 of 1180 strings) (Chinese (Traditional Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hant/ Translated using Weblate Currently translated at 100.0% (1180 of 1180 strings) (Japanese) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ja/ Translated using Weblate Currently translated at 45.5% (537 of 1180 strings) (Norwegian Bokmål) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/nb_NO/ Co-authored-by: Fordas <fordas15@gmail.com> Co-authored-by: Kristoffer <spinal-onto-rebel@duck.com> Co-authored-by: karigane <169052233+karigane-cha@users.noreply.github.com> Co-authored-by: linger <linger0517@gmail.com>	2026-03-17 09:10:00 +01:00