Change step name

Maybe this will work?
try again
2026-07-28 16:23:26 -04:00 · 2026-07-28 16:21:21 -04:00 · 2026-07-28 16:15:50 -04:00 · 2026-07-28 16:13:47 -04:00 · 2026-07-28 16:10:38 -04:00 · 2026-07-28 16:00:43 -04:00
268 changed files with 18447 additions and 11928 deletions
@@ -119,5 +119,5 @@ body:
      label: Nightly Build
      description: Please ensure you've completed the following, if applicable.
      options:
-        - label: I have encountered this bug in the latest [nightly build](https://docs.freetubeapp.io/development/nightly-builds).
+        - label: I have encountered this bug in the latest **official** [nightly build](https://docs.freetubeapp.io/development/nightly-builds), do not check this box if you are using an unofficial or custom build.
          required: false
@@ -48,3 +48,10 @@ updates:
    labels:
      - "PR: waiting for review"
      - "PR: dependencies"
+    groups:
+      "actions/cache":
+        patterns:
+          - "actions/cache/*"
+      "github/codeql-action":
+        patterns:
+          - "github/codeql-action/*"
@@ -5,4 +5,4 @@
 'PR: dependencies':
 - any:
  - changed-files:
-    - any-glob-to-any-file: ['yarn.lock', 'package.json']
+    - any-glob-to-any-file: ['pnpm-lock.yaml', 'package.json']
@@ -75,43 +75,42 @@ jobs:
    runs-on: ${{ matrix.os }}

    steps:
-    - name: 'Use faster D: drive for yarn cache on Windows'
-      if: startsWith(matrix.os, 'windows')
-      shell: cmd
-      run: yarn config set cache-folder D:\ft_yarn_cache
+    - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 #v7.0.0
+      with:
+        persist-credentials: false

-    - name: Get yarn cache directory
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6.4.0
+      with:
+        node-version: ${{ matrix.node-version }}
+        package-manager-cache: false
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 #v6.0.9
+      with:
+        version: 10
+        cache: false
+
+    - name: Get pnpm cache directory
      id: cache_dir
      shell: bash
      run: |
        {
          echo 'cache_dir<<EOF'
-          yarn cache dir
+          pnpm store path
          echo EOF
        } >> "$GITHUB_OUTPUT"

-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
-      with:
-        persist-credentials: false
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f #v6.3.0
-      with:
-        node-version: ${{ matrix.node-version }}
-        package-manager-cache: false
-
-    - name: Restore yarn cache
+    - name: Restore pnpm cache
      id: restore_cache
-      uses: actions/cache/restore@668228422ae6a00e4ad889ee87cd7109ec5666a7 #v5.0.4
+      uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 #v6.1.0
      with:
-        key: ${{ format('node-cache-{0}-{1}-yarn-{2}', runner.os, runner.arch, hashFiles('yarn.lock')) }}
+        key: ${{ format('node-cache-{0}-{1}-pnpm-{2}', runner.os, runner.arch, hashFiles('pnpm-lock.yaml')) }}
        path: ${{ steps.cache_dir.outputs.cache_dir }}

-    - run: yarn run ci
+    - run: pnpm run ci
      shell: bash
-      env:
-        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
-    - run: yarn run lint
+    - run: pnpm run lint
      shell: bash
    - name: Set version number
      id: versionNumber
@@ -143,120 +142,104 @@ jobs:
    - name: Build x64 with Node.js ${{ matrix.node-version}}
      if: contains(matrix.runtime, 'x64')
      shell: bash
-      run: yarn run build
+      run: pnpm run build

    - name: Build ARMv7l with Node.js ${{ matrix.node-version}}
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
      shell: bash
-      run: yarn run build:arm32
+      run: pnpm run build:arm32

    - name: Build ARM64 with Node.js ${{ matrix.node-version}}
      if: contains(matrix.runtime, 'arm64')
      shell: bash
-      run: yarn run build:arm64
-
-    - name: Convert X64 AppImage to static runtime
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
-      shell: bash
-      env:
-        VERSION: ${{ steps.versionNumber.outputs.version }}
-      run: |
-        sudo apt install desktop-file-utils
-        cd build
-        appimage="FreeTube-${VERSION}.AppImage"
-        wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
-        chmod +x ./"$appimage" ./appimagetool.AppImage
-        ./"$appimage" --appimage-extract && rm -f ./"$appimage"
-        ./appimagetool.AppImage --comp zstd --mksquashfs-opt -Xcompression-level --mksquashfs-opt 20 \
-          -n ./squashfs-root ./"$appimage"
-        rm -rf ./squashfs-root ./appimagetool.AppImage
+      run: pnpm run build:arm64

    - name: Upload Linux .zip x64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-linux-x64-portable.zip
        path: build/freetube-${{ steps.versionNumber.outputs.version }}.zip

    - name: Upload Linux .7z x64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-linux-x64-portable.7z
        path: build/freetube-${{ steps.versionNumber.outputs.version }}.7z

    - name: Upload Linux .zip ARMv7l Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-linux-armv7l-portable.zip
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-armv7l.zip

    - name: Upload Linux .7z ARMv7l Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-linux-armv7l-portable.7z
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-armv7l.7z

    - name: Upload Linux .zip ARM64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-linux-arm64-portable.zip
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-arm64.zip

    - name: Upload Linux .7z ARM64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-linux-arm64-portable.7z
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-arm64.7z

    - name: Upload .deb x64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
      with:
        name: freetube_${{ steps.versionNumber.outputs.version }}_amd64.deb
        path: build/freetube_${{ steps.versionNumber.outputs.version }}_amd64.deb

    - name: Upload .deb ARMv7l Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
      with:
        name: freetube_${{ steps.versionNumber.outputs.version }}_armv7l.deb
        path: build/freetube_${{ steps.versionNumber.outputs.version }}_armv7l.deb

    - name: Upload .deb ARM64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
      with:
        name: freetube_${{ steps.versionNumber.outputs.version }}_arm64.deb
        path: build/freetube_${{ steps.versionNumber.outputs.version }}_arm64.deb

    - name: Upload AppImage x64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-amd64.AppImage
        path: build/FreeTube-${{ steps.versionNumber.outputs.version }}.AppImage

    - name: Upload AppImage ARMv7l Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-armv7l.AppImage
        path: build/FreeTube-${{ steps.versionNumber.outputs.version }}-armv7l.AppImage

    - name: Upload AppImage ARM64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-arm64.AppImage
        path: build/FreeTube-${{ steps.versionNumber.outputs.version }}-arm64.AppImage

    - name: Upload .rpm x64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}.amd64.rpm
@@ -265,119 +248,119 @@ jobs:
    # rpm are not built for armv7l

    - name: Upload .rpm ARM64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}.arm64.rpm
        path: build/freetube-${{ steps.versionNumber.outputs.version }}.aarch64.rpm

    - name: Upload Pacman .pacman x64 Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-amd64.pacman
        path: build/freetube-${{ steps.versionNumber.outputs.version }}.pacman

    - name: Upload Windows x64 .exe Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-setup-x64.exe
        path: build/freetube Setup ${{ steps.versionNumber.outputs.version }}.exe

    - name: Upload Windows x64 Portable Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-win-x64-portable.exe
        path: build/freetube ${{ steps.versionNumber.outputs.version }}.exe

    - name: Upload Windows x64 .zip Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-win-x64-portable.zip
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-win.zip

    - name: Upload Windows x64 .7z Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-win-x64-portable.7z
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-win.7z

    - name: Upload Windows arm64 .exe Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-setup-arm64.exe
        path: build/freetube Setup ${{ steps.versionNumber.outputs.version }}.exe

    - name: Upload Windows arm64 Portable Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-win-arm64-portable.exe
        path: build/freetube ${{ steps.versionNumber.outputs.version }}.exe

    - name: Upload Windows arm64 .zip Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-win-arm64-portable.zip
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-arm64-win.zip

    - name: Upload Windows arm64 .7z Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-win-arm64-portable.7z
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-arm64-win.7z

    - name: Upload Mac x64 .dmg Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-mac-x64.dmg
        path: build/freetube-${{ steps.versionNumber.outputs.version }}.dmg

    - name: Upload Mac x64 .zip Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-mac-x64.zip
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-mac.zip

    - name: Upload Mac x64 .7z Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-x64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-mac-x64.7z
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-mac.7z

    - name: Upload Mac arm64 .dmg Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-mac-arm64.dmg
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-arm64.dmg

    - name: Upload Mac arm64 .zip Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-mac-arm64.zip
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-arm64-mac.zip

    - name: Upload Mac arm64 .7z Artifact
-      uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f #v7.0.0
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a #v7.0.1
      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
      with:
        name: freetube-${{ steps.versionNumber.outputs.version }}-mac-arm64.7z
        path: build/freetube-${{ steps.versionNumber.outputs.version }}-arm64-mac.7z

-    - name: Save yarn cache
-      uses: actions/cache/save@668228422ae6a00e4ad889ee87cd7109ec5666a7 #v5.0.4
+    - name: Save pnpm cache
+      uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 #v6.1.0
      # Only save the cache if we weren't able to restore an existing one above
      if: steps.restore_cache.outputs.cache-primary-key != steps.restore_cache.outputs.cache-matched-key
      with:
@@ -19,9 +19,15 @@ jobs:
      uses: actions/setup-node@v3
      with:
        node-version: 22.x
-        cache: "yarn"
-    - name: 🧶 Yarn install
-      run: yarn ci
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
+      with:
+        version: 10
+        cache: false
+
+    - name: PNPM install
+      run: pnpm i

    - name: Set environment icon & splash for android app
      run: |
@@ -29,7 +35,7 @@ jobs:
        node ./_scripts/_setAppSplashTheme.mjs --nightly

    - name: 🔍Lint code
-      run: yarn lint
+      run: pnpm run lint
      continue-on-error: true

    - name: 📚Read package.json
@@ -73,7 +79,7 @@ jobs:
        value: ${{ steps.pkg.outputs.productName }} Nightly

    - name: 📦 Pack for 🕸web with Node.js
-      run: yarn pack:web
+      run: pnpm run pack:web

    - name: 🐋 Build docker image
      run: |
@@ -97,8 +103,8 @@ jobs:

    - name: 📦 Pack for 📱Android
      run: |
-        yarn pack:botGuardScript:android
-        yarn pack:android:dev
+        pnpm run pack:botGuardScript:android
+        pnpm run pack:android:dev

    - name: 🦴 Fetch keystore from secrets
      run: |
@@ -24,19 +24,19 @@ jobs:

    steps:
      - name: Checkout Repo
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 #v7.0.0
        with:
          persist-credentials: false

      - name: Compress Images
        id: calibre
-        uses: calibreapp/image-actions@03c976c29803442fc4040a9de5509669e7759b81
+        uses: calibreapp/image-actions@9d037c06280028c110ff61c433ad4dc7d33c3c43
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          compressOnly: true
      - name: Create New Pull Request If Needed
        if: steps.calibre.outputs.markdown != ''
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 #v8.1.0
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 #v8.1.1
        with:
          title: Compressed Images Nightly
          branch-suffix: timestamp
@@ -38,17 +38,17 @@ jobs:

    steps:
    - name: Checkout repository
-      uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
+      uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 #v7.0.0
      with:
        persist-credentials: false

    - name: Initialize CodeQL
-      uses: github/codeql-action/init@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
+      uses: github/codeql-action/init@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4.37.0
      with:
        languages: ${{ matrix.language }}
        build-mode: ${{ matrix.build-mode }}

    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
+      uses: github/codeql-action/analyze@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4.37.0
      with:
        category: "/language:${{matrix.language}}"
@@ -24,7 +24,7 @@ jobs:

    steps:
      - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@1df065ebe6e3310545d4f4c4e862e43bdca146f0 #v3.0.3
+        uses: eps1lon/actions-label-merge-conflict@0273be72a0bbd58fcd71d0d6c02c209b50d1e5e1 #v3.1.0
        with:
          dirtyLabel: "PR: merge conflicts / rebase needed"
          removeOnDirtyLabel: "PR: waiting for review"
@@ -14,7 +14,7 @@ jobs:
    runs-on: ubuntu-slim
    if: ${{ !github.event.pull_request.draft }}
    steps:
-    - uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b #v6.0.1
+    - uses: actions/labeler@b8dd2d9be0f68b860e7dae5dae7d772984eacd6d #v6.2.0
      with:
        repo-token: "${{ secrets.GITHUB_TOKEN }}"
        configuration-path: .github/pr-labeler.yml
@@ -18,44 +18,46 @@ jobs:
      contents: read

    steps:
-    - name: Get yarn cache directory
+    - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 #v7.0.0
+      with:
+        persist-credentials: false
+
+    - name: Use Node.js 24.x
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6.4.0
+      with:
+        node-version: 24.x
+        package-manager-cache: false
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 #v6.0.9
+      with:
+        version: 10
+        cache: false
+
+    - name: Get pnpm cache directory
      id: cache_dir
      shell: bash
      run: |
        {
          echo 'cache_dir<<EOF'
-          yarn cache dir
+          pnpm store path
          echo EOF
        } >> "$GITHUB_OUTPUT"

-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
-      with:
-        persist-credentials: false
-
-    - name: Use Node.js 24.x
-      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f #v6.3.0
-      with:
-        node-version: 24.x
-        package-manager-cache: false
-
-    # This workflow runs on pull requests which are untrusted
-    # so we only restore the yarn cache, we don't save it to avoid cache poisoning
-    - name: Restore yarn cache
+    - name: Restore pnpm cache
      id: restore_cache
-      uses: actions/cache/restore@668228422ae6a00e4ad889ee87cd7109ec5666a7 #v5.0.4
+      uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 #v6.1.0
      with:
-        key: ${{ format('node-cache-{0}-{1}-yarn-{2}', runner.os, runner.arch, hashFiles('yarn.lock')) }}
+        key: ${{ format('node-cache-{0}-{1}-pnpm-{2}', runner.os, runner.arch, hashFiles('pnpm-lock.yaml')) }}
        path: ${{ steps.cache_dir.outputs.cache_dir }}

-    - run: yarn run ci
+    - run: pnpm run ci
      shell: bash
-      env:
-        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
-    - run: yarn run lint
+    - run: pnpm run lint
      shell: bash
    # let's verify that webpack is able to package the project
-    - run: yarn run pack
+    - run: pnpm run pack
      shell: bash
    # verify that webpack is able to package the project using the web config
-    - run: yarn run pack:web
+    - run: pnpm run pack:web
      shell: bash
@@ -35,12 +35,15 @@ jobs:
        include:
        - runtime: linux-x64
          os: ubuntu-latest
+          appimage-arch: amd64

        - runtime: linux-armv7l
          os: ubuntu-latest
+          appimage-arch: armv7l

        - runtime: linux-arm64
          os: ubuntu-latest
+          appimage-arch: arm64

        - runtime: osx-x64
          os: macOS-latest
@@ -57,22 +60,26 @@ jobs:
    runs-on: ${{ matrix.os }}

    steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
+    - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 #v7.0.0
      with:
        persist-credentials: false

-    # Do not restore the yarn cache, to avoid cache poisoning affecting releases
+    # Do not restore the pnpm cache, to avoid cache poisoning affecting releases
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f #v6.3.0
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6.4.0
      with:
        node-version: ${{ matrix.node-version }}
        package-manager-cache: false

-    - run: yarn run ci
+    - name: Install pnpm
+      uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 #v6.0.9
+      with:
+        version: 10
+        cache: false
+
+    - run: pnpm run ci
      shell: bash
-      env:
-        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
-    - run: yarn run lint
+    - run: pnpm run lint
      shell: bash

    - name: Get Version Number
@@ -91,70 +98,36 @@ jobs:
    - name: Build x64 with Node.js ${{ matrix.node-version}}
      if: contains(matrix.runtime, 'x64')
      shell: bash
-      run: yarn run build
+      run: pnpm run build

    - name: Build ARMv7l with Node.js ${{ matrix.node-version}}
      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
      shell: bash
-      run: yarn run build:arm32
+      run: pnpm run build:arm32

    - name: Build ARM64 with Node.js ${{ matrix.node-version}}
      if: contains(matrix.runtime, 'arm64')
      shell: bash
-      run: yarn run build:arm64
+      run: pnpm run build:arm64

-    - name: Convert X64 AppImage to static runtime and add update information
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
+    - name: Add update information to AppImage
+      if: startsWith(matrix.os, 'ubuntu')
      shell: bash
      env:
        VERSION: ${{ steps.getPackageInfo.outputs.version }}
+        APPIMAGE_ARCH: ${{ matrix.appimage-arch }}
      run: |
-        sudo apt install desktop-file-utils
-        cd build
-        appimage="FreeTube-${VERSION}.AppImage"
-        wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
-        chmod +x ./"$appimage" ./appimagetool.AppImage
-        update_information='gh-releases-zsync|FreeTubeApp|FreeTube|latest-all|freetube-*-amd64.AppImage.zsync'
-        ./"$appimage" --appimage-extract && rm -f ./"$appimage"
-        ./appimagetool.AppImage --comp zstd --mksquashfs-opt -Xcompression-level --mksquashfs-opt 20 \
-          -u "$update_information" -n ./squashfs-root ./"$appimage"
-        rm -rf ./squashfs-root ./appimagetool.AppImage
+        update_info="gh-releases-zsync|FreeTubeApp|FreeTube|latest-all|freetube-*-${APPIMAGE_ARCH}.AppImage.zsync"

-    - name: Convert ARMv7l AppImage to static runtime and add update information
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
-      shell: bash
-      env:
-        VERSION: ${{ steps.getPackageInfo.outputs.version }}
-      run: |
-        sudo apt install desktop-file-utils
        cd build
-        appimage="FreeTube-${VERSION}-armv7l.AppImage"
-        wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
-        wget "https://github.com/AppImage/type2-runtime/releases/download/continuous/runtime-x86_64" -O runtime
-        chmod +x ./"$appimage" ./appimagetool.AppImage ./runtime
-        update_information='gh-releases-zsync|FreeTubeApp|FreeTube|latest-all|freetube-*-armv7l.AppImage.zsync'
-        TARGET_APPIMAGE="$appimage" ./runtime --appimage-extract && rm -f ./"$appimage"
-        ARCH=armhf ./appimagetool.AppImage --comp zstd --mksquashfs-opt -Xcompression-level --mksquashfs-opt 20 \
-          -u "$update_information" -n ./squashfs-root ./"$appimage"
-        rm -rf ./squashfs-root ./appimagetool.AppImage ./runtime

-    - name: Convert ARM64 AppImage to static runtime and add update information
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
-      shell: bash
-      env:
-        VERSION: ${{ steps.getPackageInfo.outputs.version }}
-      run: |
-        sudo apt install desktop-file-utils
-        cd build
-        appimage="FreeTube-${VERSION}-arm64.AppImage"
-        wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
-        wget "https://github.com/AppImage/type2-runtime/releases/download/continuous/runtime-x86_64" -O runtime
-        chmod +x ./"$appimage" ./appimagetool.AppImage ./runtime
-        update_information='gh-releases-zsync|FreeTubeApp|FreeTube|latest-all|freetube-*-arm64.AppImage.zsync'
-        TARGET_APPIMAGE="$appimage" ./runtime --appimage-extract && rm -f ./"$appimage"
-        ARCH=aarch64 ./appimagetool.AppImage --comp zstd --mksquashfs-opt -Xcompression-level --mksquashfs-opt 20 \
-          -u "$update_information" -n ./squashfs-root ./"$appimage"
-        rm -rf ./squashfs-root ./appimagetool.AppImage ./runtime
+        section_offset_hex="$(objdump --section-headers ./FreeTube-${VERSION}*.AppImage | awk '$2 == ".upd_info" { printf $6 }')"
+
+        script='const fd = fs.openSync(process.argv[3], "r+"); fs.writeSync(fd, process.argv[2], parseInt(process.argv[1], 16)); fs.closeSync(fd)'
+
+        node -e "$script" $section_offset_hex "$update_info" ./FreeTube-${VERSION}*.AppImage
+
+        zsyncmake -u "freetube-${VERSION}-beta-${APPIMAGE_ARCH}.AppImage" ./FreeTube-${VERSION}*.AppImage

    - name: Upload Linux .zip x64 Release
      uses: actions/upload-release-asset@e8f9f06c4b078e705bd2ea027f0926603fc9b4d5 #v1.0.2
@@ -17,29 +17,43 @@ jobs:
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
-        node-version: 18.x
-        cache: "yarn"
-    - name: 🧶 Yarn install
-      run: yarn ci
+        node-version: 22.x
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
+      with:
+        version: 10
+        cache: false
+
+    - name: PNPM install
+      run: pnpm i
+

    - name: 🔍Lint code
-      run: yarn lint
+      run: pnpm run lint
+      continue-on-error: true

    - name: 📚Read package.json
      id: pkg
      uses: jaywcjlove/github-action-package@v1.3.0

+    - name: Generate build number for final part of version number
+      id: buildNumber
+      run: |
+        # to make it easier to tell which is which when multiple are installed
+        echo "buildNumber=$(node ./_scripts/getReleaseNumber.mjs)" >> "$GITHUB_OUTPUT"
+
    - name: Set Version Number Variable
      id: versionNumber
      uses: actions/github-script@v6
      with:
        result-encoding: string
        script: |
-          // TODO✏ automate this
-          var run_number = ${{ github.run_number }} - 121
+          var run_number = ${{ steps.buildNumber.outputs.buildNumber }}
          var version = '${{ steps.pkg.outputs.version }}'
          var version_number = version + '.' + run_number
          return version_number
+
    - name: Set App ID Variable
      id: appId
      uses: actions/github-script@v6
@@ -70,7 +84,7 @@ jobs:
        value: ${{ steps.pkg.outputs.productName }}

    - name: 📦 Pack for 🕸web with Node.js
-      run: yarn pack:web
+      run: pnpm run pack:web

    - name: 🐋 Build docker image
      run: |
@@ -101,8 +115,8 @@ jobs:

    - name: 📦 Pack for 📱Android with Node.js & Cordova
      run: |
-        yarn pack:botGuardScript:android
-        yarn pack:android
+        pnpm run pack:botGuardScript:android
+        pnpm run pack:android

    - name: 🦴 Fetch keystore from secrets
      run: |
@@ -18,7 +18,7 @@ jobs:
      pull-requests: write

    steps:
-      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f #v10.2.0
+      - uses: actions/stale@1e223db275d687790206a7acac4d1a11bd6fe629 #v10.4.0
        with:
          stale-pr-message: 'This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.'
          close-pr-message: 'This PR was closed because it has been stalled for 14 days with no activity.'
@@ -16,7 +16,7 @@ jobs:
      contents: read

    steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
+    - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 #v7.0.0
      with:
        repository: FreeTubeApp/FreeTubeApp.io
        token: ${{ secrets.FLATHUB_TOKEN }}
@@ -1,5 +1,5 @@
 {
-  "stylelint.packageManager": "yarn",
+  "stylelint.packageManager": "pnpm",
  "stylelint.snippet": [
      "css",
      "less",
@@ -13,7 +13,6 @@
      "postcss",
      "scss"
  ],
-  "eslint.packageManager": "yarn",
  "eslint.probe": [
      "javascript",
      "vue",
@@ -29,6 +28,5 @@
    "jsonc",
    "yml",
    "yaml"
-  ],
-  "javascript.preferences.importModuleSpecifier": "relative"
+  ]
 }
@@ -19,7 +19,7 @@ Please follow these guidelines before sending your pull request and making contr
 * Comment your code when necessary.  Follow the [JavaScript Documentation and Comments Standard](https://www.drupal.org/docs/develop/standards/javascript/javascript-api-documentation-and-comment-standards) for functions.
 * Please follow proper Vue structure when creating new code / components.  Use existing code as well as the [Vue.js Guide](https://vuejs.org/guide/introduction.html) for reference.
 * Please test your code.  Make sure new features work as well as existing core features such as watching videos or loading subscriptions.  New features need to work with both the Local API as well as the Invidious API
-* Please make sure your code does not violate any standards set by our linter.  It's up to you to make fixes whenever necessary.  You can run `yarn run lint` to check locally and `yarn run lint-fix` to automatically fix smaller issues.
+* Please make sure your code does not violate any standards set by our linter.  It's up to you to make fixes whenever necessary.  You can run `pnpm run lint` to check locally and `pnpm run lint-fix` to automatically fix smaller issues.
 * Please limit the amount of Node Modules that you introduce into the project.  Only include them when **absolutely necessary** for your code to work (Ex: Using nedb for databases) or if a module provides similar functionality to what you are trying to achieve (Ex: Using autolinker to create links to outside URLs instead of writing the functionality myself).
 * Please try to stay involved with the community and maintain your code.  We are only a handful of developers working on FreeTube in our spare time.  We do not have time to work on everything, and it would be nice if you can maintain your code when necessary.

@@ -3,14 +3,14 @@
 FROM node:22-alpine AS dep
 WORKDIR /app
 COPY package.json ./package.json
-COPY yarn.lock ./yarn.lock
+COPY pnpm-lock.yaml ./pnpm-lock.yaml
 COPY _scripts ./_scripts
 # copy `dist` if it exists already
 COPY dis[t]/web ./dist/web
 # git is needed for jinter
 RUN apk add git
 # don't rebuild if you don't have to
-RUN if [ ! -d 'dist/web' ]; then yarn ci; fi
+RUN if [ ! -d 'dist/web' ]; then pnpm i; fi

 ## Build Stage ##
 FROM node:22-alpine AS build
@@ -19,7 +19,7 @@ COPY . .
 COPY --from=dep /app/dis[t]/web ./dist/web
 COPY --from=dep /app/node_module[s] ./node_modules
 # don't rebuild if you don't have to
-RUN if [ ! -d 'dist/web' ]; then yarn pack:web; fi
+RUN if [ ! -d 'dist/web' ]; then pnpm run pack:web; fi

 ## App Stage ##
 FROM nginx:latest as app
@@ -90,7 +90,6 @@ yarn pack:web

 ### Commands for the PWA Docker Image
 ```bash
-
 # 💨 Creates and runs the image locally. Add `--platform=linux/arm64` to docker build for ARM64 devices including Apple Silicon
 docker build -t freetubecordova . # Warning, might take a while on Apple Silicon
 docker run --name ftcordova -d -p 8080:80 freetubecordova
@@ -99,12 +98,6 @@ docker run --name ftcordova -d -p 8080:80 freetubecordova
 docker pull ghcr.io/marmadilemanteater/freetubecordova:latest
 # 👟 Runs the image from ghcr.io
 docker run --name ftcordova -d -p 8080:80 ghcr.io/marmadilemanteater/freetubecordova:latest
-
-# 🏃 Runs the image from Docker Hub.
-docker run --name ftcordova -d -p 8080:80 owentruong/freetubecordova:latest
-
-# 🏃‍♂️ Runs the image from Docker Hub (ARM64)
-docker run --platform=linux/arm64 --name ftcordova -d -p 8080:80 owentruong/freetubecordova:latest-arm64
 ```
 ## Contributing

@@ -1,9 +1,7 @@
-
 import { readFile, readdir, writeFile } from 'fs/promises'
 import { join } from 'path'
 import { fileURLToPath } from 'url'

-
 // sets the splashscreen & icon to one of three predefined themes (this makes it easier to tell, at a glance, which one is open)
 // - release (the default production look)
 // - nightly
@@ -84,8 +82,8 @@ async function constructThemePath(isDark = false, version = 0) {
  const resDirectory = join(scriptDir, '..', '..', 'android/app/src/main/res/')
  const files = await readdir(resDirectory)
  const versionsListed = files
-                        .filter(file => file.startsWith(`values${isDark ? '-night-' : '-'}v`))
-                        .map(file => parseInt(file.split('-v')[1]))
+    .filter(file => file.startsWith(`values${isDark ? '-night-' : '-'}v`))
+    .map(file => parseInt(file.split('-v')[1]))
  if (versionsListed.indexOf(version) !== -1) {
    return join(resDirectory, `values${isDark ? '-night-' : '-'}v${version}`, 'themes.xml')
  } else {
@@ -102,7 +100,6 @@ async function setValuesForThemeFile(values, isDark = false, version = 0) {
  await writeFile(themePath, themeXml)
 }

-
 await setValuesForThemeFile({
  windowSplashScreenBackground: currentTheme.back,
  windowSplashScreenIconBackgroundColor: currentTheme.back
@@ -1,12 +1,11 @@
-
 const { readFile, writeFile } = require('fs/promises')
 const { join } = require('path')

 ;(async () => {
  const manifest = (await readFile(join(__dirname, '../android/app/src/main/AndroidManifest.xml'))).toString()
  const invidiousInstances = JSON.parse((await readFile(join(__dirname, '../static/invidious-instances.json'))).toString())
-  const supportedLinks = manifest.match(/<!-- supported links -->[\s\S]*?<!-- \/supported links -->/gm)
-  const instancesXml = invidiousInstances.map(({ url, cors}) => {
+  const supportedLinks = manifest.match(/<!-- supported links -->[\S\s]*?<!-- \/supported links -->/gm)
+  const instancesXml = invidiousInstances.map(({ url, cors }) => {
    return `<data android:host="${url.replace('https://', '')}" />`
  }).join('\n              ')
  const postManifest = manifest.replace(supportedLinks[0], `<!-- supported links -->\n              ${instancesXml}\n            <!-- \/supported links -->`)
@@ -3,7 +3,7 @@ process.env.NODE_ENV = 'development'
 const electron = require('electron')
 const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
-const kill = require('tree-kill')
+const kill = require('@magda/tree-kill')

 const path = require('path')
 const { spawn } = require('child_process')
@@ -168,11 +168,6 @@ function startRenderer(callback) {
  const compiler = webpack(rendererConfig)
  const { name } = compiler

-  compiler.hooks.afterEmit.tap('afterEmit', () => {
-    console.log(`\nCompiled ${name} script!`)
-    console.log(`\nWatching file changes for ${name} script...`)
-  })
-
  const server = new WebpackDevServer({
    client: {
      overlay: {
@@ -185,7 +180,7 @@ function startRenderer(callback) {
        watch: {
          ignored: [
            /(dashFiles|storyboards)\/*/,
-            '/**/.DS_Store',
+            '**/.DS_Store',
            '**/static/locales/*'
          ]
        },
@@ -201,14 +196,27 @@ function startRenderer(callback) {
      }
    ],
    port
-  }, compiler)
+  })

-  server.startCallback(err => {
+  server.apply(compiler)
+
+  setupNotifyLocaleUpdate(compiler, server)
+
+  let firstTime = true
+
+  compiler.watch({ aggregateTimeout: 250 }, (err, result) => {
    if (err) console.error(err)

-    setupNotifyLocaleUpdate(compiler, server)
+    if (result) {
+      console.log('\n' + result.toString({ colors: true }))
+    }

-    callback()
+    console.log(`\nCompiled ${name} script!\n\nWatching file changes for ${name} script...`)
+
+    if (firstTime) {
+      firstTime = false
+      callback()
+    }
  })
 }

@@ -216,11 +224,6 @@ function startWeb () {
  const compiler = webpack(webConfig)
  const { name } = compiler

-  compiler.hooks.afterEmit.tap('afterEmit', () => {
-    console.log(`\nCompiled ${name} script!`)
-    console.log(`\nWatching file changes for ${name} script...`)
-  })
-
  const server = new WebpackDevServer({
    open: true,
    static: {
@@ -228,18 +231,26 @@ function startWeb () {
      watch: {
        ignored: [
          /(dashFiles|storyboards)\/*/,
-          '/**/.DS_Store',
+          '**/.DS_Store',
          '**/static/locales/*'
        ]
      }
    },
    port
-  }, compiler)
+  })

-  server.startCallback(err => {
+  server.apply(compiler)
+
+  setupNotifyLocaleUpdate(compiler, server)
+
+  compiler.watch({ aggregateTimeout: 250 }, (err, result) => {
    if (err) console.error(err)

-    setupNotifyLocaleUpdate(compiler, server)
+    if (result) {
+      console.log('\n' + result.toString({ colors: true }))
+    }
+
+    console.log(`\nCompiled ${name} script!\n\nWatching file changes for ${name} script...`)
  })
 }
 if (!web) {
@@ -21,7 +21,7 @@ export default {
  files: [
    '_icons/iconColor.*',
    'icon.svg',
-    './dist/**/*',
+    'dist/**/*',
    '!dist/web/*',
    '!node_modules/**/*',
  ],
@@ -73,6 +73,9 @@ export default {
      'libsecret-1-0'
    ]
  },
+  toolsets: {
+    appimage: '1.0.3'
+  },
  mac: {
    category: 'public.app-category.utilities',
    icon: '_icons/iconMac.icns',
@@ -93,7 +96,12 @@ export default {
      NSBluetoothPeripheralUsageDescription: undefined,
      NSCameraUsageDescription: undefined,
      NSMicrophoneUsageDescription: undefined,
-    }
+    },
+
+    // Enable ad-hoc signing
+    // If we skip signing entirely, macOS says that the application is damaged, which makes users open bug reports.
+    // With an ad-hoc signature it still refuses to launch by default but with the reason that it cannot verify the signature
+    identity: '-'
  },
  win: {
    icon: '_icons/icon.ico',
@@ -1,11 +0,0 @@
-import preferUseI18nPolyfillRule from './prefer-use-i18n-polyfill-rule.mjs'
-
-export default {
-  meta: {
-    name: 'eslint-plugin-freetube',
-    version: '1.0'
-  },
-  rules: {
-    'prefer-use-i18n-polyfill': preferUseI18nPolyfillRule
-  }
-}
@@ -1,62 +0,0 @@
-import { dirname, relative, resolve } from 'path'
-
-const polyfillPath = resolve(import.meta.dirname, '../../src/renderer/composables/use-i18n-polyfill')
-
-function getRelativePolyfillPath(filePath) {
-  const relativePath = relative(dirname(filePath), polyfillPath).replaceAll('\\', '/')
-
-  if (relativePath[0] !== '.') {
-    return `./${relativePath}`
-  }
-
-  return relativePath
-}
-
-/** @type {import('eslint').Rule.RuleModule} */
-export default {
-  meta: {
-    type: 'problem',
-    fixable: 'code'
-  },
-  create(context) {
-    return {
-      'ImportDeclaration[source.value="vue-i18n"]'(node) {
-        const specifierIndex = node.specifiers.findIndex(specifier => specifier.type === 'ImportSpecifier' && specifier.imported.name === 'useI18n')
-
-        if (specifierIndex !== -1) {
-          context.report({
-            node: node.specifiers.length === 1 ? node : node.specifiers[specifierIndex],
-            message: "Please use FreeTube's useI18n polyfill, as vue-i18n's useI18n composable does not work when the vue-i18n is in legacy mode, which is needed for components using the Options API.",
-            fix: context.physicalFilename === '<text>'
-              ? undefined
-              : (fixer) => {
-                  const relativePath = getRelativePolyfillPath(context.physicalFilename)
-
-                  // If the import only imports `useI18n`, we can just update the source/from text
-                  // Else we need to create a new import for `useI18n` and remove useI18n from the original one
-                  if (node.specifiers.length === 1) {
-                    return fixer.replaceText(node.source, `'${relativePath}'`)
-                  } else {
-                    const specifier = node.specifiers[specifierIndex]
-
-                    let specifierText = 'useI18n'
-
-                    if (specifier.imported.name !== specifier.local.name) {
-                      specifierText += ` as ${specifier.local.name}`
-                    }
-
-                    return [
-                      fixer.removeRange([
-                        specifierIndex === 0 ? specifier.start : node.specifiers[specifierIndex - 1].end,
-                        specifierIndex === node.specifiers.length - 1 ? specifier.end : node.specifiers[specifierIndex + 1].start
-                      ]),
-                      fixer.insertTextAfter(node, `\nimport { ${specifierText} } from '${relativePath}'`)
-                    ]
-                  }
-                }
-          })
-        }
-      }
-    }
-  }
-}
@@ -12,9 +12,10 @@
 */

 import { mkdirSync, readFileSync, rmSync, writeFileSync } from 'fs'
+import path from 'path'
 import { Innertube, Misc } from 'youtubei.js'

-const STATIC_DIRECTORY = `${import.meta.dirname}/../static`
+const STATIC_DIRECTORY = path.resolve(import.meta.dirname, '../static')

 const activeLanguagesPath = `${STATIC_DIRECTORY}/locales/activeLocales.json`
 /** @type {string[]} */
@@ -0,0 +1,19 @@
+import { fetch } from 'undici'
+import packageJSON from '../package.json' with { type: 'json' }
+
+const latestRelease = JSON.parse(await (await fetch('https://api.github.com/repos/MarmadileManteater/FreetubeAndroid/releases?per_page=1')).text())
+
+const code = latestRelease[0].name
+
+const [_, latestMajor, latestMinor, latestBuild] = code.split('.')
+
+const [__, major, minor] = packageJSON.version.split('.')
+
+if (
+  latestMajor == major &&
+  latestMinor
+) {
+  console.log(parseInt(latestBuild) + 1)
+} else {
+  console.log(1)
+}
@@ -1,4 +1,3 @@
-
 const exec = require('child_process').exec

 /**
@@ -0,0 +1,40 @@
+{
+  "image/apng": {
+    "extensions": [
+      "apng"
+    ]
+  },
+  "image/avif": {
+    "extensions": [
+      "avif"
+    ]
+  },
+  "image/gif": {
+    "extensions": [
+      "gif"
+    ]
+  },
+  "image/jpeg": {
+    "extensions": [
+      "jpg",
+      "jpeg",
+      "jpe"
+    ]
+  },
+  "image/png": {
+    "extensions": [
+      "png"
+    ]
+  },
+  "image/svg+xml": {
+    "extensions": [
+      "svg",
+      "svgz"
+    ]
+  },
+  "image/webp": {
+    "extensions": [
+      "webp"
+    ]
+  }
+}
@@ -1,22 +0,0 @@
-/**
- * electron-context-menu only needs mime-db for its save as feature.
- * As we only activate save image and save as image features, we can remove all other mimetypes,
- * as they will never get used.
- * Which results in quite a significant reduction in file size.
- * @param {string} source
- */
-module.exports = function (source) {
-  const original = JSON.parse(source)
-
-  // Only the extensions field is needed, see: https://github.com/kevva/ext-list/blob/v2.2.2/index.js
-
-  return JSON.stringify({
-    'image/apng': { extensions: original['image/apng'].extensions },
-    'image/avif': { extensions: original['image/avif'].extensions },
-    'image/gif': { extensions: original['image/gif'].extensions },
-    'image/jpeg': { extensions: original['image/jpeg'].extensions },
-    'image/png': { extensions: original['image/png'].extensions },
-    'image/svg+xml': { extensions: original['image/svg+xml'].extensions },
-    'image/webp': { extensions: original['image/webp'].extensions }
-  })
-}
@@ -10,7 +10,7 @@ const { writeFile, rm, readFile } = require('fs/promises')
 // #endregion
 ;(async (get, exec) => {
  const givenArguments = { dryRun: false }
-  for (let arg of process.argv) {
+  for (const arg of process.argv) {
    if (arg.startsWith('--version-number=')) {
      givenArguments.versionNumber = arg.split('--version-number=')[1]
    }
@@ -32,21 +32,23 @@ const { writeFile, rm, readFile } = require('fs/promises')
  const releasesJSON = await releases.json()
  // #region Version Number
  const latestTag = releasesJSON[0].tag_name
-  const [ _latestMajor, _latestMinor, _latestPatch, latestRun ] = latestTag.split('.')
-  const [ currentMajor, currentMinor, currentPatch ] = version.split('.')
+  const [_latestMajor, _latestMinor, _latestPatch, latestRun] = latestTag.split('.')
+  const [currentMajor, currentMinor, currentPatch] = version.split('.')
  const latestRunNumber = parseInt(latestRun)
  const currentRunNumber = latestRunNumber + 1
  const defaultVersionNumber = `${currentMajor}.${currentMinor}.${currentPatch}.${currentRunNumber}`
  // get version number from either the props or a prompt
-  let { versionNumber } = ('versionNumber' in givenArguments) ? givenArguments : await get({
-    properties: {
-      versionNumber: {
-        pattern: /[0-9]*?.[0-9]*?.[0-9]*?.[0-9]*/,
-        message: 'Version number to release with',
-        default: defaultVersionNumber
-      }
-    }
-  })
+  let { versionNumber } = ('versionNumber' in givenArguments)
+    ? givenArguments
+    : await get({
+        properties: {
+          versionNumber: {
+            pattern: /(?:\d*?.){3}\d*/,
+            message: 'Version number to release with',
+            default: defaultVersionNumber
+          }
+        }
+      })
  const buildNumber = versionNumber.split('.').at(-1)
  if (versionNumber === 'default') {
    versionNumber = defaultVersionNumber
@@ -58,12 +60,12 @@ const { writeFile, rm, readFile } = require('fs/promises')
    const numberOfCommits = ('numberOfCommits' in givenArguments) ? givenArguments.numberOfCommits : 3
    let accumulator = 0
    let mostRecentCommits = ''
-    for (let line of gitDiff.split('\n')) {
+    for (const line of gitDiff.split('\n')) {
      if (line.trim() === '') {
        continue
      }
      if (line.startsWith('commit ')) {
-        mostRecentCommits += `\n`
+        mostRecentCommits += '\n'
        accumulator++
      }
      if (accumulator < numberOfCommits + 1) {
@@ -100,6 +102,4 @@ const { writeFile, rm, readFile } = require('fs/promises')
    console.log('nothing committed: dry run')
  }
  // #endregion
-
 })(promisify(get), promisify(exec))
-
@@ -133,7 +133,7 @@ const config = {
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
-      __VUE_I18N_LEGACY_API__: 'true',
+      __VUE_I18N_LEGACY_API__: 'false',
      __VUE_I18N_FULL_INSTALL__: 'false',
      __INTLIFY_PROD_DEVTOOLS__: 'false',
      'process.env.SWIPER_VERSION': `'${swiperVersion}'`
@@ -148,7 +148,7 @@ const config = {
      nodeModules: false,
    }),
    new HtmlWebpackPlugin({
-      filename: "decipher.html",
+      filename: 'decipher.html',
      inject: false,
      templateContent: sigViewTemplateParameters.sigViewRaw,
      nodeModules: false
@@ -175,7 +175,7 @@ const config = {
    alias: {

      DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$: path.resolve(__dirname, '../src/datastores/handlers/web.js'),
-      
+
      // change to "shaka-player.ui-es2021.debug.js" to get debug logs (update jsconfig to get updated types)
      'shaka-player$': 'shaka-player/dist/shaka-player.ui-es2021.js',
    },
@@ -229,5 +229,4 @@ config.plugins.push(
  })
 )

-
 module.exports = config
@@ -20,10 +20,6 @@ const config = {
        use: 'babel-loader',
        exclude: /node_modules/,
      },
-      {
-        resource: path.resolve(__dirname, '../node_modules/mime-db/db.json'),
-        use: path.join(__dirname, 'mime-db-shrinking-loader.js')
-      }
    ],
    generator: {
      json: {
@@ -31,6 +27,17 @@ const config = {
      }
    }
  },
+  resolve: {
+    alias: {
+      // electron-context-menu only needs mime-db for its "save as" feature.
+      // As we only activate the save image and save as image features,
+      // we can remove all other mimetypes, as they will never get used.
+      // Which results in quite a significant reduction in file size.
+      //
+      // Only the extensions field is needed, see: https://github.com/kevva/ext-list/blob/v2.2.2/index.js
+      'mime-db$': path.join(__dirname, 'image-extensions-only-mime-db.json')
+    }
+  },
  // webpack defaults to only optimising the production builds, so having this here is fine
  optimization: {
    minimizer: [
@@ -142,7 +142,7 @@ const config = {
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
-      __VUE_I18N_LEGACY_API__: 'true',
+      __VUE_I18N_LEGACY_API__: 'false',
      __VUE_I18N_FULL_INSTALL__: 'false',
      __INTLIFY_PROD_DEVTOOLS__: 'false',
      'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames),
@@ -142,7 +142,7 @@ const config = {
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
-      __VUE_I18N_LEGACY_API__: 'true',
+      __VUE_I18N_LEGACY_API__: 'false',
      __VUE_I18N_FULL_INSTALL__: 'false',
      __INTLIFY_PROD_DEVTOOLS__: 'false',
      'process.env.SWIPER_VERSION': `'${swiperVersion}'`
@@ -204,19 +204,19 @@ config.plugins.push(
    'process.env.SHAKA_LOCALES_PREBUNDLED': JSON.stringify(SHAKA_LOCALES_PREBUNDLED)
  }),
  new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: path.join(__dirname, '../_icons/192x192.png'),
-          to: path.join(__dirname, '../dist/web/static/_icons/192x192.png'),
-        },
-        {
-          from: path.join(__dirname, '../_icons/512x512.png'),
-          to: path.join(__dirname, '../dist/web/static/_icons/512x512.png'),
-        },
-        {
-          from: path.join(__dirname, '../static/pwabuilder-sw.js'),
-          to: path.join(__dirname, '../dist/web/pwabuilder-sw.js'),
-        },
+    patterns: [
+      {
+        from: path.join(__dirname, '../_icons/192x192.png'),
+        to: path.join(__dirname, '../dist/web/static/_icons/192x192.png'),
+      },
+      {
+        from: path.join(__dirname, '../_icons/512x512.png'),
+        to: path.join(__dirname, '../dist/web/static/_icons/512x512.png'),
+      },
+      {
+        from: path.join(__dirname, '../static/pwabuilder-sw.js'),
+        to: path.join(__dirname, '../dist/web/pwabuilder-sw.js'),
+      },
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/web/static'),
@@ -14,8 +14,6 @@ import eslintPluginImportX from 'eslint-plugin-import-x'
 import eslintPluginN from 'eslint-plugin-n'
 import eslintPluginPromise from 'eslint-plugin-promise'

-import freetube from './_scripts/eslint-rules/plugin.mjs'
-
 import activeLocales from './static/locales/activeLocales.json' with { type: 'json' }

 export default [
@@ -246,7 +244,6 @@ export default [
    plugins: {
      unicorn: eslintPluginUnicorn,
      jsdoc,
-      freetube,
    },

    languageOptions: {
@@ -333,8 +330,6 @@ export default [
      'jsdoc/check-types': 'error',
      'jsdoc/no-bad-blocks': 'error',
      'jsdoc/no-multi-asterisks': 'error',
-
-      'freetube/prefer-use-i18n-polyfill': 'error',
    },
  },

@@ -346,15 +341,6 @@ export default [
      }
    }
  },
-  {
-    files: ['src/renderer/directives/vSaferHtml.js'],
-    languageOptions: {
-      globals: {
-        // Fix Sanitizer not being listed in `globals` yet, remove it when it gets added in the future
-        Sanitizer: 'readable'
-      }
-    }
-  },

  ...eslintPluginJsonc.configs.base,
  {
@@ -6,11 +6,10 @@
    "module": "esnext",
    "moduleResolution": "bundler",
    "strictNullChecks": true,
-    "baseUrl": "./",
    "paths": {
      "DB_HANDLERS_ELECTRON_RENDERER_OR_WEB": [
-        "src/datastores/handlers/electron",
-        "src/datastores/handlers/web"
+        "./src/datastores/handlers/electron",
+        "./src/datastores/handlers/web"
      ],
      "shaka-player": [
        "./node_modules/shaka-player/dist/shaka-player.ui-es2021"
@@ -7,12 +7,12 @@ pre-commit:
      # Only runs when any file with filename
      # matching the glob is being committed
      glob: "*.{js,vue}"
-      run: yarn run eslint --no-color {staged_files}
+      run: pnpm exec eslint --no-color {staged_files}
      skip:
        - rebase
    stylelint:
      glob: "*.{css,scss}"
-      run: yarn stylelint --no-color --allow-empty-input {staged_files}
+      run: pnpm exec stylelint --no-color --allow-empty-input {staged_files}
      skip:
        - rebase

@@ -22,7 +22,7 @@ pre-commit:
 #   commands:
 #     packages-audit:
 #       tags: frontend security
-#       run: yarn audit
+#       run: pnpm audit
 #     gems-audit:
 #       tags: backend security
 #       run: bundle audit
@@ -32,7 +32,7 @@ pre-commit:
 #   commands:
 #     eslint:
 #       glob: "*.{js,ts}"
-#       run: yarn eslint {staged_files}
+#       run: pnpm eslint {staged_files}
 #     rubocop:
 #       tags: backend style
 #       glob: "*.rb"
@@ -2,7 +2,7 @@
  "name": "freetube",
  "productName": "FreeTube",
  "description": "A private YouTube client",
-  "version": "0.24.0",
+  "version": "0.25.1",
  "license": "AGPL-3.0-or-later",
  "main": "./dist/main.js",
  "private": true,
@@ -19,9 +19,9 @@
    "url": "https://github.com/FreeTubeApp/FreeTube/issues"
  },
  "scripts": {
-    "build": "run-s pack build-release",
-    "build:arm64": "run-s pack build-release:arm64",
-    "build:arm32": "run-s pack build-release:arm32",
+    "build": "pnpm run pack && pnpm run build-release",
+    "build:arm64": "pnpm run pack && pnpm run build-release:arm64",
+    "build:arm32": "pnpm run pack && pnpm run build-release:arm32",
    "build-release": "node _scripts/build.mjs",
    "build-release:arm64": "node _scripts/build.mjs arm64",
    "build-release:arm32": "node _scripts/build.mjs arm32",
@@ -31,16 +31,16 @@
    "dev:web": "node _scripts/dev-runner.js --web",
    "get-instances": "node _scripts/getInstances.js",
    "get-regions": "node _scripts/getRegions.mjs",
-    "lint-all": "run-p lint lint-json",
-    "lint": "run-p eslint-lint lint-style",
-    "lint-fix": "run-p eslint-lint-fix lint-style-fix",
+    "lint-all": "pnpm run \"/^(lint|lint-json)$/\"",
+    "lint": "pnpm run \"/^(eslint-lint|lint-style)$/\"",
+    "lint-fix": "pnpm run \"/^(eslint-lint|lint-style)-fix$/\"",
    "eslint-lint": "eslint --config eslint.config.mjs \"src/**/*.js\" \"src/renderer/**/*.vue\" \"static/*.js\" \"_scripts/*.js\" \"_scripts/**/*.mjs\"",
    "eslint-lint-fix": "eslint --config eslint.config.mjs --fix \"src/**/*.js\" \"src/renderer/**/*.vue\" \"static/*.js\" \"_scripts/*.js\" \"_scripts/**/*.mjs\"",
    "lint-json": "eslint --config eslint.config.mjs \"static/**/*.json\"",
    "lint-style": "stylelint \"src/**/*.{css,scss}\"",
    "lint-style-fix": "stylelint --fix \"src/**/*.{css,scss}\"",
    "lint-yml": "eslint --config eslint.config.mjs \"**/*.yml\" \"**/*.yaml\"",
-    "pack": "run-p pack:main pack:renderer pack:preload pack:botGuardScript && node _scripts/injectAllowedPaths.mjs",
+    "pack": "pnpm run \"/^pack:(main|renderer|preload|botGuardScript)$/\" && node _scripts/injectAllowedPaths.mjs",
    "pack:main": "webpack --mode=production --config-node-env=production --config _scripts/webpack.main.config.js",
    "pack:renderer": "webpack --mode=production --config-node-env=production --config _scripts/webpack.renderer.config.js",
    "pack:preload": "webpack --mode=production --config-node-env=production --config _scripts/webpack.preload.config.js",
@@ -49,79 +49,79 @@
    "pack:botGuardScript:android": "webpack --config _scripts/webpack.botGuardScript.android.config.js",
    "pack:android:core": "webpack --mode=production --config-node-env=production --config _scripts/webpack.android.config.js",
    "pack:android:dev:core": "webpack --mode=development --config-node-env=development --config _scripts/webpack.android.config.js",
-    "pack:android": "run-s pack:botGuardScript:android pack:android:core",
-    "pack:android:dev": "run-s pack:botGuardScript:android pack:android:dev:core",
+    "pack:android": "pnpm run \"/^pack:(botGuardScript:android|android:core)$/\"",
+    "pack:android:dev": "pnpm run \"/^pack:(botGuardScript:android|android:dev:core)$/\"",
    "checkforbadtemplates": "node _scripts/findMissingTemplates.mjs",
-    "ci": "yarn install --silent --frozen-lockfile --network-concurrency 1"
+    "ci": "pnpm install --frozen-lockfile"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-brands-svg-icons": "^7.2.0",
-    "@fortawesome/free-regular-svg-icons": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/vue-fontawesome": "^3.1.3",
+    "@fortawesome/fontawesome-svg-core": "^7.3.0",
+    "@fortawesome/free-brands-svg-icons": "^7.3.0",
+    "@fortawesome/free-regular-svg-icons": "^7.3.0",
+    "@fortawesome/free-solid-svg-icons": "^7.3.0",
+    "@fortawesome/vue-fontawesome": "^3.3.1",
    "@seald-io/nedb": "https://github.com/MarmadileManteater/nedb.git",
    "autolinker": "^4.1.5",
    "bgutils-js": "^3.2.0",
-    "core-js": "^3.41.0",
-    "dompurify": "^3.3.3",
+    "dompurify": "^3.4.11",
    "electron-context-menu": "^4.1.2",
    "googlevideo": "^4.0.4",
-    "marked": "^17.0.5",
+    "marked": "^18.0.6",
    "process": "^0.11.10",
-    "shaka-player": "^5.0.8",
-    "swiper": "^12.1.3",
-    "vue": "^3.5.31",
-    "vue-i18n": "^11.3.0",
+    "shaka-player": "^5.1.12",
+    "swiper": "^14.0.5",
+    "terser": "^5.49.0",
+    "undici": "^8.9.0",
+    "vue": "^3.5.39",
+    "vue-i18n": "^11.4.6",
    "vue-observe-visibility": "^2.0.0-alpha.1",
-    "vue-router": "^5.0.4",
+    "vue-router": "^5.1.0",
    "vuex": "^4.1.0",
-    "youtubei.js": "^17.0.1"
+    "youtubei.js": "^17.2.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
-    "@double-great/stylelint-a11y": "^3.4.8",
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
+    "@double-great/stylelint-a11y": "^3.5.0",
    "@eslint/js": "^10.0.1",
-    "@intlify/eslint-plugin-vue-i18n": "^4.3.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.5.1",
+    "@magda/tree-kill": "1.2.3",
    "@stylistic/eslint-plugin": "^5.10.0",
    "babel-loader": "^10.1.1",
    "copy-webpack-plugin": "^14.0.0",
    "css-loader": "^7.1.4",
    "css-minimizer-webpack-plugin": "^8.0.0",
-    "electron": "^41.1.0",
-    "electron-builder": "^26.8.1",
-    "eslint": "^10.1.0",
-    "eslint-plugin-import-x": "^4.16.2",
-    "eslint-plugin-jsdoc": "^62.8.1",
-    "eslint-plugin-jsonc": "^3.1.2",
-    "eslint-plugin-n": "^17.24.0",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-unicorn": "^63.0.0",
-    "eslint-plugin-vue": "^10.8.0",
+    "electron": "^42.5.2",
+    "electron-builder": "^26.15.7",
+    "eslint": "^10.6.0",
+    "eslint-plugin-import-x": "^4.17.1",
+    "eslint-plugin-jsdoc": "^63.0.13",
+    "eslint-plugin-jsonc": "^3.3.0",
+    "eslint-plugin-n": "^18.2.1",
+    "eslint-plugin-promise": "^7.3.0",
+    "eslint-plugin-unicorn": "^71.1.0",
+    "eslint-plugin-vue": "^10.9.2",
    "eslint-plugin-vuejs-accessibility": "^2.5.0",
-    "eslint-plugin-yml": "^3.3.1",
-    "globals": "^17.4.0",
-    "html-webpack-plugin": "^5.6.6",
-    "js-yaml": "^4.1.1",
+    "eslint-plugin-yml": "^3.6.0",
+    "globals": "^17.7.0",
+    "html-webpack-plugin": "^5.6.7",
+    "js-yaml": "^5.2.1",
    "json-minimizer-webpack-plugin": "^5.0.1",
-    "lefthook": "^2.1.4",
+    "lefthook": "^2.1.10",
    "mini-css-extract-plugin": "^2.10.2",
-    "npm-run-all2": "^8.0.4",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.16",
    "postcss-scss": "^4.0.9",
-    "sass": "^1.98.0",
-    "sass-loader": "^16.0.7",
-    "stylelint": "^17.6.0",
+    "sass": "^1.101.0",
+    "sass-loader": "^17.0.0",
+    "stylelint": "^17.14.0",
    "stylelint-config-sass-guidelines": "^13.0.0",
    "stylelint-config-standard": "^40.0.0",
    "stylelint-high-performance-animation": "^2.0.0",
    "stylelint-use-logical-spec": "^5.0.1",
-    "tree-kill": "1.2.2",
-    "vue-eslint-parser": "^10.2.0",
+    "vue-eslint-parser": "^10.4.1",
    "vue-loader": "^17.4.2",
-    "webpack": "^5.105.4",
-    "webpack-cli": "^7.0.2",
-    "webpack-dev-server": "^5.2.3"
+    "webpack": "^5.108.4",
+    "webpack-cli": "^7.2.1",
+    "webpack-dev-server": "^6.0.0"
  }
 }
@@ -0,0 +1,16 @@
+# https://github.com/pnpm/pnpm/issues/11070
+# Disable until GitHub dependabot got pnpm >= 10.33.0 installed
+# dedupePeers: true
+
+# https://pnpm.io/next/settings#allowbuilds
+allowBuilds:
+  '@parcel/watcher': false # Only required when you want to build @parcel/watcher from source
+  electron-winstaller: false # We build NSIS installers on Windows, not squirrel ones
+  lefthook: true # Installing git hooks
+  unrs-resolver: false # Works around an npm specific optional dependencies bug, so we don't need it with pnpm
+
+overrides:
+  uuid@<11.1.1: '>=11.1.1'
+
+minimumReleaseAgeExclude:
+- "youtubei.js"
@@ -4,6 +4,7 @@ const IpcChannels = {
  DISABLE_PROXY: 'disable-proxy',
  GET_SYSTEM_LOCALE: 'get-system-locale',
  GET_NAVIGATION_HISTORY: 'get-navigation-history',
+  IS_WAYLAND_PLATFORM: 'is-wayland-platform',
  STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',
  START_POWER_SAVE_BLOCKER: 'start-power-save-blocker',
  CREATE_NEW_WINDOW: 'create-new-window',
@@ -151,6 +152,8 @@ const KeyboardShortcuts = {
      CLOSE_WINDOW: 'ctrl+W',
      TOGGLE_DEVTOOLS: 'ctrl+shift+I',
      FOCUS_SEARCH: 'alt+D',
+      FOCUS_SEARCH_ALT: 'ctrl+L',
+      FOCUS_SEARCH_ALT_MAC: 'cmd+L',
      SEARCH_IN_NEW_WINDOW: 'shift+enter',
      RESET_ZOOM: 'ctrl+0',
      ZOOM_IN: 'ctrl+plus',
@@ -48,6 +48,15 @@ class Settings {
      await db.settings.removeAsync({ _id: 'saveWatchedProgress' })
    }

+    // In FreeTube 0.24.0, the "Screenshot Mode" setting only had two options that were represented as a toggle named "Ask path"
+    // This is a one time migration to preserve users' Screenshot prompt preference through this change.
+    const screenshotAskPath = await db.settings.findOneAsync({ _id: 'screenshotAskPath' })
+
+    if (screenshotAskPath) {
+      await this.upsert('screenshotMode', screenshotAskPath.value ? 'prompt_folder' : 'default_folder')
+      await db.settings.removeAsync({ _id: 'screenshotAskPath' })
+    }
+
    return db.settings.findAsync({ _id: { $ne: 'bounds' } })
  }

@@ -90,7 +90,13 @@ export async function handleOpenInExternalPlayer(event, payload) {
  }

  if (ignoreDefaultArgs) {
-    if (hasValidVideoId) {
+    if (hasValidPlaylistId && !hasValidVideoId) {
+      if (typeof cmdArgs.playlistUrl === 'string') {
+        args.push(`${cmdArgs.playlistUrl}https://youtube.com/playlist?list=${payload.playlistId}`)
+      } else if (!ignoreWarnings) {
+        unsupportedActions.push(UnsupportedPlayerActions.OPENING_PLAYLISTS)
+      }
+    } else if (hasValidVideoId) {
      args.push(`${cmdArgs.videoUrl}https://www.youtube.com/watch?v=${payload.videoId}`)
    }
  } else {
@@ -65,16 +65,25 @@ function runApp() {
    ? new Set(__FREETUBE_ALLOWED_PATHS__)
    : new Set()

-  if (process.env.NODE_ENV === 'production') {
-    protocol.registerSchemesAsPrivileged([{
-      scheme: 'app',
+  protocol.registerSchemesAsPrivileged([
+    {
+      scheme: 'imagecache',
      privileges: {
-        standard: true,
        secure: true,
-        supportFetchAPI: true
+        corsEnabled: true
      }
-    }])
-  }
+    },
+    ...(process.env.NODE_ENV === 'production'
+      ? [{
+          scheme: 'app',
+          privileges: {
+            standard: true,
+            secure: true,
+            supportFetchAPI: true
+          }
+        }]
+      : []),
+  ])

  const ROOT_APP_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:9080' : 'app://bundle/index.html'

@@ -281,6 +290,7 @@ function runApp() {
  let trayOnMinimize = false
  let trayWindows = []
  const trayMaximizedWindows = {}
+  const isTrayOnMinimizeSupported = process.platform !== 'darwin' && (process.platform !== 'linux' || app.commandLine.getSwitchValue('ozone-platform') !== 'wayland')

  const userDataPath = app.getPath('userData')

@@ -337,7 +347,7 @@ function runApp() {
        if (!openDeepLinksInNewWindow) {
          // Just focus the main window (instead of starting a new instance)
          if (mainWindow.isMinimized()) {
-            if (process.platform !== 'darwin' && trayOnMinimize) {
+            if (isTrayOnMinimizeSupported && trayOnMinimize) {
              trayClick(mainWindow)
            } else {
              mainWindow.restore()
@@ -515,7 +525,7 @@ function runApp() {
            backendPreference = doc.value
            break
          case 'hideToTrayOnMinimize':
-            if (process.platform !== 'darwin') {
+            if (isTrayOnMinimizeSupported) {
              trayOnMinimize = doc.value
            }
            break
@@ -1023,7 +1033,7 @@ function runApp() {

    // endregion Ensure child windows use same options since electron 14

-    if (process.platform !== 'darwin') {
+    if (isTrayOnMinimizeSupported) {
      function manageTray(window, removeWindow = false) {
        if (tray) {
          if (!removeWindow) {
@@ -1135,7 +1145,7 @@ function runApp() {
        return
      }

-      if (process.platform !== 'darwin' && trayOnMinimize && trayWindows.length > 0) {
+      if (isTrayOnMinimizeSupported && trayOnMinimize && trayWindows.length > 0) {
        trayClick(newWindow)
      } else {
        newWindow.show()
@@ -1337,6 +1347,12 @@ function runApp() {
    }
  })

+  ipcMain.handle(IpcChannels.IS_WAYLAND_PLATFORM, (event) => {
+    if (isFreeTubeUrl(event.senderFrame.url)) {
+      return app.commandLine.getSwitchValue('ozone-platform') === 'wayland'
+    }
+  })
+
  /**
   * @param {import('electron').WebContents} webContents
   * @param {string | undefined} [currentPath]
@@ -1430,7 +1446,8 @@ function runApp() {
    const filePath = path.resolve(directory, filename)

    // Ensure that we are only writing inside of the expected directory
-    if (path.dirname(filePath) !== directory) {
+    // 'path.dirname' does not return trailing slash, remove it from 'directory' path to ensure consistent comparison
+    if (path.dirname(filePath) !== directory.replace(/\/$/, '')) {
      throw new Error('Invalid save location')
    }

@@ -1647,7 +1664,7 @@ function runApp() {
              await setMenu()
              break
            case 'hideToTrayOnMinimize':
-              if (process.platform !== 'darwin') {
+              if (isTrayOnMinimizeSupported) {
                trayOnMinimize = data.value
                if (!trayOnMinimize) { showHiddenWindows() }
              }
@@ -2105,7 +2122,7 @@ function runApp() {
    })
  }

-  if (process.platform !== 'darwin') {
+  if (isTrayOnMinimizeSupported) {
    app.on('before-quit', () => {
      if (tray) { tray.destroy() }
    })
@@ -30,6 +30,13 @@ export default {
    return ipcRenderer.invoke(IpcChannels.GET_SYSTEM_LOCALE)
  },

+  /**
+   * @returns {Promise<boolean>}
+   */
+  isWaylandPlatform: () => {
+    return ipcRenderer.invoke(IpcChannels.IS_WAYLAND_PLATFORM)
+  },
+
  /**
   * @param {string} path
   * @param {Record<string, string> | null | undefined} query
@@ -4,7 +4,7 @@
 }

 .noTapHighlight {
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);	
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);	
 }

 .app {
@@ -110,7 +110,7 @@
 <script setup>
 import { marked } from 'marked'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useI18n } from './composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'

 import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue'
@@ -135,7 +135,6 @@ import { openExternalLink, openInternalPath, showToast } from './helpers/utils'
 import { translateWindowTitle } from './helpers/strings'
 import { loadLocale } from './i18n/index'

-import 'core-js'
 import android from 'android'
 import { getUpdateInfo, updateAndroidTheme } from './helpers/android/system'

@@ -180,7 +179,7 @@ onMounted(async () => {
  await store.dispatch('grabUserSettings')

  updateTheme()
-  
+
  await store.dispatch('fetchInvidiousInstancesFromFile')
  if (defaultInvidiousInstance.value === '') {
    await store.dispatch('setRandomCurrentInvidiousInstance')
@@ -220,7 +219,7 @@ onMounted(async () => {
    }

    dataReady.value = true
-    
+
    setTimeout(() => {
      checkForNewUpdates()
    }, 500)
@@ -261,7 +260,6 @@ const secColor = computed(() => store.getters.getSecColor)
 watch(secColor, updateTheme)

 function updateTheme() {
-
  if (process.env.IS_ANDROID) {
    const theme = {
      baseTheme: baseTheme.value || 'dark',
@@ -300,11 +298,10 @@ const updateBannerMessage = computed(() => {
 })

 async function checkForNewUpdates() {
-  
  if (!checkForUpdates.value) {
    return
  }
-  
+
  const info = await getUpdateInfo()
  if (info.updateAvailable) {
    updateChangelog.value = info.changeLog.body
@@ -564,13 +561,7 @@ const windowTitle = computed(() => {
    !routePath.startsWith('/playlist/') &&
    !routePath.startsWith('/search/')
  ) {
-    let title = translateWindowTitle(route.meta.title)
-    if (!title) {
-      title = packageDetails.productName
-    } else {
-      title = `${title} - ${packageDetails.productName}`
-    }
-    return title
+    return translateWindowTitle(route.meta.title) ?? ''
  } else {
    return null
  }
@@ -580,7 +571,11 @@ const windowTitle = computed(() => {
 const appTitle = computed(() => store.getters.getAppTitle)

 watch(appTitle, (value) => {
-  document.title = value
+  if (value.length > 0) {
+    document.title = `${value} - ${packageDetails.productName}`
+  } else {
+    document.title = packageDetails.productName
+  }
 })

 watch(windowTitle, setWindowTitle)
@@ -0,0 +1,22 @@
+
+.hotZone {
+  --usable-zone-height: 50px;
+  --zone-height: var(--usable-zone-height);
+
+  position: fixed;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: var(--zone-height);
+  z-index: 99;
+}
+
+.topZone {
+  /* top nav height manually inspected to be 60px */
+  --zone-height: calc(var(--usable-zone-height) + 60px);
+
+  inset-block-start: 0;
+}
+
+.bottomZone {
+  inset-block-start: calc(100% - var(--zone-height));
+}
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div
+      v-if="hotZoneShown"
+      class="hotZone topZone"
+      @dragenter="setScrollDirection('up')"
+      @dragleave="clearScrollDirection"
+    />
+
+    <slot />
+
+    <div
+      v-if="hotZoneShown"
+      class="hotZone bottomZone"
+      @dragenter="setScrollDirection('down')"
+      @dragleave="clearScrollDirection"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onWatcherCleanup } from 'vue'
+
+const props = defineProps({
+  hotZoneEnabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const hotZoneShown = ref(false)
+
+watch(() => props.hotZoneEnabled, hotZoneEnabled => {
+  // No need to wait when disabled
+  if (!hotZoneEnabled) {
+    hotZoneShown.value = false
+    return
+  }
+
+  // Show zone later to prevent `dragend` event
+  setTimeout(() => {
+    hotZoneShown.value = true
+  }, 0)
+})
+
+/** @import { Ref } from 'vue' */
+/** @type {Ref<'up' | 'down' | ''>} */
+const scrollDirection = ref('')
+
+/**
+ * @param {'up' | 'down'} direction
+ */
+function setScrollDirection(direction) {
+  const notScrolling = !scrollDirection.value
+
+  if (notScrolling) {
+    scrollDirection.value = direction
+  }
+}
+
+function clearScrollDirection() {
+  scrollDirection.value = ''
+}
+
+/**
+ * @param {'up' | 'down'} direction
+ */
+function scroll(direction) {
+  const SPEED = 6
+
+  if (direction === 'up') {
+    globalThis.scrollBy(0, -SPEED)
+  } else if (direction === 'down') {
+    globalThis.scrollBy(0, SPEED)
+  }
+}
+
+watch(scrollDirection, direction => {
+  let scrollInterval
+
+  if (direction) {
+    scrollInterval = setInterval(() => {
+      scroll(direction)
+    }, 10)
+  } else {
+    clearInterval(scrollInterval)
+  }
+
+  onWatcherCleanup(() => {
+    clearInterval(scrollInterval)
+  })
+})
+</script>
+
+<style scoped src="./AutoScrollWrapper.css" />
@@ -117,7 +117,7 @@

 <script setup>
 import { computed } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtChannelBubble from '../../components/FtChannelBubble/FtChannelBubble.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -1,4 +1,5 @@
 .shelfContainer {
+  margin-block-start: 0.5em;
  max-inline-size: 85vw;
 }

@@ -44,6 +44,7 @@
          :data="shelf.content"
          :use-channels-hidden-preference="false"
          :display="shelf.isCommunity ? 'list' : ''"
+          :render-all-items-lazily="index > 2"
        />
      </details>
    </div>
@@ -59,7 +59,8 @@
        :key="comment.id"
        class="comment"
      >
-        <router-link
+        <component
+          :is="enableChannelLinks ? 'router-link' : 'div'"
          :to="`/channel/${comment.authorLink}`"
          tabindex="-1"
        >
@@ -77,7 +78,7 @@
            alt=""
            class="commentThumbnail"
          >
-        </router-link>
+        </component>
        <p
          v-if="comment.isPinned"
          class="commentPinned"
@@ -90,7 +91,8 @@
        <p
          class="commentAuthorWrapper"
        >
-          <router-link
+          <component
+            :is="enableChannelLinks ? 'router-link' : 'span'"
            class="commentAuthor"
            dir="auto"
            :class="{
@@ -99,7 +101,7 @@
            :to="`/channel/${comment.authorLink}`"
          >
            {{ comment.author }}
-          </router-link>
+          </component>
          <img
            v-if="comment.isMember"
            :src="comment.memberIconUrl"
@@ -177,7 +179,8 @@
            :key="replyIndex"
            class="comment"
          >
-            <router-link
+            <component
+              :is="enableChannelLinks ? 'router-link' : 'div'"
              :to="`/channel/${reply.authorLink}`"
              tabindex="-1"
            >
@@ -195,9 +198,10 @@
                alt=""
                class="commentThumbnail"
              >
-            </router-link>
+            </component>
            <p class="commentAuthorWrapper">
-              <router-link
+              <component
+                :is="enableChannelLinks ? 'router-link' : 'span'"
                class="commentAuthor"
                dir="auto"
                :class="{
@@ -206,7 +210,7 @@
                :to="`/channel/${reply.authorLink}`"
              >
                {{ reply.author }}
-              </router-link>
+              </component>
              <img
                v-if="reply.isMember"
                :src="reply.memberIconUrl"
@@ -324,7 +328,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, ref, shallowRef } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtCard from '../ft-card/ft-card.vue'
 import FtLoader from '../FtLoader/FtLoader.vue'
@@ -472,6 +476,8 @@ function handleSortChange() {

 const emit = defineEmits(['timestamp-event'])

+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
+
 /**
 * @param {number} timestamp
 */
@@ -95,6 +95,24 @@
        @click="showExportSearchHistoryPrompt = true"
      />
    </FtFlexBox>
+    <h4 class="groupTitle">
+      {{ t('Settings.Settings') }}
+      <FtTooltip
+        class="selectTooltip"
+        position="top"
+        :tooltip="t('Settings.Data Settings.Settings Tooltip')"
+      />
+    </h4>
+    <FtFlexBox class="box">
+      <FtButton
+        :label="t('Settings.Data Settings.Import Settings')"
+        @click="importSettings"
+      />
+      <FtButton
+        :label="t('Settings.Data Settings.Export Settings')"
+        @click="exportSettings"
+      />
+    </FtFlexBox>
    <FtPrompt
      v-if="showExportSubscriptionsPrompt"
      :label="$t('Settings.Data Settings.Select Export Type')"
@@ -121,7 +139,7 @@

 <script setup>
 import { computed, ref } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

 import FtButton from '../FtButton/FtButton.vue'
@@ -129,8 +147,10 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../FtToggleSwitch/FtToggleSwitch.vue'
+import FtTooltip from '../FtTooltip/FtTooltip.vue'

 import store from '../../store/index'
+import { defaultUpdaterId, NON_TRANSFERABLE_SETTINGS } from '../../store/modules/settings'

 import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
@@ -166,16 +186,28 @@ function toggleCopyDataDir() {
 }

 async function selectDirectory() {
-  const uri = await selectDataDirectory(shouldCopyDataFilesWhenMoving.value)
-  if (uri !== null) {
-    dataDirectory.value = uri
+  try {
+    const uri = await selectDataDirectory(shouldCopyDataFilesWhenMoving.value)
+    if (uri !== null) {
+      dataDirectory.value = uri
+    }
+    showToast(t('Data Settings.Your data directory has been moved successfully'))
+  } catch (exception){
+    showToast(t('Data Settings.Error moving data directory'))
+    console.error(exception)
  }
 }

 async function resetDirectory() {
-  const uri = await selectDataDirectory(shouldCopyDataFilesWhenMoving.value, true)
-  if (uri !== null) {
-    dataDirectory.value = uri
+  try {
+    const uri = await selectDataDirectory(shouldCopyDataFilesWhenMoving.value, true)
+    if (uri !== null) {
+      dataDirectory.value = uri
+    }
+    showToast(t('Data Settings.Your data directory has been moved successfully'))
+  } catch (exception) {
+    showToast(t('Data Settings.Error moving data directory'))
+    console.error(exception)
  }
 }

@@ -883,7 +915,6 @@ async function importFreeTubeWatchHistory(textDecode) {
  const requiredKeys = [
    'author',
    'authorId',
-    'description',
    'isLive',
    'lengthSeconds',
    'published',
@@ -901,6 +932,7 @@ async function importFreeTubeWatchHistory(textDecode) {
    'lastViewedPlaylistItemId',
    'lastViewedPlaylistType',
    'viewCount',
+    'description',
  ]

  const ignoredKeys = [
@@ -933,6 +965,9 @@ async function importFreeTubeWatchHistory(textDecode) {
      showToast(t('Settings.Data Settings.History object has insufficient data, skipping item'))
      console.error('Missing Keys: ', missingKeys, historyData)
    } else {
+      // FreeTube history export does not have this data if the video was marked as watched manually, setting default value
+      historyObject.description = historyObject.description ?? ''
+
      historyItems.set(historyObject.videoId, historyObject)
    }
  })
@@ -957,17 +992,21 @@ async function importYouTubeWatchHistory(historyData) {
  // remove 'Watched' and translated variants from start of title
  // so we get the common string prefix for all the titles
  const getCommonStart = (allTitles) => {
-    const watchedTitle = allTitles[0].split(' ')
-    allTitles.forEach((title) => {
-      const splitTitle = title.split(' ')
-      for (let wtIndex = 0; wtIndex <= watchedTitle.length; wtIndex++) {
-        if (!splitTitle.includes(watchedTitle[wtIndex])) {
-          watchedTitle.splice(wtIndex, watchedTitle.length - wtIndex)
+    if (allTitles.length < 2) {
+      return ''
+    }
+
+    let commonStart = allTitles[0]
+    for (let i = 1; i < allTitles.length; i++) {
+      while (!allTitles[i].startsWith(commonStart)) {
+        commonStart = commonStart.slice(0, -1)
+        if (commonStart === '') {
+          return ''
        }
      }
-    })
+    }

-    return watchedTitle.join(' ')
+    return commonStart
  }

  const commonStart = getCommonStart(filteredHistoryData.map(e => e.title))
@@ -1261,7 +1300,7 @@ async function importPlaylists() {
      shouldAddDuplicateVideos = existingPlaylist.videos.length > existingVideoIdSet.size
    }

-    const playlistVideos = [...existingPlaylist.videos]
+    const playlistVideos = deepCopy(existingPlaylist.videos)

    playlistObject.videos.forEach((video) => {
      let videoExists = false
@@ -1523,6 +1562,81 @@ async function exportYouTubeSearchHistory() {
 }

 // #endregion search history
+
+// #region settings
+
+async function importSettings() {
+  let response
+  try {
+    response = await readFileWithPicker(
+      t('Settings.Data Settings.Settings File'),
+      {
+        'application/x-freetube-db': '.db',
+        'application/json': '.json'
+      },
+      IMPORT_DIRECTORY_ID,
+      START_IN_DIRECTORY
+    )
+  } catch (err) {
+    const message = t('Settings.Data Settings.Unable to read file')
+    showToast(`${message}: ${err}`)
+    return
+  }
+
+  if (response === null) {
+    return
+  }
+
+  const textDecode = response.content.split('\n')
+  textDecode.pop()
+
+  const currentSettings = store.state.settings
+
+  textDecode.forEach((rawEntry) => {
+    const entry = JSON.parse(rawEntry)
+    if (typeof entry._id !== 'string' || !Object.hasOwn(entry, 'value')) {
+      showToast(t('Settings.Data Settings.Setting object has insufficient data, skipping item'))
+      console.error('Missing keys:', entry)
+    } else if (!Object.hasOwn(currentSettings, entry._id)) {
+      const message = t('Settings.Data Settings.Unknown setting key', { key: entry._id })
+      showToast(message)
+    } else if (NON_TRANSFERABLE_SETTINGS.has(entry._id)) {
+      const message = t('Settings.Data Settings.Non-transferable setting key', { key: entry._id })
+      showToast(message)
+    } else {
+      const currentValue = currentSettings[entry._id]
+      const areValuesEqual = currentValue === entry.value ||
+        (typeof entry.value === 'object' && JSON.stringify(currentValue) === JSON.stringify(entry.value))
+      if (!areValuesEqual) {
+        const updaterId = defaultUpdaterId(entry._id)
+        store.dispatch(updaterId, entry.value)
+      }
+    }
+  })
+
+  showToast(t('Settings.Data Settings.All settings have been successfully imported'))
+}
+
+async function exportSettings() {
+  const settingDb = Object.entries(store.state.settings)
+    .filter(([_id]) => !NON_TRANSFERABLE_SETTINGS.has(_id))
+    .map(([_id, value]) => JSON.stringify({ _id, value }))
+    .join('\n') + '\n'
+  const dateStr = getTodayDateStrLocalTimezone()
+  const exportFileName = 'freetube-settings-' + dateStr + '.db'
+
+  await promptAndWriteToFile(
+    exportFileName,
+    settingDb,
+    t('Settings.Data Settings.Settings File'),
+    'application/x-freetube-db',
+    '.db',
+    t('Settings.Data Settings.All settings have been successfully exported')
+  )
+}
+
+// #endregion settings
+
 </script>
 <style scoped>
 .data-directory-heading {
@@ -286,7 +286,7 @@

 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../FtToggleSwitch/FtToggleSwitch.vue'
@@ -62,7 +62,7 @@

 <script setup>
 import { computed } from 'vue'
-import { useI18n } from '../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from './FtSelect/FtSelect.vue'
@@ -11,7 +11,7 @@

 <script setup>
 import { computed } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import { randomArrayItem } from '../../helpers/utils'

@@ -10,7 +10,8 @@
      <template
        v-if="authorThumbnail"
      >
-        <router-link
+        <component
+          :is="enableChannelLinks ? 'router-link' : 'div'"
          v-if="authorId"
          :to="`/channel/${authorId}`"
          tabindex="-1"
@@ -21,7 +22,7 @@
            class="communityThumbnail"
            alt=""
          >
-        </router-link>
+        </component>
        <img
          v-else
          :src="authorThumbnail"
@@ -34,7 +35,7 @@
        dir="auto"
      >
        <router-link
-          v-if="authorId"
+          v-if="authorId && enableChannelLinks"
          :to="`/channel/${authorId}`"
          class="authorNameLink"
        >
@@ -60,7 +61,7 @@
    <swiper-container
      v-if="postType === 'multiImage' && postContent.content.length > 0"
      ref="swiperContainerRef"
-      init="false"
+      :init="false"
      class="sliderContainer"
    >
      <swiper-slide
@@ -174,7 +175,7 @@ import autolinker from 'autolinker'
 import { A11y, Navigation, Pagination } from 'swiper/modules'
 import { computed, onMounted, useTemplateRef } from 'vue'

-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtListVideo from '../FtListVideo/FtListVideo.vue'
 import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
 import FtCommunityPoll from '../FtCommunityPoll/FtCommunityPoll.vue'
 import FtShareButton from '../FtShareButton/FtShareButton.vue'
@@ -337,6 +338,8 @@ if (postType === 'multiImage' && postContent.content.length > 0) {
    swiperContainerRef.value.initialize()
  })
 }
+
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
 </script>

 <style scoped src="./FtCommunityPost.scss" lang="scss" />
@@ -44,7 +44,7 @@

 <script setup>
 import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtButton from '../FtButton/FtButton.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
@@ -8,10 +8,11 @@
      appearance="result"
      :data="result"
      :data-type="dataType || result.type"
-      :first-screen="index < 16"
+      :first-screen="!renderAllItemsLazily && index < 16"
      :layout="displayValue"
      :show-video-with-last-viewed-playlist="showVideoWithLastViewedPlaylist"
      :use-channels-hidden-preference="useChannelsHiddenPreference"
+      :use-hide-upcoming-premieres-preference="useHideUpcomingPremieresPreference"
      :hide-forbidden-titles="hideForbiddenTitles"
      :always-show-add-to-playlist-button="alwaysShowAddToPlaylistButton"
      :quick-bookmark-button-enabled="quickBookmarkButtonEnabled"
@@ -22,6 +23,12 @@
      :playlist-id="playlistId"
      :playlist-type="playlistType"
      :playlist-item-id="result.playlistItemId"
+      :dragged-video="draggedVideo"
+      :is-sort-order-custom="isSortOrderCustom"
+      :is-video-dragging="isVideoDragging"
+      @drag-video="dragVideo"
+      @move-dragged-video="moveDraggedVideo"
+      @drag-video-end="afterDrag"
      @move-video-up="moveVideoUp"
      @move-video-down="moveVideoDown"
      @remove-from-playlist="removeFromPlaylist"
@@ -46,6 +53,10 @@ const props = defineProps({
    type: String,
    default: null,
  },
+  renderAllItemsLazily: {
+    type: Boolean,
+    default: false
+  },
  display: {
    type: String,
    required: false,
@@ -59,6 +70,10 @@ const props = defineProps({
    type: Boolean,
    default: true,
  },
+  useHideUpcomingPremieresPreference: {
+    type: Boolean,
+    default: true,
+  },
  hideForbiddenTitles: {
    type: Boolean,
    default: true
@@ -100,9 +115,21 @@ const props = defineProps({
    type: String,
    default: null
  },
+  draggedVideo: {
+    type: Object,
+    default: () => ({ videoId: null, playlistItemId: null }),
+  },
+  isSortOrderCustom: {
+    type: Boolean,
+    default: false,
+  },
+  isVideoDragging: {
+    type: Boolean,
+    default: false,
+  },
 })

-const emit = defineEmits(['move-video-down', 'move-video-up', 'remove-from-playlist'])
+const emit = defineEmits(['move-dragged-video', 'move-video-down', 'move-video-up', 'remove-from-playlist', 'drag-video', 'drag-video-end'])

 /** @type {import('vue').ComputedRef<'grid' | 'list'>} */
 const listType = computed(() => {
@@ -137,6 +164,28 @@ function moveVideoDown(videoId, playlistItemId) {
 function removeFromPlaylist(videoId, playlistItemId) {
  emit('remove-from-playlist', videoId, playlistItemId)
 }
+
+/** @import { VideoData } from '../../helpers/dragAndDrop' */
+
+/**
+ * @param {VideoData} video
+ */
+function dragVideo(video) {
+  emit('drag-video', video)
+}
+
+/**
+ * @param {VideoData} video
+ * @param {VideoData} draggedVideo
+ */
+function moveDraggedVideo(video, draggedVideo) {
+  emit('move-dragged-video', video, draggedVideo)
+}
+
+function afterDrag() {
+  emit('drag-video-end')
+}
+
 </script>

 <style scoped src="./FtElementList.css" />
@@ -119,7 +119,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, reactive, ref, shallowRef, useId, useTemplateRef, watch } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtTooltip from '../FtTooltip/FtTooltip.vue'

@@ -372,6 +372,7 @@ function handleOptionClick(index) {
  }

  searchState.showOptions = false
+  searchState.isPointerInList = false
  inputData.value = visibleDataList.value[index]
  emit('input', inputData.value)
  handleClick()
@@ -28,7 +28,7 @@
  float: inline-start;
 }

-.ft-tag-box li>span {
+.ft-tag-box li > .name {
  padding-block: 10px;
  padding-inline: 10px;
  overflow-wrap: break-word;
@@ -59,7 +59,11 @@
                loading="lazy"
              >
            </RouterLink>
-            <bdi>{{ (tag.preferredName) ? tag.preferredName : tag.name }}</bdi>
+            <bdi
+              class="name"
+            >
+              {{ (tag.preferredName) ? tag.preferredName : tag.name }}
+            </bdi>
          </template>
          <bdi v-else>{{ tag }}</bdi>
          <button
@@ -80,7 +84,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useId, useTemplateRef } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtInput from '../FtInput/FtInput.vue'

@@ -60,7 +60,7 @@ import { KeyboardShortcuts } from '../../../constants'
 import { getLocalizedShortcut } from '../../helpers/utils'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
 import store from '../../store/index'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'
 import FtIconButton from '../FtIconButton/FtIconButton.vue'

 const { t } = useI18n()
@@ -128,7 +128,10 @@ const localizedShortcutNameToShortcutsMappings = computed(() => {
    [t('KeyboardShortcutPrompt.Reset Zoom'), ['RESET_ZOOM']],
    [t('KeyboardShortcutPrompt.Zoom In'), ['ZOOM_IN']],
    [t('KeyboardShortcutPrompt.Zoom Out'), ['ZOOM_OUT']],
-    [t('KeyboardShortcutPrompt.Focus Search'), ['FOCUS_SEARCH']],
+    [t('KeyboardShortcutPrompt.Focus Search'), [
+      'FOCUS_SEARCH',
+      'FOCUS_SEARCH_ALT',
+    ]],
    [t('KeyboardShortcutPrompt.Search in New Window'), ['SEARCH_IN_NEW_WINDOW']],

    [t('KeyboardShortcutPrompt.Refresh'), ['REFRESH']],
@@ -8,7 +8,8 @@
    }"
  >
    <div class="channelThumbnail">
-      <router-link
+      <component
+        :is="enableChannelLinks ? 'router-link' : 'div'"
        :to="`/channel/${id}`"
        class="channelThumbnailLink"
        tabindex="-1"
@@ -19,11 +20,12 @@
          :class="!isGame ? 'channelImage' : 'gameImage'"
          alt=""
        >
-      </router-link>
+      </component>
    </div>
    <div class="infoAndSubscribe">
      <div class="info">
-        <router-link
+        <component
+          :is="enableChannelLinks ? 'router-link' : 'span'"
          class="title"
          :to="`/channel/${id}`"
        >
@@ -33,16 +35,17 @@
          >
            {{ name }}
          </h3>
-        </router-link>
+        </component>
        <div class="infoLine">
-          <router-link
+          <component
+            :is="enableChannelLinks ? 'router-link' : 'span'"
            v-if="handle !== null"
            class="handle"
            dir="auto"
            :to="`/channel/${id}`"
          >
            {{ handle }}
-          </router-link>
+          </component>
          <span
            v-if="subscriberCount !== null && !hideChannelSubscriptions"
            class="subscriberCount"
@@ -118,6 +121,8 @@ const hideUnsubscribeButton = computed(() => {
  return store.getters.getHideUnsubscribeButton
 })

+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
+
 let id = ''
 let thumbnail = ''
 let name = ''
@@ -5,3 +5,12 @@
 .list {
  min-block-size: 131px;
 }
+
+.draggable:active {
+  cursor: grabbing;
+}
+
+.draggedVideo {
+  opacity: 0;
+  transition: 0.01s;
+}
@@ -6,8 +6,12 @@
    }"
    :class="{
      grid: layout === 'grid',
-      list: layout === 'list'
+      list: layout === 'list',
+      draggable: isDraggable,
+      draggedVideo: isVideoDragging && draggedVideo.videoId === data.videoId && draggedVideo.playlistItemId === data.playlistItemId,
    }"
+    :draggable="isDraggable"
+    v-on="isDraggable ? draggableEventHandlers : {}"
  >
    <template
      v-if="visible"
@@ -25,6 +29,8 @@
        :can-move-video-up="canMoveVideoUp"
        :can-move-video-down="canMoveVideoDown"
        :can-remove-from-playlist="canRemoveFromPlaylist"
+        :layout="layout"
+        :show-grab-bar="isDraggable && layout === 'grid'"
        @move-video-up="moveVideoUp"
        @move-video-down="moveVideoDown"
        @remove-from-playlist="removeFromPlaylist"
@@ -58,7 +64,9 @@
 <script setup>
 import { computed, ref } from 'vue'

-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import { handleDragAndDrop } from '../../helpers/dragAndDrop'
+
+import FtListVideo from '../FtListVideo/FtListVideo.vue'
 import FtListChannel from '../FtListChannel/FtListChannel.vue'
 import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
 import FtCommunityPost from '../FtCommunityPost/FtCommunityPost.vue'
@@ -95,6 +103,10 @@ const props = defineProps({
    type: Boolean,
    default: true,
  },
+  useHideUpcomingPremieresPreference: {
+    type: Boolean,
+    default: true,
+  },
  hideForbiddenTitles: {
    type: Boolean,
    default: true
@@ -136,9 +148,36 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  draggedVideo: {
+    type: Object,
+    default: () => ({ videoId: null, playlistItemId: null }),
+  },
+  isSortOrderCustom: {
+    type: Boolean,
+    default: false,
+  },
+  isVideoDragging: {
+    type: Boolean,
+    default: false,
+  },
 })

-const emit = defineEmits(['move-video-down', 'move-video-up', 'remove-from-playlist'])
+const emit = defineEmits(['move-dragged-video', 'move-video-down', 'move-video-up', 'remove-from-playlist', 'drag-video', 'drag-video-end'])
+
+const inUserPlaylist = props.playlistType === 'user'
+const isDraggable = computed(() => inUserPlaylist && props.isSortOrderCustom && (props.canMoveVideoUp || props.canMoveVideoDown))
+const { dragVideo, moveDraggedVideo, afterDrag } = handleDragAndDrop(emit)
+const draggableEventHandlers = {
+  dragstart: onDragVideo,
+  dragover: event => event.preventDefault(),
+  dragenter: () => {
+    if (props.isVideoDragging) {
+      moveDraggedVideo(videoData, props.draggedVideo)
+    }
+  },
+  dragend: afterDrag,
+  drop: event => event.preventDefault(),
+}

 /** @type {import('vue').ComputedRef<'video' | 'shortVideo' | 'channel' | 'playlist' | 'community'>} */
 const finalDataType = computed(() => {
@@ -152,6 +191,8 @@ const hideLiveStreams = computed(() => {

 /** @type {import('vue').ComputedRef<boolean>} */
 const hideUpcomingPremieres = computed(() => {
+  if (!props.useHideUpcomingPremieresPreference) { return false }
+
  return store.getters.getHideUpcomingPremieres
 })

@@ -294,6 +335,22 @@ function moveVideoDown(videoId, playlistItemId) {
 function removeFromPlaylist(videoId, playlistItemId) {
  emit('remove-from-playlist', videoId, playlistItemId)
 }
+
+function onDragVideo(event) {
+  // Only allow dragging via the drag bar
+  if (!event.target.classList.contains('draggable')) { return }
+
+  dragVideo(event, videoData)
+}
+
+/** @import { VideoData } from '../../helpers/dragAndDrop' */
+
+/** @type {VideoData} */
+const videoData = {
+  videoId: props.data.videoId,
+  playlistItemId: props.playlistItemId,
+}
+
 </script>

 <style scoped src="./FtListLazyWrapper.css" />
@@ -47,7 +47,7 @@
      </RouterLink>
      <div class="infoLine">
        <RouterLink
-          v-if="channelId"
+          v-if="channelId && enableChannelLinks"
          class="channelName"
          dir="auto"
          :to="`/channel/${channelId}`"
@@ -92,7 +92,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtIconButton from '../FtIconButton/FtIconButton.vue'

@@ -268,6 +268,8 @@ const externalPlayer = computed(() => store.getters.getExternalPlayer)
 /** @type {import('vue').ComputedRef<number>} */
 const defaultPlayback = computed(() => store.getters.getDefaultPlayback)

+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
+
 function handleExternalPlayer() {
  if (process.env.IS_ELECTRON) {
    window.ftElectron.openInExternalPlayer({
@@ -4,11 +4,37 @@
  outline: 3px solid var(--side-nav-hover-color);
 }

+.grabBar {
+  color: var(--tertiary-text-color);
+  cursor: grab;
+  text-align: center;
+  user-select: none;
+
+  // Space a bit from the thumbnail.
+  padding-block: 1em;
+}
+
+.draggable:not(.draggable:only-child):focus .grabBar,
+.draggable:not(.draggable:only-child):hover .grabBar {
+  display: revert;
+}
+
+// If touch screen device, always show grab bar.
+@media (hover: none) {
+  .draggable:not(.draggable:only-child) .grabBar {
+    display: revert;
+  }
+}
+
 .thumbnailImage {
  // Makes img element sized correctly before image loading starts
  aspect-ratio: 16/9 auto;
 }

+.blur {
+  filter: blur(20px);
+}
+
 .videoTagLine {
  margin-block-start: 3px;
 }
@@ -33,7 +33,7 @@
 <script setup>
 import { computed, ref } from 'vue'

-import FtListVideo from './ft-list-video/ft-list-video.vue'
+import FtListVideo from './FtListVideo/FtListVideo.vue'

 import store from '../store/index'

@@ -7,9 +7,47 @@
  block-size: 40px;
 }

-.videoIndex {
+.draggable:active {
+  cursor: grabbing;
+}
+
+.draggedVideo {
+  opacity: 0;
+  transition: 0.01s;
+}
+
+.videoIndexArea {
  color: var(--tertiary-text-color);
  text-align: center;
+  user-select: none;
+}
+
+.grabBar {
+  display: none;
+  cursor: grab;
+  color: var(--tertiary-text-color);
+  margin: auto;
+}
+
+.draggable .videoIndexArea {
+  /* Make draggable area large */
+  margin-block: 0;
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: grab;
+}
+
+.draggable:not(.draggable:only-child) .videoIndexArea {
+  display: grid;
+  place-content: center;
+  grid-auto-rows: min-content;
+}
+
+.draggable:not(.draggable:only-child) .grabBar {
+  display: revert;
+  order: 2;
 }

 .videoIndexIcon {
@@ -3,23 +3,40 @@
    v-observe-visibility="visible ? false : {
      callback: onVisibilityChanged
    }"
-    :class="{ placeholder: !visible }"
+    :class="{
+      placeholder: !visible,
+      draggable: canBecomeDraggable,
+      draggedVideo: isVideoDragging && draggedVideo.videoId === data.videoId && draggedVideo.playlistItemId === data.playlistItemId,
+    }"
+    :draggable="canBecomeDraggable"
+    v-on="canBecomeDraggable ? draggableEventHandlers : {}"
  >
    <template
      v-if="visible"
    >
      <p
-        class="videoIndex"
+        class="videoIndexArea"
      >
        <FontAwesomeIcon
          v-if="isCurrentVideo"
          class="videoIndexIcon"
          :icon="['fas', 'play']"
        />
+
        <template
          v-else
        >
-          {{ videoIndex + 1 }}
+          <FontAwesomeIcon
+            v-if="canBecomeDraggable"
+            class="grabBar"
+            :icon="['fas', 'fa-bars']"
+          />
+
+          <span
+            class="videoIndex"
+          >
+            {{ videoIndex + 1 }}
+          </span>
        </template>
      </p>
      <FtListVideo
@@ -49,9 +66,11 @@

 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'

-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import { handleDragAndDrop } from '../../helpers/dragAndDrop'
+
+import FtListVideo from '../FtListVideo/FtListVideo.vue'

 const props = defineProps({
  data: {
@@ -114,6 +133,18 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  draggedVideo: {
+    type: Object,
+    default: () => ({ videoId: null, playlistItemId: null }),
+  },
+  isSortOrderCustom: {
+    type: Boolean,
+    default: null
+  },
+  isVideoDragging: {
+    type: Boolean,
+    default: false,
+  },
  videoIndex: {
    type: Number,
    default: -1
@@ -124,10 +155,24 @@ const props = defineProps({
  }
 })

-const emit = defineEmits(['move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist'])
-
+const emit = defineEmits(['move-dragged-video', 'move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist', 'drag-video', 'drag-video-end'])
 const visible = ref(props.initialVisibleState)

+const inUserPlaylist = props.playlistType === 'user'
+const canBecomeDraggable = computed(() => inUserPlaylist && props.isSortOrderCustom && (props.canMoveVideoUp || props.canMoveVideoDown))
+const { dragVideo, moveDraggedVideo, afterDrag } = handleDragAndDrop(emit)
+const draggableEventHandlers = {
+  dragstart: onDragVideo,
+  dragover: event => event.preventDefault(),
+  dragenter: () => {
+    if (props.isVideoDragging) {
+      moveDraggedVideo(videoData, props.draggedVideo)
+    }
+  },
+  dragend: afterDrag,
+  drop: event => event.preventDefault(),
+}
+
 let stopWatchingInitialVisibleState = null

 if (!props.initialVisibleState) {
@@ -172,6 +217,21 @@ function moveVideoDown(videoId, playlistItemId) {
  emit('move-video-down', videoId, playlistItemId)
 }

+function onDragVideo(event) {
+  // Only allow dragging via the drag bar
+  if (!event.target.classList.contains('draggable')) { return }
+
+  dragVideo(event, videoData)
+}
+
+/** @import { VideoData } from '../../helpers/dragAndDrop' */
+
+/** @type {VideoData} */
+const videoData = {
+  videoId: props.data.videoId,
+  playlistItemId: props.playlistItemId,
+}
+
 /**
 * @param {string} videoId
 * @param {string} playlistItemId
@@ -103,7 +103,7 @@

 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
@@ -418,7 +418,7 @@ const updateQueryDebounce = debounce(/** @param {string} query_ */(query_) => {

 onMounted(() => {
  document.addEventListener('keydown', keyboardShortcutHandler)
-  // Don't open keyboard prompt immediately on android 
+  // Don't open keyboard prompt immediately on android
  if (!process.env.IS_ANDROID) {
    // User might want to search first if they have many playlists
    nextTick(() => {
@@ -55,7 +55,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, ref } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import store from '../../store/index'

@@ -30,7 +30,7 @@

 <script setup>
 import { computed, useId } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import { getFirstCharacter } from '../../helpers/strings'

@@ -4,7 +4,10 @@
      <h2>
        {{ $t("Profile.Subscription List") }}
      </h2>
-      <p class="selectedCount">
+      <p
+        v-if="showUnsubscribeButton"
+        class="selectedCount"
+      >
        {{ selectedText }}
      </p>
      <FtFlexBox>
@@ -14,12 +17,14 @@
          :channel-id="channel.id"
          :channel-name="channel.name"
          :channel-thumbnail="channel.thumbnail"
-          :selectable="true"
+          :selectable="showUnsubscribeButton"
          :selected="selected.has(channel.id)"
          @change="handleChannelToggle(channel.id)"
        />
      </FtFlexBox>
-      <FtFlexBox>
+      <FtFlexBox
+        v-if="showUnsubscribeButton"
+      >
        <FtButton
          :label="$t('Profile.Select All')"
          @click="selectAll"
@@ -49,7 +54,7 @@

 <script setup>
 import { computed, reactive, ref, shallowRef, watch } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtCard from '../ft-card/ft-card.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
@@ -102,6 +107,11 @@ const intlCollator = computed(() => {
  return new Intl.Collator([locale.value, 'en'], { sensitivity: 'base' })
 })

+/** @type {import('vue').ComputedRef<boolean>} */
+const showUnsubscribeButton = computed(() => {
+  return !store.getters.getHideUnsubscribeButton
+})
+
 /** @type {import('vue').ShallowRef<Profile['subscriptions']>} */
 const subscriptions = shallowRef([])

@@ -110,7 +110,7 @@

 <script setup>
 import { computed, ref, watch } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtCard from '../ft-card/ft-card.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
@@ -14,7 +14,10 @@
          @change="handleProfileFilterChange"
        />
      </FtFlexBox>
-      <p class="selected">
+      <p
+        v-if="showUnsubscribeButton"
+        class="selected"
+      >
        {{ selectedText }}
      </p>
      <FtFlexBox>
@@ -24,12 +27,14 @@
          :channel-id="channel.id"
          :channel-name="channel.name"
          :channel-thumbnail="channel.thumbnail"
-          :selectable="true"
+          :selectable="showUnsubscribeButton"
          :selected="selected.has(channel.id)"
          @change="handleChannelToggle(channel.id)"
        />
      </FtFlexBox>
-      <FtFlexBox>
+      <FtFlexBox
+        v-if="showUnsubscribeButton"
+      >
        <FtButton
          :label="$t('Profile.Select All')"
          @click="selectAll"
@@ -51,7 +56,7 @@

 <script setup>
 import { computed, reactive, ref, shallowRef, watch } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtCard from '../ft-card/ft-card.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
@@ -111,6 +116,11 @@ const intlCollator = computed(() => {
  return new Intl.Collator([locale.value, 'en'], { sensitivity: 'base' })
 })

+/** @type {import('vue').ComputedRef<boolean>} */
+const showUnsubscribeButton = computed(() => {
+  return !store.getters.getHideUnsubscribeButton
+})
+
 const filteredProfileIndex = ref(0)

 /** @type {import('vue').ShallowRef<Profile['subscriptions']>} */
@@ -84,7 +84,7 @@

 <script setup>
 import { computed, nextTick, ref, useId, useTemplateRef } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

 import FtCard from '../ft-card/ft-card.vue'
@@ -95,7 +95,10 @@
 }

@media only screen and (width <= 420px) {
-  .pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label {
+  .pure-checkbox input[type='checkbox'] + label,
+  .pure-radiobutton input[type='checkbox'] + label,
+  .pure-checkbox input[type='radio'] + label,
+  .pure-radiobutton input[type='radio'] + label {
    margin-block: 20px;
  }
 }
@@ -22,7 +22,7 @@

 <script setup>
 import { computed } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtIconButton from '../FtIconButton/FtIconButton.vue'

@@ -34,10 +34,10 @@
  cursor: pointer;
  font-size: 20px;
  line-height: 1em;
-  padding: 0px;
+  padding: 0;
  transition: background 0.2s ease-out;
  position: relative;
-  top: -3px;
+  inset-block-start: -3px;

  &.disabled {
    opacity: 0.5;
@@ -74,7 +74,7 @@
@media only screen and (width <= 420px) {
  .radioFlexBox {
    max-block-size: calc(100vh - 8.5em);
-    margin-bottom: 0.75em;
+    margin-block-end: 0.75em;
    overflow-y: scroll;
    justify-content: start;
  }
@@ -74,7 +74,7 @@

 <script setup>
 import { computed, ref, watch } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtRadioButton from '../FtRadioButton/FtRadioButton.vue'
@@ -98,7 +98,7 @@
      padding-inline: 10px;
    }

-    :deep(:not(.select, .selectLabel) > .tooltip) {
+    :deep(:not(.select, .selectLabel, .groupTitle) > .tooltip) {
      display: inline-block;
      position: absolute;
      inset-inline-end: -25px;
@@ -118,7 +118,7 @@
 <script setup>
 import { computed, ref, useTemplateRef } from 'vue'
 import { copyToClipboard, openExternalLink } from '../../helpers/utils'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtIconButton from '../FtIconButton/FtIconButton.vue'
@@ -31,7 +31,7 @@

 <script setup>
 import { computed, useId } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtSelect from '../FtSelect/FtSelect.vue'

@@ -93,7 +93,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, ref, shallowRef, useId, useTemplateRef } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtButton from '../FtButton/FtButton.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
@@ -42,7 +42,7 @@
  border-block-end: 1px solid #e46962;
 }

-[data-theme="light"] .logs > .warning {
+[data-theme='light'] .logs > .warning {
  background-color: #fef6d5;
  color: #3e2f00;
  border-block-end: 2px solid var(--card-bg-color);
@@ -69,16 +69,17 @@
  display: block;
 }

-.error .source, .warning .source {
+.error .source,
+.warning .source {
  color: #fff;
 }

-[data-theme="light"] .source,
-[data-theme="light"] .error {
+[data-theme='light'] .source,
+[data-theme='light'] .error {
  color: #000;
 }

-[data-theme="light"] .logs > .error {
+[data-theme='light'] .logs > .error {
  background-color: #fcebeb;
  color: #410e0b;
  border-block-end: 2px solid var(--card-bg-color);
@@ -54,7 +54,7 @@ import FtButton from '../FtButton/FtButton.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { isColourDark } from '../../helpers/android/utils'
 import { getConsoleLogs } from '../../helpers/android/system'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 const { t } = useI18n()

@@ -43,7 +43,7 @@
          @change="updateOpenDeepLinksInNewWindow"
        />
        <FtToggleSwitch
-          v-if="!IS_MAC && USING_ELECTRON"
+          v-if="!IS_MAC && !isLinuxWayland && USING_ELECTRON"
          :label="t('Settings.General Settings.Minimize to system tray')"
          :default-value="hideToTrayOnMinimize"
          :compact="true"
@@ -174,8 +174,8 @@
 </template>

 <script setup>
-import { computed, onBeforeUnmount } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
@@ -199,6 +199,15 @@ const USING_ANDROID = process.env.IS_ANDROID
 const { t } = useI18n()
 const router = useRouter()

+// The 'minimize' event doesn't fire on wayland
+// https://github.com/electron/electron/issues/51766
+const isLinuxWayland = ref(false)
+if (process.env.IS_ELECTRON && process.platform === 'linux') {
+  onMounted(async () => {
+    isLinuxWayland.value = await window.ftElectron.isWaylandPlatform()
+  })
+}
+
 /** @type {import('vue').ComputedRef<boolean>} */
 const checkForUpdates = computed(() => store.getters.getCheckForUpdates)

@@ -16,6 +16,12 @@
          :default-value="showFamilyFriendlyOnly"
          @change="updateShowFamilyFriendlyOnly"
        />
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Disable Channel Links')"
+          compact
+          :default-value="disableChannelLinks"
+          @change="updateDisableChannelLinks"
+        />
      </div>
      <div class="switchColumn">
        <FtToggleSwitch
@@ -59,6 +65,10 @@ const showFamilyFriendlyOnly = computed(() => {
  return store.getters.getShowFamilyFriendlyOnly
 })

+const disableChannelLinks = computed(() => {
+  return store.getters.getDisableChannelLinks
+})
+
 /**
 * @param {boolean} value
 */
@@ -86,4 +96,11 @@ function updateHideUploader(value) {
 function updateShowFamilyFriendlyOnly(value) {
  store.dispatch('updateShowFamilyFriendlyOnly', value)
 }
+
+/**
+ * @param {boolean} value
+ */
+function updateDisableChannelLinks(value) {
+  store.dispatch('updateDisableChannelLinks', value)
+}
 </script>
@@ -81,6 +81,7 @@
        :value="defaultViewingMode"
        :select-names="viewingModeNames"
        :select-values="viewingModeValues"
+        :tooltip="t('Settings.Player Settings.Default Viewing Mode.Tooltip')"
        :icon="['fas', 'expand']"
        @change="updateDefaultViewingMode"
      />
@@ -176,6 +177,16 @@
    </FtFlexBox>
    <div v-if="enableScreenshot">
      <FtFlexBox>
+        <FtSelect
+          :placeholder="t('Settings.Player Settings.Screenshot.Mode')"
+          :value="screenshotMode"
+          :select-names="screenshotModeNames"
+          :select-values="screenshotModeValues"
+          :icon="['fas', 'expand']"
+          @change="handleUpdateScreenshotMode"
+        />
+      </FtFlexBox>
+      <FtFlexBox v-if="screenshotMode !== 'clipboard'">
        <FtSelect
          :placeholder="t('Settings.Player Settings.Screenshot.Format Label')"
          :value="screenshotFormat"
@@ -195,15 +206,8 @@
          @change="updateScreenshotQuality"
        />
      </FtFlexBox>
-      <FtFlexBox v-if="USING_ELECTRON">
-        <FtToggleSwitch
-          :label="t('Settings.Player Settings.Screenshot.Ask Path')"
-          :default-value="screenshotAskPath"
-          @change="updateScreenshotAskPath"
-        />
-      </FtFlexBox>
      <FtFlexBox
-        v-if="USING_ELECTRON && !screenshotAskPath"
+        v-if="USING_ELECTRON && screenshotMode === 'default_folder'"
        class="screenshotFolderContainer"
      >
        <p class="screenshotFolderLabel">
@@ -223,6 +227,7 @@
        />
      </FtFlexBox>
      <FtFlexBox
+        v-if="screenshotMode !== 'clipboard'"
        class="screenshotFolderContainer"
      >
        <p class="screenshotFilenamePatternTitle">
@@ -256,7 +261,7 @@

 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from '../FtSelect/FtSelect.vue'
@@ -401,10 +406,12 @@ const viewingModeNames = computed(() => {
    t('Settings.General Settings.Thumbnail Preference.Default'),
    t('Settings.Player Settings.Default Viewing Mode.Theater'),
    t('Video.Player.Full Window'),
+    t('Settings.Player Settings.Default Viewing Mode.Full Window (Always On)'),

    ...process.env.IS_ELECTRON
      ? [
          t('Settings.Player Settings.Default Viewing Mode.Full Screen'),
+          t('Settings.Player Settings.Default Viewing Mode.Full Screen (Always On)'),
          t('Settings.Player Settings.Default Viewing Mode.Picture in Picture')
        ]
      : []
@@ -424,9 +431,14 @@ const viewingModeValues = computed(() => {
    'default',
    'theatre',
    'fullwindow',
+    'fullwindow_always_on',

    ...process.env.IS_ELECTRON
-      ? ['fullscreen', 'pip']
+      ? [
+          'fullscreen',
+          'fullscreen_always_on',
+          'pip',
+        ]
      : []
  ]

@@ -598,6 +610,27 @@ async function handleUpdateScreenshotFormat(format) {
  getScreenshotFilenameExample(screenshotFilenamePattern.value)
 }

+const screenshotModeNames = computed(() => [
+  t('Settings.Player Settings.Screenshot.Modes.Ask Path'),
+  ...process.env.IS_ELECTRON ? [t('Settings.Player Settings.Screenshot.Modes.Save To Folder')] : [],
+  t('Settings.Player Settings.Screenshot.Modes.Clipboard'),
+])
+const screenshotModeValues = computed(() => [
+  'prompt_folder',
+  ...process.env.IS_ELECTRON ? ['default_folder'] : [],
+  'clipboard'
+])
+
+/** @type {import('vue').ComputedRef<'prompt_folder' | 'default_folder' | 'clipboard'>} */
+const screenshotMode = computed(() => store.getters.getScreenshotMode)
+
+/**
+ * @param {'prompt_folder' | 'default_folder' | 'clipboard'} mode
+ */
+async function handleUpdateScreenshotMode(mode) {
+  await store.dispatch('updateScreenshotMode', mode)
+}
+
 /** @type {import('vue').ComputedRef<number>} */
 const screenshotQuality = computed(() => store.getters.getScreenshotQuality)

@@ -608,16 +641,6 @@ function updateScreenshotQuality(value) {
  store.dispatch('updateScreenshotQuality', value)
 }

-/** @type {import('vue').ComputedRef<boolean>} */
-const screenshotAskPath = computed(() => store.getters.getScreenshotAskPath)
-
-/**
- * @param {boolean} value
- */
-function updateScreenshotAskPath(value) {
-  store.dispatch('updateScreenshotAskPath', value)
-}
-
 /** @type {import('vue').ComputedRef<string>} */
 const screenshotFolder = computed(() => store.getters.getScreenshotFolderPath)

@@ -79,6 +79,10 @@
  grid-template-columns: auto minmax(min-content, 1fr);
 }

+.channelShareWrapper > :only-child {
+  grid-column: 1 / -1;
+}
+
 .playlistOptions {
  display: grid;
  grid-auto-flow: column;
@@ -108,12 +108,14 @@
    <div
      class="channelShareWrapper"
    >
-      <router-link
+      <component
+        :is="enableChannelLinks ? 'router-link' : 'div'"
        v-if="!isUserPlaylist && channelId"
        class="playlistChannel"
        :to="`/channel/${channelId}`"
      >
        <img
+          v-if="channelThumbnail"
          class="channelThumbnail"
          :src="channelThumbnail"
          alt=""
@@ -124,18 +126,7 @@
        >
          {{ channelName }}
        </h3>
-      </router-link>
-      <div
-        v-else
-        class="playlistChannel"
-      >
-        <h3
-          class="channelName"
-          dir="auto"
-        >
-          {{ channelName }}
-        </h3>
-      </div>
+      </component>

      <div class="playlistOptionsAndSearch">
        <div class="playlistOptions">
@@ -269,7 +260,7 @@

 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
@@ -957,6 +948,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
  document.removeEventListener('keydown', keyboardShortcutHandler)
 })
+
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
 </script>

 <style scoped lang="scss" src="./PlaylistInfo.scss" />
@@ -110,7 +110,7 @@

 <script setup>
 import { computed, ref } from 'vue'
-import { useI18n } from '../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtButton from './FtButton/FtButton.vue'
 import FtFlexBox from './ft-flex-box/ft-flex-box.vue'
@@ -52,7 +52,9 @@
          @keydown.enter="testProxy"
        />
      </FtFlexBox>
-      <FtFlexBox>
+      <FtFlexBox
+        v-if="areCredentialsSupported"
+      >
        <FtInput
          :placeholder="$t('Settings.Proxy Settings.Proxy Username')"
          :show-action-button="false"
@@ -112,7 +114,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, onBeforeUnmount, ref } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../FtToggleSwitch/FtToggleSwitch.vue'
@@ -202,6 +204,11 @@ const proxyTestUrl = computed(() => {
  return proxyTestUrl
 })

+/** @type {import('vue').ComputedRef<boolean>} */
+const areCredentialsSupported = computed(() => {
+  return proxyProtocol.value === 'http' || proxyProtocol.value === 'https'
+})
+
 /**
 * @param {boolean} enabled
 */
@@ -1,7 +1,7 @@
 .sideNav {
  display: block;
  block-size: calc(100vh - 60px);
-  inline-size: 200px;
+  inline-size: 80px;
  overflow-x: hidden;
  position: sticky;
  inset-inline-start: 0;
@@ -17,20 +17,8 @@

 .inner {
  block-size: 100%;
-  inline-size: 200px;
-  overflow: hidden auto;
-}
-
-.closed .inner {
  inline-size: 80px;
-}
-
-.closed .hiddenLabels {
-  inline-size: 60px;
-}
-
-.closed.hiddenLabels {
-  inline-size: 60px;
+  overflow: hidden auto;
 }

 .topNavOption {
@@ -44,28 +32,25 @@
  min-block-size: 35px;
 }

-.navOption {
-  -webkit-user-drag: none;
-}
-
 .moreOption {
  display: none;
 }

-.navOption,
+.navOption {
+  display: block;
+  color: inherit;
+  text-decoration: inherit;
+  padding-block: 5px;
+  padding-inline: 0;
+  -webkit-user-drag: none;
+}
+
 .channelLink {
  display: block;
  color: inherit;
  text-decoration: inherit;
 }

-
-.navOption .navLabel {
-  margin-inline-start: 40px;
-  overflow: hidden;
-  overflow-wrap: break-word;
-}
-
 .navOption:hover,
 .navChannel:hover {
  background-color: var(--side-nav-hover-color);
@@ -82,18 +67,27 @@

 .navIcon {
  block-size: 1em;
-  inline-size: 1.25em;
-  margin-inline-start: 10px;
+  inline-size: 100%;
+  display: block;
 }

 .navIcon.fa-user-check {
-  /* This icon is too big by default */
-  inline-size: 1em;
-
  /* Align icon according to torso */
  transform: translateX(0.2em);
 }

+.navLabel {
+  text-align: center;
+  inset-inline-start: 0;
+  font-size: 11px;
+  margin-block-end: 0;
+}
+
+.navOption .navLabel {
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+
 .navChannel .navLabel {
  overflow: hidden;
  /* stylelint-disable-next-line liberty/use-logical-spec */
@@ -111,11 +105,15 @@

 .thumbnailContainer {
  inline-size: 35px;
+  display: block;
  margin: 0;
-  position: absolute;
-  inset-block-start: 50%;
-  transform: translateY(-50%);
+  position: static;
  text-align: center;
+  transform: none;
+  float: none;
+  margin-inline: auto;
+  inset-block-start: 0;
+  margin-block: 0.3em;
 }

 .channelThumbnail {
@@ -128,10 +126,6 @@
  font-size: 35px;
 }

-.closed {
-  inline-size: 80px;
-}
-
 .sideNav hr {
  inline-size: 90%;
  block-size: 1px;
@@ -140,68 +134,89 @@
 }

 .refreshIcon {
+  display: none;
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 20px;
 }

-.closed .refreshIcon {
+.hiddenLabels {
+  inline-size: 60px;
+}
+
+.hiddenLabels .navLabel {
  display: none;
 }

-.closed .navOption {
-  inline-size: 100%;
-  padding-block: 5px;
-  padding-inline: 0;
-}
-
-.closed .navIcon {
-  margin-inline-start: 0;
-  inline-size: 100%;
-  display: block;
-  margin-block-end: 0;
-}
-
-.closed .navIconExpand {
+.navIconExpand {
  block-size: 1.3em;
 }

-.closed .navIconExpand.fa-user-check {
-  /* This icon is too big by default */
-  block-size: 1.15em;
-}
-
-.closed .navLabel {
-  margin-inline: 0;
-  inline-size: 100%;
-  text-align: center;
-  inset-inline-start: 0;
-  font-size: 11px;
-  margin-block-end: 0;
-}
-
-.closed .navChannel {
-  inline-size: 100%;
-  block-size: 45px;
-  padding-block: 5px;
-  padding-inline: 0;
-}
-
-.closed .thumbnailContainer {
-  position: static;
-  display: block;
-  float: none;
-  margin-inline: auto;
-  inset-block-start: 0;
-  transform: none;
-  margin-block: 0.3em;
-}
-
@media only screen and (width > 680px) {
  ::-webkit-scrollbar {
    inline-size: 10px;
    block-size: 10px;
  }
+
+  .opened {
+    inline-size: 200px;
+  }
+
+  .opened .inner {
+    inline-size: 200px;
+  }
+
+  .opened .refreshIcon {
+    display: block;
+  }
+
+  .opened .navIcon {
+    inline-size: 1.25em;
+    margin-inline-start: 10px;
+  }
+
+  .opened .navIcon.fa-user-check {
+    block-size: 1em;
+  }
+
+  .opened .navOption {
+    padding-inline: 5px;
+  }
+
+  .opened .navLabel {
+    text-align: start;
+    margin-inline-start: 40px;
+    margin-block-end: 16px;
+    font-size: 16px;
+  }
+
+  .opened .channelLink {
+    display: flex;
+    align-items: center;
+  }
+
+  .opened .navChannel .navLabel {
+    font-size: 12px;
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  .opened .thumbnailContainer {
+    inset-block-start: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    margin-block: 0;
+  }
+
+  .opened .navChannel .thumbnailContainer {
+    position: static;
+    transform: none;
+    margin: 5px;
+  }
+
+  .opened.hiddenLabels .navLabel {
+    display: block;
+  }
 }

@media only screen and (width <= 680px) {
@@ -216,19 +231,9 @@
  }

  .sideNav {
-    position: fixed;
    inset-inline-start: 0;
-    inset-block-end: 0;
+    position: fixed;
    display: flex;
-  }
-
-  .topNavOption {
-    margin-block-start: 0;
-    padding-inline: 10px;
-  }
-
-  .sideNav,
-  .closed {
    margin-block-start: 0;
    block-size: 60px;
    inline-size: 100%;
@@ -236,12 +241,9 @@
    overflow-y: hidden;
  }

-  .navOption,
-  .closed .navOption {
-    inline-size: 70px;
-    block-size: 40px;
-    padding: 0;
-    padding-block: 10px;
+  .topNavOption {
+    margin-block-start: 0;
+    padding-inline: 10px;
  }

  .navLabel {
@@ -256,7 +258,14 @@
    display: block;
  }

-  .closed.hiddenLabels {
+  .navOption {
+    inline-size: 70px;
+    block-size: 40px;
+    padding: 0;
+    padding-block: 10px;
+  }
+
+  .hiddenLabels {
    inline-size: 100%;
  }
 }
@@ -1,7 +1,7 @@
 <template>
  <FtFlexBox
    class="sideNav"
-    :class="[{closed: !isOpen}, applyHiddenLabels]"
+    :class="[{opened: isOpen}, applyHiddenLabels]"
    role="navigation"
  >
    <div
@@ -24,7 +24,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t("Subscriptions.Subscriptions") }}
@@ -46,7 +45,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t("Channels.Channels") }}
@@ -69,7 +67,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t("Trending.Trending") }}
@@ -92,7 +89,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t("Most Popular") }}
@@ -115,7 +111,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t("Playlists") }}
@@ -138,7 +133,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t("History.History") }}
@@ -161,7 +155,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t('Settings.Settings') }}
@@ -183,7 +176,6 @@
          />
        </div>
        <p
-          v-if="!hideText"
          class="navLabel"
        >
          {{ $t("About.About") }}
@@ -262,7 +254,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
-import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../SideNavMoreOptions/SideNavMoreOptions.vue'
@@ -12,7 +12,7 @@

 <script setup>
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
-import { useI18n } from '../composables/use-i18n-polyfill'
+import { useI18n } from 'vue-i18n'

 import SubscriptionsTabUi from './SubscriptionsTabUi/SubscriptionsTabUi.vue'

@@ -185,14 +185,7 @@ async function loadVideosForSubscriptionsFromRemote() {
  let channelCount = 0
  isLoading.value = true

-  let useRss = useRssFeeds.value
-  if (channelsToLoadFromRemote.length >= 125 && !useRss) {
-    showToast(
-      t('Subscriptions["This profile has a large number of subscriptions. Forcing RSS to avoid rate limiting"]'),
-      10000
-    )
-    useRss = true
-  }
+  const useRss = useRssFeeds.value

  store.commit('setShowProgressBar', true)
  store.commit('setProgressBarPercentage', 0)
@@ -200,8 +193,9 @@ async function loadVideosForSubscriptionsFromRemote() {

  errorChannels.value = []
  const subscriptionUpdates = []
+  const videoListFromRemote = []

-  const videoListFromRemote = (await Promise.all(channelsToLoadFromRemote.map(async (channel) => {
+  const processChannel = async (channel) => {
    let videos, name, thumbnailUrl

    if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
@@ -238,7 +232,25 @@ async function loadVideosForSubscriptionsFromRemote() {
    }

    return videos ?? []
-  }))).flat()
+  }
+
+  if (useRss) {
+    const results = await Promise.all(channelsToLoadFromRemote.map(processChannel))
+    videoListFromRemote.push(...results.flat())
+  } else {
+    const CHUNK_SIZE = 80
+    const CHUNK_DELAY_MS = 2000
+
+    for (let i = 0; i < channelsToLoadFromRemote.length; i += CHUNK_SIZE) {
+      if (i > 0) {
+        await new Promise(resolve => setTimeout(resolve, CHUNK_DELAY_MS))
+      }
+
+      const chunk = channelsToLoadFromRemote.slice(i, i + CHUNK_SIZE)
+      const chunkResults = await Promise.all(chunk.map(processChannel))
+      videoListFromRemote.push(...chunkResults.flat())
+    }
+  }

  videoList.value = updateVideoListAfterProcessing(videoListFromRemote)
  isLoading.value = false
--- a/Show More
+++ b/Show More