Translated using Weblate

Currently translated at 100.0% (1208 of 1208 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% (1208 of 1208 strings) (Catalan) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ca/ Co-authored-by: Ondo <SparkyOndo@proton.me> Co-authored-by: York <goog10216922@gmail.com>
Added translation using Weblate (Thai)
2026-05-07 12:30:12 +02:00 · 2026-05-05 05:09:50 +00:00 · 2026-05-03 12:06:39 +02:00 · 2026-05-02 04:34:18 +00:00 · 2026-05-01 21:33:40 -07:00 · 2026-05-01 21:24:45 -07:00
222 changed files with 7231 additions and 4264 deletions
@@ -121,7 +121,7 @@ jobs:

        strategy:
            matrix:
-                os: [windows-latest, macos-latest, ubuntu-latest]
+                os: [windows-latest, macos-26, ubuntu-latest]

        steps:
            - name: Checkout git repo
@@ -156,7 +156,7 @@ jobs:
                  on_retry_command: pnpm cache delete

            - name: Build and Publish to R2 (macOS)
-              if: matrix.os == 'macos-latest'
+              if: matrix.os == 'macos-26'
              uses: nick-invision/retry@v3.0.2
              with:
                  timeout_minutes: 30
@@ -115,7 +115,7 @@ jobs:

        strategy:
            matrix:
-                os: [windows-latest, macos-latest, ubuntu-latest]
+                os: [windows-latest, macos-26, ubuntu-latest]

        steps:
            - name: Checkout git repo
@@ -156,7 +156,7 @@ jobs:
                  on_retry_command: pnpm cache delete

            - name: Build and Publish releases (macOS)
-              if: matrix.os == 'macos-latest'
+              if: matrix.os == 'macos-26'
              env:
                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
              uses: nick-invision/retry@v3.0.2
@@ -51,5 +51,4 @@ jobs:
                  labels: ${{ steps.meta.outputs.labels }}
                  platforms: |
                      linux/amd64
-                      linux/arm/v7
                      linux/arm64/v8
@@ -8,7 +8,7 @@ jobs:

        strategy:
            matrix:
-                os: [macos-latest]
+                os: [macos-26]

        steps:
            - name: Checkout git repo
@@ -24,6 +24,7 @@ jobs:

            - name: Build and Publish releases
              env:
+                  NODE_OPTIONS: --max-old-space-size=4096
                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
              uses: nick-invision/retry@v3.0.2
              with:
@@ -30,7 +30,7 @@ jobs:

        strategy:
            matrix:
-                os: [macos-latest, ubuntu-latest, windows-latest]
+                os: [macos-26, ubuntu-latest, windows-latest]

        steps:
            - name: Checkout git repo
@@ -65,7 +65,7 @@ jobs:
                      pnpm run package:linux:pr

            - name: Build for MacOS
-              if: ${{ matrix.os == 'macos-latest' }}
+              if: ${{ matrix.os == 'macos-26' }}
              uses: nick-invision/retry@v3.0.2
              with:
                  timeout_minutes: 30
@@ -86,7 +86,7 @@ jobs:
                  zip -r dist/linux-binaries.zip dist/*.{AppImage,deb,rpm}

            - name: Zip MacOS Binaries
-              if: ${{ matrix.os == 'macos-latest' }}
+              if: ${{ matrix.os == 'macos-26' }}
              run: |
                  zip -r dist/macos-binaries.zip dist/*.dmg

@@ -105,7 +105,7 @@ jobs:
                  path: dist/linux-binaries.zip

            - name: Upload MacOS Binaries
-              if: ${{ matrix.os == 'macos-latest' }}
+              if: ${{ matrix.os == 'macos-26' }}
              uses: actions/upload-artifact@v7
              with:
                  name: macos-binaries
@@ -8,7 +8,7 @@ jobs:

        strategy:
            matrix:
-                os: [windows-latest, macos-latest, ubuntu-latest]
+                os: [windows-latest, macos-26, ubuntu-latest]

        steps:
            - name: Checkout git repo
@@ -36,7 +36,7 @@ jobs:
                  on_retry_command: pnpm cache delete

            - name: Build and Publish releases (macOS)
-              if: matrix.os == 'macos-latest'
+              if: matrix.os == 'macos-26'
              env:
                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
              uses: nick-invision/retry@v3.0.2
@@ -169,6 +169,10 @@ Feishin supports any music server that implements a [Navidrome](https://www.navi
    - [Qm-Music](https://github.com/chenqimiao/qm-music)
    - More (?)

+- [Plex](https://www.plex.tv/media-server-downloads)
+    - [Feishin fork by lux032](https://github.com/lux032/feishin) - Plex is not natively supported. Use the fork by lux032 to use Plex with Feishin.
+
+
 ### I have the issue "The SUID sandbox helper binary was found, but is not configured correctly" on Linux

 This happens when you have user (unprivileged) namespaces disabled (`sysctl kernel.unprivileged_userns_clone` returns 0). You can fix this by either enabling unprivileged namespaces, or by making the `chrome-sandbox` Setuid.
@@ -40,13 +40,15 @@ mac:
          arch:
              - arm64
              - x64
-    icon: assets/icons/icon.icns
+    icon: media/feishin.icon
    type: distribution
    hardenedRuntime: false
-    identity: "-"
+    identity: '-'
    gatekeeperAssess: false
    notarize: false
-
+    extendInfo:
+        NSAudioCaptureUsageDescription: "System audio access is required for mpv visualizer capture in Feishin"
+        NSLocalNetworkUsageDescription: 'Local network is necessary for accessing servers hosted on the same system as Feishin'

 dmg:
    contents: [{ x: 130, y: 220 }, { x: 410, y: 220, type: link, path: /Applications }]
@@ -61,7 +63,7 @@ linux:
    artifactName: ${productName}-${os}-${arch}.${ext}

 toolsets:
-    appimage: "1.0.2"
+    appimage: '1.0.2'

 npmRebuild: false

@@ -40,12 +40,15 @@ mac:
          arch:
              - arm64
              - x64
-    icon: assets/icons/icon.icns
+    icon: media/feishin.icon
    type: distribution
    hardenedRuntime: false
-    identity: "-"
+    identity: '-'
    gatekeeperAssess: false
    notarize: false
+    extendInfo:
+        NSAudioCaptureUsageDescription: "System audio access is required for mpv visualizer capture in Feishin"
+        NSLocalNetworkUsageDescription: 'Local network is necessary for accessing servers hosted on the same system as Feishin'

 dmg:
    contents: [{ x: 130, y: 220 }, { x: 410, y: 220, type: link, path: /Applications }]
@@ -60,7 +63,7 @@ linux:
    artifactName: ${productName}-${os}-${arch}.${ext}

 toolsets:
-    appimage: "1.0.2"
+    appimage: '1.0.2'

 npmRebuild: false
 publish:
@@ -40,12 +40,15 @@ mac:
          arch:
              - arm64
              - x64
-    icon: assets/icons/icon.icns
+    icon: media/feishin.icon
    type: distribution
    hardenedRuntime: false
-    identity: "-"
+    identity: '-'
    gatekeeperAssess: false
    notarize: false
+    extendInfo:
+        NSAudioCaptureUsageDescription: 'System audio access is required for mpv visualizer capture in Feishin'
+        NSLocalNetworkUsageDescription: 'Local network is necessary for accessing servers hosted on the same system as Feishin'

 dmg:
    contents: [{ x: 130, y: 220 }, { x: 410, y: 220, type: link, path: /Applications }]
@@ -60,7 +63,7 @@ linux:
    artifactName: ${productName}-${os}-${arch}.${ext}

 toolsets:
-    appimage: "1.0.2"
+    appimage: '1.0.2'

 npmRebuild: false
 afterAllArtifactBuild: scripts/after-all-artifact-build.mjs
@@ -1,10 +1,11 @@
-import react from '@vitejs/plugin-react';
 import { externalizeDepsPlugin, UserConfig } from 'electron-vite';
 import { resolve } from 'path';
 import conditionalImportPlugin from 'vite-plugin-conditional-import';
 import dynamicImportPlugin from 'vite-plugin-dynamic-import';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';

+import { createReactPlugin } from './vite.react-plugin';
+
 const currentOSEnv = process.platform;
 const electronRendererTarget = 'chrome87';

@@ -64,7 +65,7 @@ const config: UserConfig = {
                localsConvention: 'camelCase',
            },
        },
-        plugins: [react(), ViteEjsPlugin({ web: false })],
+        plugins: [createReactPlugin(), ViteEjsPlugin({ web: false })],
        resolve: {
            alias: {
                '/@/i18n': resolve('src/i18n'),
@@ -25,7 +25,7 @@ export default tseslint.config(
            'react-refresh': eslintPluginReactRefresh,
        },
        rules: {
-            ...eslintPluginReactHooks.configs.recommended.rules,
+            ...eslintPluginReactHooks.configs['recommended-latest'].rules,
            ...eslintPluginReactRefresh.configs.vite.rules,
            '@typescript-eslint/explicit-function-return-type': 'off',
            '@typescript-eslint/no-duplicate-enum-values': 'off',
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><g style="display:inline" transform="translate(-53.452 -43.352)scale(1.11813)"><circle cx="256" cy="240.312" r="21.5" style="opacity:1;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.19597;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke;filter:url(#filter249)"/><path d="M220.85 277.951 183.5 315.6l36 36.1 20-19.7s5.856-6.2 16.5-6.2 16.5 6.2 16.5 6.2l20 19.7 36-36.1-37.35-37.649A51.5 51.5 0 0 1 256 291.812a51.5 51.5 0 0 1-35.15-13.86" style="opacity:1;fill:#000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter249)"/><path d="M256 145.4a25.7 25.7 0 0 0-18.229 7.551L66.97 323.47A25.42 25.42 0 0 0 59.5 341.5c0 14.083 11.417 25.5 25.5 25.5a25.42 25.42 0 0 0 18.031-7.469l103.895-103.597a51.5 51.5 0 0 1-2.426-15.621 51.5 51.5 0 0 1 51.5-51.5 51.5 51.5 0 0 1 51.5 51.5 51.5 51.5 0 0 1-2.426 15.62L408.97 359.532A25.42 25.42 0 0 0 427 367c14.083 0 25.5-11.417 25.5-25.5a25.42 25.42 0 0 0-7.469-18.031L274.23 152.95a25.7 25.7 0 0 0-18.229-7.55" style="display:inline;opacity:1;fill:#000;fill-opacity:1;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke;filter:url(#filter249)"/></g></svg>
@@ -0,0 +1,202 @@
+{
+  "fill-specializations" : [
+    {
+      "value" : {
+        "linear-gradient" : [
+          "display-p3:0.87416,0.87416,0.87416,1.00000",
+          "display-p3:0.99575,0.99575,0.99575,1.00000"
+        ],
+        "orientation" : {
+          "start" : {
+            "x" : 0.5,
+            "y" : 1
+          },
+          "stop" : {
+            "x" : 0.5,
+            "y" : 0.3
+          }
+        }
+      }
+    },
+    {
+      "appearance" : "dark",
+      "value" : "system-dark"
+    }
+  ],
+  "groups" : [
+    {
+      "blend-mode-specializations" : [
+        {
+          "appearance" : "tinted",
+          "value" : "normal"
+        }
+      ],
+      "blur-material-specializations" : [
+        {
+          "value" : 0.7
+        },
+        {
+          "appearance" : "dark",
+          "value" : 0.7
+        },
+        {
+          "appearance" : "tinted",
+          "value" : null
+        }
+      ],
+      "hidden" : false,
+      "layers" : [
+        {
+          "blend-mode-specializations" : [
+            {
+              "appearance" : "tinted",
+              "value" : "normal"
+            }
+          ],
+          "fill-specializations" : [
+            {
+              "value" : {
+                "solid" : "extended-gray:0.00000,1.00000"
+              }
+            },
+            {
+              "appearance" : "dark",
+              "value" : {
+                "linear-gradient" : [
+                  "display-p3:0.78674,0.78674,0.78674,1.00000",
+                  "display-p3:0.87416,0.87416,0.87416,1.00000"
+                ],
+                "orientation" : {
+                  "start" : {
+                    "x" : 0.5,
+                    "y" : 1
+                  },
+                  "stop" : {
+                    "x" : 0.5,
+                    "y" : 0
+                  }
+                }
+              }
+            },
+            {
+              "appearance" : "tinted",
+              "value" : {
+                "solid" : "gray:1.00000,1.00000"
+              }
+            }
+          ],
+          "glass-specializations" : [
+            {
+              "value" : true
+            },
+            {
+              "appearance" : "dark",
+              "value" : true
+            },
+            {
+              "appearance" : "tinted",
+              "value" : true
+            }
+          ],
+          "hidden" : false,
+          "image-name" : "feishin.svg",
+          "name" : "feishin",
+          "opacity-specializations" : [
+            {
+              "value" : 1
+            },
+            {
+              "appearance" : "tinted",
+              "value" : 1
+            }
+          ],
+          "position" : {
+            "scale" : 0.79,
+            "translation-in-points" : [
+              18,
+              -2
+            ]
+          }
+        }
+      ],
+      "lighting-specializations" : [
+        {
+          "value" : "individual"
+        },
+        {
+          "appearance" : "tinted",
+          "value" : "combined"
+        }
+      ],
+      "position" : {
+        "scale" : 2.2,
+        "translation-in-points" : [
+          0,
+          0
+        ]
+      },
+      "shadow-specializations" : [
+        {
+          "value" : {
+            "kind" : "neutral",
+            "opacity" : 1
+          }
+        },
+        {
+          "appearance" : "dark",
+          "value" : {
+            "kind" : "layer-color",
+            "opacity" : 0.5
+          }
+        },
+        {
+          "appearance" : "tinted",
+          "value" : {
+            "kind" : "neutral",
+            "opacity" : 1
+          }
+        }
+      ],
+      "specular-specializations" : [
+        {
+          "value" : false
+        },
+        {
+          "appearance" : "dark",
+          "value" : false
+        },
+        {
+          "appearance" : "tinted",
+          "value" : true
+        }
+      ],
+      "translucency-specializations" : [
+        {
+          "value" : {
+            "enabled" : true,
+            "value" : 0.29
+          }
+        },
+        {
+          "appearance" : "dark",
+          "value" : {
+            "enabled" : false,
+            "value" : 0.29
+          }
+        },
+        {
+          "appearance" : "tinted",
+          "value" : {
+            "enabled" : true,
+            "value" : 0.5
+          }
+        }
+      ]
+    }
+  ],
+  "supported-platforms" : {
+    "squares" : [
+      "macOS"
+    ]
+  }
+}
@@ -1,6 +1,6 @@
 {
    "name": "feishin",
-    "version": "1.9.0",
+    "version": "1.11.0",
    "description": "A modern self-hosted music player.",
    "keywords": [
        "subsonic",
@@ -31,36 +31,36 @@
        "i18next": "i18next -c src/i18n/i18next-parser.config.js",
        "postinstall": "electron-builder install-app-deps",
        "lint": "pnpm run typecheck && pnpm run lint-code && pnpm run lint-styles",
+        "lint:fix": "pnpm run lint-code:fix && pnpm run lint-styles:fix",
        "lint-code": "eslint --max-warnings=0 --cache .",
        "lint-code:fix": "eslint --cache --fix .",
        "lint-styles": "stylelint --max-warnings=0 'src/**/*.{css,scss}'",
        "lint-styles:fix": "stylelint 'src/**/*.{css,scss}' --fix",
-        "lint:fix": "pnpm run lint-code:fix && pnpm run lint-styles:fix",
        "package": "pnpm run build && electron-builder",
        "package:dev": "pnpm run build && electron-builder --dir",
        "package:linux": "pnpm run build && electron-builder --linux",
-        "package:linux-arm64:pr": "pnpm run build && electron-builder --linux --arm64 --publish never",
        "package:linux:pr": "pnpm run build && electron-builder --linux --publish never",
+        "package:linux-arm64:pr": "pnpm run build && electron-builder --linux --arm64 --publish never",
        "package:mac": "pnpm run build && electron-builder --mac",
        "package:mac:pr": "pnpm run build && electron-builder --mac --publish never",
        "package:win": "pnpm run build && electron-builder --win",
-        "package:win-arm64:pr": "pnpm run build && electron-builder --win --arm64 --publish never",
        "package:win:pr": "pnpm run build && electron-builder --win --publish never",
+        "package:win-arm64:pr": "pnpm run build && electron-builder --win --arm64 --publish never",
        "publish:linux": "pnpm run build && electron-builder --publish always --linux",
+        "publish:linux:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --linux",
+        "publish:linux:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --linux",
        "publish:linux-arm64": "pnpm run build && electron-builder --publish always --linux --arm64",
        "publish:linux-arm64:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --linux --arm64",
        "publish:linux-arm64:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --linux --arm64",
-        "publish:linux:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --linux",
-        "publish:linux:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --linux",
        "publish:mac": "pnpm run build && electron-builder --publish always --mac",
        "publish:mac:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --mac",
        "publish:mac:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --mac",
        "publish:win": "pnpm run build && electron-builder --publish always --win",
+        "publish:win:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --win",
+        "publish:win:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --win",
        "publish:win-arm64": "pnpm run build && electron-builder --publish always --win --arm64",
        "publish:win-arm64:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --win --arm64",
        "publish:win-arm64:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --win --arm64",
-        "publish:win:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --win",
-        "publish:win:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --win",
        "start": "electron-vite preview",
        "typecheck": "pnpm run typecheck:node && pnpm run typecheck:web",
        "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
@@ -68,119 +68,123 @@
        "version": "pnpm version --no-git-tag-version",
        "postversion": "node ./scripts/update-app-stream.mjs"
    },
+    "resolutions": {
+        "react-router": "7.14.0",
+        "xml2js": "0.5.0"
+    },
    "dependencies": {
        "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
-        "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.2",
+        "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.5",
        "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-        "@electron-toolkit/preload": "^3.0.1",
+        "@electron-toolkit/preload": "^3.0.2",
        "@electron-toolkit/utils": "^4.0.0",
-        "@mantine/colors-generator": "^8.3.8",
-        "@mantine/core": "^8.3.8",
-        "@mantine/dates": "^8.3.8",
-        "@mantine/form": "^8.3.8",
-        "@mantine/hooks": "^8.3.8",
-        "@mantine/modals": "^8.3.8",
-        "@mantine/notifications": "^8.3.8",
+        "@mantine/colors-generator": "^9.1.1",
+        "@mantine/core": "^9.1.1",
+        "@mantine/dates": "^9.1.1",
+        "@mantine/form": "^9.1.1",
+        "@mantine/hooks": "^9.1.1",
+        "@mantine/modals": "^9.1.1",
+        "@mantine/notifications": "^9.1.1",
        "@radix-ui/react-context-menu": "^2.2.16",
-        "@tanstack/react-query": "^5.90.9",
-        "@tanstack/react-query-devtools": "^5.90.2",
-        "@tanstack/react-query-persist-client": "^5.90.11",
+        "@tanstack/react-query": "^5.96.2",
+        "@tanstack/react-query-devtools": "^5.96.2",
+        "@tanstack/react-query-persist-client": "^5.96.2",
        "@ts-rest/core": "^3.52.1",
-        "@wavesurfer/react": "^1.0.11",
-        "@xhayper/discord-rpc": "^1.3.0",
-        "audiomotion-analyzer": "^4.5.1",
-        "axios": "^1.13.5",
-        "butterchurn": "^3.0.0-beta.5",
-        "butterchurn-presets": "^3.0.0-beta.4",
-        "cheerio": "^1.1.2",
+        "@wavesurfer/react": "^1.0.12",
+        "@xhayper/discord-rpc": "^1.3.3",
+        "audiomotion-analyzer": "^4.5.4",
+        "axios": "^1.14.0",
+        "butterchurn": "3.0.0-beta.5",
+        "butterchurn-presets": "3.0.0-beta.4",
+        "cheerio": "^1.2.0",
        "clsx": "^2.1.1",
        "cmdk": "^1.1.1",
-        "dayjs": "^1.11.19",
-        "dompurify": "^3.3.0",
+        "dayjs": "^1.11.20",
+        "dompurify": "^3.3.3",
        "electron-debug": "^3.2.0",
        "electron-localshortcut": "^3.2.1",
        "electron-log": "^5.4.3",
        "electron-store": "^8.2.0",
-        "electron-updater": "^6.6.2",
-        "fast-average-color": "^9.5.0",
-        "fast-xml-parser": "^5.3.8",
+        "electron-updater": "^6.8.3",
+        "fast-average-color": "9.5.0",
+        "fast-xml-parser": "^5.5.10",
        "format-duration": "^3.0.2",
-        "fuse.js": "^7.1.0",
-        "i18next": "^25.6.2",
+        "fuse.js": "^7.2.0",
+        "i18next": "^25.10.10",
        "icecast-metadata-stats": "^0.1.12",
        "idb-keyval": "^6.2.2",
        "immer": "^10.2.0",
        "is-electron": "^2.2.2",
-        "lodash": "^4.17.23",
+        "lodash": "^4.18.1",
        "md5": "^2.3.0",
-        "motion": "^12.23.24",
+        "motion": "^12.38.0",
        "mpris-service": "^2.1.2",
        "nanoid": "^3.3.11",
        "node-mpv": "github:jeffvli/Node-MPV#32b4d64395289ad710c41d481d2707a7acfc228f",
-        "nuqs": "^2.7.1",
-        "overlayscrollbars": "^2.11.1",
+        "overlayscrollbars": "^2.14.0",
        "overlayscrollbars-react": "^0.5.6",
-        "qs": "^6.14.2",
-        "react": "^19.1.0",
-        "react-call": "^1.8.1",
-        "react-dom": "^19.1.0",
+        "qs": "^6.15.0",
+        "react": "^19.2.4",
+        "react-call": "^1.8.2",
+        "react-dom": "^19.2.4",
        "react-error-boundary": "^5.0.0",
-        "react-i18next": "^16.3.3",
-        "react-icons": "^5.5.0",
-        "react-player": "^2.16.0",
-        "react-router": "^7.13.1",
-        "react-split-pane": "^3.0.4",
+        "react-i18next": "^16.6.6",
+        "react-icons": "^5.6.0",
+        "react-player": "^2.16.1",
+        "react-router": "^7.14.0",
+        "react-split-pane": "^3.2.0",
        "react-virtualized-auto-sizer": "^1.0.26",
        "react-window": "1.8.11",
-        "react-window-v2": "npm:react-window@^2.2.3",
-        "semver": "^7.5.4",
+        "react-window-v2": "npm:react-window@^2.2.7",
+        "semver": "^7.7.4",
        "string-to-color": "^2.2.2",
-        "wavesurfer.js": "^7.11.1",
-        "ws": "^8.18.2",
-        "zod": "^3.22.3",
-        "zustand": "^5.0.5"
+        "wavesurfer.js": "^7.12.5",
+        "ws": "^8.20.0",
+        "zod": "^3.25.76",
+        "zustand": "^5.0.12"
    },
    "devDependencies": {
        "@electron-toolkit/eslint-config-prettier": "^3.0.0",
-        "@electron-toolkit/eslint-config-ts": "^3.0.0",
+        "@electron-toolkit/eslint-config-ts": "^3.1.0",
        "@electron-toolkit/tsconfig": "^2.0.0",
-        "@types/electron-localshortcut": "^3.1.0",
-        "@types/lodash": "^4.17.18",
-        "@types/md5": "^2.3.5",
-        "@types/node": "^24.10.1",
-        "@types/react": "^19.2.5",
+        "@types/electron-localshortcut": "^3.1.3",
+        "@types/lodash": "^4.17.24",
+        "@types/md5": "^2.3.6",
+        "@types/node": "^24.12.2",
+        "@types/react": "^19.2.14",
        "@types/react-dom": "^19.2.3",
        "@types/react-window": "^1.8.8",
        "@types/source-map-support": "^0.5.10",
        "@types/ws": "^8.18.1",
-        "@vitejs/plugin-react": "^5.1.1",
+        "@vitejs/plugin-react": "^5.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
        "concurrently": "^9.2.1",
        "cross-env": "^10.1.0",
-        "electron": "^39.4.0",
+        "electron": "^39.8.6",
        "electron-builder": "^26.8.2",
        "electron-devtools-installer": "^4.0.0",
        "electron-vite": "^4.0.1",
-        "eslint": "^9.24.0",
-        "eslint-plugin-perfectionist": "^4.13.0",
-        "eslint-plugin-prettier": "^5.4.0",
+        "eslint": "^9.39.4",
+        "eslint-plugin-perfectionist": "^4.15.1",
+        "eslint-plugin-prettier": "^5.5.5",
        "eslint-plugin-react": "^7.37.5",
        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.4.24",
-        "i18next-parser": "^9.3.0",
+        "eslint-plugin-react-refresh": "^0.4.26",
+        "i18next-parser": "^9.4.0",
        "postcss-preset-mantine": "^1.18.0",
        "postcss-simple-vars": "^7.0.1",
-        "prettier": "^3.6.2",
-        "prettier-plugin-packagejson": "^2.5.19",
-        "stylelint": "^16.25.0",
-        "stylelint-config-css-modules": "^4.5.1",
-        "stylelint-config-recess-order": "^7.4.0",
+        "prettier": "^3.8.1",
+        "prettier-plugin-packagejson": "^2.5.22",
+        "stylelint": "^16.26.1",
+        "stylelint-config-css-modules": "^4.6.0",
+        "stylelint-config-recess-order": "^7.7.0",
        "stylelint-config-standard": "^39.0.1",
-        "typescript": "^5.8.3",
-        "vite": "^7.2.2",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.1",
        "vite-plugin-conditional-import": "^0.1.7",
        "vite-plugin-dynamic-import": "^1.6.0",
        "vite-plugin-ejs": "^1.7.0",
-        "vite-plugin-pwa": "^1.1.0"
+        "vite-plugin-pwa": "^1.2.0"
    },
    "pnpm": {
        "onlyBuiltDependencies": [
@@ -1,9 +1,9 @@
-import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig, normalizePath } from 'vite';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';

 import { version } from './package.json';
+import { createReactPlugin } from './vite.react-plugin';

 export default defineConfig({
    build: {
@@ -35,7 +35,7 @@ export default defineConfig({
        },
    },
    plugins: [
-        react(),
+        createReactPlugin(),
        ViteEjsPlugin({
            prod: process.env.NODE_ENV === 'production',
            root: normalizePath(path.resolve(__dirname, './src/remote')),
@@ -139,7 +139,9 @@
                "lyricOffset": "demora de la lletra (ms)",
                "showLyricMatch": "mosta coincidències de lletres",
                "showLyricProvider": "mostra el proveïdor de la lletra",
-                "lyricGap": "espera entre lletres"
+                "lyricGap": "espera entre lletres",
+                "lyricOpacityNonActive": "Opacitat de la lletra inactiva",
+                "lyricScaleNonActive": "Escala de la lletra inactiva"
            },
            "lyrics": "lletres",
            "visualizer": "visualitzador",
@@ -337,7 +339,8 @@
        "filter_single": "senzill",
        "filter_multiple": "multi",
        "rename": "reanomena",
-        "newVersionAvailable": "hi ha una nova versió disponible"
+        "newVersionAvailable": "hi ha una nova versió disponible",
+        "numberOfResults": "{{numberOfResults}} resultats"
    },
    "entity": {
        "album_one": "àlbum",
@@ -406,7 +409,8 @@
            "input_skipDuplicates": "salta't els duplicats",
            "success": "s'ha afegit $t(entity.trackWithCount, {\"count\": {{message}} }) a $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
            "create": "crea $t(entity.playlist, {\"count\": 1}) {{playlist}}",
-            "searchOrCreate": "cerca $t(entity.playlist, {\"count\": 2}) o escriu per crear-ne una de nova"
+            "searchOrCreate": "cerca $t(entity.playlist, {\"count\": 2}) o escriu per crear-ne una de nova",
+            "noneAdded": "no s'han afegit pistes a la $t(entity.playlist, {\"count\": 1}) '{{playlist}}'"
        },
        "createPlaylist": {
            "input_description": "$t(common.description)",
@@ -506,6 +510,9 @@
            "export": "exporta la lletra",
            "input_synced": "exporta la lletra sincronitzada",
            "input_offset": "$t(setting.lyricOffset)"
+        },
+        "editRadioStation": {
+            "success": "Emissora de ràdio actualitzada amb èxit"
        }
    },
    "action": {
@@ -522,7 +529,10 @@
        "goToPage": "anar a la pàgina",
        "openIn": {
            "lastfm": "Obrir a Last.fm",
-            "musicbrainz": "Obrir a MusicBrainz"
+            "musicbrainz": "Obrir a MusicBrainz",
+            "listenbrainz": "Obre a ListenBrainz",
+            "qobuz": "Obre a Qobuz",
+            "spotify": "Obre a Spotify"
        },
        "deselectAll": "deselecciona-ho tot",
        "viewPlaylists": "veure $t(entity.playlist, {\"count\": 2})",
@@ -597,7 +607,7 @@
        "artistConfiguration": "configuració de la pàgina de l'artista de l'àlbum",
        "artistConfiguration_description": "configura quins elements es mostren i el seu ordre de la pàgina de l'artista de l'àlbum",
        "audioExclusiveMode": "mode d'àudio exclusiu",
-        "audioExclusiveMode_description": "activa el mode d'àudio exclusiu. En aquest mode, el sistema normalment estarà bloquejat i només mpv podrà emetre àudio",
+        "audioExclusiveMode_description": "activa el mode d'àudio exclusiu. En aquest mode, el sistema normalment estarà bloquejat i només mpv podrà emetre àudio. El sistema visualitzador de captura d'àudio no funcionarà mentre això estigui activat",
        "buttonSize": "mida dels botons de la barra de reproducció",
        "buttonSize_description": "la mida dels botons de la barra de reproducció",
        "clearCache": "neteja la memòria del navegador",
@@ -910,7 +920,25 @@
        "primaryShade": "ombra primària",
        "primaryShade_description": "substitueix el to primari (0–9) utilitzat per a botons, enllaços i altres elements de color primari",
        "playerItemConfiguration_description": "configurar quins elements es mostren i en quin ordre al reproductor de pantalla completa",
-        "playerItemConfiguration": "configuració d'elements del jugador"
+        "playerItemConfiguration": "configuració d'elements del jugador",
+        "listenbrainz_description": "mostra enllaços a ListenBrainz a les pàgines d'artista/àlbum",
+        "listenbrainz": "mostra enllaços a ListenBrainz",
+        "qobuz_description": "mostra enllaços a Qobuz a les pàgines d'artista/àlbum",
+        "qobuz": "mostra enllaços a Qobuz",
+        "spotify_description": "mostra enllaços a Spotify a les pàgines d'artista/àlbum",
+        "spotify": "mostra enllaços a Spotify",
+        "nativeSpotify_description": "obre amb Spotify en lloc del vostre navegador",
+        "nativeSpotify": "fes servir Spotify",
+        "playerbarWaveformStretch": "extensió de la forma d'ona",
+        "playerbarWaveformStretch_description": "estén la forma d'ona per omplir l'espai disponible",
+        "sidePlayQueueLayout": "disposició de la cua de reproducció lateral",
+        "sidePlayQueueLayout_description": "estableix la disposició de la cua de reproducció lateral adjunta",
+        "sidePlayQueueLayout_optionHorizontal": "horitzontal",
+        "sidePlayQueueLayout_optionVertical": "vertical",
+        "waveformLoadingDelay": "demora de càrrega de la forma d'ona",
+        "waveformLoadingDelay_description": "demora en segons abans de carregar la forma d'ona. incrementeu aquest valor si patiu interrupcions en fer servir el reproductor web.",
+        "preventSuspendOnPlayback_description": "evita que l'aplicació quedi suspesa mentre es reprodueix música",
+        "preventSuspendOnPlayback": "evita la suspensió durant la reproducció"
    },
    "table": {
        "column": {
@@ -1360,6 +1388,13 @@
            }
        },
        "pasteGradient": "enganxa degradat",
-        "pasteGradientPlaceholder": "enganxa el degradat JSON aquí..."
+        "pasteGradientPlaceholder": "enganxa el degradat JSON aquí...",
+        "systemAudioConsentAllow": "permetre",
+        "systemAudioConsentBody": "el visualitzador necessita accés a l'àudio del sistema per funcionar",
+        "systemAudioConsentDecline": "denega",
+        "systemAudioConsentTitle": "Voleu permetre accés al sistema d'àudio?",
+        "systemAudioCaptureFailed": "No s'ha pogut iniciar la captura: {{message}}",
+        "systemAudioNoAudioTrack": "No s'ha tornat cap pista d'àudio. Comproveu que la captura d'àudio estigui activada quan se sol·liciti.",
+        "systemAudioExclusiveModeNotSupported": "El visualitzador no està disponible amb el mode d'àudio exclusiu activat. Desactiveu-lo a la configuració d'MPV i torneu-ho a intentar."
    }
 }
@@ -85,7 +85,7 @@
        "hotkey_zoomIn": "přiblížení",
        "scrobble_description": "scrobblovat přehrání na váš multimediální server",
        "hotkey_browserForward": "vpřed v prohlížeči",
-        "audioExclusiveMode_description": "zapnout režim výhradního výstupu. V tomto režimu bude obvykle v systému schopný přehrávat zvuk pouze přehrávač mpv",
+        "audioExclusiveMode_description": "zapnout režim výhradního výstupu. v tomto režimu bude obvykle v systému schopný přehrávat zvuk pouze přehrávač mpv. záznam systémového zvuku ve vizualizéru nebude fungovat",
        "discordUpdateInterval": "interval aktualizací {{discord}} rich presence",
        "themeLight": "motiv (světlý)",
        "fontType_optionBuiltIn": "vestavěné písmo",
@@ -425,7 +425,11 @@
        "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."
+        "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.",
+        "playerbarWaveformStretch": "natáhnutí vlnové křivky",
+        "playerbarWaveformStretch_description": "natáhně vlnovou křivku tak, aby vyplnila dostupný prostor",
+        "preventSuspendOnPlayback_description": "zabránit aplikaci v uspání během přehrávání hudby",
+        "preventSuspendOnPlayback": "zabránit uspání při přehrávání"
    },
    "action": {
        "editPlaylist": "upravit $t(entity.playlist, {\"count\": 1})",
@@ -825,7 +829,9 @@
                "lyricGap": "mezera textů",
                "dynamicImageBlur": "velikost rozostření obrázku",
                "dynamicIsImage": "povolit obrázek na pozadí",
-                "lyricOffset": "posunutí textů (ms)"
+                "lyricOffset": "posunutí textů (ms)",
+                "lyricOpacityNonActive": "neprůhlednost neaktivních textů",
+                "lyricScaleNonActive": "velikost neaktivních textů"
            },
            "upNext": "další",
            "lyrics": "texty",
@@ -1041,7 +1047,8 @@
            "input_skipDuplicates": "přeskočit duplicity",
            "input_playlists": "$t(entity.playlist, {\"count\": 2})",
            "create": "vytvořit $t(entity.playlist, {\"count\": 1}) {{playlist}}",
-            "searchOrCreate": "vyhledejte $t(entity.playlist, {\"count\": 2}) nebo pište pro vytvoření nového"
+            "searchOrCreate": "vyhledejte $t(entity.playlist, {\"count\": 2}) nebo pište pro vytvoření nového",
+            "noneAdded": "do $t(entity.playlist, {\"count\": 1}) '{{playlist}}' nebyly přidány žádné skladby"
        },
        "updateServer": {
            "title": "upravit server",
@@ -1381,6 +1388,13 @@
            }
        },
        "pasteGradient": "Vložit přechod",
-        "pasteGradientPlaceholder": "Sem vložte JSON přechodu…"
+        "pasteGradientPlaceholder": "Sem vložte JSON přechodu…",
+        "systemAudioConsentAllow": "Povolit",
+        "systemAudioConsentBody": "Vizualizér potřebuje pro svou činnost přístup k systémovému zvuku",
+        "systemAudioConsentTitle": "Povolit přístup k systémovému zvuku?",
+        "systemAudioCaptureFailed": "Nepodařilo se spustit zachytávání: {{message}}",
+        "systemAudioNoAudioTrack": "Nebyla zachycena žádná zvuková stopa. Ujistěte se, že jste při výzvě povolili zachytávání zvuku.",
+        "systemAudioConsentDecline": "Zamítnout",
+        "systemAudioExclusiveModeNotSupported": "Vizualizér není dostupný při zapnutém režimu výhradního výstupu zvuku. Zakažte Režim výhradního výstupu zvuku v nastavení MPV a zkuste to znovu."
    }
 }
@@ -242,7 +242,7 @@
        "criticRating": "Kritikerbewertung",
        "album": "$t(entity.album, {\"count\": 1})",
        "trackNumber": "Track",
-        "channels": "$t(common.channel_other)",
+        "channels": "$t(common.channel,{\"count\":2})",
        "owner": "$t(common.owner)",
        "genre": "$t(entity.genre, {\"count\": 1})",
        "artist": "$t(entity.artist, {\"count\": 1})",
@@ -273,13 +273,13 @@
            "input_name": "Servername",
            "success": "Server erfolgreich hinzugefügt",
            "input_savePassword": "Passwort speichern",
-            "ignoreSsl": "SSL ignorieren $t(common.restartRequired)",
-            "ignoreCors": "CORS ignorieren $t(common.restartRequired)",
+            "ignoreSsl": "SSL ignorieren ($t(common.restartRequired))",
+            "ignoreCors": "CORS ignorieren ($t(common.restartRequired))",
            "error_savePassword": "Beim Speichern des Passworts ist ein Fehler aufgetreten",
            "input_preferInstantMix": "Instant-Mix bevorzugen",
            "input_preferInstantMixDescription": "nur Instant-Mix verwenden, um ähnliche Songs zu erhalten. Nützlich bei Verwendung von Plugins, die in dieses Verhalten eingreifen",
            "input_preferRemoteUrl": "öffentliche URL bevorzugen",
-            "input_remoteUrl": "Öffentliche URL",
+            "input_remoteUrl": "öffentliche URL",
            "input_remoteUrlPlaceholder": "Optional: öffentliche URL für externe Funktionen"
        },
        "addToPlaylist": {
@@ -357,6 +357,9 @@
            "input_offset": "$t(setting.lyricOffset)",
            "export": "Songtexte exportieren",
            "input_synced": "Synchronisierte Songtexte exportieren"
+        },
+        "editRadioStation": {
+            "success": "Radiosender erfolgreich aktualisiert"
        }
    },
    "entity": {
@@ -426,8 +429,8 @@
                "pagination": "Seitenzahlen",
                "pagination_itemsPerPage": "Elemente pro Seite",
                "pagination_infinite": "unendlich",
-                "moveUp": "Nach oben bewegen",
-                "moveDown": "Nach unten bewegen",
+                "moveUp": "nach oben",
+                "moveDown": "nach unten",
                "pinToLeft": "links anheften",
                "pinToRight": "rechts anheften",
                "itemGap": "Item Abstand (px)",
@@ -450,13 +453,13 @@
                "albumArtist": "$t(entity.albumArtist, {\"count\": 1})",
                "artist": "$t(entity.artist, {\"count\": 1})",
                "favorite": "$t(common.favorite)",
-                "actions": "$t(common.action_other)",
+                "actions": "$t(common.action,{\"count\":2})",
                "genre": "$t(entity.genre, {\"count\": 1})",
                "album": "$t(entity.album, {\"count\": 1})",
                "size": "$t(common.size)",
                "bpm": "$t(common.bpm)",
                "titleCombined": "$t(common.title) (kombiniert)",
-                "channels": "$t(common.channel_other)",
+                "channels": "$t(common.channel,{\"count\":2})",
                "duration": "$t(common.duration)",
                "note": "$t(common.note)",
                "owner": "$t(common.owner)",
@@ -493,7 +496,7 @@
            "rating": "Bewertung",
            "albumCount": "$t(entity.album, {\"count\": 2})",
            "artist": "$t(entity.artist, {\"count\": 1})",
-            "channels": "$t(common.channel_other)",
+            "channels": "$t(common.channel,{\"count\":2})",
            "comment": "Kommentar",
            "dateAdded": "hinzugefügt am",
            "playCount": "Abgespielt",
@@ -716,7 +719,8 @@
        },
        "releasenotes": {
            "commitsSinceStable": "Commits seit {{stable}}",
-            "noStableReleaseToCompare": "Kein stable Relase zum vergleichen verfügbar"
+            "noStableReleaseToCompare": "Kein stable Relase zum vergleichen verfügbar",
+            "noNewCommits": "keine neuen Beiträge in diesem Bereich"
        }
    },
    "player": {
@@ -766,12 +770,12 @@
        "sleepTimer": "Sleep Timer",
        "sleepTimer_custom": "Benutzerdefiniert",
        "sleepTimer_hours": "{{count}} std",
-        "sleepTimer_minutes": "{{count}} min",
+        "sleepTimer_minutes": "{{count}} Min",
        "trackRadio": "Song Radio",
        "albumRadio": "Album Radio"
    },
    "setting": {
-        "audioDevice_description": "wählen Sie das Audiogerät aus, das für die Wiedergabe verwendet werden soll (nur Webplayer)",
+        "audioDevice_description": "das für die Wiedergabe zu verwendende Audiogerät auswählen",
        "audioExclusiveMode": "Audio-Exklusivmodus",
        "audioDevice": "Audiogerät",
        "accentColor": "Akzentfarbe",
@@ -789,7 +793,7 @@
        "crossfadeDuration": "Dauer der Überblendung",
        "discordIdleStatus": "rich presence status im Leerlauf",
        "audioPlayer": "Audio-Player",
-        "discordApplicationId": "{{discord}} Anwendungs ID",
+        "discordApplicationId": "{{discord}} Anwendungs-ID",
        "customFontPath_description": "Legt den Pfad zur benutzerdefinierten Schriftart fest, welche für die Anwendung verwendet werden soll",
        "remotePort_description": "Legt den Port des Fernsteuerungsserver fest",
        "hotkey_skipBackward": "rückwärts springen",
@@ -1009,7 +1013,7 @@
        "transcodeFormat": "Format für Umwandlung",
        "startMinimized_description": "Startet die Anwendung im Info-Bereich",
        "startMinimized": "Im Info-Bereich starten",
-        "mediaSession_description": "Aktiviert die Windows Media Session-Integration, zeigt Mediensteuerelemente und Metadaten im Systemlautstärke-Overlay und auf dem Sperrbildschirm an (nur Windows)",
+        "mediaSession_description": "aktiviert die Media Session Integration. Dies ermöglicht die Steuerung und Anzeige der Medien in der Systemlautstärkeoption und auf dem Sperrbildschirm",
        "mediaSession": "Media Session aktivieren",
        "artistBackgroundBlur": "Unschärfegrad für Künstlerhintergründe",
        "artistBackgroundBlur_description": "Legt den Grad der Unschärfe fest, der auf das Hintergrundbild des Künstlers angewendet wird",
@@ -1017,11 +1021,11 @@
        "contextMenu_description": "Legt die Einträge fest, die im Rechtsklick-Menü angezeigt werden sollen. Abgewählte Einträge werden ausgeblendet",
        "crossfadeStyle": "Art der Überblende",
        "customCss_description": "Benutzerdefinierter CSS-Inhalt. Hinweis: Inhalte und Remote-URLs sind nicht zulässige Eigenschaften. Unten siehst du eine Vorschau deines Inhalts. Aufgrund von Bereinigung werden womöglich zusätzliche, nicht von dir definierte Felder angezeigt",
-        "customCssNotice": "Warnung: Obwohl eine gewisse Bereinigung erfolgt (url() und content: sind nicht zulässig), kann die Verwendung von benutzerdefiniertem CSS dennoch Risiken mit sich bringen, da dadurch die Benutzeroberfläche verändert wird",
+        "customCssNotice": "Warnung: Obwohl eine gewisse Bereinigung erfolgt (nicht zulässig sind z. B. \"url()\" und \"content:\"), kann ein benutzerdefiniertes CSS Risiken mit sich bringen, da die Benutzeroberfläche dadurch verändert wird",
        "releaseChannel_optionBeta": "Beta",
        "releaseChannel_optionLatest": "Stabil",
        "releaseChannel": "Veröffentlichungskanal",
-        "releaseChannel_description": "Zwischen stabilen und beta Veröffentlichungen für automatische Aktualisierungen wählen",
+        "releaseChannel_description": "zwischen stabilen, Beta- oder Alpha-Versionen (Nightly) für automatische Updates wählen",
        "discordDisplayType_artistname": "Künstlername(n)",
        "discordDisplayType_description": "Ändert den aktuellen Titel im Zuhör-Status",
        "discordDisplayType_songname": "Songtitel",
@@ -1121,7 +1125,13 @@
        "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"
+        "artistReleaseTypeConfiguration": "Interpreten Release Typ Einstellung",
+        "discordStateIcon": "Play Icon anzeigen",
+        "homeFeatureStyle_optionSingle": "Einzeln",
+        "nativeSpotify_description": "in der Spotify App statt im Browser öffnen",
+        "imageResolution_optionFullScreenPlayer": "Wiedergabe im Vollbildmodus",
+        "sidePlayQueueLayout_optionHorizontal": "horizontal",
+        "sidePlayQueueLayout_optionVertical": "vertikal"
    },
    "dragDropZone": {
        "error_oneFileOnly": "Bitte wähle nur 1 Datei",
@@ -1211,7 +1221,7 @@
                "dualVertical": "Dual-Vertikal"
            }
        },
-        "minimumFrequency": "Mindestfrequenz",
+        "minimumFrequency": "Minimale Frequenz",
        "minimumDecibels": "Minimale Dezibel",
        "visualizerType": "Visualizer Art",
        "cyclePresets": "Vorlagen durchrotieren",
@@ -1246,10 +1256,10 @@
        "channelLayout": "Kanallayout",
        "maxFPS": "Max FPS",
        "opacity": "Deckkraft",
-        "customGradients": "Benutzerdefinierte Gradienten",
+        "customGradients": "Benutzerdefinierter Farbverlauf",
        "addCustomGradient": "Benutzerdefinierten Gradienten hinzufügen",
-        "gradientName": "Gradientenname",
-        "gradientNamePlaceholder": "Gradientenname",
+        "gradientName": "Name Farbverlauf",
+        "gradientNamePlaceholder": "Name Farbverlauf",
        "vertical": "Vertikal",
        "horizontal": "Horizontal",
        "addColor": "Farbe hinzufügen",
@@ -1262,9 +1272,9 @@
        "builtIn": "Eingebaut",
        "colors": "Farben",
        "colorMode": "Farbmodus",
-        "gradient": "Gradienten",
-        "gradientLeft": "Gradienten links",
-        "gradientRight": "Gradienten rechts",
+        "gradient": "Farbverlauf",
+        "gradientLeft": "Farberverlauf links",
+        "gradientRight": "Farbverlauf rechts",
        "fft": "FFT",
        "fftSize": "FFT Größe",
        "smoothing": "Glätten",
@@ -1273,17 +1283,20 @@
        "sensitivity": "Empfindlichkeit",
        "weightingFilter": "Gewichtungsfilter",
        "maximumDecibels": "Maximale Dezibel",
-        "linearAmplitude": "Lineare Amplitude",
+        "linearAmplitude": "Linearer Ausschlag",
        "linearBoost": "Linearer Boost",
        "radialSpectrum": "Radiales Spektrum",
        "radial": "Radial",
        "radialInvert": "Radial invertiert",
        "radius": "Radius",
-        "miscellaneousSettings": "Verschiedenes Einstellungen",
+        "miscellaneousSettings": "Verschiedene Einstellungen",
        "ansiBands": "ANSI Bänder",
        "lowResolution": "Niedrige Auflösung",
        "showFPS": "FPS anzeigen",
        "fadePeaks": "Spitzen abblenden",
-        "showPeaks": "Spitzen anzeigen"
+        "showPeaks": "Spitzen anzeigen",
+        "systemAudioConsentAllow": "Erlauben",
+        "systemAudioConsentDecline": "Ablehnen",
+        "frequencyScale": "Frequenzskala"
    }
 }
@@ -347,6 +347,7 @@
            "input_skipDuplicates": "skip duplicates",
            "searchOrCreate": "search $t(entity.playlist, {\"count\": 2}) or type to create a new one",
            "success": "added $t(entity.trackWithCount, {\"count\": {{message}} }) to $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
+            "noneAdded": "no tracks were added to $t(entity.playlist, {\"count\": 1}) '{{playlist}}'",
            "title": "add to $t(entity.playlist, {\"count\": 1})"
        },
        "createPlaylist": {
@@ -540,6 +541,8 @@
                "lyricOffset": "lyrics offset (ms)",
                "lyricGap": "lyric gap",
                "lyricSize": "lyric size",
+                "lyricOpacityNonActive": "non-active lyric opacity",
+                "lyricScaleNonActive": "non-active lyric scale",
                "opacity": "opacity",
                "showLyricMatch": "show lyric match",
                "showLyricProvider": "show lyric provider",
@@ -761,7 +764,7 @@
        "artistReleaseTypeConfiguration_description": "configure what release types are shown, and in what order, on the album artist page",
        "audioDevice_description": "select the audio device to use for playback",
        "audioDevice": "audio device",
-        "audioExclusiveMode_description": "enable exclusive output mode. In this mode, the system is usually locked out, and only mpv will be able to output audio",
+        "audioExclusiveMode_description": "enable exclusive output mode. in this mode, the system is usually locked out, and only mpv will be able to output audio. visualizer system audio capture will not work while this is enabled",
        "audioExclusiveMode": "audio exclusive mode",
        "audioPlayer_description": "select the audio player to use for playback",
        "audioPlayer": "audio player",
@@ -983,6 +986,8 @@
        "playerbarWaveformBarWidth": "waveform bar width",
        "playerbarWaveformGap": "waveform gap",
        "playerbarWaveformRadius": "waveform radius",
+        "playerbarWaveformStretch": "waveform stretch",
+        "playerbarWaveformStretch_description": "stretches the waveform to fill the available space",
        "preferLocalLyrics_description": "prefer local lyrics over remote lyrics when available",
        "preferLocalLyrics": "prefer local lyrics",
        "showLyricsInSidebar_description": "a panel will be added to the attached play queue that displays the lyrics",
@@ -1003,6 +1008,8 @@
        "audioFadeOnStatusChange_description": "enables fade out and fade in when play/pause status changes",
        "preventSleepOnPlayback_description": "prevent the display from sleeping while music is playing",
        "preventSleepOnPlayback": "prevent sleep on playback",
+        "preventSuspendOnPlayback_description": "prevent the application from suspending while music is playing",
+        "preventSuspendOnPlayback": "prevent suspend on playback",
        "remotePassword_description": "sets the password for the remote control server. These credentials are by default transferred insecurely, so you should use a unique password that you do not care about",
        "remotePassword": "remote control server password",
        "remotePort_description": "sets the port for the remote control server",
@@ -1214,6 +1221,13 @@
        "mainText": "drop a file here"
    },
    "visualizer": {
+        "systemAudioConsentAllow": "Allow",
+        "systemAudioConsentBody": "The visualizer requires access to the system audio to work",
+        "systemAudioConsentDecline": "Deny",
+        "systemAudioConsentTitle": "Allow access to system audio?",
+        "systemAudioCaptureFailed": "Could not start capture: {{message}}",
+        "systemAudioNoAudioTrack": "No audio track was returned. Ensure audio capture is enabled when prompted.",
+        "systemAudioExclusiveModeNotSupported": "Visualizer is unavailable while audio exclusive mode is enabled. Disable Audio Exclusive Mode in MPV settings and try again.",
        "visualizerType": "Visualizer Type",
        "cyclePresets": "Cycle Presets",
        "cycleTime": "Cycle Time (seconds)",
@@ -83,7 +83,7 @@
        "replayGainClipping": "recortar {{ReplayGain}}",
        "hotkey_zoomIn": "ampliar",
        "scrobble_description": "hace scrobble de las reproducciones en tu servidor de medios",
-        "audioExclusiveMode_description": "activa el modo de audio exclusivo. En este modo, el sistema es normalmente bloqueado, y solo se permitirá mpv en la salida de audio",
+        "audioExclusiveMode_description": "activa el modo de audio exclusivo. En este modo, el sistema es normalmente bloqueado, y solo se permitirá mpv en la salida de audio. El sistema visualizador de captura de audio no funcionará mientras esto esté activado",
        "discordUpdateInterval": "intervalo de actualización del estado de actividad de {{discord}}",
        "themeLight": "tema (claro)",
        "fontType_optionBuiltIn": "fuente incorporada",
@@ -425,7 +425,11 @@
        "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."
+        "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.",
+        "playerbarWaveformStretch": "Estiramiento de la forma de onda",
+        "playerbarWaveformStretch_description": "Estira la forma de onda para rellenar el espacio disponible",
+        "preventSuspendOnPlayback": "Evitar la suspensión durante la reproducción",
+        "preventSuspendOnPlayback_description": "Evita que la aplicación se suspenda mientras se reproduce música"
    },
    "action": {
        "editPlaylist": "editar $t(entity.playlist, {\"count\": 1})",
@@ -772,7 +776,9 @@
                "lyricGap": "desfase de letra",
                "dynamicImageBlur": "tamaño de desenfoque de imagen",
                "dynamicIsImage": "habilitar imagen de fondo",
-                "lyricOffset": "desplazamiento de letras (ms)"
+                "lyricOffset": "desplazamiento de letras (ms)",
+                "lyricScaleNonActive": "Escala de letra no activa",
+                "lyricOpacityNonActive": "Opacidad de letra no activa"
            },
            "lyrics": "letras",
            "related": "relacionado",
@@ -932,7 +938,8 @@
            "input_skipDuplicates": "saltar duplicados",
            "input_playlists": "$t(entity.playlist, {\"count\": 2})",
            "create": "Crear $t(entity.playlist, {\"count\": 1}) {{playlist}}",
-            "searchOrCreate": "Buscar $t(entity.playlist, {\"count\": 2}) o escribir para crear uno nuevo"
+            "searchOrCreate": "Buscar $t(entity.playlist, {\"count\": 2}) o escribir para crear uno nuevo",
+            "noneAdded": "Ninguna pista fue añadida a $t(entity.playlist, {\"count\": 1}) '{{playlist}}'"
        },
        "updateServer": {
            "title": "actualizar servidor",
@@ -1001,6 +1008,9 @@
            "export": "Exportar letras",
            "input_synced": "Exportar letras sincronizadas",
            "input_offset": "$t(setting.lyricOffset)"
+        },
+        "editRadioStation": {
+            "success": "Estación de radio actualizada con éxito"
        }
    },
    "table": {
@@ -1378,6 +1388,13 @@
        "lowResolution": "Baja resolución",
        "splitGradient": "Dividir degradado",
        "noteLabels": "Etiquetas de notas",
-        "lumiBars": "Barras luminiscentes"
+        "lumiBars": "Barras luminiscentes",
+        "systemAudioConsentAllow": "Permitir",
+        "systemAudioConsentDecline": "Denegar",
+        "systemAudioConsentTitle": "¿Permitir acceso al sistema de audio?",
+        "systemAudioConsentBody": "El visualizador requiere acceso al sistema de audio para funcionar",
+        "systemAudioCaptureFailed": "No se pudo iniciar la captura: {{message}}",
+        "systemAudioNoAudioTrack": "Ninguna pista de audio devuelta. Asegúrate de que la captura de audio está activada cuando se solicite.",
+        "systemAudioExclusiveModeNotSupported": "El visualizador no está disponible mientras el modo de audio exclusivo esté activado. Desactiva el modo de audio exclusivo en la configuración de MPV e inténtalo de nuevo."
    }
 }
@@ -157,7 +157,8 @@
        "doNotShowAgain": "ez erakutsi hau berriro",
        "numberOfResults": "{{numberOfResults}} emaitza",
        "rename": "berrizendatu",
-        "newVersionAvailable": "bertsio berri bat eskuragarri dago"
+        "newVersionAvailable": "bertsio berri bat eskuragarri dago",
+        "gridRows": "sareta-errenkadak"
    },
    "player": {
        "repeat": "errepikatu",
@@ -409,7 +410,8 @@
        "fromYear": "urtetik aurrera",
        "explicitStatus": "$t(common.explicitStatus)",
        "matchAnd": "eta",
-        "matchOr": "edo"
+        "matchOr": "edo",
+        "sortName": "izenaren arabera ordenatu"
    },
    "setting": {
        "hotkey_playbackPause": "pausatu",
@@ -643,7 +645,7 @@
        "passwordStore_description": "zein pasahitz/sekretu biltegi erabili. aldatu hau pasahitzak gordetzeko arazoak badituzu",
        "playerFilters": "Iragazi ilarako abestiak",
        "sidePlayQueueStyle_description": "alboko erreprodukzio-ilararen estiloa ezartzen du",
-        "mediaSession_description": "Windows Media Session integrazioa gaitzen du, multimedia kontrolak eta metadatuak sistemaren bolumenaren gainjartzean eta blokeo pantailan bistaratuz (Windows bakarrik)",
+        "mediaSession_description": "Media Session integrazioa gaitzen du, multimedia kontrolak eta metadatuak sistemaren bolumenaren gainjartzean eta blokeo pantailan bistaratuz",
        "sidePlayQueueStyle": "alboko erreprodukzio-ilarako estiloa",
        "skipPlaylistPage": "saltatu erreprodukzio-zerrenda orria",
        "startMinimized_description": "abiarazi aplikazioa sistemaren erretiluan",
@@ -714,7 +716,19 @@
        "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"
+        "replayGainMode_description": "doitu bolumenaren irabazia fitxategiaren metadatuetan gordetako {{ReplayGain}} balioen arabera",
+        "listenbrainz": "erakutsi ListenBrainz estekak",
+        "sidebarPlaylistSorting": "alboko barrako erreprodukzio-zerrenda ordenatzea",
+        "sidebarPlaylistListFilterRegex_description": "ezkutatu alboko barran adierazpen erregular honekin bat datozen erreprodukzio-zerrendak",
+        "sidebarPlaylistListFilterRegex_placeholder": "adib. ^Eguneroko Nahasketa.*",
+        "sidebarPlaylistListFilterRegex": "erreprodukzio-zerrenda iragazteko adierazpen erregularra",
+        "sidePlayQueueLayout": "alboko erreprodukzio-ilararen diseinua",
+        "sidePlayQueueLayout_description": "erantsitako alboko erreprodukzio-ilararen diseinua ezartzen du",
+        "sidePlayQueueLayout_optionHorizontal": "horizontala",
+        "sidePlayQueueLayout_optionVertical": "bertikala",
+        "skipDuration_description": "erreproduzitzailearen barran saltatzeko botoiak erabiltzean saltatzeko iraupena ezartzen du",
+        "skipPlaylistPage_description": "erreprodukzio-zerrenda batera nabigatzean, joan erreprodukzio-zerrendako abestien zerrendara lehenetsitako orrialdera joan beharrean",
+        "translationApiKey_description": "itzulpenerako api gakoa (zerbitzu globalaren amaiera-puntua soilik)"
    },
    "form": {
        "addServer": {
@@ -731,7 +745,9 @@
            "success": "zerbitzaria behar bezala gehitu da",
            "input_preferInstantMix": "nahiago izan berehalako nahasketa",
            "input_preferInstantMixDescription": "erabili berehalako nahasketa soilik antzeko abestiak lortzeko. erabilgarria portaera hau aldatzen duten pluginak badituzu",
-            "input_remoteUrl": "URL publikoa"
+            "input_remoteUrl": "URL publikoa",
+            "input_preferRemoteUrl": "url publikoa nahiago izan",
+            "input_remoteUrlPlaceholder": "aukerakoa: kanpoko funtzioetarako url publikoa"
        },
        "addToPlaylist": {
            "input_playlists": "$t(entity.playlist, {\"count\": 2})",
@@ -739,7 +755,8 @@
            "input_skipDuplicates": "saltatu bikoiztuak",
            "title": "gehitu $t(entity.playlist, {\"count\": 1})-(a)ri",
            "create": "sortu $t(entity.playlist, {\"count\": 1}) {{playlist}}",
-            "searchOrCreate": "bilatu $t(entity.playlist, {\"count\": 2}) edo idatzi berri bat sortzeko"
+            "searchOrCreate": "bilatu $t(entity.playlist, {\"count\": 2}) edo idatzi berri bat sortzeko",
+            "noneAdded": "ez da pistarik gehitu honi $t(entity.playlist, {\"count\": 1}) '{{playlist}}'"
        },
        "createPlaylist": {
            "input_description": "$t(common.description)",
@@ -760,7 +777,9 @@
            "success": "partekatzeko esteka arbelera kopiatu da (edo egin klik hemen irekitzeko)",
            "expireInvalid": "iraungitze-data etorkizunean izan behar da",
            "allowDownloading": "baimendu deskargatzea",
-            "createFailed": "partekatzea sortzeak huts egin du (partekatzea gaituta al dago?)"
+            "createFailed": "partekatzea sortzeak huts egin du (partekatzea gaituta al dago?)",
+            "copyToClipboard": "Kopiatu arbelean: Ctrl+C, Enter",
+            "successMustClick": "partekatzea behar bezala sortu da. egin klik hemen irekitzeko"
        },
        "deletePlaylist": {
            "success": "$t(entity.playlist, {\"count\": 1}) behar bezala ezabatu da",
@@ -988,7 +1007,10 @@
            "recentReleases": "azken argitalpenak",
            "viewDiscography": "ikusi diskografia",
            "groupingTypeAll": "argitalpen mota guztiak",
-            "groupingTypePrimary": "argitalpen mota nagusiak"
+            "groupingTypePrimary": "argitalpen mota nagusiak",
+            "favoriteSongs": "abesti gogokoenak",
+            "topSongsCommunity": "komunitatea",
+            "topSongsPersonal": "pertsonala"
        },
        "itemDetail": {
            "copyPath": "kopiatu bidea arbelean",
@@ -1006,6 +1028,13 @@
        },
        "radioList": {
            "title": "irrati-kateak"
+        },
+        "releasenotes": {
+            "noStableReleaseToCompare": "ez dago bertsio egonkorrik alderatzeko"
+        },
+        "windowBar": {
+            "paused": "(Pausatuta) ",
+            "privateMode": "(Modu pribatua)"
        }
    },
    "releaseType": {
@@ -1038,7 +1067,19 @@
        "notContains": "ez dauka",
        "startsWith": "honekin hasten da",
        "endsWith": "honekin amaitzen da",
-        "isNot": "ez da"
+        "isNot": "ez da",
+        "afterDate": "(data) ondoren da",
+        "after": "ondoren da",
+        "before": "lehenago da",
+        "beforeDate": "(data) baino lehenagokoa da",
+        "inTheLast": "azkenengoan dago",
+        "inPlaylist": "bertan dago",
+        "inTheRange": "tartean dago",
+        "inTheRangeDate": "(data) tartean dago",
+        "isGreaterThan": "hau baino handiagoa da",
+        "isLessThan": "hau baino gutxiago da",
+        "notInPlaylist": "ez dago barruan",
+        "notInTheLast": "ez dago azkenengoan"
    },
    "visualizer": {
        "general": "Orokorra",
@@ -246,10 +246,10 @@
        "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)\"",
+        "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 pistes uniquement si elles sont dans un sous-dossier, qui est lui-même dans un dossier \"Musique(s)\"",
        "badValue": "option {{value}} invalide. cette valeur n'existe plus",
        "notificationDenied": "les autorisations pour les notifications ont été refusées. ce paramètre n'a aucun effet",
-        "multipleServerSaveQueueError": "la file d'attente contient un ou plusieurs morceaux qui ne proviennent pas du serveur actuel. Ceci n'est pas prise en charge",
+        "multipleServerSaveQueueError": "la file d'attente contient un ou plusieurs titres qui ne proviennent pas du serveur actuel. Ceci n'est pas prise en charge",
        "saveQueueFailed": "échec de l'enregistrement de la file d'attente",
        "settingsSyncError": "des incohérences ont été détectées entre les paramètres du moteur de rendu et ceux du processus principal. redémarrez l'application pour appliquer les modifications",
        "noNetwork": "serveur indisponible",
@@ -340,7 +340,9 @@
                "lyricGap": "espacement des lettres",
                "dynamicIsImage": "activer l'image d'arrière-plan",
                "dynamicImageBlur": "intensité du flou sur l'image d'arrière-plan",
-                "lyricOffset": "décalage des paroles (ms)"
+                "lyricOffset": "décalage des paroles (ms)",
+                "lyricScaleNonActive": "mise à l'échelle des paroles inactives",
+                "lyricOpacityNonActive": "opacité des paroles inactive"
            },
            "upNext": "à suivre",
            "lyrics": "paroles",
@@ -477,7 +479,7 @@
            "groupingTypePrimary": "types de parution principale",
            "topSongsCommunity": "communauté",
            "topSongsPersonal": "personnel",
-            "favoriteSongsFrom": "titres favori de {{title}}"
+            "favoriteSongsFrom": "titres favoris de {{title}}"
        },
        "itemDetail": {
            "copyPath": "copier le chemin dans le presse-papiers",
@@ -520,7 +522,7 @@
    },
    "setting": {
        "audioDevice_description": "sélectionnez le périphérique audio à utiliser pour la lecture",
-        "audioExclusiveMode_description": "activer le mode de sortie exclusif. Dans ce mode, le système est généralement verrouillé et seul mpv pourra émettre de l'audio",
+        "audioExclusiveMode_description": "activer le mode de sortie exclusif. Dans ce mode, le système est généralement verrouillé et seul mpv pourra émettre de l'audio. La capture audio du système de visualisation ne fonctionnera pas lorsque cette option est activée",
        "audioPlayer_description": "sélectionnez le lecteur audio à utiliser pour la lecture",
        "crossfadeDuration_description": "définit la durée du fondu enchaîné",
        "audioDevice": "périphérique audio",
@@ -914,7 +916,7 @@
            "ignoreCors": "ignorer cors $t(common.restartRequired)",
            "error_savePassword": "une erreur s’est produite lors de la tentative de sauvegarde du mot de passe",
            "input_preferInstantMix": "préférer le mix instantané",
-            "input_preferInstantMixDescription": "utiliser uniquement le mix instantané pour jouer des pistes similaires. utile si vous avez des plugins qui modifient ce comportement",
+            "input_preferInstantMixDescription": "utiliser uniquement le mix instantané pour jouer des titres similaires. utile si vous avez des plugins qui modifient ce comportement",
            "input_preferRemoteUrl": "préférer une URL publique",
            "input_remoteUrl": "URL publique",
            "input_remoteUrlPlaceholder": "optionnel : URL publique pour les fonctionnalités externes"
@@ -1002,6 +1004,9 @@
            "export": "exporter les paroles",
            "input_synced": "exporter les paroles synchronisées",
            "input_offset": "$t(setting.lyricOffset)"
+        },
+        "editRadioStation": {
+            "success": "station de radio a été mise à jour avec succès"
        }
    },
    "entity": {
@@ -1379,6 +1384,13 @@
        },
        "lumiBars": "Lumi Bars",
        "outlineBars": "Outline Bars",
-        "splitGradient": "Split Gradient"
+        "splitGradient": "Split Gradient",
+        "systemAudioNoAudioTrack": "Aucune piste audio n'a été renvoyée. Assurez-vous que la capture audio est activée lorsque vous y êtes invité.",
+        "systemAudioConsentAllow": "Permettre",
+        "systemAudioConsentBody": "Le visualiseur nécessite un accès au système audio pour fonctionner",
+        "systemAudioConsentDecline": "Refuser",
+        "systemAudioConsentTitle": "Permettre l'accès au système audio ?",
+        "systemAudioCaptureFailed": "Impossible de démarrer la capture : {{message}}",
+        "systemAudioExclusiveModeNotSupported": "Le visualiseur est indisponible lorsque le mode audio exclusif est activé. Désactivez ce mode dans les paramètres MPV et réessayez."
    }
 }
@@ -1037,7 +1037,7 @@
        },
        "updateServer": {
            "title": "サーバーをアップデート",
-            "success": "サーバーがアップデートされました"
+            "success": "サーバーの更新に成功しました"
        },
        "queryEditor": {
            "input_optionMatchAll": "すべて一致",
@@ -1102,6 +1102,9 @@
        },
        "saveQueue": {
            "success": "プレイキューをサーバーに保存しました"
+        },
+        "editRadioStation": {
+            "success": "ラジオ局の更新に成功しました"
        }
    },
    "entity": {
@@ -1332,6 +1335,12 @@
                "d": "D",
                "z": "Z"
            }
-        }
+        },
+        "systemAudioConsentAllow": "許可",
+        "systemAudioConsentBody": "ビジュアライザーを機能させるためには、システムオーディオへのアクセスが必要です",
+        "systemAudioConsentDecline": "拒否",
+        "systemAudioConsentTitle": "システムオーディオへのアクセスを許可しますか？",
+        "systemAudioCaptureFailed": "キャプチャを開始できませんでした: {{message}}",
+        "systemAudioNoAudioTrack": "音声トラックが返されませんでした。プロンプトが表示されたら、音声キャプチャが有効になっていることを確認してください。"
    }
 }
@@ -143,7 +143,7 @@
        "doNotShowAgain": "niet opnieuw tonen",
        "externalLinks": "externe links",
        "faster": "sneller",
-        "preview": "voorvertoning",
+        "preview": "voorbeeld",
        "private": "privé",
        "public": "publiekelijk",
        "recordLabel": "platenlabel",
@@ -152,7 +152,7 @@
        "sort": "sorteer",
        "trackGain": "trackvolume",
        "trackPeak": "piekniveau",
-        "clean": "schoon",
+        "clean": "opschonen",
        "gridRows": "rasterrijen",
        "tableColumns": "tabelkolommen",
        "itemsMore": "{{count}} meer",
@@ -283,7 +283,9 @@
                "unsynchronized": "niet gesynchronizeerd",
                "useImageAspectRatio": "gebruik aspect ratio van de afbeelding",
                "lyricOffset": "songtekst-vertraging (ms)",
-                "showLyricProvider": "toon songtekstaanbieder"
+                "showLyricProvider": "toon songtekstaanbieder",
+                "lyricOpacityNonActive": "opaciteit van niet-actieve songtekst",
+                "lyricScaleNonActive": "schaal niet-actieve songtekst"
            },
            "lyrics": "liedtekst",
            "related": "gerelateerd",
@@ -680,7 +682,7 @@
        "artistReleaseTypeConfiguration_description": "configureer welke uitgavesoorten worden getoond op de albumartiestpagina en in welke volgorde",
        "audioDevice_description": "kies het audioapparaat dat wordt gebruikt om af te spelen",
        "audioDevice": "audioapparaat",
-        "audioExclusiveMode_description": "schakel exclusieve uitvoermodus in. In deze modus wordt het systeem normaliter uitgesloten en zal enkel mpv audio kunnen uitvoeren",
+        "audioExclusiveMode_description": "schakel exclusieve uitvoermodus in. in deze modus wordt het systeem normaliter uitgesloten en zal enkel mpv audio kunnen uitvoeren. geluidsopname in de visualiseerder zal niet werken als dit is ingeschakeld",
        "audioExclusiveMode": "audio-exclusieve modus",
        "audioPlayer_description": "kies de audiospeler om te gebruiken bij het afspelen",
        "audioPlayer": "audiospeler",
@@ -985,7 +987,11 @@
        "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"
+        "sidePlayQueueLayout_optionVertical": "verticaal",
+        "playerbarWaveformStretch": "rekking van golfvorm",
+        "playerbarWaveformStretch_description": "rekt de golfvorm om de beschikbare ruimte op te vullen",
+        "waveformLoadingDelay": "laadvertraging van golfvorm",
+        "waveformLoadingDelay_description": "vertraging in seconden voordat de golfvorm wordt geladen. vergroot deze waarde als je stotteringen ervaart bij gebruik van de webspeler."
    },
    "form": {
        "addServer": {
@@ -1094,6 +1100,9 @@
        },
        "saveQueue": {
            "success": "wachtrij opgeslagen op server"
+        },
+        "editRadioStation": {
+            "success": "radiozender succesvol bijgewerkt"
        }
    },
    "player": {
@@ -1353,6 +1362,13 @@
                "d": "D",
                "z": "Z"
            }
-        }
+        },
+        "systemAudioConsentAllow": "Toestaan",
+        "systemAudioConsentBody": "De visualiseerder heeft toegang tot het audiosysteem nodig om te werken",
+        "systemAudioConsentDecline": "Weigeren",
+        "systemAudioConsentTitle": "Toegang tot audiosysteem toestaan?",
+        "systemAudioCaptureFailed": "Kon opname niet starten: {{message}}",
+        "systemAudioNoAudioTrack": "Geen geluidsspoor ontvangen. Verifieer dat audio-opname is ingeschakeld als daar om wordt gevraagd.",
+        "systemAudioExclusiveModeNotSupported": "De visualiseerder is niet beschikbaar als audio-exclusieve modus is ingeschakeld. Schakel audio-exclusieve modus in de MPV-instellingen uit en probeer het opnieuw."
    }
 }
@@ -352,7 +352,8 @@
            "input_skipDuplicates": "pomiń duplikaty",
            "input_playlists": "$t(entity.playlist, {\"count\": 2})",
            "create": "utwórz $t(entity.playlist, {\"count\": 1}) {{playlist}}",
-            "searchOrCreate": "wyszukaj $t(entity.playlist, {\"count\": 2}) lub wpisz, aby utworzyć nową"
+            "searchOrCreate": "wyszukaj $t(entity.playlist, {\"count\": 2}) lub wpisz, aby utworzyć nową",
+            "noneAdded": "nie dodano utworów do $t(entity.playlist, {\"count\": 1}) '{{playlist}}'"
        },
        "updateServer": {
            "title": "uaktualnij serwer",
@@ -442,7 +443,9 @@
                "lyricGap": "odstępy tekstu",
                "dynamicImageBlur": "rozmiar rozmycia obrazu",
                "dynamicIsImage": "włącz obraz w tle",
-                "lyricOffset": "opóźnienie tekstów (ms)"
+                "lyricOffset": "opóźnienie tekstów (ms)",
+                "lyricOpacityNonActive": "przezroczystość nieaktywnego tekstu",
+                "lyricScaleNonActive": "skala nieaktywnego tekstu"
            },
            "upNext": "następne",
            "lyrics": "tekst",
@@ -702,7 +705,7 @@
        "hotkey_favoriteCurrentSong": "ulubiona $t(common.currentSong)",
        "hotkey_zoomIn": "przybliż",
        "hotkey_browserForward": "przeglądarka w przód",
-        "audioExclusiveMode_description": "włącz wyłączny tryb wyjścia. W tym trybie, system zwykle jest zablokowany i może odtwarzać tylko poprzez mpv",
+        "audioExclusiveMode_description": "włącz wyłączny tryb wyjścia. W tym trybie, system zwykle jest zablokowany i może odtwarzać tylko poprzez mpv. wizualizer i przechwytywanie audio przez sysytem nie będzie działać gdy jest to włączone",
        "discordUpdateInterval": "{{discord}} interwał aktualizacji rich presence",
        "fontType_optionBuiltIn": "wbudowana czcionka",
        "hotkey_playbackPlayPause": "odtwarzaj / wstrzymaj",
@@ -1064,7 +1067,11 @@
        "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."
+        "waveformLoadingDelay_description": "opóźnienie w sekundach przed załadowaniem fali. zwiększ tą wartość jeżeli doświadczasz zawieszania się odtwarzacza przeglądarkowego.",
+        "playerbarWaveformStretch": "rozciąganie przebiegu",
+        "playerbarWaveformStretch_description": "rozciąga przebieg aby wypełnić dostępną przestrzeń",
+        "preventSuspendOnPlayback_description": "powstrzymuj wstrzymanie podczas odtwarzania muzyki",
+        "preventSuspendOnPlayback": "powstrzymuje wstrzymanie przy odtwarzaniu"
    },
    "table": {
        "config": {
@@ -1381,6 +1388,13 @@
        },
        "pasteGradient": "Wklej Gradient",
        "pasteGradientPlaceholder": "Wklej tutaj JSON gradientu...",
-        "ansiBands": "Paski ANSI"
+        "ansiBands": "Paski ANSI",
+        "systemAudioConsentAllow": "Zezwól",
+        "systemAudioConsentBody": "Wizualizer wymaga dostępu do audio systemu do działania",
+        "systemAudioConsentDecline": "Odmów",
+        "systemAudioConsentTitle": "Przyznać dostęp do audio systemu?",
+        "systemAudioCaptureFailed": "Nie udało się rozpocząć przechwytywania: {{message}}",
+        "systemAudioNoAudioTrack": "Nie została zwrócona żadna ścieżka audio. Sprawdź czy przechwytywanie audio będzie włączone, gdy będzie o to prośba.",
+        "systemAudioExclusiveModeNotSupported": "Wizualizer jest niedostępny w gdy tryb wyłącznie z dźwiękiek jest włączony. Wyłącz tryb wyłącznie audio w ustawieniach MPV i spróbuj ponownie."
    }
 }
@@ -91,7 +91,7 @@
        "share": "compartilhar",
        "close": "fechar",
        "translation": "tradução",
-        "albumGain": "ganho do album",
+        "albumGain": "ganho do álbum",
        "trackPeak": "peak da faixa",
        "albumPeak": "pico do álbum",
        "trackGain": "ganho da faixa",
@@ -121,10 +121,21 @@
        "removeFromFavorites": "remover de $t(entity.favorite, {\"count\": 2})",
        "openIn": {
            "lastfm": "Abrir em Last.fm",
-            "musicbrainz": "Abrir em MusicBrainz"
+            "musicbrainz": "Abrir em MusicBrainz",
+            "listenbrainz": "Abrir no ListenBrainz",
+            "qobuz": "Abrir no Qobuz"
        },
        "toggleSmartPlaylistEditor": "alternar editor $t(entity.smartPlaylist)",
-        "moveToNext": "mover para o próximo"
+        "moveToNext": "mover para o próximo",
+        "addOrRemoveFromSelection": "adicionar ou remover da seleção",
+        "goToCurrent": "ir para o item atual",
+        "createRadioStation": "criar $t(entity.radioStation, {\"count\": 1})",
+        "deleteRadioStation": "deletar $t(entity.radioStation, {\"count\": 1})",
+        "selectAll": "selecionar tudo",
+        "holdToMoveToTop": "segure para ir ao topo",
+        "moveItems": "mover itens",
+        "viewMore": "ver mais",
+        "openApplicationDirectory": "abrir a pasta do aplicativo"
    },
    "form": {
        "deletePlaylist": {
@@ -18,8 +18,11 @@
        "toggleSmartPlaylistEditor": "вкл./откл. редактор $t(entity.smartPlaylist)",
        "removeFromFavorites": "удалить из $t(entity.favorite, {\"count\": 2})",
        "openIn": {
-            "lastfm": "открыть на Last.fm",
-            "musicbrainz": "открыть на MusicBrainz"
+            "lastfm": "Открыть на Last.fm",
+            "musicbrainz": "открыть на MusicBrainz",
+            "listenbrainz": "Открыть на ListenBrainz",
+            "qobuz": "Открыть в Qobuz",
+            "spotify": "Открыть в Spotify"
        },
        "moveToNext": "следующий",
        "addOrRemoveFromSelection": "добавить или удалить из выделения",
@@ -167,7 +170,8 @@
        "explicit": "нецензурная лексика",
        "externalLinks": "внешние ссылки",
        "explicitStatus": "признак нецензурного контента",
-        "newVersionAvailable": "доступна новая версия"
+        "newVersionAvailable": "доступна новая версия",
+        "numberOfResults": "{{numberOfResults}} результатов"
    },
    "entity": {
        "album_one": "альбом",
@@ -435,7 +439,17 @@
            "home": "$t(common.home)",
            "myLibrary": "Моя библиотека",
            "shared": "Публичные плейлисты $t(entity.playlist, {\"count\": 2})",
-            "collections": "коллекции"
+            "collections": "коллекции",
+            "albumArtists": "$t(entity.albumArtist, {\"count\": 2})",
+            "albums": "$t(entity.album, {\"count\": 2})",
+            "artists": "$t(entity.artist, {\"count\": 2})",
+            "favorites": "$t(entity.favorite, {\"count\": 2})",
+            "folders": "$t(entity.folder, {\"count\": 2})",
+            "genres": "$t(entity.genre, {\"count\": 2})",
+            "radio": "$t(entity.radioStation, {\"count\": 2})",
+            "playlists": "$t(entity.playlist, {\"count\": 2})",
+            "settings": "$t(common.setting, {\"count\": 2})",
+            "tracks": "$t(entity.track, {\"count\": 2})"
        },
        "fullscreenPlayer": {
            "config": {
@@ -452,7 +466,9 @@
                "useImageAspectRatio": "использовать соотношение сторон изображения",
                "lyricGap": "пробел между словами",
                "dynamicIsImage": "включить фоновое изображение",
-                "dynamicImageBlur": "сила размытия изображения"
+                "dynamicImageBlur": "сила размытия изображения",
+                "lyricOpacityNonActive": "непрозрачность неактивных слов",
+                "lyricScaleNonActive": "размер неактивных слов"
            },
            "upNext": "играет",
            "lyrics": "слова",
@@ -475,7 +491,8 @@
            "selectMusicFolder": "выбрать папку с музыкой",
            "noMusicFolder": "папка с музыкой не выбрана",
            "multipleMusicFolders": "{{count}} выбрано музыкальных папок",
-            "commandPalette": "открыть командную строку"
+            "commandPalette": "открыть командную строку",
+            "settings": "$t(common.setting, {\"count\": 2})"
        },
        "manageServers": {
            "title": "сервера",
@@ -510,7 +527,8 @@
            "goTo": "перейти в",
            "moveToNext": "$t(action.moveToNext)",
            "playShuffled": "$t(player.shuffle)",
-            "moveItems": "$t(action.moveItems)"
+            "moveItems": "$t(action.moveItems)",
+            "playSimilarSongs": "$t(player.playSimilarSongs)"
        },
        "home": {
            "mostPlayed": "слушают чаще всего",
@@ -518,7 +536,8 @@
            "title": "$t(common.home)",
            "explore": "откройте новое",
            "recentlyPlayed": "игралось недавно",
-            "recentlyReleased": "Новинки"
+            "recentlyReleased": "Новинки",
+            "genres": "$t(entity.genre, {\"count\": 2})"
        },
        "albumDetail": {
            "moreFromArtist": "больше от $t(entity.artist, {\"count\": 1})",
@@ -552,10 +571,13 @@
        },
        "genreList": {
            "showAlbums": "показать $t(entity.genre, {\"count\": 1}) $t(entity.album, {\"count\": 2})",
-            "showTracks": "показать $t(entity.genre, {\"count\": 1}) $t(entity.track, {\"count\": 2})"
+            "showTracks": "показать $t(entity.genre, {\"count\": 1}) $t(entity.track, {\"count\": 2})",
+            "title": "$t(entity.genre, {\"count\": 2})"
        },
        "trackList": {
-            "artistTracks": "Треки {{artist}}"
+            "artistTracks": "Треки {{artist}}",
+            "genreTracks": "\"{{genre}}\" $t(entity.track, {\"count\": 2})",
+            "title": "$t(entity.track, {\"count\": 2})"
        },
        "globalSearch": {
            "commands": {
@@ -616,6 +638,12 @@
        },
        "favorites": {
            "title": "$t(entity.favorite, {\"count\": 2})"
+        },
+        "folderList": {
+            "title": "$t(entity.folder, {\"count\": 2})"
+        },
+        "playlistList": {
+            "title": "$t(entity.playlist, {\"count\": 2})"
        }
    },
    "form": {
@@ -656,7 +684,8 @@
            "input_skipDuplicates": "не добавлять дубликаты",
            "create": "создать $t(entity.playlist, {\"count\": 1}) {{playlist}}",
            "searchOrCreate": "для создания нового списка выполните поиск по $t(entity.playlist, {\"count\": 2}) или введите соответствующий текст",
-            "input_playlists": "$t(entity.playlist, {\"count\": 2})"
+            "input_playlists": "$t(entity.playlist, {\"count\": 2})",
+            "noneAdded": "в плейлист $t(entity.playlist, {\"count\": 1}) '{{playlist}}' не было добавлено ни одного трека"
        },
        "updateServer": {
            "title": "обновление сервера",
@@ -725,6 +754,9 @@
            "input_played_optionUnplayed": "только не игранные треки",
            "input_played_optionPlayed": "только воспроизведённые треки",
            "input_genre": "$t(entity.genre, {\"count\": 1})"
+        },
+        "editRadioStation": {
+            "success": "радиостанция успешно обновлена"
        }
    },
    "setting": {
@@ -1053,7 +1085,8 @@
        "audioFadeOnStatusChange": "плавное изменение звука",
        "audioFadeOnStatusChange_description": "включает эффекты затухания и появления звука при изменении статуса (пауза/проигрывание)",
        "preventSleepOnPlayback_description": "запрещает спящий режим экрана, пока играет музыка",
-        "preventSleepOnPlayback": "не переходить в спящий режим"
+        "preventSleepOnPlayback": "не переходить в спящий режим",
+        "discordLinkType_none": "$t(common.none)"
    },
    "releaseType": {
        "secondary": {
@@ -1074,7 +1107,8 @@
            "other": "другие",
            "broadcast": "транслировать",
            "ep": "эп",
-            "single": "сингл"
+            "single": "сингл",
+            "album": "$t(entity.album, {\"count\": 1})"
        }
    },
    "datetime": {
@@ -0,0 +1 @@
+{}
@@ -36,7 +36,10 @@
        "openApplicationDirectory": "відкрити каталог додатків",
        "openIn": {
            "lastfm": "Відкрити в Last.fm",
-            "musicbrainz": "Відкрити в MusicBrainz"
+            "musicbrainz": "Відкрити в MusicBrainz",
+            "listenbrainz": "Відкрити у ListenBrainz",
+            "qobuz": "Відкрити у Qobuz",
+            "spotify": "Відкрити у Spotify"
        }
    },
    "common": {
@@ -164,7 +167,9 @@
        "explicit": "Експліцитний зміст",
        "gridRows": "рядки сітки",
        "tableColumns": "стовпці таблиці",
-        "itemsMore": "{{count}} більше"
+        "itemsMore": "{{count}} більше",
+        "numberOfResults": "{{numberOfResults}} результатів",
+        "newVersionAvailable": "доступна нова версія"
    },
    "entity": {
        "album_one": "альбом",
@@ -255,7 +260,9 @@
        "serverRequired": "потрібен сервер",
        "sessionExpiredError": "ваша сесія закінчилася",
        "systemFontError": "сталася помилка під час спроби отримати системні шрифти",
-        "settingsSyncError": "виявлено розбіжності між налаштуваннями в рендерері та основним процесом. перезапустіть програму, щоб застосувати зміни"
+        "settingsSyncError": "виявлено розбіжності між налаштуваннями в рендерері та основним процесом. перезапустіть програму, щоб застосувати зміни",
+        "invalidJson": "недійсний JSON",
+        "playbackPausedDueToError": "відтворення було призупинено через помилку"
    },
    "filter": {
        "album": "$t(entity.album, {\"count\": 1})",
@@ -281,7 +288,7 @@
        "isPublic": "є публічним",
        "isRated": "є оціненим",
        "isRecentlyPlayed": "нещодавно відтворено",
-        "lastPlayed": "нещодавно відтворені",
+        "lastPlayed": "останнє відтворене",
        "mostPlayed": "найбільш відтворювані",
        "name": "назва",
        "note": "примітка",
@@ -301,7 +308,9 @@
        "title": "назва",
        "toYear": "до року",
        "trackNumber": "трек",
-        "explicitStatus": "$t(common.explicitStatus)"
+        "explicitStatus": "$t(common.explicitStatus)",
+        "matchAnd": "і",
+        "matchOr": "або"
    },
    "datetime": {
        "minuteShort": "хв.",
@@ -414,7 +423,9 @@
            "setExpiration": "встановити термін дії",
            "success": "посилання для спільного використання скопійовано в буфер обміну (натисніть тут, щоб відкрити)",
            "expireInvalid": "термін дії повинен бути в майбутньому",
-            "createFailed": "не вдалося створити спільний доступ (чи ввімкнено спільний доступ?)"
+            "createFailed": "не вдалося створити спільний доступ (чи ввімкнено спільний доступ?)",
+            "copyToClipboard": "Скопіювати до буфера обміну: Ctrl+C, Enter",
+            "successMustClick": "посилання успішно створено, натисніть сюди, щоб відкрити"
        },
        "shuffleAll": {
            "title": "відтворити випадково",
@@ -435,6 +446,9 @@
            "enabled": "приватний режим увімкнено, стан відтворення тепер приховано від зовнішніх інтеграцій",
            "disabled": "приватний режим вимкнено, стан відтворення тепер видно для увімкнених зовнішніх інтеграцій",
            "title": "приватний режим"
+        },
+        "editRadioStation": {
+            "success": "радіо станція успішно оновлена"
        }
    },
    "player": {
@@ -539,6 +553,52 @@
            "goToAlbum": "перейти до $t(entity.album, {\"count\": 1})",
            "goToAlbumArtist": "перейти до $t(entity.albumArtist, {\"count\": 1})",
            "showDetails": "отримати інформацію"
+        },
+        "fullscreenPlayer": {
+            "config": {
+                "dynamicBackground": "динамічний фон",
+                "dynamicImageBlur": "розмір розмиття зображення",
+                "dynamicIsImage": "включити фонове зображення",
+                "followCurrentLyric": "слідкувати за поточним рядком",
+                "lyricAlignment": "вирівнювання тексту",
+                "lyricOffset": "затримка тексту (мс)",
+                "lyricGap": "розмір між рядками",
+                "lyricSize": "розмір тексту",
+                "opacity": "непрозорість",
+                "showLyricMatch": "показувати збіг тексту пісень",
+                "showLyricProvider": "показувати джерело тексту пісень",
+                "synchronized": "синхронізовано",
+                "unsynchronized": "несинхронізовано",
+                "useImageAspectRatio": "використовувати співвідношення сторін зображення"
+            },
+            "lyrics": "текст пісні",
+            "related": "пов'язані",
+            "upNext": "далі",
+            "visualizer": "візуалізатор",
+            "noLyrics": "текст пісні не знайдено"
+        },
+        "genreList": {
+            "showAlbums": "показати $t(entity.genre, {\"count\": 1}) $t(entity.album, {\"count\": 2})",
+            "showTracks": "показати $t(entity.genre, {\"count\": 1}) $t(entity.track, {\"count\": 2})",
+            "title": "$t(entity.genre, {\"count\": 2})"
+        },
+        "folderList": {
+            "title": "$t(entity.folder, {\"count\": 2})"
+        },
+        "globalSearch": {
+            "commands": {
+                "goToPage": "перейти до сторінки",
+                "searchFor": "шукати на {{query}}",
+                "serverCommands": "команди сервера"
+            },
+            "title": "команди"
+        },
+        "home": {
+            "explore": "дослідити з вашої бібліотеки",
+            "genres": "$t(entity.genre, {\"count\": 2})",
+            "mostPlayed": "найбільш відтворені",
+            "newlyAdded": "нещодавно додані релізи",
+            "recentlyPlayed": "нещодавно відтворені"
        }
    }
 }
@@ -1015,6 +1015,9 @@
            "input_played_optionPlayed": "仅已播放的曲目",
            "input_limit": "有多少首歌？",
            "input_played": "播放筛选器"
+        },
+        "editRadioStation": {
+            "success": "电台更新成功"
        }
    },
    "table": {
@@ -233,7 +233,9 @@
                "showLyricMatch": "顯示匹配的歌詞",
                "dynamicImageBlur": "圖片模糊大小",
                "dynamicIsImage": "啟用背景圖片",
-                "lyricOffset": "歌詞偏移時間 (ms)"
+                "lyricOffset": "歌詞偏移時間 (ms)",
+                "lyricOpacityNonActive": "非活躍歌詞的不透明度",
+                "lyricScaleNonActive": "非活躍歌詞的比例"
            },
            "lyrics": "歌詞",
            "related": "相關",
@@ -433,7 +435,7 @@
        "audioDevice": "音訊設備",
        "audioDevice_description": "選擇用於播放的音訊設備",
        "audioExclusiveMode": "音訊獨佔模式",
-        "audioExclusiveMode_description": "啟用獨佔輸出模式。在此模式下，系統通常被鎖定，只有 mpv 能夠輸出音訊",
+        "audioExclusiveMode_description": "啟用獨佔輸出模式。在此模式下，系統通常被鎖定，只有 mpv 能夠輸出音訊。視覺化音訊截取在此選項啟用時不會作用",
        "audioPlayer": "音訊播放器",
        "crossfadeDuration": "淡入淡出持續時間",
        "crossfadeDuration_description": "設定淡入淡出持續時間",
@@ -792,7 +794,11 @@
        "qobuz_description": "在藝術家/專輯頁面上顯示 Qobuz 的連結",
        "qobuz": "顯示 Qobuz 連結",
        "waveformLoadingDelay": "波形載入延遲",
-        "waveformLoadingDelay_description": "載入波形前的延遲（以秒為單位）。如果您在使用網頁播放器時遇到卡頓，請增加此值。"
+        "waveformLoadingDelay_description": "載入波形前的延遲（以秒為單位）。如果您在使用網頁播放器時遇到卡頓，請增加此值。",
+        "playerbarWaveformStretch": "波形拉伸",
+        "playerbarWaveformStretch_description": "拉伸波形來填補可用空間",
+        "preventSuspendOnPlayback_description": "音樂播放時防止應用程式進入休眠",
+        "preventSuspendOnPlayback": "在播放時防止應用程式暫停"
    },
    "table": {
        "config": {
@@ -1042,7 +1048,8 @@
            "success": "新增 $t(entity.trackWithCount, {\"count\": {{message}} }) 到 $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
            "title": "新增到$t(entity.playlist, {\"count\": 1})",
            "create": "建立 $t(entity.playlist, {\"count\": 1}) {{playlist}}",
-            "searchOrCreate": "搜尋$t(entity.playlist, {\"count\": 2}) 或輸入內容以建立新項目"
+            "searchOrCreate": "搜尋$t(entity.playlist, {\"count\": 2}) 或輸入內容以建立新項目",
+            "noneAdded": "沒有曲目新增到 $t(entity.playlist, {\"count\": 1}) '{{playlist}}'"
        },
        "createPlaylist": {
            "input_description": "$t(common.description)",
@@ -1335,6 +1342,13 @@
                "d": "D",
                "z": "Z"
            }
-        }
+        },
+        "systemAudioCaptureFailed": "無法開始擷取：{{message}}",
+        "systemAudioNoAudioTrack": "沒有回傳任何音軌。確保在提示時啟用音訊擷取。",
+        "systemAudioConsentAllow": "允許",
+        "systemAudioConsentBody": "此視覺化器需要存取系統音訊才能運作",
+        "systemAudioConsentDecline": "拒絕",
+        "systemAudioConsentTitle": "允許存取系統音訊？",
+        "systemAudioExclusiveModeNotSupported": "啟用音訊獨佔模式時，視覺化不可用。 在MPV設定中停用音訊獨佔模式，然後再試一次。"
    }
 }
@@ -1,13 +1,13 @@
 import console from 'console';
 import { app, ipcMain } from 'electron';
-import { rm } from 'fs/promises';
+import { access, rm } from 'fs/promises';
 import uniq from 'lodash/uniq';
 import MpvAPI from 'node-mpv';
 import { pid } from 'node:process';
 import process from 'process';

 import { getMainWindow, sendToastToRenderer } from '../../../index';
-import { createLog, isWindows } from '../../../utils';
+import { createLog, isMacOS, isWindows } from '../../../utils';
 import { store } from '../settings';

 import { PlayerData } from '/@/shared/types/domain-types';
@@ -69,6 +69,7 @@ const mpvLog = (
 };

 const MPV_BINARY_PATH = store.get('mpv_path') as string | undefined;
+const MACOS_MPV_BINARY_PATHS = ['/opt/homebrew/bin/mpv', '/usr/local/bin/mpv'];

 const prefetchPlaylistParams = [
    '--prefetch-playlist=no',
@@ -86,12 +87,38 @@ const DEFAULT_MPV_PARAMETERS = (extraParameters?: string[]) => {
    return parameters;
 };

+const resolveMpvBinaryPath = async (binaryPath?: string) => {
+    if (binaryPath) {
+        return binaryPath;
+    }
+
+    if (MPV_BINARY_PATH) {
+        return MPV_BINARY_PATH;
+    }
+
+    if (!isMacOS()) {
+        return undefined;
+    }
+
+    for (const candidate of MACOS_MPV_BINARY_PATHS) {
+        try {
+            await access(candidate);
+            return candidate;
+        } catch {
+            // Try the next common Homebrew location.
+        }
+    }
+
+    return undefined;
+};
+
 const createMpv = async (data: {
    binaryPath?: string;
    extraParameters?: string[];
    properties?: Record<string, any>;
 }): Promise<MpvAPI> => {
    const { binaryPath, extraParameters, properties } = data;
+    const resolvedBinaryPath = await resolveMpvBinaryPath(binaryPath);

    const params = uniq([...DEFAULT_MPV_PARAMETERS(extraParameters), ...(extraParameters || [])]);

@@ -99,7 +126,7 @@ const createMpv = async (data: {
        {
            audio_only: true,
            auto_restart: false,
-            binary: binaryPath || MPV_BINARY_PATH || undefined,
+            binary: resolvedBinaryPath,
            socket: socketPath,
            time_update: 1,
        },
@@ -40,6 +40,7 @@ export const store = new Store<any>({
        playbackType: 'web',
        should_prompt_accessibility: true,
        shown_accessibility_warning: false,
+        visualizer_system_audio_consent_granted: false,
        window_enable_tray: true,
        window_exit_to_tray: false,
        window_minimize_to_tray: false,
@@ -1,2 +1,9 @@
 import './core';
-import(`./${process.platform}`);
+
+if (process.platform === 'linux') {
+    import('./linux');
+} else if (process.platform === 'darwin') {
+    import('./darwin');
+} else if (process.platform === 'win32') {
+    import('./win32');
+}
@@ -150,6 +150,23 @@ ipcMain.on(
                return;
            }

+            // If the served id is an empty string, this is a radio
+            // Use a limited subset of the fields
+            if (song._serverId === '') {
+                // The id as passed in from use-mpris is radio- plus the radio ID
+                // If there are spaces or some other characters, this causes MPRIS to error and
+                // disconnect the bus. To prevent this, just use a fake track/radio
+                mprisPlayer.metadata = {
+                    'mpris:trackid': mprisPlayer.objectPath(`track/radio`),
+                    'xesam:album': song.album || null,
+                    'xesam:artist': song.artists?.length
+                        ? song.artists.map((artist) => artist.name)
+                        : null,
+                    'xesam:title': song.name || null,
+                };
+                return;
+            }
+
            mprisPlayer.metadata = {
                'mpris:artUrl': imageUrl || null,
                'mpris:length': song.duration ? Math.round((song.duration || 0) * 1e3) : null,
@@ -0,0 +1 @@
+export {};
@@ -5,6 +5,7 @@ import {
    app,
    BrowserWindow,
    BrowserWindowConstructorOptions,
+    desktopCapturer,
    globalShortcut,
    ipcMain,
    Menu,
@@ -29,7 +30,7 @@ import packageJson from '../../package.json';
 import { disableMediaKeys, enableMediaKeys } from './features/core/player/media-keys';
 import { shutdownServer } from './features/core/remote';
 import { store } from './features/core/settings';
-import MenuBuilder from './menu';
+import MenuBuilder, { MenuPlaybackState } from './menu';
 import {
    autoUpdaterLogInterface,
    createLog,
@@ -41,7 +42,7 @@ import {
 } from './utils';
 import './features';

-import { PlayerType, TitleTheme } from '/@/shared/types/types';
+import { PlayerRepeat, PlayerStatus, PlayerType, TitleTheme } from '/@/shared/types/types';

 const ALPHA_UPDATER_CONFIG: {
    bucket: string;
@@ -277,6 +278,13 @@ let tray: null | Tray = null;
 let exitFromTray = false;
 let forceQuit = false;
 let powerSaveBlockerId: null | number = null;
+let menuBuilder: MenuBuilder | null = null;
+let currentPlaybackStatus: PlayerStatus = PlayerStatus.PAUSED;
+let currentPrivateMode = false;
+let currentRepeatMode: PlayerRepeat = PlayerRepeat.NONE;
+let currentSidebarCollapsed = false;
+let currentShuffleEnabled = false;
+let playbackMenuAccelerators: MenuPlaybackState['accelerators'] = {};

 if (process.env.NODE_ENV === 'production') {
    import('source-map-support').then((sourceMapSupport) => {
@@ -333,6 +341,23 @@ export const getMainWindow = () => {
    return mainWindow;
 };

+const rebuildMainMenu = () => {
+    if (!menuBuilder || !mainWindow) return;
+
+    menuBuilder.buildMenu({
+        accelerators: playbackMenuAccelerators,
+        playbackStatus: currentPlaybackStatus,
+        privateMode: currentPrivateMode,
+        repeatMode: currentRepeatMode,
+        shuffleEnabled: currentShuffleEnabled,
+        sidebarCollapsed: currentSidebarCollapsed,
+    });
+
+    if (process.platform !== 'darwin') {
+        Menu.setApplicationMenu(null);
+    }
+};
+
 export const sendToastToRenderer = ({
    message,
    type,
@@ -699,12 +724,8 @@ async function createWindow(first = true): Promise<void> {
        });
    }

-    const menuBuilder = new MenuBuilder(mainWindow);
-    menuBuilder.buildMenu();
-
-    if (process.platform !== 'darwin') {
-        Menu.setApplicationMenu(null);
-    }
+    menuBuilder = new MenuBuilder(mainWindow);
+    rebuildMainMenu();

    // Open URLs in the user's browser
    mainWindow.webContents.setWindowOpenHandler((edata) => {
@@ -712,6 +733,29 @@ async function createWindow(first = true): Promise<void> {
        return { action: 'deny' };
    });

+    mainWindow.webContents.session.setDisplayMediaRequestHandler((_request, callback) => {
+        if (!isMacOS()) {
+            callback({ audio: 'loopback' });
+            return;
+        }
+
+        desktopCapturer
+            .getSources({ thumbnailSize: { height: 0, width: 0 }, types: ['screen'] })
+            .then((sources) => {
+                const source = sources[0];
+                if (!source) {
+                    callback({});
+                    return;
+                }
+
+                callback({ audio: 'loopback', video: source });
+            })
+            .catch((err) => {
+                log.warn('desktopCapturer.getSources failed', err);
+                callback({});
+            });
+    });
+
    if (!disableAutoUpdates() && store.get('disable_auto_updates') !== true) {
        new AppUpdater();
    }
@@ -782,6 +826,17 @@ enum BindingActions {
    VOLUME_UP = 'volumeUp',
 }

+const getMenuAccelerator = (
+    data: Record<BindingActions, { allowGlobal: boolean; hotkey: string; isGlobal: boolean }>,
+    action: BindingActions,
+) => {
+    const hotkey = data[action]?.hotkey;
+
+    if (!hotkey) return undefined;
+
+    return hotkeyToElectronAccelerator(hotkey);
+};
+
 const HOTKEY_ACTIONS: Record<BindingActions, () => void> = {
    [BindingActions.GLOBAL_SEARCH]: () => {},
    [BindingActions.LOCAL_SEARCH]: () => {},
@@ -835,6 +890,26 @@ ipcMain.on(
            }
        }

+        playbackMenuAccelerators = {
+            next: getMenuAccelerator(data, BindingActions.NEXT),
+            playPause:
+                getMenuAccelerator(data, BindingActions.PLAY_PAUSE) ||
+                getMenuAccelerator(data, BindingActions.PLAY) ||
+                getMenuAccelerator(data, BindingActions.PAUSE),
+            previous: getMenuAccelerator(data, BindingActions.PREVIOUS),
+            repeat: getMenuAccelerator(data, BindingActions.TOGGLE_REPEAT),
+            seekBackward: getMenuAccelerator(data, BindingActions.SKIP_BACKWARD),
+            seekForward: getMenuAccelerator(data, BindingActions.SKIP_FORWARD),
+            shuffle: getMenuAccelerator(data, BindingActions.SHUFFLE),
+            stop: getMenuAccelerator(data, BindingActions.STOP),
+            volumeDown: getMenuAccelerator(data, BindingActions.VOLUME_DOWN),
+            volumeUp: getMenuAccelerator(data, BindingActions.VOLUME_UP),
+        };
+
+        if (isMacOS()) {
+            rebuildMainMenu();
+        }
+
        const globalMediaKeysEnabled = store.get('global_media_hotkeys', true) as boolean;

        if (globalMediaKeysEnabled) {
@@ -856,12 +931,14 @@ ipcMain.on(
    },
 );

-ipcMain.handle('power-save-blocker-start', () => {
+ipcMain.handle('power-save-blocker-start', (_event, { full }: { full: boolean }) => {
    if (powerSaveBlockerId !== null) {
        return powerSaveBlockerId;
    }

-    powerSaveBlockerId = powerSaveBlocker.start('prevent-display-sleep');
+    powerSaveBlockerId = powerSaveBlocker.start(
+        full ? 'prevent-display-sleep' : 'prevent-app-suspension',
+    );
    return powerSaveBlockerId;
 });

@@ -975,3 +1052,43 @@ if (!ipcMain.eventNames().includes('open-application-directory')) {
        shell.openPath(userDataPath);
    });
 }
+
+ipcMain.on('update-playback', (_event, status: PlayerStatus) => {
+    currentPlaybackStatus = status;
+
+    if (!isMacOS()) return;
+
+    rebuildMainMenu();
+});
+
+ipcMain.on('update-repeat', (_event, repeat: PlayerRepeat) => {
+    currentRepeatMode = repeat;
+
+    if (!isMacOS()) return;
+
+    rebuildMainMenu();
+});
+
+ipcMain.on('update-shuffle', (_event, shuffle: boolean) => {
+    currentShuffleEnabled = shuffle;
+
+    if (!isMacOS()) return;
+
+    rebuildMainMenu();
+});
+
+ipcMain.on('update-private-mode', (_event, privateMode: boolean) => {
+    currentPrivateMode = privateMode;
+
+    if (!isMacOS()) return;
+
+    rebuildMainMenu();
+});
+
+ipcMain.on('update-sidebar-collapsed', (_event, collapsedSidebar: boolean) => {
+    currentSidebarCollapsed = collapsedSidebar;
+
+    if (!isMacOS()) return;
+
+    rebuildMainMenu();
+});
@@ -1,18 +1,53 @@
 import { app, BrowserWindow, Menu, MenuItemConstructorOptions, shell } from 'electron';

+import packageJson from '../../package.json';
+
+import { PlayerRepeat, PlayerStatus } from '/@/shared/types/types';
+
+export type MenuPlaybackState = {
+    accelerators?: {
+        next?: string;
+        playPause?: string;
+        previous?: string;
+        repeat?: string;
+        seekBackward?: string;
+        seekForward?: string;
+        shuffle?: string;
+        stop?: string;
+        volumeDown?: string;
+        volumeUp?: string;
+    };
+    playbackStatus?: PlayerStatus;
+    privateMode?: boolean;
+    repeatMode?: PlayerRepeat;
+    shuffleEnabled?: boolean;
+    sidebarCollapsed?: boolean;
+};
+
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
    selector?: string;
    submenu?: DarwinMenuItemConstructorOptions[] | Menu;
 }

 export default class MenuBuilder {
+    developmentEnvironmentSetup = false;
    mainWindow: BrowserWindow;

    constructor(mainWindow: BrowserWindow) {
        this.mainWindow = mainWindow;
    }

-    buildDarwinTemplate(): MenuItemConstructorOptions[] {
+    buildDarwinTemplate({
+        accelerators,
+        playbackStatus = PlayerStatus.PAUSED,
+        privateMode = false,
+        repeatMode = PlayerRepeat.NONE,
+        shuffleEnabled = false,
+        sidebarCollapsed = false,
+    }: MenuPlaybackState = {}): MenuItemConstructorOptions[] {
+        const isPlaying = playbackStatus === PlayerStatus.PLAYING;
+        const isRepeatEnabled = repeatMode !== PlayerRepeat.NONE;
+
        const subMenuAbout: DarwinMenuItemConstructorOptions = {
            label: 'Electron',
            submenu: [
@@ -29,6 +64,21 @@ export default class MenuBuilder {
                    label: 'Settings',
                },
                { type: 'separator' },
+                {
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-open-manage-servers');
+                    },
+                    label: 'Manage servers',
+                },
+                {
+                    checked: privateMode,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-toggle-private-mode');
+                    },
+                    label: 'Private session',
+                    type: 'checkbox',
+                },
+                { type: 'separator' },
                { label: 'Services', submenu: [] },
                { type: 'separator' },
                {
@@ -71,6 +121,22 @@ export default class MenuBuilder {
        const subMenuViewDev: MenuItemConstructorOptions = {
            label: 'View',
            submenu: [
+                {
+                    accelerator: 'Command+K',
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-open-command-palette');
+                    },
+                    label: 'Command Palette...',
+                },
+                {
+                    checked: sidebarCollapsed,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-toggle-sidebar');
+                    },
+                    label: 'Collapse sidebar',
+                    type: 'checkbox',
+                },
+                { type: 'separator' },
                {
                    accelerator: 'Command+R',
                    click: () => {
@@ -97,6 +163,22 @@ export default class MenuBuilder {
        const subMenuViewProd: MenuItemConstructorOptions = {
            label: 'View',
            submenu: [
+                {
+                    accelerator: 'Command+K',
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-open-command-palette');
+                    },
+                    label: 'Command Palette...',
+                },
+                {
+                    checked: sidebarCollapsed,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-toggle-sidebar');
+                    },
+                    label: 'Collapse sidebar',
+                    type: 'checkbox',
+                },
+                { type: 'separator' },
                {
                    accelerator: 'Ctrl+Command+F',
                    click: () => {
@@ -119,6 +201,89 @@ export default class MenuBuilder {
                { label: 'Bring All to Front', selector: 'arrangeInFront:' },
            ],
        };
+        const subMenuPlayback: MenuItemConstructorOptions = {
+            label: 'Playback',
+            submenu: [
+                {
+                    accelerator: accelerators?.playPause,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-play-pause');
+                    },
+                    label: isPlaying ? 'Pause' : 'Play',
+                },
+                { type: 'separator' },
+                {
+                    accelerator: accelerators?.next,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-next');
+                    },
+                    label: 'Next',
+                },
+                {
+                    accelerator: accelerators?.previous,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-previous');
+                    },
+                    label: 'Previous',
+                },
+                {
+                    accelerator: accelerators?.seekForward,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-skip-forward');
+                    },
+                    label: 'Seek Forward',
+                },
+                {
+                    accelerator: accelerators?.seekBackward,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-skip-backward');
+                    },
+                    label: 'Seek Backforward',
+                },
+                { type: 'separator' },
+                {
+                    accelerator: accelerators?.shuffle,
+                    checked: shuffleEnabled,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-toggle-shuffle');
+                    },
+                    label: 'Shuffle',
+                    type: 'checkbox',
+                },
+                {
+                    accelerator: accelerators?.repeat,
+                    checked: isRepeatEnabled,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-toggle-repeat');
+                    },
+                    label: 'Repeat',
+                    type: 'checkbox',
+                },
+                { type: 'separator' },
+                {
+                    accelerator: accelerators?.stop,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-stop');
+                    },
+                    label: 'Stop',
+                },
+                { type: 'separator' },
+                {
+                    accelerator: accelerators?.volumeUp,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-volume-up');
+                    },
+                    label: 'Volume Up',
+                },
+                {
+                    accelerator: accelerators?.volumeDown,
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-player-volume-down');
+                    },
+                    label: 'Volume Down',
+                },
+            ],
+        };
        const subMenuHelp: MenuItemConstructorOptions = {
            label: 'Help',
            submenu: [
@@ -148,6 +313,13 @@ export default class MenuBuilder {
                    },
                    label: 'Search Issues',
                },
+                { type: 'separator' },
+                {
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-open-release-notes');
+                    },
+                    label: 'Version ' + packageJson.version,
+                },
            ],
        };

@@ -156,7 +328,14 @@ export default class MenuBuilder {
                ? subMenuViewDev
                : subMenuViewProd;

-        return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
+        return [
+            subMenuAbout,
+            subMenuEdit,
+            subMenuView,
+            subMenuPlayback,
+            subMenuWindow,
+            subMenuHelp,
+        ];
    }

    buildDefaultTemplate(): MenuItemConstructorOptions[] {
@@ -262,14 +441,14 @@ export default class MenuBuilder {
        return templateDefault;
    }

-    buildMenu(): Menu {
+    buildMenu(playbackState: MenuPlaybackState = {}): Menu {
        if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
            this.setupDevelopmentEnvironment();
        }

        const template =
            process.platform === 'darwin'
-                ? this.buildDarwinTemplate()
+                ? this.buildDarwinTemplate(playbackState)
                : this.buildDefaultTemplate();

        const menu = Menu.buildFromTemplate(template);
@@ -279,6 +458,13 @@ export default class MenuBuilder {
    }

    setupDevelopmentEnvironment(): void {
+        // buildMenu can run multiple times as menu state updates; attach this once.
+        if (this.developmentEnvironmentSetup) {
+            return;
+        }
+
+        this.developmentEnvironmentSetup = true;
+
        this.mainWindow.webContents.on('context-menu', (_, props) => {
            const { x, y } = props;

@@ -1,4 +1,5 @@
-import { SetActivity } from '@xhayper/discord-rpc';
+import type { SetActivity } from '@xhayper/discord-rpc';
+
 import { ipcRenderer } from 'electron';

 const initialize = (clientId: string) => {
@@ -65,6 +65,26 @@ const rendererOpenSettings = (cb: (event: IpcRendererEvent) => void) => {
    ipcRenderer.on('renderer-open-settings', cb);
 };

+const rendererOpenCommandPalette = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-open-command-palette', cb);
+};
+
+const rendererOpenManageServers = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-open-manage-servers', cb);
+};
+
+const rendererTogglePrivateMode = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-toggle-private-mode', cb);
+};
+
+const rendererToggleSidebar = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-toggle-sidebar', cb);
+};
+
+const rendererOpenReleaseNotes = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-open-release-notes', cb);
+};
+
 export const utils = {
    checkForUpdates,
    disableAutoUpdates,
@@ -78,7 +98,12 @@ export const utils = {
    openApplicationDirectory,
    openItem,
    playerErrorListener,
+    rendererOpenCommandPalette,
+    rendererOpenManageServers,
+    rendererOpenReleaseNotes,
    rendererOpenSettings,
+    rendererTogglePrivateMode,
+    rendererToggleSidebar,
 };

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

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

@@ -409,6 +409,8 @@ export const JellyfinController: InternalControllerEndpoint = {
        return jfNormalize.album(
            { ...res.body, Songs: songsRes.body.Items },
            apiClientProps.server,
+            args.context?.pathReplace,
+            args.context?.pathReplaceWith,
        );
    },
    getAlbumList: async (args) => {
@@ -580,7 +582,8 @@ export const JellyfinController: InternalControllerEndpoint = {

        return `${apiClientProps.server?.url}/items/${query.id}/download?apiKey=${apiClientProps.server?.credential}`;
    },
-    getFolder: async ({ apiClientProps, query }) => {
+    getFolder: async (args) => {
+        const { apiClientProps, query } = args;
        const userId = apiClientProps.server?.userId;

        if (!userId) throw new Error('No userId found');
@@ -742,6 +745,8 @@ export const JellyfinController: InternalControllerEndpoint = {
                jfNormalize.song(
                    item as unknown as z.infer<typeof jfType._response.song>,
                    apiClientProps.server,
+                    args.context?.pathReplace,
+                    args.context?.pathReplaceWith,
                ),
            );

@@ -46,6 +46,15 @@ export const contract = c.router({
            500: resultWithHeaders(ndType._response.error),
        },
    },
+    deleteArtistImage: {
+        body: null,
+        method: 'DELETE',
+        path: 'artist/:id/image',
+        responses: {
+            200: resultWithHeaders(ndType._response.deleteArtistImage),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
    deleteInternetRadioStation: {
        body: null,
        method: 'DELETE',
@@ -259,6 +268,15 @@ export const contract = c.router({
            500: resultWithHeaders(ndType._response.error),
        },
    },
+    uploadArtistImage: {
+        body: ndType._parameters.uploadArtistImage,
+        method: 'POST',
+        path: 'artist/:id/image',
+        responses: {
+            200: resultWithHeaders(ndType._response.uploadArtistImage),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
    uploadInternetRadioStationImage: {
        body: ndType._parameters.uploadInternetRadioStationImage,
        method: 'POST',
@@ -13,6 +13,8 @@ import {
    albumArtistListSortMap,
    albumListSortMap,
    AuthenticationResponse,
+    DeleteArtistImageArgs,
+    DeleteArtistImageResponse,
    DeleteInternetRadioStationImageArgs,
    DeleteInternetRadioStationImageResponse,
    DeletePlaylistImageArgs,
@@ -28,6 +30,8 @@ import {
    SortOrder,
    sortOrderMap,
    tagListSortMap,
+    UploadArtistImageArgs,
+    UploadArtistImageResponse,
    UploadInternetRadioStationImageArgs,
    UploadInternetRadioStationImageResponse,
    UploadPlaylistImageArgs,
@@ -42,6 +46,7 @@ const VERSION_INFO: VersionInfo = [
    [
        '0.61.0',
        {
+            [ServerFeature.ARTIST_IMAGE_UPLOAD]: [1],
            [ServerFeature.INTERNET_RADIO_IMAGE_UPLOAD]: [1],
            [ServerFeature.PLAYLIST_IMAGE_UPLOAD]: [1],
        },
@@ -186,6 +191,21 @@ export const NavidromeController: InternalControllerEndpoint = {
            id: res.body.data.id,
        };
    },
+    deleteArtistImage: async (args: DeleteArtistImageArgs): Promise<DeleteArtistImageResponse> => {
+        const { apiClientProps, query } = args;
+
+        const res = await ndApiClient(apiClientProps as any).deleteArtistImage({
+            params: {
+                id: query.id,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to delete artist image');
+        }
+
+        return res.body.data.status === 'ok';
+    },
    deleteFavorite: SubsonicController.deleteFavorite,
    deleteInternetRadioStation: async (args) => {
        const { apiClientProps, query } = args;
@@ -297,8 +317,8 @@ export const NavidromeController: InternalControllerEndpoint = {
            similarArtists:
                artistInfo?.similarArtist?.map((artist) => ({
                    id: artist.id,
-                    imageId: null,
-                    imageUrl: artist?.artistImageUrl?.replace(/\?size=\d+/, '') ?? null,
+                    imageId: artist.id,
+                    imageUrl: null,
                    name: artist.name,
                    userFavorite: Boolean(artist.starred) || false,
                    userRating: artist.userRating ?? null,
@@ -476,7 +496,12 @@ export const NavidromeController: InternalControllerEndpoint = {
        }

        return res.body.similarSongs.song.map((song) =>
-            ssNormalize.song(song, apiClientProps.server),
+            ssNormalize.song(
+                song,
+                apiClientProps.server,
+                args.context?.pathReplace,
+                args.context?.pathReplaceWith,
+            ),
        );
    },
    getArtistList: async (args) => {
@@ -546,7 +571,12 @@ export const NavidromeController: InternalControllerEndpoint = {
        }

        return res.body.similarSongs2.song.map((song) =>
-            ssNormalize.song(song, apiClientProps.server),
+            ssNormalize.song(
+                song,
+                apiClientProps.server,
+                args.context?.pathReplace,
+                args.context?.pathReplaceWith,
+            ),
        );
    },
    getDownloadUrl: SubsonicController.getDownloadUrl,
@@ -803,7 +833,14 @@ export const NavidromeController: InternalControllerEndpoint = {
        return (
            (res.body.similarSongs?.song || [])
                .filter((song) => song.id !== query.songId)
-                .map((song) => ssNormalize.song(song, apiClientProps.server)) || []
+                .map((song) =>
+                    ssNormalize.song(
+                        song,
+                        apiClientProps.server,
+                        args.context?.pathReplace,
+                        args.context?.pathReplaceWith,
+                    ),
+                ) || []
        );
    },
    getSongDetail: async (args) => {
@@ -1002,6 +1039,7 @@ export const NavidromeController: InternalControllerEndpoint = {

        const res = await NavidromeController.getSongList({
            apiClientProps,
+            context: args.context,
            query: {
                artistIds: [query.artistId],
                sortBy: SongListSort.PLAY_COUNT,
@@ -1270,6 +1308,40 @@ export const NavidromeController: InternalControllerEndpoint = {

        return null;
    },
+    uploadArtistImage: async (args: UploadArtistImageArgs): Promise<UploadArtistImageResponse> => {
+        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/artist/${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 artist image');
+        }
+
+        return res.data?.status === 'ok';
+    },
    uploadInternetRadioStationImage: async (
        args: UploadInternetRadioStationImageArgs,
    ): Promise<UploadInternetRadioStationImageResponse> => {
@@ -1,6 +1,5 @@
 import { initClient, initContract } from '@ts-rest/core';
 import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, isAxiosError } from 'axios';
-import omitBy from 'lodash/omitBy';
 import qs from 'qs';
 import { z } from 'zod';

@@ -377,11 +376,39 @@ axiosClient.interceptors.response.use(
    },
 );

+const keysToSkipEmptyCheck = new Set([
+    'artist',
+    'comment',
+    'genre',
+    'name',
+    'query',
+    'u',
+    'username',
+]);
+
 const parsePath = (fullPath: string) => {
    const [path, params] = fullPath.split('?');

-    const parsedParams = qs.parse(params, { arrayLimit: 99999, parameterLimit: 99999 });
-    const notNilParams = omitBy(parsedParams, (value) => value === 'undefined' || value === 'null');
+    const url = new URLSearchParams(params);
+    const notNilParams: Record<string, string[]> = {};
+
+    for (const [key, value] of url) {
+        if (!keysToSkipEmptyCheck.has(key) && (value === 'undefined' || value === 'null')) {
+            continue;
+        }
+
+        let realKey = key;
+
+        if (key.includes('[') && key.includes(']')) {
+            realKey = key.split('[')[0];
+        }
+
+        if (realKey in notNilParams) {
+            notNilParams[realKey].push(value);
+        } else {
+            notNilParams[realKey] = [value];
+        }
+    }

    return {
        params: notNilParams,
@@ -237,6 +237,27 @@ function appendTranscodeParams(url: string, format?: string, bitrate?: number) {
    return streamUrl;
 }

+function buildGetTranscodeStreamUrl(
+    server: null | undefined | { credential?: string; url?: string },
+    args: {
+        mediaId: string;
+        mediaType: 'podcast' | 'song';
+        offset: number;
+        transcodeParams: string;
+    },
+): string {
+    const params = new URLSearchParams({
+        c: 'Feishin',
+        mediaId: args.mediaId,
+        mediaType: args.mediaType,
+        offset: String(args.offset),
+        transcodeParams: args.transcodeParams,
+        v: '1.13.0',
+    });
+
+    return `${server?.url}/rest/getTranscodeStream.view?${params.toString()}&${server?.credential}`;
+}
+
 function sortAndPaginate<T>(
    items: T[],
    options: {
@@ -487,7 +508,7 @@ export const SubsonicController: InternalControllerEndpoint = {
            similarArtists:
                artistInfo?.similarArtist?.map((artist) => ({
                    id: artist.id,
-                    imageId: null,
+                    imageId: artist.coverArt ?? artist.id,
                    imageUrl: null,
                    name: artist.name,
                    userFavorite: Boolean(artist.starred) || false,
@@ -1994,8 +2015,12 @@ export const SubsonicController: InternalControllerEndpoint = {
                },
            });

+            // If the server returns an error for transcodeDecision, fall back to direct stream so that we don't break the player
            if (transcodeDecision.status !== 200) {
-                throw new Error('Failed to get transcode decision');
+                logFn.error(
+                    `Failed to get transcode decision for song ${id}, falling back to direct stream`,
+                );
+                return streamUrl;
            }

            const td = transcodeDecision.body.transcodeDecision;
@@ -2013,20 +2038,14 @@ export const SubsonicController: InternalControllerEndpoint = {
                return appendTranscodeParams(streamUrl, format, bitrate);
            }

-            const transcodeStreamUrl = await ssApiClient(apiClientProps).getTranscodeStream({
-                query: {
-                    mediaId: id,
-                    mediaType,
-                    offset: 0,
-                    transcodeParams: td.transcodeParams,
-                },
+            const transcodeStreamUrl = buildGetTranscodeStreamUrl(server, {
+                mediaId: String(id),
+                mediaType: (mediaType ?? 'song') as 'podcast' | 'song',
+                offset: 0,
+                transcodeParams: td.transcodeParams,
            });

-            if (transcodeStreamUrl.status !== 200) {
-                throw new Error('Failed to get transcode stream');
-            }
-
-            return transcodeStreamUrl.body;
+            return transcodeStreamUrl;
        }

        return streamUrl;
@@ -2106,6 +2125,7 @@ export const SubsonicController: InternalControllerEndpoint = {

        const res = await SubsonicController.getSongList({
            apiClientProps,
+            context,
            query: {
                artistIds: [query.artistId],
                sortBy: SongListSort.PLAY_COUNT,
@@ -10,9 +10,9 @@ import isElectron from 'is-electron';
 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';
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 import { useCheckForUpdates } from '/@/renderer/hooks/use-check-for-updates';
+import { useNativeMenuSync } from '/@/renderer/hooks/use-native-menu-sync';
 import { useSyncSettingsToMain } from '/@/renderer/hooks/use-sync-settings-to-main';
 import { AppRouter } from '/@/renderer/router/app-router';
 import { useCssSettings, useHotkeySettings, useLanguage } from '/@/renderer/store';
@@ -22,12 +22,7 @@ import { WebAudio } from '/@/shared/types/types';
 import '/@/shared/styles/global.css';
 import { PlayerProvider } from '/@/renderer/features/player/context/player-context';
 import { AudioPlayers } from '/@/renderer/features/player/components/audio-players';
-
-const ReleaseNotesModal = lazy(() =>
-    import('./release-notes-modal').then((module) => ({
-        default: module.ReleaseNotesModal,
-    })),
-);
+import { ReleaseNotesModal } from '/@/renderer/release-notes-modal';

 const UpdateAvailableDialog = lazy(() =>
    import('./update-available-dialog').then((module) => ({
@@ -82,8 +77,8 @@ const AppShell = memo(function AppShell() {
                    <AppRouter />
                </PlayerProvider>
            </WebAudioContext.Provider>
+            <ReleaseNotesModal />
            <Suspense fallback={null}>
-                <ReleaseNotesModal />
                <UpdateAvailableDialog />
            </Suspense>
        </>
@@ -97,7 +92,7 @@ const AppEffects = () => (
        <CssSettingsEffect />
        <GlobalShortcutsEffect />
        <LanguageEffect />
-        <OpenSettingsEffect />
+        <NativeMenuSyncEffect />
    </>
 );

@@ -170,20 +165,8 @@ const LanguageEffect = () => {
    return null;
 };

-const OpenSettingsEffect = () => {
-    useEffect(() => {
-        if (isElectron()) {
-            window.api.utils.rendererOpenSettings(() => {
-                openSettingsModal();
-            });
-
-            return () => {
-                ipc?.removeAllListeners('renderer-open-settings');
-            };
-        }
-
-        return undefined;
-    }, []);
+const NativeMenuSyncEffect = () => {
+    useNativeMenuSync();

    return null;
 };
@@ -169,6 +169,292 @@ export interface ItemCardDerivativeProps extends Omit<ItemCardProps, 'type'> {
    showRating: boolean;
 }

+type ItemCardData = NonNullable<ItemCardProps['data']>;
+
+const ItemCardStandardImageArea = memo(function ItemCardStandardImageArea({
+    controls,
+    data,
+    enableExpansion,
+    enableImageViewport = true,
+    enableNavigation,
+    handleContextMenu,
+    handleImageClick,
+    handleLinkDragStart,
+    imageAsLink,
+    imageFetchPriority,
+    internalState,
+    isRound,
+    itemType,
+    navigationPath,
+    showRating,
+    variant,
+    withControls,
+}: {
+    controls?: ItemControls;
+    data: ItemCardData;
+    enableExpansion?: boolean;
+    enableImageViewport?: boolean;
+    enableNavigation?: boolean;
+    handleContextMenu: (e: React.MouseEvent<HTMLElement>) => void;
+    handleImageClick: (e: React.MouseEvent<HTMLElement>) => void;
+    handleLinkDragStart: (e: React.DragEvent<HTMLAnchorElement>) => void;
+    imageAsLink?: boolean;
+    imageFetchPriority?: 'auto' | 'high' | 'low';
+    internalState?: ItemListStateActions;
+    isRound?: boolean;
+    itemType: LibraryItem;
+    navigationPath: null | string;
+    showRating: boolean;
+    variant: 'default' | 'poster';
+    withControls?: boolean;
+}) {
+    const [showControls, setShowControls] = useState(false);
+
+    const handleMouseEnter = () => {
+        if (withControls) {
+            setShowControls(true);
+        }
+    };
+
+    const handleMouseLeave = () => {
+        if (withControls) {
+            setShowControls(false);
+        }
+    };
+
+    const imageContainerClassName = clsx(styles.imageContainer, {
+        [styles.isRound]: isRound,
+    });
+
+    const isFavorite = 'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
+    const userRating =
+        'userRating' in data &&
+        typeof (data as { userRating: null | number }).userRating === 'number'
+            ? (data as { userRating: null | number }).userRating
+            : null;
+    const hasRating = showRating && userRating !== null && userRating > 0;
+
+    const imageContainerContent = (
+        <>
+            {itemType === LibraryItem.GENRE &&
+            data &&
+            'name' in data &&
+            typeof (data as Genre).name === 'string' ? (
+                <GenreImagePlaceholder
+                    className={clsx(styles.image, styles.genrePlaceholder, {
+                        [styles.isRound]: isRound,
+                    })}
+                    name={(data as Genre).name}
+                />
+            ) : (
+                <ItemImage
+                    className={clsx(styles.image, { [styles.isRound]: isRound })}
+                    enableDebounce={false}
+                    {...(variant === 'poster' ? { enableViewport: enableImageViewport } : {})}
+                    explicitStatus={'explicitStatus' in data && data ? data.explicitStatus : null}
+                    fetchPriority={imageFetchPriority}
+                    id={(data as { imageId?: string })?.imageId}
+                    itemType={itemType}
+                    src={(data as { imageUrl?: string })?.imageUrl}
+                    type="itemCard"
+                />
+            )}
+            {isFavorite && <div className={styles.favoriteBadge} />}
+            {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
+            <AnimatePresence>
+                {withControls && showControls && (
+                    <ItemCardControls
+                        controls={controls}
+                        enableExpansion={enableExpansion}
+                        {...(variant === 'poster' ? { internalState } : {})}
+                        item={data}
+                        itemType={itemType}
+                        showRating={showRating}
+                        type={variant}
+                    />
+                )}
+            </AnimatePresence>
+        </>
+    );
+
+    return enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
+        <Link
+            className={imageContainerClassName}
+            draggable={false}
+            onClick={handleImageClick}
+            onContextMenu={handleContextMenu}
+            onDragStart={handleLinkDragStart}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            state={{ item: data }}
+            to={navigationPath}
+        >
+            {imageContainerContent}
+        </Link>
+    ) : (
+        <div
+            className={imageContainerClassName}
+            onClick={handleImageClick}
+            onContextMenu={handleContextMenu}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            {imageContainerContent}
+        </div>
+    );
+});
+
+ItemCardStandardImageArea.displayName = 'ItemCardStandardImageArea';
+
+const CompactItemCardImageArea = memo(function CompactItemCardImageArea({
+    controls,
+    data,
+    enableExpansion,
+    enableNavigation,
+    handleContextMenu,
+    handleImageClick,
+    handleLinkDragStart,
+    imageAsLink,
+    imageFetchPriority,
+    internalState,
+    isRound,
+    itemType,
+    navigationPath,
+    rows,
+    showRating,
+    withControls,
+}: {
+    controls?: ItemControls;
+    data: ItemCardData;
+    enableExpansion?: boolean;
+    enableNavigation?: boolean;
+    handleContextMenu: (e: React.MouseEvent<HTMLElement>) => void;
+    handleImageClick: (e: React.MouseEvent<HTMLElement>) => void;
+    handleLinkDragStart: (e: React.DragEvent<HTMLAnchorElement>) => void;
+    imageAsLink?: boolean;
+    imageFetchPriority?: 'auto' | 'high' | 'low';
+    internalState?: ItemListStateActions;
+    isRound?: boolean;
+    itemType: LibraryItem;
+    navigationPath: null | string;
+    rows: DataRow[];
+    showRating: boolean;
+    withControls?: boolean;
+}) {
+    const [showControls, setShowControls] = useState(false);
+
+    const handleMouseEnter = () => {
+        if (withControls) {
+            setShowControls(true);
+        }
+    };
+
+    const handleMouseLeave = () => {
+        if (withControls) {
+            setShowControls(false);
+        }
+    };
+
+    const imageContainerClassName = clsx(styles.imageContainer, {
+        [styles.isRound]: isRound,
+    });
+
+    const isFavorite = 'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
+    const userRating =
+        'userRating' in data &&
+        typeof (data as { userRating: null | number }).userRating === 'number'
+            ? (data as { userRating: null | number }).userRating
+            : null;
+    const hasRating = showRating && userRating !== null && userRating > 0;
+
+    const imageContainerContent = (
+        <>
+            {itemType === LibraryItem.GENRE &&
+            data &&
+            'name' in data &&
+            typeof (data as Genre).name === 'string' ? (
+                <GenreImagePlaceholder
+                    className={clsx(styles.image, styles.genrePlaceholder, {
+                        [styles.isRound]: isRound,
+                    })}
+                    name={(data as Genre).name}
+                />
+            ) : (
+                <ItemImage
+                    className={clsx(styles.image, {
+                        [styles.isRound]: isRound,
+                    })}
+                    enableDebounce={false}
+                    explicitStatus={'explicitStatus' in data && data ? data.explicitStatus : null}
+                    fetchPriority={imageFetchPriority}
+                    id={data?.imageId}
+                    itemType={itemType}
+                    src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
+                    type="itemCard"
+                />
+            )}
+            {isFavorite && <div className={styles.favoriteBadge} />}
+            {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
+            <AnimatePresence>
+                {withControls && showControls && data && (
+                    <ItemCardControls
+                        controls={controls}
+                        enableExpansion={enableExpansion}
+                        internalState={internalState}
+                        item={data}
+                        itemType={itemType}
+                        showRating={showRating}
+                        type="compact"
+                    />
+                )}
+            </AnimatePresence>
+            <div className={clsx(styles.detailContainer, styles.compact)}>
+                {rows
+                    .filter(
+                        (row): row is NonNullable<typeof row> => row !== null && row !== undefined,
+                    )
+                    .map((row, index) => (
+                        <ItemCardRow
+                            data={data!}
+                            index={index}
+                            key={row.id}
+                            row={row}
+                            type="compact"
+                        />
+                    ))}
+            </div>
+        </>
+    );
+
+    return enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
+        <Link
+            className={imageContainerClassName}
+            draggable={false}
+            onClick={handleImageClick}
+            onContextMenu={handleContextMenu}
+            onDragStart={handleLinkDragStart}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            state={{ item: data }}
+            to={navigationPath}
+        >
+            {imageContainerContent}
+        </Link>
+    ) : (
+        <div
+            className={imageContainerClassName}
+            onClick={handleImageClick}
+            onContextMenu={handleContextMenu}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            {imageContainerContent}
+        </div>
+    );
+});
+
+CompactItemCardImageArea.displayName = 'CompactItemCardImageArea';
+
 const CompactItemCard = ({
    controls,
    data,
@@ -185,7 +471,6 @@ const CompactItemCard = ({
    showRating,
    withControls,
 }: ItemCardDerivativeProps) => {
-    const [showControls, setShowControls] = useState(false);
    const itemRowId =
        data && internalState && typeof data === 'object' && 'id' in data
            ? internalState.extractRowId(data)
@@ -297,18 +582,6 @@ const CompactItemCard = ({
    if (data) {
        const navigationPath = getItemNavigationPath(data, itemType);

-        const handleMouseEnter = () => {
-            if (withControls) {
-                setShowControls(true);
-            }
-        };
-
-        const handleMouseLeave = () => {
-            if (withControls) {
-                setShowControls(false);
-            }
-        };
-
        const handleContextMenu = (e: React.MouseEvent<HTMLElement>) => {
            if (!data || !controls) {
                return;
@@ -338,81 +611,6 @@ const CompactItemCard = ({
            e.stopPropagation();
        };

-        const isFavorite =
-            'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
-        const userRating =
-            'userRating' in data &&
-            typeof (data as { userRating: null | number }).userRating === 'number'
-                ? (data as { userRating: null | number }).userRating
-                : null;
-        const hasRating = showRating && userRating !== null && userRating > 0;
-
-        const imageContainerClassName = clsx(styles.imageContainer, {
-            [styles.isRound]: isRound,
-        });
-
-        const imageContainerContent = (
-            <>
-                {itemType === LibraryItem.GENRE &&
-                data &&
-                'name' in data &&
-                typeof (data as Genre).name === 'string' ? (
-                    <GenreImagePlaceholder
-                        className={clsx(styles.image, styles.genrePlaceholder, {
-                            [styles.isRound]: isRound,
-                        })}
-                        name={(data as Genre).name}
-                    />
-                ) : (
-                    <ItemImage
-                        className={clsx(styles.image, {
-                            [styles.isRound]: isRound,
-                        })}
-                        enableDebounce={false}
-                        explicitStatus={
-                            'explicitStatus' in data && data ? data.explicitStatus : null
-                        }
-                        fetchPriority={imageFetchPriority}
-                        id={data?.imageId}
-                        itemType={itemType}
-                        src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
-                        type="itemCard"
-                    />
-                )}
-                {isFavorite && <div className={styles.favoriteBadge} />}
-                {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
-                <AnimatePresence>
-                    {withControls && showControls && data && (
-                        <ItemCardControls
-                            controls={controls}
-                            enableExpansion={enableExpansion}
-                            internalState={internalState}
-                            item={data}
-                            itemType={itemType}
-                            showRating={showRating}
-                            type="compact"
-                        />
-                    )}
-                </AnimatePresence>
-                <div className={clsx(styles.detailContainer, styles.compact)}>
-                    {rows
-                        .filter(
-                            (row): row is NonNullable<typeof row> =>
-                                row !== null && row !== undefined,
-                        )
-                        .map((row, index) => (
-                            <ItemCardRow
-                                data={data!}
-                                index={index}
-                                key={row.id}
-                                row={row}
-                                type="compact"
-                            />
-                        ))}
-                </div>
-            </>
-        );
-
        return (
            <div
                className={clsx(styles.container, styles.compact, {
@@ -421,31 +619,24 @@ const CompactItemCard = ({
                })}
                ref={ref}
            >
-                {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
-                    <Link
-                        className={imageContainerClassName}
-                        draggable={false}
-                        onClick={handleImageClick}
-                        onContextMenu={handleContextMenu}
-                        onDragStart={handleLinkDragStart}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                        state={{ item: data }}
-                        to={navigationPath}
-                    >
-                        {imageContainerContent}
-                    </Link>
-                ) : (
-                    <div
-                        className={imageContainerClassName}
-                        onClick={handleImageClick}
-                        onContextMenu={handleContextMenu}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                    >
-                        {imageContainerContent}
-                    </div>
-                )}
+                <CompactItemCardImageArea
+                    controls={controls}
+                    data={data}
+                    enableExpansion={enableExpansion}
+                    enableNavigation={enableNavigation}
+                    handleContextMenu={handleContextMenu}
+                    handleImageClick={handleImageClick}
+                    handleLinkDragStart={handleLinkDragStart}
+                    imageAsLink={imageAsLink}
+                    imageFetchPriority={imageFetchPriority}
+                    internalState={internalState}
+                    isRound={isRound}
+                    itemType={itemType}
+                    navigationPath={navigationPath}
+                    rows={rows}
+                    showRating={showRating}
+                    withControls={withControls}
+                />
            </div>
        );
    }
@@ -491,7 +682,6 @@ const DefaultItemCard = ({
    showRating,
    withControls,
 }: ItemCardDerivativeProps) => {
-    const [showControls, setShowControls] = useState(false);
    const itemRowId =
        data && internalState && typeof data === 'object' && 'id' in data
            ? internalState.extractRowId(data)
@@ -538,18 +728,6 @@ const DefaultItemCard = ({
    if (data) {
        const navigationPath = getItemNavigationPath(data, itemType);

-        const handleMouseEnter = () => {
-            if (withControls) {
-                setShowControls(true);
-            }
-        };
-
-        const handleMouseLeave = () => {
-            if (withControls) {
-                setShowControls(false);
-            }
-        };
-
        const handleContextMenu = (e: React.MouseEvent<HTMLElement>) => {
            if (!data || !controls) {
                return;
@@ -579,93 +757,30 @@ const DefaultItemCard = ({
            e.stopPropagation();
        };

-        const imageContainerClassName = clsx(styles.imageContainer, {
-            [styles.isRound]: isRound,
-        });
-
-        const isFavorite =
-            'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
-        const userRating =
-            'userRating' in data &&
-            typeof (data as { userRating: null | number }).userRating === 'number'
-                ? (data as { userRating: null | number }).userRating
-                : null;
-        const hasRating = showRating && userRating !== null && userRating > 0;
-
-        const imageContainerContent = (
-            <>
-                {itemType === LibraryItem.GENRE &&
-                data &&
-                'name' in data &&
-                typeof (data as Genre).name === 'string' ? (
-                    <GenreImagePlaceholder
-                        className={clsx(styles.image, styles.genrePlaceholder, {
-                            [styles.isRound]: isRound,
-                        })}
-                        name={(data as Genre).name}
-                    />
-                ) : (
-                    <ItemImage
-                        className={clsx(styles.image, { [styles.isRound]: isRound })}
-                        enableDebounce={false}
-                        explicitStatus={
-                            'explicitStatus' in data && data ? data.explicitStatus : null
-                        }
-                        fetchPriority={imageFetchPriority}
-                        id={data?.imageId}
-                        itemType={itemType}
-                        src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
-                        type="itemCard"
-                    />
-                )}
-                {isFavorite && <div className={styles.favoriteBadge} />}
-                {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
-                <AnimatePresence>
-                    {withControls && showControls && (
-                        <ItemCardControls
-                            controls={controls}
-                            enableExpansion={enableExpansion}
-                            item={data}
-                            itemType={itemType}
-                            showRating={showRating}
-                            type="default"
-                        />
-                    )}
-                </AnimatePresence>
-            </>
-        );
-
        return (
            <div
                className={clsx(styles.container, {
                    [styles.selected]: isSelected,
                })}
            >
-                {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
-                    <Link
-                        className={imageContainerClassName}
-                        draggable={false}
-                        onClick={handleImageClick}
-                        onContextMenu={handleContextMenu}
-                        onDragStart={handleLinkDragStart}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                        state={{ item: data }}
-                        to={navigationPath}
-                    >
-                        {imageContainerContent}
-                    </Link>
-                ) : (
-                    <div
-                        className={imageContainerClassName}
-                        onClick={handleImageClick}
-                        onContextMenu={handleContextMenu}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                    >
-                        {imageContainerContent}
-                    </div>
-                )}
+                <ItemCardStandardImageArea
+                    controls={controls}
+                    data={data}
+                    enableExpansion={enableExpansion}
+                    enableNavigation={enableNavigation}
+                    handleContextMenu={handleContextMenu}
+                    handleImageClick={handleImageClick}
+                    handleLinkDragStart={handleLinkDragStart}
+                    imageAsLink={imageAsLink}
+                    imageFetchPriority={imageFetchPriority}
+                    internalState={internalState}
+                    isRound={isRound}
+                    itemType={itemType}
+                    navigationPath={navigationPath}
+                    showRating={showRating}
+                    variant="default"
+                    withControls={withControls}
+                />
                <div className={styles.detailContainer}>
                    {rows
                        .filter(
@@ -728,7 +843,6 @@ const PosterItemCard = ({
    showRating,
    withControls,
 }: ItemCardDerivativeProps) => {
-    const [showControls, setShowControls] = useState(false);
    const itemRowId =
        data && internalState && typeof data === 'object' && 'id' in data
            ? internalState.extractRowId(data)
@@ -840,18 +954,6 @@ const PosterItemCard = ({
    if (data) {
        const navigationPath = getItemNavigationPath(data, itemType);

-        const handleMouseEnter = () => {
-            if (withControls) {
-                setShowControls(true);
-            }
-        };
-
-        const handleMouseLeave = () => {
-            if (withControls) {
-                setShowControls(false);
-            }
-        };
-
        const handleContextMenu = (e: React.MouseEvent<HTMLElement>) => {
            if (!data || !controls) {
                return;
@@ -881,63 +983,6 @@ const PosterItemCard = ({
            e.stopPropagation();
        };

-        const imageContainerClassName = clsx(styles.imageContainer, {
-            [styles.isRound]: isRound,
-        });
-
-        const isFavorite =
-            'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
-        const userRating =
-            'userRating' in data &&
-            typeof (data as { userRating: null | number }).userRating === 'number'
-                ? (data as { userRating: null | number }).userRating
-                : null;
-        const hasRating = showRating && userRating !== null && userRating > 0;
-
-        const imageContainerContent = (
-            <>
-                {itemType === LibraryItem.GENRE &&
-                data &&
-                'name' in data &&
-                typeof (data as Genre).name === 'string' ? (
-                    <GenreImagePlaceholder
-                        className={clsx(styles.image, styles.genrePlaceholder, {
-                            [styles.isRound]: isRound,
-                        })}
-                        name={(data as Genre).name}
-                    />
-                ) : (
-                    <ItemImage
-                        className={clsx(styles.image, { [styles.isRound]: isRound })}
-                        enableDebounce={false}
-                        explicitStatus={
-                            'explicitStatus' in data && data ? data.explicitStatus : null
-                        }
-                        fetchPriority={imageFetchPriority}
-                        id={(data as { imageId: string })?.imageId}
-                        itemType={itemType}
-                        src={(data as { imageUrl: string })?.imageUrl}
-                        type="itemCard"
-                    />
-                )}
-                {isFavorite && <div className={styles.favoriteBadge} />}
-                {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
-                <AnimatePresence>
-                    {withControls && showControls && data && (
-                        <ItemCardControls
-                            controls={controls}
-                            enableExpansion={enableExpansion}
-                            internalState={internalState}
-                            item={data}
-                            itemType={itemType}
-                            showRating={showRating}
-                            type="poster"
-                        />
-                    )}
-                </AnimatePresence>
-            </>
-        );
-
        return (
            <div
                className={clsx(styles.container, styles.poster, {
@@ -946,31 +991,24 @@ const PosterItemCard = ({
                })}
                ref={ref}
            >
-                {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
-                    <Link
-                        className={imageContainerClassName}
-                        draggable={false}
-                        onClick={handleImageClick}
-                        onContextMenu={handleContextMenu}
-                        onDragStart={handleLinkDragStart}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                        state={{ item: data }}
-                        to={navigationPath}
-                    >
-                        {imageContainerContent}
-                    </Link>
-                ) : (
-                    <div
-                        className={imageContainerClassName}
-                        onClick={handleImageClick}
-                        onContextMenu={handleContextMenu}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                    >
-                        {imageContainerContent}
-                    </div>
-                )}
+                <ItemCardStandardImageArea
+                    controls={controls}
+                    data={data}
+                    enableExpansion={enableExpansion}
+                    enableNavigation={enableNavigation}
+                    handleContextMenu={handleContextMenu}
+                    handleImageClick={handleImageClick}
+                    handleLinkDragStart={handleLinkDragStart}
+                    imageAsLink={imageAsLink}
+                    imageFetchPriority={imageFetchPriority}
+                    internalState={internalState}
+                    isRound={isRound}
+                    itemType={itemType}
+                    navigationPath={navigationPath}
+                    showRating={showRating}
+                    variant="poster"
+                    withControls={withControls}
+                />
                {data && (
                    <div className={styles.detailContainer}>
                        {rows
@@ -0,0 +1,30 @@
+import { ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
+import { TableColumn } from '/@/shared/types/types';
+
+const LAYOUT_FILL_COLUMN: ItemTableListColumnConfig = {
+    align: 'start',
+    autoSize: true,
+    id: TableColumn.LAYOUT_FILL,
+    isEnabled: true,
+    pinned: null,
+    width: 0,
+};
+
+export const appendLayoutFillColumn = (
+    columns: ItemTableListColumnConfig[],
+    autoFitColumns: boolean,
+): ItemTableListColumnConfig[] => {
+    if (autoFitColumns || columns.length === 0) {
+        return columns;
+    }
+
+    const unpinnedEnabled = columns.filter((c) => c.pinned === null && c.isEnabled !== false);
+    if (unpinnedEnabled.length === 0) {
+        return columns;
+    }
+    if (unpinnedEnabled.some((c) => c.autoSize === true)) {
+        return columns;
+    }
+
+    return [...columns, LAYOUT_FILL_COLUMN];
+};
@@ -40,6 +40,13 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
    const setFavorite = useSetFavorite();
    const setRating = useSetRating();

+    const playerRef = useRef(player);
+    const setFavoriteRef = useRef(setFavorite);
+    const setRatingRef = useRef(setRating);
+    playerRef.current = player;
+    setFavoriteRef.current = setFavorite;
+    setRatingRef.current = setRating;
+
    useEffect(() => {
        navigateRef.current = navigate;
    }, [navigate]);
@@ -266,14 +273,14 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                        return;
                    }

-                    player.addToQueueByData(songsToAdd, playType, item.id);
+                    playerRef.current.addToQueueByData(songsToAdd, playType, item.id);
                    return;
                }

                if (itemType === LibraryItem.QUEUE_SONG) {
                    const queueSong = item as QueueSong;
                    if (queueSong._uniqueId) {
-                        player.mediaPlay(queueSong._uniqueId);
+                        playerRef.current.mediaPlay(queueSong._uniqueId);
                    }
                }
            },
@@ -316,7 +323,7 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                    return;
                }

-                setFavorite(item._serverId, [item.id], apiItemType, favorite);
+                setFavoriteRef.current(item._serverId, [item.id], apiItemType, favorite);
            },

            onMore: ({ event, internalState, item, itemType }: DefaultItemControlProps) => {
@@ -394,7 +401,7 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                    return;
                }

-                player.addToQueueByFetch(item._serverId, [item.id], itemType, playType);
+                playerRef.current.addToQueueByFetch(item._serverId, [item.id], itemType, playType);
            },

            onRating: ({
@@ -420,20 +427,12 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                    newRating = 0;
                }

-                setRating(item._serverId, [item.id], apiItemType, newRating);
+                setRatingRef.current(item._serverId, [item.id], apiItemType, newRating);
            },

            ...overrides,
        };
-    }, [
-        enableMultiSelect,
-        overrides,
-        onColumnReordered,
-        onColumnResized,
-        player,
-        setFavorite,
-        setRating,
-    ]);
+    }, [enableMultiSelect, overrides, onColumnReordered, onColumnResized]);

    return controls;
 };
@@ -349,9 +349,12 @@ export const useItemListInfiniteLoader = ({
        mutationKey: getListRefreshMutationKey(eventKey),
    });

+    const refreshMutationRef = useRef(refreshMutation);
+    refreshMutationRef.current = refreshMutation;
+
    const refresh = useCallback(
-        async (force?: boolean) => refreshMutation.mutateAsync(force),
-        [refreshMutation],
+        async (force?: boolean) => refreshMutationRef.current.mutateAsync(force),
+        [],
    );

    const updateItems = useCallback(
@@ -383,7 +386,7 @@ export const useItemListInfiniteLoader = ({
                return;
            }

-            refreshMutation.mutate(true);
+            refreshMutationRef.current.mutate(true);
        };

        eventEmitter.on('ITEM_LIST_REFRESH', handleRefresh);
@@ -391,7 +394,7 @@ export const useItemListInfiniteLoader = ({
        return () => {
            eventEmitter.off('ITEM_LIST_REFRESH', handleRefresh);
        };
-    }, [eventKey, refreshMutation]);
+    }, [eventKey]);

    useEffect(() => {
        const handleFavorite = (payload: UserFavoriteEventPayload) => {
@@ -5,7 +5,7 @@ import {
    useSuspenseQuery,
    UseSuspenseQueryOptions,
 } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';

 import { queryKeys } from '/@/renderer/api/query-keys';
 import { useListContext } from '/@/renderer/context/list-context';
@@ -115,6 +115,9 @@ export const useItemListPaginatedLoader = ({
        mutationKey: getListRefreshMutationKey(eventKey ?? 'paginated'),
    });

+    const refreshMutationRef = useRef(refreshMutation);
+    refreshMutationRef.current = refreshMutation;
+
    const updateItems = useCallback(
        (indexes: number[], value: object) => {
            return queryClient.setQueryData(
@@ -153,7 +156,7 @@ export const useItemListPaginatedLoader = ({
                return;
            }

-            refreshMutation.mutate(true);
+            refreshMutationRef.current.mutate(true);
        };

        const handleFavorite = (payload: UserFavoriteEventPayload) => {
@@ -220,7 +223,7 @@ export const useItemListPaginatedLoader = ({
            eventEmitter.off('USER_FAVORITE', handleFavorite);
            eventEmitter.off('USER_RATING', handleRating);
        };
-    }, [data, eventKey, itemType, refreshMutation, serverId, updateItems]);
+    }, [data, eventKey, itemType, serverId, updateItems]);

    return { data: data?.items || [], pageCount, totalItemCount };
 };
@@ -67,6 +67,7 @@ const getRowIdFromTableColumn = (tableColumn: TableColumn): null | string => {
        [TableColumn.ID]: null,
        [TableColumn.IMAGE]: null,
        [TableColumn.LAST_PLAYED]: 'lastPlayedAt',
+        [TableColumn.LAYOUT_FILL]: null,
        [TableColumn.OWNER]: null,
        [TableColumn.PATH]: null,
        [TableColumn.PLAY_COUNT]: 'playCount',
@@ -6,8 +6,8 @@ import {
    ItemListStateItemWithRequiredProperties,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls } from '/@/renderer/components/item-list/types';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { useHotkeySettings, usePlayButtonBehavior } from '/@/renderer/store';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';

@@ -179,6 +179,14 @@
    opacity: 1;
 }

+.resize-handle.resize-handle-disabled {
+    cursor: not-allowed;
+}
+
+.track-header-cell:hover .resize-handle.resize-handle-disabled {
+    cursor: not-allowed;
+}
+
 .resize-handle:hover {
    opacity: 1;
 }
@@ -911,8 +911,7 @@ const DetailListHeaderCell = memo(
        const percent = col ? (columnWidthPercents[colIndex] ?? 0) : 0;
        const { fixedWidth, isFixedColumn } = getTrackColumnFixed(columnId);
        const currentWidth = col?.width ?? (fixedWidth || 100);
-        const showResizeHandle =
-            enableColumnResize && !isFixedColumn && !col?.autoSize && onColumnResized;
+        const showResizeHandle = enableColumnResize && !isFixedColumn;

        useEffect(() => {
            if (!containerRef.current || !onColumnReordered) {
@@ -1026,6 +1025,7 @@ const DetailListHeaderCell = memo(
                {showResizeHandle && (
                    <DetailListColumnResizeHandle
                        columnId={columnId}
+                        disabled={!!col?.autoSize}
                        initialWidth={currentWidth}
                        onResize={handleResize}
                        side="right"
@@ -1040,6 +1040,7 @@ DetailListHeaderCell.displayName = 'DetailListHeaderCell';

 interface DetailListColumnResizeHandleProps {
    columnId: TableColumn;
+    disabled?: boolean;
    initialWidth: number;
    onResize: (columnId: TableColumn, width: number) => void;
    side: 'left' | 'right';
@@ -1047,6 +1048,7 @@ interface DetailListColumnResizeHandleProps {

 const DetailListColumnResizeHandle = ({
    columnId,
+    disabled = false,
    initialWidth,
    onResize,
    side,
@@ -1091,6 +1093,11 @@ const DetailListColumnResizeHandle = ({
    }, [isDragging, columnId, onResize]);

    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
        event.preventDefault();
        event.stopPropagation();
        setIsDragging(true);
@@ -1103,6 +1110,7 @@ const DetailListColumnResizeHandle = ({
    return (
        <div
            className={clsx(styles.resizeHandle, {
+                [styles.resizeHandleDisabled]: disabled,
                [styles.resizeHandleDragging]: isDragging,
                [styles.resizeHandleLeft]: side === 'left',
                [styles.resizeHandleRight]: side === 'right',
@@ -4,6 +4,7 @@
    flex-direction: column !important;
    width: 100%;
    height: 100%;
+    padding-block: var(--theme-spacing-xs);
    padding-right: var(--theme-spacing-md);
    outline: none;
    border: none;
@@ -385,8 +385,8 @@ const BaseItemGridList = ({
    rows,
    size = 'default',
 }: ItemGridListProps) => {
-    const rootRef = useRef(null);
-    const outerRef = useRef(null);
+    const rootRef = useRef<HTMLDivElement | null>(null);
+    const outerRef = useRef<HTMLDivElement | null>(null);
    const listRef = useRef<FixedSizeList<GridItemProps>>(null);
    const { ref: containerRef, width: containerWidth } = useElementSize();
    const { focused, ref: containerFocusRef } = useFocusWithin();
@@ -486,7 +486,7 @@ const BaseItemGridList = ({
    }, [itemsPerRow, rows?.length, size]);

    useLayoutEffect(() => {
-        const { current: container } = containerRef;
+        const container = rootRef.current;
        if (!container) return;

        throttledSetTableMeta(containerWidth, resolvedItemCount, (meta) => {
@@ -500,13 +500,15 @@ const BaseItemGridList = ({
                current.rowCount !== meta.rowCount
            ) {
                tableMetaRef.current = meta;
-                container.style.setProperty('--grid-column-count', String(meta.columnCount));
-                container.style.setProperty('--grid-item-height', `${meta.itemHeight}px`);
-                container.style.setProperty('--grid-row-count', String(meta.rowCount));
+                const el = rootRef.current;
+                if (!el) return;
+                el.style.setProperty('--grid-column-count', String(meta.columnCount));
+                el.style.setProperty('--grid-item-height', `${meta.itemHeight}px`);
+                el.style.setProperty('--grid-row-count', String(meta.rowCount));
                setTableMetaVersion((v) => v + 1);
            }
        });
-    }, [containerWidth, resolvedItemCount, throttledSetTableMeta, containerRef]);
+    }, [containerWidth, resolvedItemCount, throttledSetTableMeta]);

    const controls = useDefaultItemListControls({
        enableMultiSelect,
@@ -1,72 +0,0 @@
-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,8 +1,9 @@
-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;
@@ -17,7 +18,6 @@ export const useStickyTableGroupRows = ({
    mainGridRef,
    shouldShowStickyHeader,
    stickyHeaderTop,
-    stickyLayout,
 }: {
    containerRef: React.RefObject<HTMLDivElement | null>;
    enabled: boolean;
@@ -27,14 +27,17 @@ export const useStickyTableGroupRows = ({
    mainGridRef: React.RefObject<HTMLDivElement | null>;
    shouldShowStickyHeader?: boolean;
    stickyHeaderTop?: number;
-    stickyLayout: ItemTableStickyLayoutOffsets;
 }) => {
-    const { inViewMarginTop, stickyTop: layoutStickyTop } = stickyLayout;
+    const { windowBarStyle } = useWindowSettings();
    const [stickyGroupIndex, setStickyGroupIndex] = useState<null | number>(null);

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

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

    // Calculate group row indexes
    const groupRowIndexes = useMemo(() => {
@@ -1,8 +1,9 @@
-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,
@@ -11,7 +12,6 @@ export const useStickyTableHeader = ({
    pinnedLeftColumnRef,
    pinnedRightColumnRef,
    stickyHeaderMainRef,
-    stickyLayout,
 }: {
    containerRef: RefObject<HTMLDivElement | null>;
    enabled: boolean;
@@ -20,9 +20,8 @@ export const useStickyTableHeader = ({
    pinnedLeftColumnRef?: RefObject<HTMLDivElement | null>;
    pinnedRightColumnRef?: RefObject<HTMLDivElement | null>;
    stickyHeaderMainRef?: RefObject<HTMLDivElement | null>;
-    stickyLayout: ItemTableStickyLayoutOffsets;
 }) => {
-    const { inViewMarginTop, stickyTop } = stickyLayout;
+    const { windowBarStyle } = useWindowSettings();
    const isScrollingRef = useRef({
        main: false,
        pinnedLeft: false,
@@ -30,20 +29,27 @@ export const useStickyTableHeader = ({
        stickyHeader: false,
    });

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

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

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

    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) {
@@ -1,3 +1,5 @@
+import type { TableScrollShadowStore } from '/@/renderer/components/item-list/item-table-list/table-scroll-shadow-store';
+
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import throttle from 'lodash/throttle';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
@@ -18,9 +20,7 @@ export const useTablePaneSync = ({
    pinnedRowRef,
    rowRef,
    scrollContainerRef,
-    setShowLeftShadow,
-    setShowRightShadow,
-    setShowTopShadow,
+    scrollShadowStore,
 }: {
    enableDrag: boolean | undefined;
    enableDragScroll: boolean | undefined;
@@ -36,9 +36,7 @@ export const useTablePaneSync = ({
    pinnedRowRef: React.RefObject<HTMLDivElement | null>;
    rowRef: React.RefObject<HTMLDivElement | null>;
    scrollContainerRef: React.RefObject<HTMLDivElement | null>;
-    setShowLeftShadow: (v: boolean) => void;
-    setShowRightShadow: (v: boolean) => void;
-    setShowTopShadow: (v: boolean) => void;
+    scrollShadowStore: TableScrollShadowStore;
 }) => {
    // Main grid overlayscrollbars - only handle X-axis if right-pinned columns exist
    const [initialize, osInstance] = useOverlayScrollbars({
@@ -471,8 +469,10 @@ export const useTablePaneSync = ({

        if (!row) {
            const timeout = setTimeout(() => {
-                setShowLeftShadow(false);
-                setShowRightShadow(false);
+                scrollShadowStore.setSnapshot({
+                    showLeftShadow: false,
+                    showRightShadow: false,
+                });
            }, 0);

            return () => clearTimeout(timeout);
@@ -482,8 +482,10 @@ export const useTablePaneSync = ({
            const scrollLeft = row.scrollLeft;
            const maxScrollLeft = row.scrollWidth - row.clientWidth;

-            setShowLeftShadow(pinnedLeftColumnCount > 0 && scrollLeft > 0);
-            setShowRightShadow(pinnedRightColumnCount > 0 && scrollLeft < maxScrollLeft);
+            scrollShadowStore.setSnapshot({
+                showLeftShadow: pinnedLeftColumnCount > 0 && scrollLeft > 0,
+                showRightShadow: pinnedRightColumnCount > 0 && scrollLeft < maxScrollLeft,
+            });
        }, 50);

        checkScrollPosition();
@@ -494,13 +496,7 @@ export const useTablePaneSync = ({
            checkScrollPosition.cancel();
            row.removeEventListener('scroll', checkScrollPosition);
        };
-    }, [
-        pinnedLeftColumnCount,
-        pinnedRightColumnCount,
-        rowRef,
-        setShowLeftShadow,
-        setShowRightShadow,
-    ]);
+    }, [pinnedLeftColumnCount, pinnedRightColumnCount, rowRef, scrollShadowStore]);

    // Handle top shadow visibility based on vertical scroll
    useEffect(() => {
@@ -509,7 +505,7 @@ export const useTablePaneSync = ({

        if (!row || !enableHeader) {
            const timeout = setTimeout(() => {
-                setShowTopShadow(false);
+                scrollShadowStore.setSnapshot({ showTopShadow: false });
            }, 0);

            return () => clearTimeout(timeout);
@@ -519,7 +515,7 @@ export const useTablePaneSync = ({

        const checkScrollPosition = throttle(() => {
            const currentScrollTop = scrollElement.scrollTop;
-            setShowTopShadow(currentScrollTop > 0);
+            scrollShadowStore.setSnapshot({ showTopShadow: currentScrollTop > 0 });
        }, 50);

        checkScrollPosition();
@@ -530,5 +526,5 @@ export const useTablePaneSync = ({
            checkScrollPosition.cancel();
            scrollElement.removeEventListener('scroll', checkScrollPosition);
        };
-    }, [enableHeader, pinnedRightColumnCount, pinnedRightColumnRef, rowRef, setShowTopShadow]);
+    }, [enableHeader, pinnedRightColumnCount, pinnedRightColumnRef, rowRef, scrollShadowStore]);
 };
@@ -366,6 +366,14 @@
    opacity: 1;
 }

+.resize-handle.resize-handle-disabled {
+    cursor: not-allowed;
+}
+
+.header-container:hover .resize-handle.resize-handle-disabled {
+    cursor: not-allowed;
+}
+
 .resize-handle:hover {
    opacity: 1;
 }
@@ -57,6 +57,7 @@ import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table
 import { YearColumn } from '/@/renderer/components/item-list/item-table-list/columns/year-column';
 import { useItemDragDropState } from '/@/renderer/components/item-list/item-table-list/hooks/use-item-drag-drop-state';
 import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { useItemTableListColumnResizeLive } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { ItemControls, ItemListItem } from '/@/renderer/components/item-list/types';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -193,6 +194,14 @@ const ItemTableListColumnBase = (props: ItemTableListColumn) => {
        );
    }

+    if (type === TableColumn.LAYOUT_FILL) {
+        return (
+            <TableColumnContainer {...props} {...dragProps} controls={controls} type={type}>
+                {null}
+            </TableColumnContainer>
+        );
+    }
+
    if (itemType !== LibraryItem.FOLDER) {
        switch (type) {
            case TableColumn.ACTIONS:
@@ -707,6 +716,8 @@ export const TableColumnContainer = (

 interface ColumnResizeHandleProps {
    columnId: TableColumn;
+    columnIndex: number;
+    disabled?: boolean;
    initialWidth: number;
    onResize: (columnId: TableColumn, width: number) => void;
    side: 'left' | 'right';
@@ -714,6 +725,8 @@ interface ColumnResizeHandleProps {

 const ColumnResizeHandle = ({
    columnId,
+    columnIndex,
+    disabled = false,
    initialWidth,
    onResize,
    side,
@@ -723,6 +736,17 @@ const ColumnResizeHandle = ({
    const startWidthRef = useRef<number>(initialWidth);
    const startXRef = useRef<number>(0);
    const finalWidthRef = useRef<number>(initialWidth);
+    const columnResizeLive = useItemTableListColumnResizeLive();
+    const onResizeRef = useRef(onResize);
+    const columnResizeLiveRef = useRef(columnResizeLive);
+
+    useEffect(() => {
+        onResizeRef.current = onResize;
+    }, [onResize]);
+
+    useEffect(() => {
+        columnResizeLiveRef.current = columnResizeLive;
+    }, [columnResizeLive]);

    // Update the ref when initialWidth changes (but not during drag)
    useEffect(() => {
@@ -738,6 +762,7 @@ const ColumnResizeHandle = ({
            const deltaX = event.clientX - startXRef.current;
            const newWidth = Math.min(Math.max(10, startWidthRef.current + deltaX), 1000);
            finalWidthRef.current = newWidth;
+            columnResizeLiveRef.current?.scheduleColumnResizePreview(columnIndex, newWidth);
        };

        const handleMouseUp = () => {
@@ -746,7 +771,8 @@ const ColumnResizeHandle = ({
            document.body.style.userSelect = '';
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
-            onResize(columnId, finalWidthRef.current);
+            onResizeRef.current(columnId, finalWidthRef.current);
+            columnResizeLiveRef.current?.clearColumnResizePreview();
        };

        document.addEventListener('mousemove', handleMouseMove);
@@ -755,10 +781,18 @@ const ColumnResizeHandle = ({
        return () => {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            columnResizeLiveRef.current?.clearColumnResizePreview();
        };
-    }, [isDragging, columnId, onResize]);
+    }, [isDragging, columnId, columnIndex]);

    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
        event.preventDefault();
        event.stopPropagation();
        setIsDragging(true);
@@ -771,6 +805,7 @@ const ColumnResizeHandle = ({
    return (
        <div
            className={clsx(styles.resizeHandle, {
+                [styles.resizeHandleDisabled]: disabled,
                [styles.resizeHandleDragging]: isDragging,
                [styles.resizeHandleLeft]: side === 'left',
                [styles.resizeHandleRight]: side === 'right',
@@ -802,7 +837,11 @@ export const TableColumnHeaderContainer = (
    const [isDraggedOver, setIsDraggedOver] = useState<Edge | null>(null);

    useEffect(() => {
-        if (!containerRef.current || !props.enableColumnReorder) {
+        if (
+            !containerRef.current ||
+            !props.enableColumnReorder ||
+            props.type === TableColumn.LAYOUT_FILL
+        ) {
            return;
        }

@@ -917,9 +956,11 @@ export const TableColumnHeaderContainer = (
            >
                {columnLabelMap[props.type]}
            </Text>
-            {!columnConfig.autoSize && props.enableColumnResize && (
+            {props.enableColumnResize && (
                <ColumnResizeHandle
                    columnId={props.type}
+                    columnIndex={props.columnIndex}
+                    disabled={!!columnConfig.autoSize}
                    initialWidth={currentWidth}
                    onResize={handleResize}
                    side="right"
@@ -982,6 +1023,7 @@ export const columnLabelMap: Record<TableColumn, ReactNode | string> = {
    [TableColumn.LAST_PLAYED]: i18n.t('table.column.lastPlayed', {
        postProcess: 'upperCase',
    }) as string,
+    [TableColumn.LAYOUT_FILL]: '',
    [TableColumn.OWNER]: i18n.t('table.column.owner', { postProcess: 'upperCase' }) as string,
    [TableColumn.PATH]: i18n.t('table.column.path', { postProcess: 'upperCase' }) as string,
    [TableColumn.PLAY_COUNT]: i18n.t('table.column.playCount', {
@@ -1,6 +1,14 @@
 import type { ReactElement } from 'react';

-import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { useSyncExternalStore } from 'react';

 import type { TableItemProps } from './item-table-list';
@@ -68,6 +76,69 @@ export const useItemTableListConfig = (): ItemTableListConfig | null => {
    return useContext(ItemTableListConfigContext);
 };

+export type ItemTableListColumnResizeLiveContextValue = {
+    clearColumnResizePreview: () => void;
+    scheduleColumnResizePreview: (columnIndex: number, width: number) => void;
+};
+
+const ItemTableListColumnResizeLiveContext =
+    createContext<ItemTableListColumnResizeLiveContextValue | null>(null);
+
+export const ItemTableListColumnResizeLiveProvider = ({
+    children,
+    value,
+}: {
+    children: React.ReactNode;
+    value: ItemTableListColumnResizeLiveContextValue;
+}) => {
+    return (
+        <ItemTableListColumnResizeLiveContext.Provider value={value}>
+            {children}
+        </ItemTableListColumnResizeLiveContext.Provider>
+    );
+};
+
+export const useItemTableListColumnResizeLive =
+    (): ItemTableListColumnResizeLiveContextValue | null => {
+        return useContext(ItemTableListColumnResizeLiveContext);
+    };
+
+export const useItemTableListColumnResizeLiveState = () => {
+    const [columnResizePreview, setColumnResizePreview] = useState<null | {
+        columnIndex: number;
+        width: number;
+    }>(null);
+    const previewRafRef = useRef<null | number>(null);
+    const pendingPreviewRef = useRef<null | { columnIndex: number; width: number }>(null);
+
+    const scheduleColumnResizePreview = useCallback((columnIndex: number, width: number) => {
+        pendingPreviewRef.current = { columnIndex, width };
+        if (previewRafRef.current !== null) return;
+        previewRafRef.current = requestAnimationFrame(() => {
+            previewRafRef.current = null;
+            const pending = pendingPreviewRef.current;
+            if (pending) {
+                setColumnResizePreview(pending);
+            }
+        });
+    }, []);
+
+    const clearColumnResizePreview = useCallback(() => {
+        if (previewRafRef.current !== null) {
+            cancelAnimationFrame(previewRafRef.current);
+            previewRafRef.current = null;
+        }
+        pendingPreviewRef.current = null;
+        setColumnResizePreview(null);
+    }, []);
+
+    return {
+        clearColumnResizePreview,
+        columnResizePreview,
+        scheduleColumnResizePreview,
+    };
+};
+
 type ItemTableListStoreContextValue = {
    activeRowStore: ActiveRowStore;
 };
@@ -52,7 +52,7 @@

 .item-table-pinned-rows-grid-container.header-fixed {
    position: fixed !important;
-    top: var(--item-table-sticky-top-default);
+    top: 65px;
    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: var(--item-table-sticky-top-win-mac);
+    top: 95px;
 }

 .item-table-list-container.header-fixed-margin {
@@ -72,7 +72,7 @@
    z-index: 15;
    display: flex;
    flex-direction: row;
-    overflow: hidden;
+    overflow: visible;
    pointer-events: none;
    background-color: var(--theme-colors-background);
    border-bottom: 1px solid var(--theme-colors-border);
@@ -168,6 +168,7 @@
    min-width: 0;
    height: 100%;
    min-height: 0;
+    overflow-x: visible;
 }

 .no-scrollbar {
@@ -178,6 +179,10 @@
    height: 100%;
 }

+.item-table-container :global(.os-scrollbar) {
+    z-index: 2;
+}
+
 .item-table-pinned-header-shadow {
    position: absolute;
    top: 100%;
@@ -14,12 +14,14 @@ import React, {
    useMemo,
    useRef,
    useState,
+    useSyncExternalStore,
 } from 'react';
 import { useParams } from 'react-router';
 import { type CellComponentProps, Grid } from 'react-window-v2';

 import styles from './item-table-list.module.css';

+import { appendLayoutFillColumn } from '/@/renderer/components/item-list/helpers/append-layout-fill-column';
 import { createExtractRowId } from '/@/renderer/components/item-list/helpers/extract-row-id';
 import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
 import {
@@ -31,7 +33,6 @@ 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';
@@ -45,14 +46,20 @@ 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 {
+    ItemTableListColumnResizeLiveProvider,
    type ItemTableListConfig,
    ItemTableListConfigProvider,
    ItemTableListStoreProvider,
+    useItemTableListColumnResizeLiveState,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import {
    MemoizedCellRouter,
    useColumnCellComponents,
 } from '/@/renderer/components/item-list/item-table-list/memoized-cell-router';
+import {
+    createTableScrollShadowStore,
+    type TableScrollShadowStore,
+} from '/@/renderer/components/item-list/item-table-list/table-scroll-shadow-store';
 import {
    ItemControls,
    ItemListHandle,
@@ -104,6 +111,63 @@ export enum TableItemSize {
    LARGE = 88,
 }

+const ItemTableScrollShadowTop = memo(function ItemTableScrollShadowTop({
+    enableHeader,
+    enableScrollShadow,
+    scrollShadowStore,
+}: {
+    enableHeader: boolean;
+    enableScrollShadow: boolean;
+    scrollShadowStore: TableScrollShadowStore;
+}) {
+    const { showTopShadow } = useSyncExternalStore(
+        scrollShadowStore.subscribe,
+        scrollShadowStore.getSnapshot,
+    );
+    if (!enableHeader || !enableScrollShadow || !showTopShadow) return null;
+    return <div className={styles.itemTableTopScrollShadow} />;
+});
+
+ItemTableScrollShadowTop.displayName = 'ItemTableScrollShadowTop';
+
+const ItemTableScrollShadowLeft = memo(function ItemTableScrollShadowLeft({
+    enableScrollShadow,
+    pinnedLeftColumnCount,
+    scrollShadowStore,
+}: {
+    enableScrollShadow: boolean;
+    pinnedLeftColumnCount: number;
+    scrollShadowStore: TableScrollShadowStore;
+}) {
+    const { showLeftShadow } = useSyncExternalStore(
+        scrollShadowStore.subscribe,
+        scrollShadowStore.getSnapshot,
+    );
+    if (pinnedLeftColumnCount <= 0 || !enableScrollShadow || !showLeftShadow) return null;
+    return <div className={styles.itemTableLeftScrollShadow} />;
+});
+
+ItemTableScrollShadowLeft.displayName = 'ItemTableScrollShadowLeft';
+
+const ItemTableScrollShadowRight = memo(function ItemTableScrollShadowRight({
+    enableScrollShadow,
+    pinnedRightColumnCount,
+    scrollShadowStore,
+}: {
+    enableScrollShadow: boolean;
+    pinnedRightColumnCount: number;
+    scrollShadowStore: TableScrollShadowStore;
+}) {
+    const { showRightShadow } = useSyncExternalStore(
+        scrollShadowStore.subscribe,
+        scrollShadowStore.getSnapshot,
+    );
+    if (pinnedRightColumnCount <= 0 || !enableScrollShadow || !showRightShadow) return null;
+    return <div className={styles.itemTableRightScrollShadow} />;
+});
+
+ItemTableScrollShadowRight.displayName = 'ItemTableScrollShadowRight';
+
 interface VirtualizedTableGridProps {
    calculatedColumnWidths: number[];
    CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
@@ -121,9 +185,7 @@ interface VirtualizedTableGridProps {
    pinnedRightColumnRef: React.RefObject<HTMLDivElement | null>;
    pinnedRowCount: number;
    pinnedRowRef: React.RefObject<HTMLDivElement | null>;
-    showLeftShadow: boolean;
-    showRightShadow: boolean;
-    showTopShadow: boolean;
+    scrollShadowStore: TableScrollShadowStore;
    tableConfig: ItemTableListConfig;
    totalColumnCount: number;
    totalRowCount: number;
@@ -146,9 +208,7 @@ const VirtualizedTableGrid = ({
    pinnedRightColumnRef,
    pinnedRowCount,
    pinnedRowRef,
-    showLeftShadow,
-    showRightShadow,
-    showTopShadow,
+    scrollShadowStore,
    tableConfig,
    totalColumnCount,
    totalRowCount,
@@ -484,7 +544,7 @@ const VirtualizedTableGrid = ({
                        })}
                        style={{
                            minHeight: `${pinnedRowsMinHeightPx}px`,
-                            overflow: 'hidden',
+                            overflow: 'visible',
                        }}
                    >
                        <Grid
@@ -498,9 +558,11 @@ const VirtualizedTableGrid = ({
                        />
                    </div>
                )}
-                {enableHeader && enableScrollShadow && showTopShadow && (
-                    <div className={styles.itemTableTopScrollShadow} />
-                )}
+                <ItemTableScrollShadowTop
+                    enableHeader={!!enableHeader}
+                    enableScrollShadow={enableScrollShadow}
+                    scrollShadowStore={scrollShadowStore}
+                />
                {!!pinnedLeftColumnCount && (
                    <div
                        className={styles.itemTablePinnedColumnsContainer}
@@ -555,9 +617,11 @@ const VirtualizedTableGrid = ({
                        />
                    </div>
                )}
-                {enableHeader && enableScrollShadow && showTopShadow && (
-                    <div className={styles.itemTableTopScrollShadow} />
-                )}
+                <ItemTableScrollShadowTop
+                    enableHeader={!!enableHeader}
+                    enableScrollShadow={enableScrollShadow}
+                    scrollShadowStore={scrollShadowStore}
+                />
                <div className={styles.itemTableGridContainer} ref={mergedRowRef}>
                    <Grid
                        cellComponent={RowCell}
@@ -569,12 +633,16 @@ const VirtualizedTableGrid = ({
                        rowCount={totalRowCount}
                        rowHeight={rowHeightMemoized}
                    />
-                    {pinnedLeftColumnCount > 0 && enableScrollShadow && showLeftShadow && (
-                        <div className={styles.itemTableLeftScrollShadow} />
-                    )}
-                    {pinnedRightColumnCount > 0 && enableScrollShadow && showRightShadow && (
-                        <div className={styles.itemTableRightScrollShadow} />
-                    )}
+                    <ItemTableScrollShadowLeft
+                        enableScrollShadow={enableScrollShadow}
+                        pinnedLeftColumnCount={pinnedLeftColumnCount}
+                        scrollShadowStore={scrollShadowStore}
+                    />
+                    <ItemTableScrollShadowRight
+                        enableScrollShadow={enableScrollShadow}
+                        pinnedRightColumnCount={pinnedRightColumnCount}
+                        scrollShadowStore={scrollShadowStore}
+                    />
                </div>
            </div>
            {!!pinnedRightColumnCount && (
@@ -594,7 +662,7 @@ const VirtualizedTableGrid = ({
                            })}
                            style={{
                                minHeight: `${pinnedRowsMinHeightPx}px`,
-                                overflow: 'hidden',
+                                overflow: 'visible',
                            }}
                        >
                            <Grid
@@ -612,9 +680,11 @@ const VirtualizedTableGrid = ({
                            />
                        </div>
                    )}
-                    {enableHeader && enableScrollShadow && showTopShadow && (
-                        <div className={styles.itemTableTopScrollShadow} />
-                    )}
+                    <ItemTableScrollShadowTop
+                        enableHeader={!!enableHeader}
+                        enableScrollShadow={enableScrollShadow}
+                        scrollShadowStore={scrollShadowStore}
+                    />
                    <div
                        className={styles.itemTablePinnedRightColumnsContainer}
                        ref={pinnedRightColumnRef}
@@ -667,9 +737,7 @@ const MemoizedVirtualizedTableGrid = memo(VirtualizedTableGrid, (prevProps, next
        prevProps.pinnedRightColumnRef === nextProps.pinnedRightColumnRef &&
        prevProps.pinnedRowCount === nextProps.pinnedRowCount &&
        prevProps.pinnedRowRef === nextProps.pinnedRowRef &&
-        prevProps.showLeftShadow === nextProps.showLeftShadow &&
-        prevProps.showRightShadow === nextProps.showRightShadow &&
-        prevProps.showTopShadow === nextProps.showTopShadow &&
+        prevProps.scrollShadowStore === nextProps.scrollShadowStore &&
        prevProps.totalColumnCount === nextProps.totalColumnCount &&
        prevProps.totalRowCount === nextProps.totalRowCount &&
        prevProps.CellComponent === nextProps.CellComponent
@@ -830,8 +898,6 @@ 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,
@@ -840,7 +906,6 @@ const ItemTableListStickyUI = memo(
            pinnedLeftColumnRef,
            pinnedRightColumnRef,
            stickyHeaderMainRef,
-            stickyLayout,
        });

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

        const shouldRenderStickyGroupRow = shouldShowStickyGroupRow;
@@ -907,7 +971,7 @@ const ItemTableListStickyUI = memo(
                                style={{
                                    flex: '0 1 auto',
                                    minWidth: `${pinnedLeftWidth}px`,
-                                    overflow: 'hidden',
+                                    overflow: 'visible',
                                }}
                            >
                                {parsedColumns
@@ -991,7 +1055,7 @@ const ItemTableListStickyUI = memo(
                                style={{
                                    flex: '0 1 auto',
                                    minWidth: `${pinnedRightWidth}px`,
-                                    overflow: 'hidden',
+                                    overflow: 'visible',
                                }}
                            >
                                {parsedColumns
@@ -1215,6 +1279,11 @@ const BaseItemTableList = ({
    const [centerContainerWidth, setCenterContainerWidth] = useState(0);
    const [totalContainerWidth, setTotalContainerWidth] = useState(0);

+    const columnsForLayout = useMemo(
+        () => appendLayoutFillColumn(columns, autoFitColumns),
+        [autoFitColumns, columns],
+    );
+
    const {
        calculatedColumnWidths,
        parsedColumns,
@@ -1224,9 +1293,33 @@ const BaseItemTableList = ({
    } = useTableColumnModel({
        autoFitColumns,
        centerContainerWidth,
-        columns,
+        columns: columnsForLayout,
        totalContainerWidth,
    });
+
+    const { clearColumnResizePreview, columnResizePreview, scheduleColumnResizePreview } =
+        useItemTableListColumnResizeLiveState();
+
+    const columnResizeLiveValue = useMemo(
+        () => ({
+            clearColumnResizePreview,
+            scheduleColumnResizePreview,
+        }),
+        [clearColumnResizePreview, scheduleColumnResizePreview],
+    );
+
+    const displayColumnWidths = useMemo(() => {
+        if (!columnResizePreview) {
+            return calculatedColumnWidths;
+        }
+        const next = calculatedColumnWidths.slice();
+        const { columnIndex, width } = columnResizePreview;
+        if (columnIndex >= 0 && columnIndex < next.length) {
+            next[columnIndex] = width;
+        }
+        return next;
+    }, [calculatedColumnWidths, columnResizePreview]);
+
    const playerContext = usePlayer();

    const {
@@ -1262,9 +1355,7 @@ const BaseItemTableList = ({
    const pinnedRightColumnRef = useRef<HTMLDivElement>(null);
    const scrollContainerRef = useRef<HTMLDivElement | null>(null);
    const mergedRowRef = useMergedRef(rowRef, scrollContainerRef);
-    const [showLeftShadow, setShowLeftShadow] = useState(false);
-    const [showRightShadow, setShowRightShadow] = useState(false);
-    const [showTopShadow, setShowTopShadow] = useState(false);
+    const scrollShadowStore = useMemo(() => createTableScrollShadowStore(), []);
    const handleRef = useRef<ItemListHandle | null>(null);
    const { focused, ref: focusRef } = useFocusWithin();
    const containerRef = useRef<HTMLDivElement | null>(null);
@@ -1322,9 +1413,7 @@ const BaseItemTableList = ({
        pinnedRowRef,
        rowRef,
        scrollContainerRef,
-        setShowLeftShadow,
-        setShowRightShadow,
-        setShowTopShadow,
+        scrollShadowStore,
    });

    const getRowHeight = useCallback(
@@ -1448,7 +1537,7 @@ const BaseItemTableList = ({
    // Create itemProps for sticky header
    const stickyHeaderItemProps: TableItemProps = useMemo(
        () => ({
-            calculatedColumnWidths,
+            calculatedColumnWidths: displayColumnWidths,
            cellPadding,
            columns: parsedColumns,
            controls,
@@ -1468,9 +1557,9 @@ const BaseItemTableList = ({
            internalState,
            itemType,
            pinnedLeftColumnCount,
-            pinnedLeftColumnWidths: calculatedColumnWidths.slice(0, pinnedLeftColumnCount),
+            pinnedLeftColumnWidths: displayColumnWidths.slice(0, pinnedLeftColumnCount),
            pinnedRightColumnCount,
-            pinnedRightColumnWidths: calculatedColumnWidths.slice(
+            pinnedRightColumnWidths: displayColumnWidths.slice(
                pinnedLeftColumnCount + totalColumnCount,
            ),
            playerContext,
@@ -1479,7 +1568,7 @@ const BaseItemTableList = ({
            tableId,
        }),
        [
-            calculatedColumnWidths,
+            displayColumnWidths,
            cellPadding,
            controls,
            parsedColumns,
@@ -1584,73 +1673,81 @@ const BaseItemTableList = ({
        };
    }, [CellComponent, columnCellComponents]);

+    const tableMotion = (
+        <motion.div
+            className={styles.itemTableListContainer}
+            onKeyDown={handleKeyDown}
+            onMouseDown={(e) => {
+                const element = e.currentTarget as HTMLDivElement;
+                // Focus without scrolling into view
+                if (element.focus) {
+                    element.focus({ preventScroll: true });
+                }
+            }}
+            ref={mergedContainerRef}
+            tabIndex={0}
+            {...animationProps.fadeIn}
+            transition={{ duration: enableEntranceAnimation ? 0.3 : 0, ease: 'anticipate' }}
+        >
+            <ItemTableListStickyUI
+                calculatedColumnWidths={displayColumnWidths}
+                CellComponent={optimizedCellComponent}
+                containerRef={containerRef}
+                data={data}
+                enableHeader={!!enableHeader}
+                enableStickyGroupRows={!!enableStickyGroupRows}
+                enableStickyHeader={!!enableStickyHeader}
+                getRowHeightWrapper={getRowHeightWrapper}
+                groups={groups}
+                headerHeight={headerHeight}
+                internalState={internalState}
+                parsedColumns={parsedColumns}
+                pinnedLeftColumnCount={pinnedLeftColumnCount}
+                pinnedLeftColumnRef={pinnedLeftColumnRef}
+                pinnedRightColumnCount={pinnedRightColumnCount}
+                pinnedRightColumnRef={pinnedRightColumnRef}
+                pinnedRowRef={pinnedRowRef}
+                rowHeight={rowHeight}
+                rowRef={rowRef}
+                size={size}
+                stickyHeaderItemProps={stickyHeaderItemProps}
+                totalColumnCount={totalColumnCount}
+            />
+            <MemoizedVirtualizedTableGrid
+                calculatedColumnWidths={displayColumnWidths}
+                CellComponent={optimizedCellComponent}
+                data={data}
+                dataWithGroups={dataWithGroups}
+                enableScrollShadow={enableScrollShadow}
+                getItem={getItem}
+                headerHeight={headerHeight}
+                mergedRowRef={mergedRowRef}
+                onRangeChanged={onRangeChanged}
+                parsedColumns={parsedColumns}
+                pinnedLeftColumnCount={pinnedLeftColumnCount}
+                pinnedLeftColumnRef={pinnedLeftColumnRef}
+                pinnedRightColumnCount={pinnedRightColumnCount}
+                pinnedRightColumnRef={pinnedRightColumnRef}
+                pinnedRowCount={pinnedRowCount}
+                pinnedRowRef={pinnedRowRef}
+                scrollShadowStore={scrollShadowStore}
+                tableConfig={tableConfigValue}
+                totalColumnCount={totalColumnCount}
+                totalRowCount={totalRowCount}
+            />
+        </motion.div>
+    );
+
    return (
        <ItemTableListStoreProvider activeRowId={activeRowId}>
            <ItemTableListConfigProvider value={tableConfigValue}>
-                <motion.div
-                    className={styles.itemTableListContainer}
-                    onKeyDown={handleKeyDown}
-                    onMouseDown={(e) => {
-                        const element = e.currentTarget as HTMLDivElement;
-                        // Focus without scrolling into view
-                        if (element.focus) {
-                            element.focus({ preventScroll: true });
-                        }
-                    }}
-                    ref={mergedContainerRef}
-                    tabIndex={0}
-                    {...animationProps.fadeIn}
-                    transition={{ duration: enableEntranceAnimation ? 0.3 : 0, ease: 'anticipate' }}
-                >
-                    <ItemTableListStickyUI
-                        calculatedColumnWidths={calculatedColumnWidths}
-                        CellComponent={optimizedCellComponent}
-                        containerRef={containerRef}
-                        data={data}
-                        enableHeader={!!enableHeader}
-                        enableStickyGroupRows={!!enableStickyGroupRows}
-                        enableStickyHeader={!!enableStickyHeader}
-                        getRowHeightWrapper={getRowHeightWrapper}
-                        groups={groups}
-                        headerHeight={headerHeight}
-                        internalState={internalState}
-                        parsedColumns={parsedColumns}
-                        pinnedLeftColumnCount={pinnedLeftColumnCount}
-                        pinnedLeftColumnRef={pinnedLeftColumnRef}
-                        pinnedRightColumnCount={pinnedRightColumnCount}
-                        pinnedRightColumnRef={pinnedRightColumnRef}
-                        pinnedRowRef={pinnedRowRef}
-                        rowHeight={rowHeight}
-                        rowRef={rowRef}
-                        size={size}
-                        stickyHeaderItemProps={stickyHeaderItemProps}
-                        totalColumnCount={totalColumnCount}
-                    />
-                    <MemoizedVirtualizedTableGrid
-                        calculatedColumnWidths={calculatedColumnWidths}
-                        CellComponent={optimizedCellComponent}
-                        data={data}
-                        dataWithGroups={dataWithGroups}
-                        enableScrollShadow={enableScrollShadow}
-                        getItem={getItem}
-                        headerHeight={headerHeight}
-                        mergedRowRef={mergedRowRef}
-                        onRangeChanged={onRangeChanged}
-                        parsedColumns={parsedColumns}
-                        pinnedLeftColumnCount={pinnedLeftColumnCount}
-                        pinnedLeftColumnRef={pinnedLeftColumnRef}
-                        pinnedRightColumnCount={pinnedRightColumnCount}
-                        pinnedRightColumnRef={pinnedRightColumnRef}
-                        pinnedRowCount={pinnedRowCount}
-                        pinnedRowRef={pinnedRowRef}
-                        showLeftShadow={showLeftShadow}
-                        showRightShadow={showRightShadow}
-                        showTopShadow={showTopShadow}
-                        tableConfig={tableConfigValue}
-                        totalColumnCount={totalColumnCount}
-                        totalRowCount={totalRowCount}
-                    />
-                </motion.div>
+                {onColumnResized ? (
+                    <ItemTableListColumnResizeLiveProvider value={columnResizeLiveValue}>
+                        {tableMotion}
+                    </ItemTableListColumnResizeLiveProvider>
+                ) : (
+                    tableMotion
+                )}
            </ItemTableListConfigProvider>
        </ItemTableListStoreProvider>
    );
@@ -0,0 +1,36 @@
+export interface TableScrollShadowSnapshot {
+    showLeftShadow: boolean;
+    showRightShadow: boolean;
+    showTopShadow: boolean;
+}
+
+export type TableScrollShadowStore = ReturnType<typeof createTableScrollShadowStore>;
+
+export function createTableScrollShadowStore() {
+    let snapshot: TableScrollShadowSnapshot = {
+        showLeftShadow: false,
+        showRightShadow: false,
+        showTopShadow: false,
+    };
+    const listeners = new Set<() => void>();
+
+    return {
+        getSnapshot: (): TableScrollShadowSnapshot => snapshot,
+        setSnapshot: (patch: Partial<TableScrollShadowSnapshot>) => {
+            const next: TableScrollShadowSnapshot = { ...snapshot, ...patch };
+            if (
+                next.showLeftShadow === snapshot.showLeftShadow &&
+                next.showRightShadow === snapshot.showRightShadow &&
+                next.showTopShadow === snapshot.showTopShadow
+            ) {
+                return;
+            }
+            snapshot = next;
+            listeners.forEach((l) => l());
+        },
+        subscribe: (listener: () => void) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
@@ -97,7 +97,7 @@
    justify-content: center;
    width: 100%;
    height: 100%;
-    padding: var(--theme-spacing-sm);
+    padding: 0 var(--theme-spacing-xs);
 }

 .title-wrapper.hidden {
@@ -11,8 +11,10 @@ import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Flex, FlexProps } from '/@/shared/components/flex/flex';
 import { Platform } from '/@/shared/types/types';

-export interface PageHeaderProps
-    extends Omit<FlexProps, 'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart'> {
+export interface PageHeaderProps extends Omit<
+    FlexProps,
+    'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart'
+> {
    animated?: boolean;
    backgroundColor?: string;
    children?: ReactNode;
@@ -31,6 +31,7 @@ import {
 } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButtonControlled } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
 import { FILTER_KEYS, searchLibraryItems } from '/@/renderer/features/shared/utils';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, usePlayerSong } from '/@/renderer/store';
 import { useExternalLinks, useSettingsStore } from '/@/renderer/store/settings.store';
@@ -49,7 +50,6 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import {
    Album,
    AlbumListSort,
@@ -54,15 +54,15 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge

        return Boolean(
            isFilterValueSet(query[FILTER_KEYS.ALBUM._CUSTOM]) ||
-                isFilterValueSet(query[FILTER_KEYS.ALBUM.ARTIST_IDS]) ||
-                query[FILTER_KEYS.ALBUM.COMPILATION] !== undefined ||
-                query[FILTER_KEYS.ALBUM.FAVORITE] !== undefined ||
-                isFilterValueSet(query[FILTER_KEYS.ALBUM.GENRE_ID]) ||
-                query[FILTER_KEYS.ALBUM.HAS_RATING] !== undefined ||
-                isFilterValueSet(query[FILTER_KEYS.ALBUM.MAX_YEAR]) ||
-                isFilterValueSet(query[FILTER_KEYS.ALBUM.MIN_YEAR]) ||
-                query[FILTER_KEYS.ALBUM.RECENTLY_PLAYED] !== undefined ||
-                isFilterValueSet(query[FILTER_KEYS.SHARED.SEARCH_TERM]),
+            isFilterValueSet(query[FILTER_KEYS.ALBUM.ARTIST_IDS]) ||
+            query[FILTER_KEYS.ALBUM.COMPILATION] !== undefined ||
+            query[FILTER_KEYS.ALBUM.FAVORITE] !== undefined ||
+            isFilterValueSet(query[FILTER_KEYS.ALBUM.GENRE_ID]) ||
+            query[FILTER_KEYS.ALBUM.HAS_RATING] !== undefined ||
+            isFilterValueSet(query[FILTER_KEYS.ALBUM.MAX_YEAR]) ||
+            isFilterValueSet(query[FILTER_KEYS.ALBUM.MIN_YEAR]) ||
+            query[FILTER_KEYS.ALBUM.RECENTLY_PLAYED] !== undefined ||
+            isFilterValueSet(query[FILTER_KEYS.SHARED.SEARCH_TERM]),
        );
    }, [albumFilters.query]);

@@ -13,6 +13,7 @@ import {
    setMultipleSearchParams,
    setSearchParam,
 } from '/@/renderer/utils/query-params';
+import { runInUrlTransition } from '/@/renderer/utils/url-transition';
 import { AlbumListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

@@ -74,8 +75,10 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setGenreId = useCallback(
        (value: null | string[]) => {
-            setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.GENRE_ID, value), {
-                replace: true,
+            runInUrlTransition(() => {
+                setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.GENRE_ID, value), {
+                    replace: true,
+                });
            });
        },
        [setSearchParams],
@@ -83,8 +86,13 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setAlbumArtist = useCallback(
        (value: null | string[]) => {
-            setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.ARTIST_IDS, value), {
-                replace: true,
+            runInUrlTransition(() => {
+                setSearchParams(
+                    (prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.ARTIST_IDS, value),
+                    {
+                        replace: true,
+                    },
+                );
            });
        },
        [setSearchParams],
@@ -92,8 +100,10 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setMinYear = useCallback(
        (value: null | number) => {
-            setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.MIN_YEAR, value), {
-                replace: true,
+            runInUrlTransition(() => {
+                setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.MIN_YEAR, value), {
+                    replace: true,
+                });
            });
        },
        [setSearchParams],
@@ -101,8 +111,10 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setMaxYear = useCallback(
        (value: null | number) => {
-            setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.MAX_YEAR, value), {
-                replace: true,
+            runInUrlTransition(() => {
+                setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.MAX_YEAR, value), {
+                    replace: true,
+                });
            });
        },
        [setSearchParams],
@@ -110,8 +122,10 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setFavorite = useCallback(
        (value: boolean | null) => {
-            setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.FAVORITE, value), {
-                replace: true,
+            runInUrlTransition(() => {
+                setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.FAVORITE, value), {
+                    replace: true,
+                });
            });
        },
        [setSearchParams],
@@ -119,8 +133,13 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setCompilation = useCallback(
        (value: boolean | null) => {
-            setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.COMPILATION, value), {
-                replace: true,
+            runInUrlTransition(() => {
+                setSearchParams(
+                    (prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.COMPILATION, value),
+                    {
+                        replace: true,
+                    },
+                );
            });
        },
        [setSearchParams],
@@ -128,8 +147,13 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setHasRating = useCallback(
        (value: boolean | null) => {
-            setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.HAS_RATING, value), {
-                replace: true,
+            runInUrlTransition(() => {
+                setSearchParams(
+                    (prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.HAS_RATING, value),
+                    {
+                        replace: true,
+                    },
+                );
            });
        },
        [setSearchParams],
@@ -137,65 +161,71 @@ export const useAlbumListFilters = (listKey?: ItemListKey) => {

    const setRecentlyPlayed = useCallback(
        (value: boolean | null) => {
-            setSearchParams(
-                (prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.RECENTLY_PLAYED, value),
-                {
-                    replace: true,
-                },
-            );
+            runInUrlTransition(() => {
+                setSearchParams(
+                    (prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.RECENTLY_PLAYED, value),
+                    {
+                        replace: true,
+                    },
+                );
+            });
        },
        [setSearchParams],
    );

    const setCustom = useCallback(
        (value: null | Record<string, any>) => {
-            setSearchParams(
-                (prev) => {
-                    const previousValue = prev.get(FILTER_KEYS.ALBUM._CUSTOM);
+            runInUrlTransition(() => {
+                setSearchParams(
+                    (prev) => {
+                        const previousValue = prev.get(FILTER_KEYS.ALBUM._CUSTOM);

-                    const newCustom = {
-                        ...(previousValue ? JSON.parse(previousValue) : {}),
-                        ...value,
-                    };
+                        const newCustom = {
+                            ...(previousValue ? JSON.parse(previousValue) : {}),
+                            ...value,
+                        };

-                    const filteredNewCustom = Object.fromEntries(
-                        Object.entries(newCustom).filter(
-                            ([, value]) => value !== null && value !== undefined,
-                        ),
-                    );
+                        const filteredNewCustom = Object.fromEntries(
+                            Object.entries(newCustom).filter(
+                                ([, value]) => value !== null && value !== undefined,
+                            ),
+                        );

-                    prev.set(FILTER_KEYS.ALBUM._CUSTOM, JSON.stringify(filteredNewCustom));
-                    return prev;
-                },
-                {
-                    replace: true,
-                },
-            );
+                        prev.set(FILTER_KEYS.ALBUM._CUSTOM, JSON.stringify(filteredNewCustom));
+                        return prev;
+                    },
+                    {
+                        replace: true,
+                    },
+                );
+            });
        },
        [setSearchParams],
    );

    const clear = useCallback(() => {
-        setSearchParams(
-            (prev) =>
-                setMultipleSearchParams(
-                    prev,
-                    {
-                        [FILTER_KEYS.ALBUM._CUSTOM]: null,
-                        [FILTER_KEYS.ALBUM.ARTIST_IDS]: null,
-                        [FILTER_KEYS.ALBUM.COMPILATION]: null,
-                        [FILTER_KEYS.ALBUM.FAVORITE]: null,
-                        [FILTER_KEYS.ALBUM.GENRE_ID]: null,
-                        [FILTER_KEYS.ALBUM.HAS_RATING]: null,
-                        [FILTER_KEYS.ALBUM.MAX_YEAR]: null,
-                        [FILTER_KEYS.ALBUM.MIN_YEAR]: null,
-                        [FILTER_KEYS.ALBUM.RECENTLY_PLAYED]: null,
-                        [FILTER_KEYS.SHARED.SEARCH_TERM]: null,
-                    },
-                    new Set([FILTER_KEYS.ALBUM._CUSTOM]),
-                ),
-            { replace: true },
-        );
+        runInUrlTransition(() => {
+            setSearchParams(
+                (prev) =>
+                    setMultipleSearchParams(
+                        prev,
+                        {
+                            [FILTER_KEYS.ALBUM._CUSTOM]: null,
+                            [FILTER_KEYS.ALBUM.ARTIST_IDS]: null,
+                            [FILTER_KEYS.ALBUM.COMPILATION]: null,
+                            [FILTER_KEYS.ALBUM.FAVORITE]: null,
+                            [FILTER_KEYS.ALBUM.GENRE_ID]: null,
+                            [FILTER_KEYS.ALBUM.HAS_RATING]: null,
+                            [FILTER_KEYS.ALBUM.MAX_YEAR]: null,
+                            [FILTER_KEYS.ALBUM.MIN_YEAR]: null,
+                            [FILTER_KEYS.ALBUM.RECENTLY_PLAYED]: null,
+                            [FILTER_KEYS.SHARED.SEARCH_TERM]: null,
+                        },
+                        new Set([FILTER_KEYS.ALBUM._CUSTOM]),
+                    ),
+                { replace: true },
+            );
+        });
    }, [setSearchParams]);

    const query = useMemo(
@@ -1,6 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useRef } from 'react';
-import { useLocation, useParams } from 'react-router';
+import { useParams } from 'react-router';

 import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area';
@@ -16,7 +16,7 @@ import { LibraryContainer } from '/@/renderer/features/shared/components/library
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { useFastAverageColor } from '/@/renderer/hooks';
-import { useAlbumBackground, useCurrentServer } from '/@/renderer/store';
+import { useAlbumBackground, useCurrentServerId } from '/@/renderer/store';
 import { LibraryItem } from '/@/shared/types/domain-types';

 const ALBUM_DETAIL_BG_FALLBACK = 'var(--theme-colors-foreground-muted)';
@@ -27,13 +27,10 @@ const AlbumDetailRoute = () => {
    const { albumBackground, albumBackgroundBlur } = useAlbumBackground();

    const { albumId } = useParams() as { albumId: string };
-    const server = useCurrentServer();
+    const serverId = useCurrentServerId();

-    const location = useLocation();
-
-    const detailQuery = useQuery({
-        ...albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
-        placeholderData: location.state?.item,
+    const detailQuery = useSuspenseQuery({
+        ...albumQueries.detail({ query: { id: albumId }, serverId }),
    });

    const imageUrl =
@@ -65,9 +62,7 @@ const AlbumDetailRoute = () => {
                                itemType={LibraryItem.ALBUM}
                                variant="default"
                            />
-                            <LibraryHeaderBar.Title>
-                                {detailQuery?.data?.name}
-                            </LibraryHeaderBar.Title>
+                            <LibraryHeaderBar.Title>{detailQuery.data.name}</LibraryHeaderBar.Title>
                        </LibraryHeaderBar>
                    ),
                    offset: 200,
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link, useParams } from 'react-router';
@@ -39,7 +39,7 @@ const DummyAlbumDetailRoute = () => {
    const { albumId } = useParams() as { albumId: string };
    const server = useCurrentServer();
    const queryKey = queryKeys.songs.detail(server?.id || '', albumId);
-    const detailQuery = useQuery({
+    const detailQuery = useSuspenseQuery({
        queryFn: ({ signal }) => {
            return api.controller.getSongDetail({
                apiClientProps: { serverId: server?.id || '', signal },
@@ -52,7 +52,7 @@ const DummyAlbumDetailRoute = () => {
    const { background, colorId } = useFastAverageColor({
        id: albumId,
        src: detailQuery.data?.imageUrl,
-        srcLoaded: !detailQuery.isLoading,
+        srcLoaded: Boolean(detailQuery.data?.imageUrl),
    });
    const { addToQueueByFetch } = usePlayer();
    const playButtonBehavior = usePlayButtonBehavior();
@@ -43,6 +43,7 @@ import { searchLibraryItems } from '/@/renderer/features/shared/utils';
 import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
    ArtistItem,
@@ -75,7 +76,6 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import {
    Album,
@@ -1214,7 +1214,7 @@ export const AlbumArtistDetailContent = ({
                    artistSongsLink={artistSongsLink}
                    onArtistRadio={handleArtistRadio}
                />
-                <Grid gutter="2xl">
+                <Grid gap="2xl">
                    <AlbumArtistMetadataGenres
                        genres={detailQuery.data?.genres}
                        order={genresOrder}
@@ -1,5 +1,5 @@
-import { useQuery, useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
-import { forwardRef, Fragment, useCallback, useMemo } from 'react';
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import { forwardRef, Fragment, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';

@@ -8,6 +8,8 @@ import styles from './album-artist-detail-header.module.css';
 import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { getArtistAlbumsGrouped } from '/@/renderer/features/artists/hooks/use-artist-albums-grouped';
+import { useDeleteArtistImage } from '/@/renderer/features/artists/mutations/delete-artist-image-mutation';
+import { useUploadArtistImage } from '/@/renderer/features/artists/mutations/upload-artist-image-mutation';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import {
@@ -20,17 +22,80 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useAppStore, useCurrentServer, useShowRatings } from '/@/renderer/store';
 import { useArtistReleaseTypeItems, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { formatDurationString } from '/@/renderer/utils';
-import { SEPARATOR_STRING, sortAlbumList } from '/@/shared/api/utils';
+import { hasFeature, SEPARATOR_STRING, sortAlbumList } 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 { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
-import { AlbumListResponse, LibraryItem, ServerType } from '/@/shared/types/domain-types';
+import {
+    AlbumArtistDetailResponse,
+    AlbumListResponse,
+    LibraryItem,
+    ServerType,
+} from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';
 import { Play } from '/@/shared/types/types';

 interface AlbumArtistDetailHeaderProps {
    albumsQuery: UseSuspenseQueryResult<AlbumListResponse, Error>;
 }

+function ArtistImageUploadOverlay({
+    data,
+    onUploadFile,
+}: {
+    data?: AlbumArtistDetailResponse;
+    onUploadFile: (file: File) => Promise<void>;
+}) {
+    const deleteArtistImageMutation = useDeleteArtistImage({});
+    const server = useCurrentServer();
+
+    if (!data) return null;
+    if (!hasFeature(server, ServerFeature.ARTIST_IMAGE_UPLOAD)) return null;
+
+    return (
+        <Group gap="xs">
+            <FileButton
+                accept="image/*"
+                onChange={async (file) => {
+                    if (!file) return;
+                    await onUploadFile(file);
+                }}
+            >
+                {(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;
+                    deleteArtistImageMutation.mutate({
+                        apiClientProps: {
+                            serverId: data._serverId,
+                        },
+                        query: { id: data.id },
+                    });
+                }}
+                radius="xl"
+                size="xs"
+                variant="default"
+            />
+        </Group>
+    );
+}
+
 export const AlbumArtistDetailHeader = forwardRef<HTMLDivElement, AlbumArtistDetailHeaderProps>(
    ({ albumsQuery }, ref) => {
        const { albumArtistId, artistId } = useParams() as {
@@ -78,6 +143,7 @@ export const AlbumArtistDetailHeader = forwardRef<HTMLDivElement, AlbumArtistDet
        const playButtonBehavior = usePlayButtonBehavior();
        const setFavorite = useSetFavorite();
        const setRating = useSetRating();
+        const uploadArtistImageMutation = useUploadArtistImage({});

        const albumArtistDetailSort = useAppStore((state) => state.albumArtistDetailSort);
        const sortBy = albumArtistDetailSort.sortBy;
@@ -167,40 +233,52 @@ export const AlbumArtistDetailHeader = forwardRef<HTMLDivElement, AlbumArtistDet
            [detailQuery.data],
        );

-        const imageUrl = useItemImageUrl({
+        const headerImageUrl = useItemImageUrl({
            id: detailQuery.data?.imageId || undefined,
            imageUrl: detailQuery.data?.imageUrl,
            itemType: LibraryItem.ALBUM_ARTIST,
-            type: 'itemCard',
-        });
-
-        const artistInfoQuery = useQuery({
-            ...artistsQueries.albumArtistInfo({
-                query: { id: routeId, limit: 10 },
-                serverId: server?.id,
-            }),
-            enabled: Boolean(server?.id && routeId),
+            type: 'header',
        });

        const showRating = showRatings && detailQuery?.data?._serverType === ServerType.NAVIDROME;

-        const selectedImageUrl = useMemo(() => {
-            return detailQuery.data?.imageUrl || imageUrl;
-        }, [detailQuery.data?.imageUrl, imageUrl]);
+        const canUploadArtistImage =
+            hasFeature(server, ServerFeature.ARTIST_IMAGE_UPLOAD) &&
+            Boolean(detailQuery.data?._serverId);

-        const alternateImageUrl = artistInfoQuery.data?.imageUrl;
-        const hasImageId = Boolean(detailQuery.data?.imageId);
-        const fallbackHeaderImageUrl = alternateImageUrl || selectedImageUrl;
+        const handleArtistImageUpload = useCallback(
+            async (file: File) => {
+                const artist = detailQuery.data;
+                if (!artist?._serverId) return;
+
+                const buffer = await file.arrayBuffer();
+                uploadArtistImageMutation.mutate({
+                    apiClientProps: {
+                        serverId: artist._serverId,
+                    },
+                    body: { image: new Uint8Array(buffer) },
+                    query: { id: artist.id },
+                });
+            },
+            [detailQuery.data, uploadArtistImageMutation],
+        );

        return (
            <LibraryHeader
-                imageUrl={hasImageId ? undefined : fallbackHeaderImageUrl}
+                imageOverlay={
+                    <ArtistImageUploadOverlay
+                        data={detailQuery.data}
+                        onUploadFile={handleArtistImageUpload}
+                    />
+                }
+                imageUrl={headerImageUrl}
                item={{
                    imageId: detailQuery.data?.imageId,
-                    imageUrl: hasImageId ? undefined : fallbackHeaderImageUrl,
+                    imageUrl: detailQuery.data?.imageUrl,
                    route: AppRoute.LIBRARY_ALBUM_ARTISTS,
                    type: LibraryItem.ALBUM_ARTIST,
                }}
+                onImageFileDrop={canUploadArtistImage ? handleArtistImageUpload : undefined}
                ref={ref}
                title={detailQuery.data?.name || ''}
            >
@@ -16,8 +16,7 @@ import {
 } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

-interface AlbumArtistListInfiniteGridProps
-    extends ItemListGridComponentProps<AlbumArtistListQuery> {}
+interface AlbumArtistListInfiniteGridProps extends ItemListGridComponentProps<AlbumArtistListQuery> {}

 export const AlbumArtistListInfiniteGrid = ({
    gap = 'md',
@@ -17,8 +17,7 @@ import {
 } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

-interface AlbumArtistListInfiniteTableProps
-    extends ItemListTableComponentProps<AlbumArtistListQuery> {}
+interface AlbumArtistListInfiniteTableProps extends ItemListTableComponentProps<AlbumArtistListQuery> {}

 export const AlbumArtistListInfiniteTable = ({
    autoFitColumns = false,
@@ -18,8 +18,7 @@ import {
 } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

-interface AlbumArtistListPaginatedGridProps
-    extends ItemListGridComponentProps<AlbumArtistListQuery> {}
+interface AlbumArtistListPaginatedGridProps extends ItemListGridComponentProps<AlbumArtistListQuery> {}

 export const AlbumArtistListPaginatedGrid = ({
    gap = 'md',
@@ -19,8 +19,7 @@ import {
 } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

-interface AlbumArtistListPaginatedTableProps
-    extends ItemListTableComponentProps<AlbumArtistListQuery> {}
+interface AlbumArtistListPaginatedTableProps extends ItemListTableComponentProps<AlbumArtistListQuery> {}

 export const AlbumArtistListPaginatedTable = ({
    autoFitColumns = false,
@@ -6,6 +6,7 @@ import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-f
 import { useSortOrderFilter } from '/@/renderer/features/shared/hooks/use-sort-order-filter';
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
 import { setMultipleSearchParams } from '/@/renderer/utils/query-params';
+import { runInUrlTransition } from '/@/renderer/utils/url-transition';
 import { AlbumArtistListSort } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

@@ -19,13 +20,15 @@ export const useAlbumArtistListFilters = () => {
    const [, setSearchParams] = useSearchParams();

    const clear = useCallback(() => {
-        setSearchParams(
-            (prev) =>
-                setMultipleSearchParams(prev, {
-                    [FILTER_KEYS.SHARED.SEARCH_TERM]: null,
-                }),
-            { replace: true },
-        );
+        runInUrlTransition(() => {
+            setSearchParams(
+                (prev) =>
+                    setMultipleSearchParams(prev, {
+                        [FILTER_KEYS.SHARED.SEARCH_TERM]: null,
+                    }),
+                { replace: true },
+            );
+        });
    }, [setSearchParams]);

    const query = {
@@ -13,6 +13,15 @@ export type GroupingType = 'all' | 'primary';

 const PRIMARY_RELEASE_TYPES = ['album', 'broadcast', 'ep', 'other', 'single'];

+const getNormalizedReleaseTypes = (album: Album): string[] => {
+    const rawReleaseTypes = [...(album.releaseTypes || []), album.releaseType || ''];
+    const normalizedReleaseTypes = rawReleaseTypes
+        .map((type) => type.trim().toLowerCase())
+        .filter(Boolean);
+
+    return [...new Set(normalizedReleaseTypes)];
+};
+
 export const groupAlbumsByReleaseType = (
    albums: Album[],
    routeId: string,
@@ -44,10 +53,9 @@ export const groupAlbumsByReleaseType = (
                }

                // Group by all release types
-                const releaseTypes = album.releaseTypes || [];
-                if (releaseTypes.length > 0) {
+                const normalizedTypes = getNormalizedReleaseTypes(album);
+                if (normalizedTypes.length > 0) {
                    // Sort release types: primaries first (alphabetically), then secondaries (alphabetically)
-                    const normalizedTypes = releaseTypes.map((type) => type.toLowerCase());
                    const primaryTypes = normalizedTypes
                        .filter((type) => PRIMARY_RELEASE_TYPES.includes(type))
                        .sort();
@@ -92,8 +100,7 @@ export const groupAlbumsByReleaseType = (
                return acc;
            }

-            const releaseTypes = album.releaseTypes || [];
-            const normalizedTypes = releaseTypes.map((type) => type.toLowerCase());
+            const normalizedTypes = getNormalizedReleaseTypes(album);

            let matchedType: null | string = null;

@@ -107,6 +114,8 @@ export const groupAlbumsByReleaseType = (
                matchedType = 'broadcast';
            } else if (normalizedTypes.includes('other')) {
                matchedType = 'other';
+            } else if (normalizedTypes.length > 0) {
+                matchedType = normalizedTypes[0];
            } else {
                matchedType = 'album';
            }
@@ -292,11 +301,11 @@ export const getArtistAlbumsGrouped = (
            const types = releaseType.split('/');
            return types.some((type) => {
                const enumValue = releaseTypeToEnumMap[type];
-                return enumValue ? enabledReleaseTypeEnums.has(enumValue) : false;
+                return enumValue ? enabledReleaseTypeEnums.has(enumValue) : true;
            });
        }
        const enumValue = releaseTypeToEnumMap[releaseType];
-        return enumValue ? enabledReleaseTypeEnums.has(enumValue) : false;
+        return enumValue ? enabledReleaseTypeEnums.has(enumValue) : true;
    };

    const releaseTypeEntries = Object.entries(albumsByReleaseType)
@@ -0,0 +1,41 @@
+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 { DeleteArtistImageArgs, DeleteArtistImageResponse } from '/@/shared/types/domain-types';
+
+export const useDeleteArtistImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<DeleteArtistImageResponse, AxiosError, DeleteArtistImageArgs, null>({
+        mutationFn: (args) => {
+            return api.controller.deleteArtistImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps, query } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.albumArtists.list(serverId),
+            });
+
+            if (query?.id) {
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.albumArtists.detail(serverId, { id: query.id }),
+                });
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.albumArtists.info(serverId, { id: query.id }),
+                });
+            }
+        },
+        ...options,
+    });
+};
@@ -0,0 +1,41 @@
+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 { UploadArtistImageArgs, UploadArtistImageResponse } from '/@/shared/types/domain-types';
+
+export const useUploadArtistImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<UploadArtistImageResponse, AxiosError, UploadArtistImageArgs, null>({
+        mutationFn: (args) => {
+            return api.controller.uploadArtistImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps, query } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.albumArtists.list(serverId),
+            });
+
+            if (query?.id) {
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.albumArtists.detail(serverId, { id: query.id }),
+                });
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.albumArtists.info(serverId, { id: query.id }),
+                });
+            }
+        },
+        ...options,
+    });
+};
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQueries } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useParams } from 'react-router';

@@ -35,20 +35,18 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => {
    const server = useCurrentServer();
    const pageKey = LibraryItem.SONG;

-    const detailQuery = useQuery(
-        artistsQueries.albumArtistDetail({
-            query: { id: routeId },
-            serverId: server?.id,
-        }),
-    );
-
-    const favoriteSongsQuery = useQuery(
-        artistsQueries.favoriteSongs({
-            options: { enabled: !!detailQuery?.data?.name },
-            query: { artistId: routeId },
-            serverId: server?.id,
-        }),
-    );
+    const [detailQuery, favoriteSongsQuery] = useSuspenseQueries({
+        queries: [
+            artistsQueries.albumArtistDetail({
+                query: { id: routeId },
+                serverId: server?.id,
+            }),
+            artistsQueries.favoriteSongs({
+                query: { artistId: routeId },
+                serverId: server?.id,
+            }),
+        ],
+    });

    const songs = useMemo(
        () => favoriteSongsQuery?.data?.items || [],
@@ -168,7 +166,7 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => {
    );
 };

-const AlbumArtistDetailTopSongsListRouteWithBoundary = () => {
+const AlbumArtistDetailFavoriteSongsListRouteWithBoundary = () => {
    return (
        <PageErrorBoundary>
            <AlbumArtistDetailFavoriteSongsListRoute />
@@ -176,4 +174,4 @@ const AlbumArtistDetailTopSongsListRouteWithBoundary = () => {
    );
 };

-export default AlbumArtistDetailTopSongsListRouteWithBoundary;
+export default AlbumArtistDetailFavoriteSongsListRouteWithBoundary;
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useParams } from 'react-router';

@@ -34,16 +34,15 @@ const AlbumArtistDetailTopSongsListRoute = () => {
        key: 'album-artist-top-songs-query-type',
    });

-    const detailQuery = useQuery(
+    const detailQuery = useSuspenseQuery(
        artistsQueries.albumArtistDetail({
            query: { id: routeId },
            serverId: server?.id,
        }),
    );

-    const topSongsQuery = useQuery(
+    const topSongsQuery = useSuspenseQuery(
        artistsQueries.topSongs({
-            options: { enabled: !!detailQuery?.data?.name },
            query: {
                artist: detailQuery?.data?.name || '',
                artistId: routeId,
@@ -165,7 +165,7 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
    );

    const handleAddToPlaylist = useCallback(
-        async (playlistId: string) => {
+        async (playlistId: string, playlistName: string) => {
            if (items.length === 0 || !serverId) return;

            try {
@@ -202,10 +202,9 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
                }

                if (allSongIds.length === 0) {
-                    toast.success({
-                        message: t('form.addToPlaylist.success', {
-                            message: 0,
-                            numOfPlaylists: 1,
+                    toast.info({
+                        message: t('form.addToPlaylist.noneAdded', {
+                            playlist: playlistName,
                            postProcess: 'sentenceCase',
                        }),
                    });
@@ -245,10 +244,9 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
                }

                if (songsToAdd.length === 0) {
-                    toast.success({
-                        message: t('form.addToPlaylist.success', {
-                            message: 0,
-                            numOfPlaylists: 1,
+                    toast.info({
+                        message: t('form.addToPlaylist.noneAdded', {
+                            playlist: playlistName,
                            postProcess: 'sentenceCase',
                        }),
                    });
@@ -347,7 +345,7 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
            innerProps: {
                ...modalProps,
            },
-            modalKey: 'addToPlaylist',
+            modal: 'addToPlaylist',
            size: 'lg',
            title: t('page.contextMenu.addToPlaylist', { postProcess: 'sentenceCase' }),
        });
@@ -413,7 +411,9 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
                    <>
                        <ContextMenu.Item
                            key={recentPlaylist.id}
-                            onSelect={() => handleAddToPlaylist(recentPlaylist.id)}
+                            onSelect={() =>
+                                handleAddToPlaylist(recentPlaylist.id, recentPlaylist.name)
+                            }
                        >
                            {recentPlaylist.name}
                        </ContextMenu.Item>
@@ -428,7 +428,7 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
                {filteredPlaylists.map((playlist) => (
                    <ContextMenu.Item
                        key={playlist.id}
-                        onSelect={() => handleAddToPlaylist(playlist.id)}
+                        onSelect={() => handleAddToPlaylist(playlist.id, playlist.name)}
                    >
                        {playlist.name}
                    </ContextMenu.Item>
@@ -36,7 +36,7 @@ export const ShareAction = ({ ids, itemType }: ShareActionProps) => {
                itemIds: ids,
                resourceType,
            },
-            modalKey: 'shareItem',
+            modal: 'shareItem',
            title: t('page.contextMenu.shareItem', { postProcess: 'titleCase' }),
        });
    }, [ids, resourceType, t]);
@@ -38,10 +38,10 @@ export const PlaylistContextMenu = ({ items, type }: PlaylistContextMenuProps) =
            <ContextMenu.Divider />
            <AddToPlaylistAction items={ids} itemType={LibraryItem.PLAYLIST} />
            <ContextMenu.Divider />
-            <GetInfoAction disabled={items.length === 0} items={items} />
-            <ContextMenu.Divider />
            <EditPlaylistAction disabled={!canEditPlaylist} items={items} />
            <DeletePlaylistAction disabled={!canDeletePlaylist} items={items} />
+            <ContextMenu.Divider />
+            <GetInfoAction disabled={items.length === 0} items={items} />
        </ContextMenu.Content>
    );
 };
@@ -1,4 +1,5 @@
-import { SetActivity, StatusDisplayType } from '@xhayper/discord-rpc';
+import type { SetActivity } from '@xhayper/discord-rpc';
+
 import isElectron from 'is-electron';
 import React, { useCallback, useEffect, useRef, useState } from 'react';

@@ -27,6 +28,13 @@ import { LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types
 import { PlayerStatus } from '/@/shared/types/types';

 const discordRpc = isElectron() ? window.api.discordRpc : null;
+
+const DiscordStatusDisplayType = {
+    DETAILS: 2,
+    NAME: 0,
+    STATE: 1,
+} as const;
+
 type ActivityState = [QueueSong | undefined, number, PlayerStatus];

 const MAX_FIELD_LENGTH = 127;
@@ -122,7 +130,7 @@ export const useDiscordRpc = () => {
                                : undefined
                            : sentenceCase(current[2]),
                    state: truncate(artist),
-                    statusDisplayType: StatusDisplayType.STATE,
+                    statusDisplayType: DiscordStatusDisplayType.STATE,
                    type: discordSettings.showAsListening ? 2 : 0,
                };

@@ -196,9 +204,9 @@ export const useDiscordRpc = () => {
                const artists = song?.artists.map((artist) => artist.name).join(', ');

                const statusDisplayMap = {
-                    [DiscordDisplayType.ARTIST_NAME]: StatusDisplayType.STATE,
-                    [DiscordDisplayType.FEISHIN]: StatusDisplayType.NAME,
-                    [DiscordDisplayType.SONG_NAME]: StatusDisplayType.DETAILS,
+                    [DiscordDisplayType.ARTIST_NAME]: DiscordStatusDisplayType.STATE,
+                    [DiscordDisplayType.FEISHIN]: DiscordStatusDisplayType.NAME,
+                    [DiscordDisplayType.SONG_NAME]: DiscordStatusDisplayType.DETAILS,
                };

                const activity: SetActivity = {
@@ -6,6 +6,7 @@ import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-f
 import { useSortOrderFilter } from '/@/renderer/features/shared/hooks/use-sort-order-filter';
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
 import { parseJsonParam, setJsonSearchParam } from '/@/renderer/utils/query-params';
+import { runInUrlTransition } from '/@/renderer/utils/url-transition';
 import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';

@@ -29,13 +30,19 @@ export const useFolderListFilters = () => {
    }, [searchParams]);

    const setFolderPath = (path: FolderPathItem[]) => {
-        setSearchParams(
-            (prev) => {
-                const newParams = setJsonSearchParam(prev, FILTER_KEYS.FOLDER.FOLDER_PATH, path);
-                return newParams;
-            },
-            { replace: false },
-        );
+        runInUrlTransition(() => {
+            setSearchParams(
+                (prev) => {
+                    const newParams = setJsonSearchParam(
+                        prev,
+                        FILTER_KEYS.FOLDER.FOLDER_PATH,
+                        path,
+                    );
+                    return newParams;
+                },
+                { replace: false },
+            );
+        });
    };

    // Navigate to a folder (adds to path)
@@ -17,6 +17,7 @@ import { MultiSelect } from '/@/shared/components/multi-select/multi-select';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
 import { Select } from '/@/shared/components/select/select';
+import { Slider } from '/@/shared/components/slider/slider';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { TextInput } from '/@/shared/components/text-input/text-input';
@@ -185,6 +186,48 @@ export const LyricsSettingsForm = ({ settingsKey }: LyricsSettingsFormProps) =>
                postProcess: 'sentenceCase',
            }),
        },
+        {
+            control: (
+                <Slider
+                    defaultValue={displaySettings.opacityNonActive}
+                    label={(e) => (e * 100).toFixed(0) + '%'}
+                    max={1.0}
+                    min={0.0}
+                    onChangeEnd={(e) => {
+                        updateDisplaySetting({
+                            opacityNonActive: e,
+                        });
+                    }}
+                    step={0.01}
+                    w={100}
+                />
+            ),
+            description: '',
+            title: t(`${t('page.fullscreenPlayer.config.lyricOpacityNonActive')}`, {
+                postProcess: 'sentenceCase',
+            }),
+        },
+        {
+            control: (
+                <Slider
+                    defaultValue={displaySettings.scaleNonActive}
+                    label={(e) => (e * 100).toFixed(0) + '%'}
+                    max={1.0}
+                    min={0.5}
+                    onChangeEnd={(e) => {
+                        updateDisplaySetting({
+                            scaleNonActive: e,
+                        });
+                    }}
+                    step={0.01}
+                    w={100}
+                />
+            ),
+            description: '',
+            title: t(`${t('page.fullscreenPlayer.config.lyricScaleNonActive')}`, {
+                postProcess: 'sentenceCase',
+            }),
+        },
        {
            control: (
                <Switch
@@ -4,14 +4,18 @@
    line-height: 1.2;
    color: var(--theme-colors-foreground);
    word-break: normal;
-    opacity: 0.35;
+    opacity: var(--lyric-opacity);
+    transform: scale(var(--lyric-scale));
+    transform-origin: var(--lyric-scale-origin) center;
    transition:
-        opacity 0.3s ease-in-out,
-        transform 0.3s ease-in-out;
+        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform;
 }

 .lyric-line:global(.active) {
    opacity: 1 !important;
+    transform: scale(1);
 }

 .lyric-line:global(.unsynchronized) {
@@ -131,7 +131,9 @@ export const LyricsActions = ({
                            uppercase
                            variant="subtle"
                        >
-                            {t('common.clear', { postProcess: 'sentenceCase' })}
+                            {hasLyrics
+                                ? t('common.clear', { postProcess: 'sentenceCase' })
+                                : t('common.refresh', { postProcess: 'sentenceCase' })}
                        </Button>
                    ) : null}
                </Group>
@@ -49,6 +49,11 @@ export const SynchronizedLyrics = ({
                ? displaySettings.fontSize
                : 24,
        gap: displaySettings.gap && displaySettings.gap !== 0 ? displaySettings.gap : 24,
+        opacityNonActive: displaySettings.opacityNonActive,
+        scaleNonActive:
+            displaySettings.scaleNonActive && displaySettings.scaleNonActive !== 0
+                ? displaySettings.scaleNonActive
+                : 0.95,
    };
    const { mediaSeekToTimestamp } = usePlayerActions();
    const status = usePlayerStatus();
@@ -90,18 +95,20 @@ export const SynchronizedLyrics = ({
    const programmaticScrollRef = useRef(false);

    const getCurrentLyric = (timeInMs: number) => {
-        if (lyricRef.current) {
-            const activeLyrics = lyricRef.current;
-            for (let idx = 0; idx < activeLyrics.length; idx += 1) {
-                if (timeInMs <= activeLyrics[idx][0]) {
-                    return idx === 0 ? idx : idx - 1;
-                }
-            }
-
-            return activeLyrics.length - 1;
+        const activeLyrics = lyricRef.current;
+        if (!activeLyrics?.length) {
+            return -1;
        }

-        return -1;
+        let index = -1;
+        for (let idx = 0; idx < activeLyrics.length; idx += 1) {
+            if (timeInMs < activeLyrics[idx][0]) {
+                break;
+            }
+            index = idx;
+        }
+
+        return index;
    };

    const setCurrentLyricRef = useRef<
@@ -136,7 +143,20 @@ export const SynchronizedLyrics = ({
                .forEach((node) => node.classList.remove('active'));

            if (index === -1) {
-                lyricRef.current = null;
+                const activeLyrics = lyricRef.current;
+                if (!activeLyrics?.length) {
+                    return;
+                }
+
+                const firstTime = activeLyrics[0][0];
+                if (timeInMs < firstTime) {
+                    const elapsed = performance.now() - start;
+                    const delay = Math.max(0, firstTime - timeInMs - elapsed);
+                    lyricTimer.current = setTimeout(() => {
+                        setCurrentLyricRef.current(firstTime, nextEpoch, 0);
+                    }, delay);
+                }
+
                return;
            }

@@ -148,7 +168,6 @@ export const SynchronizedLyrics = ({
            const offsetTop = currentLyric?.offsetTop - doc?.clientHeight / 2 || 0;

            if (currentLyric === null) {
-                lyricRef.current = null;
                return;
            }

@@ -308,7 +327,18 @@ export const SynchronizedLyrics = ({
            onMouseEnter={showScrollbar}
            onMouseLeave={hideScrollbar}
            ref={containerRef}
-            style={{ gap: `${settings.gap}px`, ...style }}
+            style={
+                {
+                    // opacity/scale is set here for every lyric,
+                    // and then overwritten by CSS for active lyrics
+                    // to prevent expensive rerenders each lyric
+                    '--lyric-opacity': settings.opacityNonActive,
+                    '--lyric-scale': settings.scaleNonActive,
+                    '--lyric-scale-origin': settings.alignment,
+                    gap: `${settings.gap}px`,
+                    ...style,
+                } as React.CSSProperties
+            }
        >
            {settings.showProvider && source && (
                <LyricLine
@@ -5,7 +5,7 @@ import i18n from '/@/i18n/i18n';
 export const openLyricsSettingsModal = (settingsKey: string = 'default') => {
    openContextModal({
        innerProps: { settingsKey },
-        modalKey: 'lyricsSettings',
+        modal: 'lyricsSettings',
        overlayProps: {
            blur: 0,
            opacity: 0,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Hosted Weblate	324936e0c8	Translated using Weblate Currently translated at 100.0% (1208 of 1208 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% (1208 of 1208 strings) (Catalan) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ca/ Co-authored-by: Ondo <SparkyOndo@proton.me> Co-authored-by: York <goog10216922@gmail.com>	2026-05-05 05:09:50 +00:00
Hosted Weblate	868ec15b16	Added translation using Weblate (Thai) Translated using Weblate Currently translated at 100.0% (1208 of 1208 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1208 of 1208 strings) (Polish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pl/ Translated using Weblate Currently translated at 100.0% (1208 of 1208 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Co-authored-by: Anucha Hlownonkor <anucha.initdz@gmail.com> 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: skajmer <skajmer@protonmail.com>	2026-05-03 12:06:39 +02:00
Hosted Weblate	775c4e68fa	Translated using Weblate Currently translated at 81.3% (981 of 1206 strings) (Russian) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ru/ Translated using Weblate Currently translated at 100.0% (1206 of 1206 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 85.6% (1033 of 1206 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: York <goog10216922@gmail.com> Co-authored-by: spoon <monkeyfart907@gmail.com>	2026-05-02 04:34:18 +00:00
jeffvli	34e0c4bd4a	prevent first lyric line highlight before timestamp (#1965 )	2026-05-01 21:33:40 -07:00
jeffvli	323130a877	add toggle for app-suspension for powersave block (#1992 )	2026-05-01 21:24:45 -07:00
jeffvli	3b2aab74ac	enforce web player seek by seconds when less than 1 (#1993 )	2026-05-01 21:12:20 -07:00
Hosted Weblate	bc7ef0624b	Translated using Weblate Currently translated at 100.0% (1205 of 1205 strings) (Dutch) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/nl/ Translated using Weblate Currently translated at 100.0% (1205 of 1205 strings) (Dutch) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/nl/ Co-authored-by: Joren Vansteenkiste <vansteenkiste.joren@telenet.be> Co-authored-by: bokse <weblate@bokse.nl>	2026-05-01 21:32:24 +02:00
Pedro Daniel Reis	304ce8b881	[UI] Made sidebar image just use flex (#1975 ) * made sidebar image just use flex * force aspect ratio to be square * prevent image container from expanding --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>	2026-05-01 12:32:18 -07:00
Jonne Saloranta	01011a49a2	Replace success toast with info when no songs are added (#1994 )	2026-05-01 11:44:15 -07:00
York	d24ca04878	fix: detect Homebrew mpv on macOS (#1989 )	2026-05-01 11:43:07 -07:00
Hosted Weblate	640d38e5a9	Translated using Weblate Currently translated at 100.0% (1205 of 1205 strings) (Catalan) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ca/ Co-authored-by: Ondo <SparkyOndo@proton.me>	2026-04-30 15:09:57 +00:00
jeffvli	ac0c074d4b	fix undefined / null parameter string for Subsonic (#1978 )	2026-04-28 21:17:44 -07:00
jeffvli	6be5818493	migrate to mantine v9	2026-04-28 21:02:27 -07:00
Hosted Weblate	03edd5a639	Translated using Weblate Currently translated at 100.0% (1205 of 1205 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1205 of 1205 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% (1205 of 1205 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Translated using Weblate Currently translated at 99.8% (1201 of 1203 strings) (French) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/fr/ 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: KosmoMoustache <kosmomoustache@users.noreply.hosted.weblate.org> Co-authored-by: York <goog10216922@gmail.com>	2026-04-29 04:45:44 +02:00
jeffvli	f5eb3f1488	wrap useHotkeys to disable on command palette open (#1925 )	2026-04-28 19:31:41 -07:00
jeffvli	8eab9edb15	fix performance issue related to blurred library header	2026-04-28 19:05:43 -07:00
Mitch Ray	fcc69980e4	Stretch the wavesurfer waveform to the full height (#1962 ) * Stretch the wavesurfer waveform to the full height * Add waveform stretch setting	2026-04-27 20:28:03 -07:00
Hosted Weblate	053b78a3fd	Translated using Weblate Currently translated at 100.0% (1203 of 1203 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1203 of 1203 strings) (Polish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pl/ Translated using Weblate Currently translated at 100.0% (1203 of 1203 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% (1203 of 1203 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: linger <linger0517@gmail.com> Co-authored-by: skajmer <skajmer@protonmail.com>	2026-04-22 11:09:49 +02:00
mathew4	42ded966e4	fix: proper selection of next song when using shuffle and repeat-one (#1932 )	2026-04-21 00:10:21 -07:00
Kendall Garner	ea9119431c	use urlsearchparams instead of qs (#1970 )	2026-04-21 00:09:23 -07:00
vimae	add0345f10	feat(lyrics): non-active lyric settings (#1954 ) * feat: non-active lyric settings	2026-04-21 00:09:03 -07:00
Hosted Weblate	e5a8324a79	Translated using Weblate Currently translated at 99.3% (1193 of 1201 strings) (Chinese (Simplified Han script)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hans/ Co-authored-by: yidaduizuoye <yidaduizuoye@outlook.com>	2026-04-19 06:09:51 +02:00
jeffvli	cc4e933c07	fix missing path replacement transformations	2026-04-16 00:29:13 -07:00
Hosted Weblate	382d279dad	Translated using Weblate Currently translated at 100.0% (1201 of 1201 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1201 of 1201 strings) (French) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/fr/ Translated using Weblate Currently translated at 100.0% (1201 of 1201 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% (1201 of 1201 strings) (Polish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pl/ Translated using Weblate Currently translated at 100.0% (1201 of 1201 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Translated using Weblate Currently translated at 79.9% (959 of 1200 strings) (Russian) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ru/ Co-authored-by: Dylan MONTIGAUD <dylanmontigaud17@gmail.com> 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: Nick <n.grakhov08@gmail.com> Co-authored-by: York <goog10216922@gmail.com> Co-authored-by: skajmer <skajmer@protonmail.com>	2026-04-15 06:10:05 +02:00
York	b99899f128	fix MPV visualizer on macOS and handle exclusive mode UX (#1930 )	2026-04-13 20:47:03 -07:00
korpseluv	f5839bf39c	normalize album release types and improve grouping logic (#1892 )	2026-04-13 20:40:11 -07:00
Damien Erambert	914ed5b8f3	macOS 26-friendly icon (#1941 )	2026-04-13 20:32:21 -07:00
Ross	ca0a1569f8	Add everfrost dark and light themes (#1934 ) Co-authored-by: Ross <ro@noirlab.edu>	2026-04-13 20:22:37 -07:00
Hosted Weblate	9f10fe398a	Translated using Weblate Currently translated at 58.1% (698 of 1200 strings) (Portuguese (Brazil)) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pt_BR/ Translated using Weblate Currently translated at 38.8% (466 of 1200 strings) (Ukrainian) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/uk/ Co-authored-by: Yuri Shumyatsky <shumy260404@gmail.com> Co-authored-by: albatrays <weblate.duct925@passmail.net>	2026-04-12 12:09:54 +00:00
Kendall Garner	8869278898	make theme selector serachable	2026-04-10 20:03:50 -07:00
Jeff	16c9e6cc1b	Fix various build issues (#1942 ) * remove dynamic import for platform features * increase node memory limit on macOS build * fix invalid dynamic imports in renderer * remove discord-rpc import in renderer	2026-04-10 01:54:11 -07:00
Kendall Garner	2a6e9b6ad3	add extendInfo to alpha/beta builders	2026-04-08 07:28:34 -07:00
Kendall Garner	167b42df2b	Merge pull request #1926 from noctuum/fix/wayland-screen-share-dialog fix(linux): remove unnecessary screen capture from audio loopback handler	2026-04-08 02:11:36 +00:00
jeffvli	e6a2bc3acf	disable useTransition in router again	2026-04-07 18:21:32 -07:00
jeffvli	ca3c7015c6	add fallback to direct streamURL if getTranscodeDecision fails	2026-04-07 18:14:47 -07:00
jeffvli	c7c15d917a	isolate item card control renders	2026-04-07 18:14:47 -07:00
noctuum	6adb29bc38	fix(linux): remove unnecessary desktopCapturer call from display media handler The setDisplayMediaRequestHandler was calling desktopCapturer.getSources() to provide a video source that the renderer never uses (it requests video: false and only consumes audio tracks). On Wayland, this created a new xdg-desktop-portal ScreenCast session on every launch, showing an unavoidable screen share dialog because Electron does not persist PipeWire restore tokens across desktopCapturer sessions. Simplified the handler to return only { audio: 'loopback' }, which captures system audio via PipeWire/PulseAudio monitor source without any portal interaction.	2026-04-08 04:56:05 +07:00
Hosted Weblate	2c3cd7af24	Translated using Weblate Currently translated at 94.6% (1136 of 1200 strings) (German) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/de/ Translated using Weblate Currently translated at 100.0% (1200 of 1200 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% (1200 of 1200 strings) (Japanese) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ja/ Translated using Weblate Currently translated at 100.0% (1200 of 1200 strings) (Czech) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Translated using Weblate Currently translated at 100.0% (1200 of 1200 strings) (Spanish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 100.0% (1200 of 1200 strings) (French) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/fr/ Translated using Weblate Currently translated at 100.0% (1200 of 1200 strings) (Polish) Translation: feishin/Translation Translate-URL: https://hosted.weblate.org/projects/feishin/translation/pl/ Co-authored-by: Fordas <fordas15@gmail.com> Co-authored-by: KosmoMoustache <kosmomoustache@users.noreply.hosted.weblate.org> Co-authored-by: York <goog10216922@gmail.com> Co-authored-by: Zarakkas <kaz@users.noreply.hosted.weblate.org> Co-authored-by: karigane <169052233+karigane-cha@users.noreply.github.com> Co-authored-by: lorduskordus <lorduskordus@gmail.com> Co-authored-by: skajmer <skajmer@protonmail.com>	2026-04-07 08:10:05 +02:00
jeffvli	3c442a2d40	update to v1.11.0	2026-04-06 17:10:18 -07:00
Andrzej Voss	d67c185c93	feat: Make "Clear" button "Refresh" when there are no lyrics found. (#1920 ) Ref: effvli/feishin#1919 - tl;dr: Button actually reloads/refreshes lyrics info from the server too, it makes it, well, clearer what it does in that case - allows to reread lyrics from server without clearing whole cache.	2026-04-06 16:59:01 -07:00
jeffvli	ff96a5f121	lint	2026-04-06 12:06:55 -07:00
jeffvli	6fc7b6b271	support image drop for upload	2026-04-06 11:41:33 -07:00
jeffvli	918f453066	support navidrome artist image upload/delete	2026-04-06 11:41:26 -07:00
jeffvli	4a986069f8	set flac as default transcoding profile	2026-04-06 10:58:37 -07:00
jeffvli	11d26af893	remove arm/v7 from container build	2026-04-06 09:47:28 -07:00
jeffvli	ad13fea033	update to v1.10.0	2026-04-05 22:41:06 -07:00
Hosted Weblate	8a75ec2558	Translated using Weblate Currently translated at 100.0% (1196 of 1196 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-04-06 05:27:10 +00:00
Auzlex	895cbb4d16	fix(media-session): prevent handlers from being destroyed during playback (#1898 ) Handlers were being registered and destroyed on state change/re-render, causing media controls to vanish during rapid use or quick track skipping. Persist handlers and add debounce for rapid track skipping. Tested on Windows, Linux, and Android.	2026-04-05 22:27:04 -07:00
jeffvli	3f300c40cc	add in-app prompt for system audio connection	2026-04-05 22:19:09 -07:00
jeffvli	c8e8f58cce	re-add useTransition to router	2026-04-05 21:54:07 -07:00
jeffvli	56cd50e0ed	add react compiler	2026-04-05 18:38:06 -07:00
jeffvli	1b2a6dfc1f	optimize item list controls	2026-04-05 18:21:28 -07:00
jeffvli	356f5487b0	reorder playlist context menu items	2026-04-05 14:10:07 -07:00
jeffvli	37501f2983	remove automatic autosize, use dummy fill column instead	2026-04-05 09:06:03 -07:00
jeffvli	d61587b16f	add automatic autosize columns when auto-fit is disabled	2026-04-05 08:12:10 -07:00
Kendall Garner	06b7b53dc9	feat(macos): add NSLocalNetworkUsageDescription	2026-04-05 08:03:28 -07:00
Kendall Garner	6c2cd1c274	fix(mpris): serve minimal metadata when playing radio 1. MPRIS (or `mpris-service`) is very fragile. If an invalid `mpris:trackid` (something with `-` or spaces) is passed in, it breaks. Use a minimal track id instead 2. Only populate album/artist/title	2026-04-05 08:01:28 -07:00
jeffvli	ef129e4638	remove video from displayMedia request	2026-04-05 07:58:01 -07:00
jeffvli	a01b4e664d	add plex fork notice	2026-04-05 07:57:41 -07:00
jeffvli	0b45ab7f36	support real-time table column resizing	2026-04-05 07:48:54 -07:00
jeffvli	031d365262	decrease padding on list header	2026-04-05 03:49:31 -07:00
jeffvli	4fd56281d5	increase font size of smart playlist JSON editor	2026-04-05 02:42:05 -07:00
jeffvli	08ce8a4028	add nd v0.61.1 smart playlist fields	2026-04-05 02:38:40 -07:00
jeffvli	e06877af76	make visualizer idle kill consistent for both	2026-04-05 02:35:32 -07:00
jeffvli	84395ce5b4	pass muted text props to JoinedArtists in left controls	2026-04-05 00:59:53 -07:00
jeffvli	94886a2d5a	add system audio loopback for webaudio	2026-04-05 00:48:38 -07:00
jeffvli	25bb7f7069	fix scroll shadow z-indexing issue with table scrollbars	2026-04-04 23:48:48 -07:00
jeffvli	573fe5ee35	use external store for scroll shadow	2026-04-04 23:32:32 -07:00
jeffvli	a868d4d539	combine wav codec check	2026-04-04 23:11:55 -07:00
jeffvli	564ee721c4	revert default transcoding profile to opus, add safari check for mp3	2026-04-04 23:08:53 -07:00
jeffvli	a8d990db23	fix subsonic transcoding stream url to return raw string instead of fetch	2026-04-04 23:03:46 -07:00
jeffvli	e21515f7fb	add additional codec probes for transcoding profile, use mp3 instead of opus for default transcode	2026-04-04 23:03:29 -07:00
jeffvli	3e5a8ac78d	re-add default suspense to album/artist routes	2026-04-04 22:25:21 -07:00
jeffvli	6c73d06dcf	remove useTransition from router	2026-04-04 22:14:07 -07:00
jeffvli	a8954bfa2a	remove imageUrl in favor or imageId for artistInfo	2026-04-04 21:52:44 -07:00
jeffvli	19a1617a8d	remove suspense spinner from router	2026-04-04 18:26:25 -07:00
jeffvli	1abae986f8	move server selector into app menu	2026-04-04 18:25:04 -07:00
jeffvli	43fa574dab	add responsive breakpoint for queue control items	2026-04-04 17:37:47 -07:00
jeffvli	99530c670e	redesign queue controls bar	2026-04-04 17:37:05 -07:00
jeffvli	3a0dfe59ce	improve visibily of keyboard-focused search items	2026-04-04 17:37:05 -07:00
York	d60ed0a793	feat: macOS menu enhancement (#1903 )	2026-04-04 17:35:30 -07:00
Kendall Garner	a32fed3bcf	chore: upgrade dependencies (#1906 ) * upgrade dependencies * downgrade fast-average-color	2026-04-04 17:10:57 -07:00
Kendall Garner	132ac92984	chore: use consistent order of track / artist / ablum on full screen page	2026-04-04 14:46:13 -07:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><g style="display:inline" transform="translate(-53.452 -43.352)scale(1.11813)"><circle cx="256" cy="240.312" r="21.5" style="opacity:1;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.19597;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke;filter:url(#filter249)"/><path d="M220.85 277.951 183.5 315.6l36 36.1 20-19.7s5.856-6.2 16.5-6.2 16.5 6.2 16.5 6.2l20 19.7 36-36.1-37.35-37.649A51.5 51.5 0 0 1 256 291.812a51.5 51.5 0 0 1-35.15-13.86" style="opacity:1;fill:#000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter249)"/><path d="M256 145.4a25.7 25.7 0 0 0-18.229 7.551L66.97 323.47A25.42 25.42 0 0 0 59.5 341.5c0 14.083 11.417 25.5 25.5 25.5a25.42 25.42 0 0 0 18.031-7.469l103.895-103.597a51.5 51.5 0 0 1-2.426-15.621 51.5 51.5 0 0 1 51.5-51.5 51.5 51.5 0 0 1 51.5 51.5 51.5 51.5 0 0 1-2.426 15.62L408.97 359.532A25.42 25.42 0 0 0 427 367c14.083 0 25.5-11.417 25.5-25.5a25.42 25.42 0 0 0-7.469-18.031L274.23 152.95a25.7 25.7 0 0 0-18.229-7.55" style="display:inline;opacity:1;fill:#000;fill-opacity:1;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke;filter:url(#filter249)"/></g></svg>